GASweb - Usabilidade Parte 1-3

Transcrição

1 GASweb - Usabilidade Parte 1-3 Nível Básico Por: Lucas Bruno O GASweb - Application Generator é um produto que oferece aos seus usuários o grande aumento de produtividade. Entretanto, assim como as demais ferramentas de desenvolvimento, para que seja possível tirar total proveito de sua capacidade, precisamos conhecer algumas técnicas, 'boas práticas' e funcionalidades que visam tornar o uso da ferramenta mais eficiente. Templates Há no GASweb um novo recurso que denominamos Templates. Os templates, de modo geral, são alguns modelos de páginas que podem ser usadas entre suas aplicações. Mas no que isso pode ajudar no nível da minha produção? Você pode criar seus próprios templates. O que quer dizer que, uma vez estipulado um modelo de funcionamento para uma determinada página, como a de Login, por exemplo, para usá-la nas suas demais soluções, basta que esta página seja salva como template. 1/15

2 Desta forma, ao invés de refazê-la a cada projeto, bastaria a aplicação do template no módulo e todas as suas características de layout e funcionamento seriam as que foram estipuladas no template. Os módulos nos quais foram aplicados templates estão vinculados ao mesmo, de forma que se for necessário qualquer tipo de manutenção, basta que esta seja feita e salva no template novamente e todos os módulos que estejam vinculados ao template, estando ou não na mesma solução, serão automaticamente modificados conforme o estipulado, tornando assim a manutenção entre aplicações e a criação de novas páginas muito rápida. Controles customizados Assim como Templates, Controle customizado é uma implementação que não havia nas demais versões do GAS. Sua principal funcionalidade é semelhante à dos templates, sendo que a diferença é que são modelos de controles e não de páginas. 2/15

3 Ao criar uma nova solução, já ficam disponíveis alguns controles customizados, como por exemplo, ComboBox com todos os estados brasileiros, ou um TextBox com máscara de CPF. Assim, não é necessária a criação de, por exemplo, todos os itens de estados brasileiros para cada tela em que se desejar utilizar esta informação. Basta que arraste o controle diretamente para página e todas as definições no controle serão mantidas. Da mesma forma que Templates, o controle customizado que está na página, está vinculado com sua definição na aba 'controles customizados'. Então, caso seja necessário fazer qualquer modificação, basta que seja feita na definição e todos os controles de todas as páginas que estejam vinculados à definição serão atualizados. Entretanto, como se trata de controles, o vínculo é, por propriedade, o que permite a alteração de uma propriedade qualquer para tornar o controle mais compatível com o layout da página, sem que as demais propriedades percam seu vínculo com a definição de controle customizado. Para desvincular uma determinada propriedade, basta clicar no ícone de cadeado presente no painel de propriedades. Caso o cadeado esteja aberto, significa que a propriedade não está vinculada à definição de controle customizado, ou seja, se for feita alguma alteração na definição, o controle que está na tela não irá sofrer a alteração. Teclas de atalho Designer As aplicações Web em geral necessitam de um layout mais rebuscado para que a aplicação seja de maior agrado ao usuário. Para tal, foi implementado no GASweb um editor de layout WYSIWYG - What you see is what you get, da sigla em inglês 'O que você vê é o que você obtém'. De forma sucinta, o layout que é visualizado no editor é exatamente igual ao layout final da aplicação. Este editor, que no GASweb chamamos de Designer, permite a criação de páginas com visual bem trabalhado e complexo de maneira rápida e fácil. 3/15

4 Há diversos recursos que devem ser utilizados para obter maior eficácia na produção do layout das páginas no GASweb. Seleção No Designer do GASweb trabalhamos com seleção ou seja, quando quiser alterar uma determinada propriedade de um determinado controle, basta clicar em cima dele e este receberá uma borda de seleção. Há diversas formas para selecionar mais de um controle no Designer. A maneira básica é pressionar a tecla CTRL e clicar nos controles que devem ser selecionados. Note que agora a seleção de um dos controles tem a cor preta. Isso indica que esta será a seleção principal do designer. Este mesmo processo de seleção pode ser feito clicando no fundo da tela e arrastando. Será criado um retângulo de seleção que, quando se soltar o mouse, os controles que estiverem dentro dele serão selecionados. 4/15

5 Outro modo de fazer uma seleção no Designer é clicando duas vezes em um determinado controle. Isso irá selecionar todos os controles do mesmo tipo que estão no mesmo controle pai. Ou até mesmo para selecionar todos os controles, independente de seu tipo, de um determinado controle pai basta pressionar as teclas CTRL + A. Pressionando a tecla ESC caso haja um controle selecionado, o designer irá selecionar o controle pai do controle que está com a seleção principal. Outra forma de seleção é pressionar a tecla TAB que irá selecionar o controle que receberia o foco quando esta pagina está gerada. Em outros termos, selecionará o controle com o próximo valor de TabIndex. Para tornar visível o valor de TabIndex dos controles, pressione as teclas CTRL + SHIFT + T e os valores escritos em azul nos controles representarão o TabIndex deste controle. Ou então, assim como qualquer outra propriedade, basta apertar F4 e localizar a propriedade TabIndex na PropertyGrid 5/15

6 Após selecionados, podemos utilizar as setas do teclado para mover os controles ou se a tecla SHIFT estiver pressionada, alterar o tamanho dos controles. Toolbar Se observarmos a parte superior do GASweb quando há um designer aberto, podemos ver uma série de botões que nos auxiliam no desenvolvimento. Estão separados da seguinte forma: 1) Botões de alinhamento Alinhar pela esquerda Esta opção faz com que todos os controles que estão selecionados fiquem alinhados com base na posição esquerda da seleção principal. Podemos também utilizar esta função utilizando as teclas: "Ctrl + Alt + Seta para esquerda " 6/15

7 Alinhar pelo topo Esta opção faz com que todos os controles que estão selecionados fiquem alinhados com base na posição de topo da seleção principal. Podemos também utilizar esta função utilizando as teclas: "Ctrl + Alt + seta para cima" 7/15

8 Alinhar pela direita Esta opção faz com que todos os controles que estão selecionados fiquem alinhados com base na posição de direita da seleção principal. Podemos também utilizar esta função utilizando as teclas: "Ctrl + Alt + Seta para direita" Alinhar por baixo Esta opção faz com que todos os controles que estão selecionados fiquem alinhados com base na posição de baixo da seleção principal. Podemos também utilizar esta função utilizando as teclas: "Ctrl + Alt + seta para baixo" 8/15

9 Alinhar pelos centros verticalmente Esta opção faz com que todos os controles que estão selecionados fiquem com seus centros alinhados verticalmente com base no centro da seleção principal. 9/15

10 Alinhar pelos centros horizontalmente Esta opção faz com que todos os controles que estão selecionados fiquem com seus centros alinhados horizontalmente com base no centro da seleção principal. 2) Botões de tamanho Tornar largura igual Esta opção faz com que todos os controles que estão selecionados fiquem com a mesma largura da seleção principal. 10/15

11 Tornar Altura igual Esta opção faz com que todos os controles que estão selecionados fiquem com a mesma altura da seleção principal. 11/15

12 Tornar tamanho igual Esta opção faz com que todos os controles que estão selecionados fiquem com o mesmo tamanho 3) Centralização Centralizar Verticalmente Esta opção centraliza os controles selecionados no centro vertical de seus containers, mantendo a disposição dos controles selecionados. 12/15

13 Centralizar Horizontalmente Esta opção centraliza os controles selecionados no centro horizontal de seus containers, mantendo a disposição dos controles selecionados. 13/15

14 Depois 4) Espaçamento Espaçar os controles Horizontalmente Esta opção faz com que todos os controles selecionados possuam a mesma distância horizontal entre eles, baseando-se no controle posicionado mais a esquerda e o controle posicionado mais a direita. Espaçar os controles verticalmente Esta opção faz com que todos os controles selecionados possuam a mesma distância vertical entre eles, baseando-se no controle posicionado mais ao topo e o controle posicionado mais a baixo 14/15

15 5) Travamento do designer Esta opção faz com que seja possível ou não a edição do Designer. Caso o cadeado esteja aberto, é possível a edição deste layout, caso contrário, não é possível fazer nenhum tipo de alteração. Esta opção também pode ser usada para o desvínculo com um template. Caso a página selecionada esteja vinculada a um template, o cadeado estará fechado indicando que não é possível a alteração desta página. Se o cadeado for aberto, a página irá perder seu vínculo com o template, mas ainda terá as funcionalidades que tinha até o momento da desvinculação. Em breve você receberá a segunda parte deste artigo Abraços e até a próxima! 15/15