quinta-feira, 18 de junho de 2015

Abstract Editor - Parte III

Ok, até agora entendi como o Abstract Editor  funciona, tambem compreendi como posso colocar os elementos na interface, controlando a largura e altura, e agora a pergunta que não quer calar: quais são os recursos de controles que tenho a minha disposição para montar minha interface?  Quais são as pecinhas que tenho a minha disposição para montar o quebra cabeças do layout proposto.

E para você que ainda não viu os artigos anteriores segue os links abaixo.


Vamos estudar um pouco a respeito dos controles disponibilizados no editor abstrato, mais especificamente os que são chamados de containeres, ou seja, controles que podem agrupar outros.

Table x Responsive Table

Veja que mesmo neste modelo de layout responsivo temos espaço para encaixar as tabelas tradicionais, Table é o controle usado para isso (disponibilizado desde as versões anteriores do Genexus), e cujo código final gerado é definido por <table><tr><td> conteudo </td></tr></table>.

Seu uso encontra-se dentro do escopo que já conhecemos, ou seja,  normalmente determina um organizador de elementos na interface. A questão é que certo conjunto de controles organizado por <table> não terá característica responsiva, ou seja, não alterará a forma na medida em que a resolução da interface mudar.  Em outras palavras, você pode montar com <table> um conteúdo que sempre deve ser apresentado na forma original, e isto em qualquer dispositivo, a idéia é que a forma e apresentação seja igual em qualquer lugar.

O controle Table não oferece a opção Responsive Sizes para determinar as dimensões do controle no Grid System.

Responsive Table agrega a capacidade de organização de controles e, ao mesmo tempo, inclui os recursos sensíveis de dimensionamento conforme o dispositivo, em outras palavras, disponibiliza o Responsive Sizes.

Podemos incluir uma Table ou outra Responsive Table dentro de uma Responsive Table?
A resposta é sim, neste caso as células responderão à programação responsiva podendo se ajustar conforme a dimensão do dispositivo, menos o conteúdo definido dentro de Table, que sempre ficará fixo.  Na imagem a seguir temos uma Responsive Table 1 (RT1) com um Responsive Sizes, em seguida na primeira célula, outra Responsive Table (RT2), com uma Table também na primeira célula.


Cada Responsive Table possui uma interface Responsive Sizes para se determinar a dimensão de cada controle.

TabPage

Naturalmente TabPage é um agrupador de controles, que embute uma Responsive Table, ou seja, o conteúdo de cada aba poderá responder diferente para os ajustes dimensionais.


Nas abas poderão ser incluídos quaisquer outros controles como botões, textos, tabelas, webcomponents.

Grid e FreeStyleGrid

Os dois grids tradicionais são incluídos no design de interfaces responsivas, mas nenhum dos dois incluem propriedades responsivas, a não ser a nova propriedade Cell Class.  O FreeStyleGrid, por exemplo, é montado sobre um controle Table e não Responsive Table.


O FreeStyleGrid pode ser convertido para Responsive Table, bastando executar a opção Convert to Responsive Table, a partir do botão direito do mouse sobre o Grid.

Como os grids podem ser influenciados pelo Responsive Web Design?
A principio não podem, ou seja, todos os atributos e variáveis incluídas nos dois grids são sempre apresentadas. Então como fica? para se ocultar colunas desnecessárias é necessário: (1) definir o Theme Flat, (2) Programar nas colunas ocultáveis a classe WWColumnWWOptionalColumn

Modelos Padrões de Layout

Uma vez conhecidos os containeres principais, podemos começar a trabalhar sobre os modelos de layout que determinam a dimensão das colunas e seus efeitos sobre dispositivos distintos. Estão rolando por ai vários 'padrões' que determinam bons designs, isso porque já tem muita gente planejando os formatos de Grid System que possa atender aos diversos dispositivos.  É uma opção para se tomar a decisão de quantas colunas e também os dimensionamentos que as mesmas devem possuir, e a menos que você seja um expert em web design, talvez adotar um padrão seja uma boa.

A seguir apresento dois desses padrões.

Exemplo 1: Mobile & Desktop
Neste primeiro exemplo se programa para ExtraSmall (xs) e Medium (md), tem como característica principal, definir colunas que se alinham no momento em que ocorre a redução do layout para dispositivos móveis. Na imagem temos a definição dos dois modelos, e em seguida temos a apresentação do layout para Medium (md) e em seguida para Extra Small (xs)


A partir da definição, o que temos é o resultado em Medium e Extra Small, dos percentuais definidos.  Observe que temos em Medium um modelo bastante conhecido de uma coluna a direita, ou a esquerda, e uma área maior destinada a conteúdo, e uma barra inferior igualmente espaçada.

Para Extra Small temos uma barra superior (normalmente destinada a botões) e áreas inferiores no formato de um freestyle.

Tecnicamente este modelo é bastante plausível.

Exemplo 2: Mobile & Tablet & Desktop
Neste segundo exemplo programa-se para Extra Small (xs), Small (sm) e Medium (md). E igualmente ao exemplo anterior temos a definição e em seguida o resultado para Small(sm), para Medium (md) e finalmente para Extra Small (xs).


Existe muita informação por ai que trata a respeito desses modelos padrões, a seguir apresentamos o link de um desses sites, caso tenha interesse em aprender um pouco mais a respeito de Grid System.

Para saber mais:



Creio que com isso podemos dizer que concluímos o assunto do Abstract Editor, novamente um excelente recurso nos foi entregue, agradecemos aos Einsteisn da Artech pelo excelente aporte tecnológico, com certeza teremos ótimos programas sendo desenvolvidos nesta estratégia.