Design

O desenho das telas de um projeto no Gvinci é feito utilizando-se a aba "Design" do módulo em edição.

A janela de Design tem sua barra de ferramentas própria que poderá mudar quando se tem um objeto selecionado ou múltiplos objetos selecionados e também entre módulos sem acesso a dados ou páginas de dados.

A imagem abaixo, mostra a barra de ferramentas do Design com apenas um objeto selecionado, no caso, o objeto Form1.

Com múltiplos objetos selecionados, teremos uma barra de ferramentas com mais opções, sendo mostrado o nome do último objeto que foi selecionado da múltipla seleção feita, conforma imagem abaixo:

Com múltiplos objetos selecionados são exibidas muito mais botões de funções, tendo o objeto destacado, como o objeto de referência para as ações invocadas pelo clique nos respectivos botões.

Vamos começar detalhando as funções básicas dos botões para único objeto selecionado, descrevendo a função de cada um.

Grupo Auto geração

Auto geração de tela padrão

As páginas de dados, após definição da propriedade "Tabela", da aba "Definitions", poderão ter geração automática de tela, clicando no botão da imagem acima.

Auto geração de tela com grid

Auto geração de tela com repeater

Grupo alterações

Desfazer

Cada vez que clicar neste botão, serão desfeitas as últimas ações de edição do desenho da tela, da mais recente para a alteração mais antiga, desde o momento que iniciou a edição do módulo.

Refazer

Cada vez que clicar neste botão, serão refeitas as alterações que tenham sido desfeitas pela função "Desfazer", que ocorreram desde que o módulo foi aberto para edição.

Grupo Alinhamentos

Selecione os múltiplos objetos de tela de modo que o último objeto selecionado seja o controle de referência. Dessa forma todos os controles selecionados ficarão com o mesmo alinhamento do lado escolhido, conforme a posição do último controle da seleção.

Alinhar a esquerda

Posiciona todos os controles selecionados mantendo a mesma propriedade Le

Alinhar ao topo

Alinhar a direita

Alinhar embaixo

Grupo centralização (referencial controles)

Grupo dimensionamento

Grupo centralização (referencial container)

Grupo espaçamento (referencial container)

Grupo profundidade (Z-Index)

Trazer para frente

Com uma visão de planos em camadas, podemos movimentar os controles para camadas mais a frente ou mais atrás na visualização. A propriedade Z-Index permite definir um valor numérico que, quanto maior, mais a frente ficará o controle.

O botão trazer para frente faz com que o controle selecionado assuma um maior valor de Z-Index para que seja exibido sobre os demais controles da tela. A cada clique, o controle vai ganhando um Z-Index maior e avançando em direção a camada mais a frente no design.

Enviar para trás

Semelhante ao botão "Trazer para frente", o botão "Enviar para trás" faz com que a propriedade "Z-Index" do objeto selecionado assuma um menor valor para que seja posicionado visualmente por trás de outros controles a medida que vai sendo clicado.

Grupo Clipboard

Copiar

Com um ou vários objetos selecionados copie-os para a área de transferência e poderá colá-los em outro módulo ou replicar os controles na mesma tela.

Colar

Após copiados para a área de transferência, os objetos poderão ser colados em outras telas ou na mesma tela de onde foram copiados por meio do botão colar.

Grupo Capitalização

Primeira letra maiúscula

Transforma a primeira letra de cada palavra do texto do controle selecionado em letra maiúscula.

Letras maiúsculas

Transforma todas as letras do texto do controle selecionado em letras maiúsculas.

Letras minúsculas

Transforma todas as letras do texto do controle selecionado em letras minúsculas.

Mostrar TabIndex

O TabIndex é a propriedade responsável por definir a ordem com que os controles receberão o foco cada vez que for pressionada a tecla TAB ou ENTER. Ao clicar neste botão, os controles que podem receber o foco mostrarão um pequeno número no canto superior esquerdo que corresponde ao mesmo valor da propriedade TabIndex do referido controle.

Bloquear edição

Quando achar que seu módulo estiver pronto, que não deve receber atualizações frequentes ou mesmo para evitar que acidentalmente faça alterações indesejadas no design, clique no botão para que sejam bloqueadas alterações. A imagem do botão será alterada para um cadeado fechado .

Diversos

Gerar código fonte (Módulo)

Use este botão da aba Design quando desejar gerar os fontes do módulo, sem necessidade de geração completa da solução.

Exibir objetos ocultos

A visibilidade dos controles pode ser alterada por meio da propriedade "Display". Os controles podem ser ocultados, inclusive de forma seletiva para breakpoints específicos em layouts responsivos. O design do módulo irá refletir os efeitos das propriedades definidas, ocultando efetivamente o controle.

Através do checkbox "Exibir objetos ocultos", podemos visualisar os controles que foram ocultados, seja para executar alguma operação visual de arrastar-e-soltar, simplesmente selecionar o controle para definição de propriedades através do clique sobre o controle ou visualização de posicionamento com relação aos demais controles.