terça-feira, 16 de junho de 2015

Abstract Editor - Parte II

Pela primeira vez na história do Genexando tive que quebrar um artigo em pedaços, isso por conta da sua dimensão e complexidade, desta vez não teve jeito, falar sobre o Abstract Editor e Design Responsivos requerem não apenas um mas vários distintos.  Se você perdeu o primeiro clique Abstract Editor - Parte I.

Discutimos no artigo anterior como o Abstract Editor agrupava os controles em linhas e com isso, como poderíamos definir nosso conjunto visual. Agora precisamos assumir o controle do dimensionamento dos objetos envolvidos, e para isso precisamos entender um pouco sobre os conceitos originais de Responsive Web Design.

O que é Responsive Web Design?

Pode parecer estranho abordar esse assunto somente agora, mas se parar para pensar não precisamos muito para produzir coisas no Genexus, basta arrastar e soltar.  Creio, porém, para avançarmos um pouco mais na questão das dimensões será necessário entrar um pouco mais nos conceitos envolvidos.

Em termos bem simples, design responsivo significa que a interface deverá responder de maneira diferente de acordo com o dispositivo, situação bastante confortável para os usuários visto que atualmente os sistemas podem ser executados em muitas arquiteturas distintas.  Não se esqueçam que nosso sistema pode até ser apresentado em uma TV de 50", por exemplo.  O que devemos fazer é formatar o conteúdo de acordo com o tamanho.

 Como fazemos isso?  Grid Systems.

Grid Systems

O framework Bootstrap, utilizado pelo Genexus, prove um layout responsivo baseado em uma tabela dividida em 12 colunas. Ao incluirmos um elemento nesta tabela determinamos quantas colunas o mesmo consumirá neste conjunto.


As linhas não precisam ser iguais, ou seja, os controles podem variar em termos de dimensões e também em quantidade a cada linha, o que importa é o fato de que a soma de colunas não pode ultrapassar '12 colunas'.

Evidentemente que a largura desta tabela não é fixa, pois depende da resolução dos diversos dispositivos, e assim temos um modelo que gera proporcionalidade, ou seja, existirá uma excelente coerência entre a apresentação em um sistema de maior com um outro menor dimensão.

Sendo assim, o primeiro ponto a se levar em conta é que normalmente os controles nesta linha não possuem suas dimensões medidas em pixels (modo utilizado nos layouts tradicionais), e a medida normal neste ambiente é o %.

Abstract Editor e Grid System

Genexus prove uma propriedade Width que possibilita informar a largura percentual do controle na linha. Observe inclusive na imagem a seguir como os objetos são arranjados, na primeira linha temos os itens 1.1, 1.2 e 1.3 respectivamente com 33% de largura.  Na segunda linha temos os itens 2.1 e 2.2 ambos com 50% e finalmente, na terceira linha o item 3.1 com 100% de largura.  O mais interessante é que só percebemos isso quando olhamos para o Responsive Size, no Abstract Editor (em rosa) não temos essa visão e não dá para perceber que o item 6, por exemplo, ocupará o mesmo espaço que as linhas anteriores.
 

Para uma dimensão menor de dispositivo, o Extra Small, por exemplo temos um arranjo completamente diferente, no qual cada componente ocupara uma linha particular, e cada um com 100% de largura.

Levando-se em conta o modelo de coluna, chegamos a algumas medidas % fixas, outra característica deste framework, pois se observar o Width verá que existem algumas larguras padrões definidas. Não é uma dimensão livre.  Porque? exatamente devido ao Grid System de 12 colunas.  A figura a seguir oferece uma visão percentual relacionada ao numero de colunas que cada uma representa.


Ou seja, 8% equivale exatamente a dimensão de uma coluna, 17% equivale a duas colunas, 25% equivale a três colunas, 33% a quatro colunas, e assim por diante.

Se quiser fazer uma operação mais precisa envolvendo pixel, e considerando que a resolução do navegador no momento é 1000 pixel, teríamos uma coluna equivalendo a 1000/12 = 83,3 pixel, se o componente ocupa três colunas temos 83,3 x 3 = 250 pixel.  Em termos percentuais chegamos ao mesmo resultado, três colunas equivale a um percentual de 25%, desta forma 1000 * 25% = 250 pixel.

O problema aqui é que não temos controle algum sobre a largura do dispositivo, lembre que tudo é relativo, e poderemos ter, por exemplo o design tendo que ser montado em uma largura de 500 pixels. A forma mais simples de ver isso é buscar não se fixar na largura em pixel dos objetos, a menos que se tenha uma imagem com largura fixa, por exemplo.  Se a questão envolve apenas arranjo dos controles e textos, a medida percentual é eficaz.

Uma observação importante: Você não precisa definir as 12 colunas na linha do Grid System, se quiser colocar único controle com 8%, ou seja uma unica coluna na linha, isso será possível.

Larguras Padrões

O framework Bootstrap fornece um conjunto de quatro larguras (relativas também) para determinar quatro categorias de dispositivos.


O Genexus prove um mecanismo interessante na montagem da tabela responsiva, pois seguindo exatamente o modelo do Bootstrap, define a largura do controle para cada uma dessas quatro categorias, gerando um controle DIV determinando o numero de colunas que o mesmo ocupará de acordo com o 'dispositivo'.  O interessante é que utiliza o texto registrado na Class CSS para indicar as dimensões.

<div  class="col-sm-4 col-md-6 col-lg-5"  style="">
   <span class="BlocoTexto1"  id="TEXTBLOCK1" >1</span>
</div>

O controle neste exemplo possuirá três definições de dimensão:


Agora deve ter ficado claro, não? Percentual é mais fácil para entendermos, enquanto que colunas é mais simples para o browser calcular.

Offset

Ja estava me esquecendo de falar sobre Offset, que é a medida de deslocamento à esquerda de um controle no Grid System.  Isso significa, por exemplo que podemos deslocar um certo controle no grid determinando quantas colunas queremos que o mesmo pule antes de ser apresentado.

Na imagem a seguir, definimos que o controle 1.2 possui um Offset de 25%, significando que o mesmo será apresentado somente a partir da terceira coluna do Grid System.


Cada controle pode ter seu Offset definido, permitindo que os mesmos sejam espaçados horizontalmente.

Height

Não sei se você percebeu, mas até agora não entramos no assunto da altura do controle, apenas tratamos da largura.  Isso tem uma razão simples, pois a mesma quantidade de texto apresentado em uma largura de 25% possuirá uma altura diferente se apresentado em uma largura de 50%, exatamente a metade da altura.

Desta forma Height é também um conceito relativo no Responsive Web Design, e a menos que seu design exija que certo controle tenha uma dimensão fixa, como por exemplo um botão, não deveremos nos preocupar com isso.

E quando precisamos definir uma altura (e largura) fixa? a saída será recorrer as propriedades max-width e max-height do CSS. Ou seja, será necessário criar uma classe para dimensionar o controle e indicá-la na propriedade Cell Class no Abstract Editor.

Por exemplo, se temos um botão com dimensão 100x100, e queremos que a célula em que o mesmo se encontra se fixe na dimensão exata do mesmo.


Devemos: 1) criar uma classe e 2) associar a mesma ao botão.  Na classe criada programar o valor do max-width e max-height:


E em seguida associar esta classe a imagem no Abstract Editor, na propriedade Cell Class.

Observe que existe a propriedade Class no controle, porém esta não vai afetar a definição responsiva, somente surte efeito se for programada em Cell Class.

Do Fixo ao Relativo

Ok, estamos chegando ao final deste artigo, mas antes, já que estamos lidando com dimensões percentuais, vamos trabalhar um pouco na questão da conversão do dimensionamento pixel para %, simples não se preocupe, não temos muita matemática nisso.

Como já vimos anteriormente, no modelo responsivo buscamos trabalhar nos controles de forma percentual, e se tivermos uma definição semelhante a apresentada a seguir, duas colunas sendo a esquerda com 360px e 600px à direita, a conversão percentual seria algo como: 360px / 960px = 0.375 = 37,5%, na coluna esquerda.  Na coluna da direita teríamos  600px / 960px = 0,625 = 62,5%


A questão é que para convertermos para o Responsive Design, não teríamos como definir essas dimensões percentuais diferentes (37,5% e 62,5%), lembrando que dispomos de um conjunto fixo de opções (8%, 17%, 25%, 33%, 42%, 50%, 58%, 67%, 75%,, 83%, 92%, 100%).  Uma saída de contorno seria definir 12 frações da dimensão máxima definida, ou seja, 960 px / 12 = 80 px, e com essa fração poderíamos chegar a um numero aproximado de colunas da nossa célula a esquerda: 360 px / 80 px = 4.5 colunas. Portanto poderíamos definir que esta poderia ter 4 ou 5 colunas, respectivamente 33% ou 42%.  Ambos os valores não representam fielmente a dimensão fixa de 360 px originais, visto que 33% equivale a 316.8px e 42% equivale a 403.2px.

Infelizmente esta é uma situação que leva a uma perda para menos ou para mais da definição inicial, mas tratando-se de um modelo flexível perdemos na correspondência mas ganhamos na possibilidade da manutenção do design nos diversos dispositivos.

Melhor se as propostas básicas de design já levarem em conta o conjunto fixo percentual para criar os elementos.

Conclusão

Bom pessoal, creio que podemos encerrar por hoje, mas não o assunto, pois temos muitas coisas para aprender. Te vejo no próximo artigo.


Para saber mais: