Design
Last updated
Last updated
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.
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.
Este é um recurso muito interessante para quem precisa desenvolver um sistema funcional de forma rápida, sem muita preocupação com o visual. Assim, as telas de cadastros com todo o controle de CRUD (Create - Criação, Read - Leitura, Update - Atualização e Delete - Exclusão) já são criadas com todos os campos da tabela.
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.
O atalho CTRL+Z pode ser usado para realizar a mesma função do clique neste botão.
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.
O atalho CTRL+Y pode ser usado para realizar a mesma função do clique neste botão.
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.
Posiciona todos os controles selecionados mantendo a mesma propriedade Le
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.
Caso o controle esteja sob muitos outros de modo que não seja possível selecioná-lo através do clique do mouse, use a caixa de seleção que fica no topo do painel de Propriedades ou o painel Estrutura de objetos para selecioná-lo e em seguida, clicando no botão "Trazer para frente", até o deixar em primeiro plano se assim desejar.
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.
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.
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.
Quando colados os controles na mesma tela de onde foram copiados, os IDs dos controles recebem uma identificação acompanhada de um número sequencial de modo a não duplicar a identificação dos controles. Caso deseje, renomeie-os com identificação que facilite o referenciamento em codificação manual ou facilidade de identificação lógica de sua função.
Transforma a primeira letra de cada palavra do texto do controle selecionado em letra maiúscula.
Transforma todas as letras do texto do controle selecionado em letras maiúsculas.
Transforma todas as letras do texto do controle selecionado em letras minúsculas.
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.
O atalho CTRL+SHIFT+T pode ser usado para ativar ou desativar a exibição da ordem do TabIndex nos controles pertinentes.
Use este botão da aba Design quando desejar gerar os fontes do módulo, sem necessidade de geração completa da solução.
Este recurso é muito interessante, pois mesmo que o projeto já esteja em execução para testes, a geração de um fontes de um módulo específico irá refletir automaticamente no navegador, bastando que atualize a página no browser.
Caso ocorra alteração de providers, uso de novas tabelas criadas, ou alterações correlatas, será necessário fazer a geração completa da solução.
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.
Mesmo estando ocultos os controles, os mesmos podem ser selecionados através da listagem de controles na parte de acima da janela de propriedades ou através do painel "Estrutura de objetos"
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 .
