segunda-feira, 15 de junho de 2015

Abstract Editor - Parte I

Esquentemos nosso cérebro um pouquinho, mas cuidado se estiver meio enferrujado melhor fazer um alongamento antes... Pois, entre alguma novas maluquices do tal Design Responsivo temos algumas que de fato complicam, ou talvez, assustam um pouquinho. Tableless já era um desafio para quem respirava Tables, Rows, Cels, então como desenvolver uma interface em um modelo onde células, dimensões, pixels, deixam de existir... Alguns dizem que devemos pensar relativamente. Que eu me lembre Einstein já fazia isso, porém o único problema é que não temos o cérebro dele, então como fazer para criar nossa própria Teoria da Relatividade Responsiva. Minha resposta: Brincando.

Então deixe de lado os manuais, livros, artigos com toda aquela teoria maluca, cheia de novos substantivos, e partamos para a prática com Genexus, não se esqueça não precisamos de muita coisa para produzir sistemas muito interessantes, apenas um Abstract Editor.

Abstract Editor

Temos dois editores disponíveis para construir interfaces Web, o tradicional (HTML) e o Abstract Editor (Responsive Web Design). Migrar de um para outro é coisa difícil de se fazer, principalmente para quem já desenvolveu muito na Web no modo 'tradicional', porém, brincando um pouquinho com o novo editor, deu para ter uma boa visão da sua funcionalidade e o monstrinho não é tão feinho assim.

Em primeiro lugar o Abstract Editor apresenta um controle chamado MainTable, que a principio não parece uma tabela em si, apenas quando incluímos algum controle qualquer (Button, Textblock, ...) é que aparecem linhas que indicam de fato uma 'tabela'. De fato precisamos desta 'tabela' para poder desenvolver nosso desenho e essa MainTable já é do tipo Responsive Table, um novo tipo de controle que estaremos explorando bastante.

Responsive Table

Podemos entender as Responsive Table como o controle fundamental destinado a se desenvolver um desenho de interface que encaixe nos diversos dispositivos que a mesma será apresentada. Isso mesmo, uma das principais características do tal Design Responsivo é desenvolver uma interface que possa ser apresentada em um navegador de internet em qualquer dispositivo (quer seja um PC, um Smartphone, Tablet). E considerando que cada dispositivo possui dimensões, resoluções, capacidades distintas, o 'framework' deve ser capaz de permitir que em qualquer um deles seja apresentado algo decente para o usuário.


A Responsive Table possui um conjunto de propriedades interessantes, e a que chama mais atenção é o Responsive Sizes, que surge quando pressionamos o botão direito do mouse sobre o controle. Neste controle encontramos os diversos Sizes que vao agrupar os diversos layouts que responderão às mudanças dimensionais dos dispositivos, que quer dizer, a cada dispositivo um novo layout poderá ser aberto, e quem determina isso são os diversos tamanhos pré-configurados neste controle, que são:

  • Extra Small, Phone <768px
  • Small, Tablet >= 768px
  • Medium, Desktop  >= 992px
  • Large, Desktop  >= 1200px

Até aqui, Genexus não inventou nada, esses Sizes são determinados por default no framework Bootstrap.

Layout

Ao se adicionar controles no editor, como por exemplo TextBlocks, cria-se o layout, e para cada Size, pode-se ajustar as dimensões dos controles, em termos percentuais. Desta forma dependendo da dimensão da interface os objetos são reorganizados em posição, veja por exemplo a diferença entre o Large (Desktop) e o Extra Small (Phone), e também na questão da dimensão, referindo-se ao Width programado para cada controle.


Acredito que a principal questão nesta interface Responsive Sizes é aprender a ler as linhas e seu significado, para em seguida aprender a dimensionar os controles.

Como estamos acostumados ao modelo da Table tradicional melhor fazer uma correspondência com este novo modelo para buscar uma melhor compreensão. No tradicional criamos uma especie de prateleira com diversas células dispostas em linhas, e cada linha reproduz a mesma quantidade de células da primeira linha.  Nosso trabalho é organizar os controles nestas células, que podemos juntar na horizontal (collspan) e vertical (rowspan). Na figura abaixo temos à esquerda (a) a tabela tradicional.

No modelo da Responsive Table, coluna a direita (b) na imagem acima, temos uma visão completamente distinta, pois apesar de parecer uma tabela, o que temos na pratica é um conjunto de linhas, e o conteúdo da linha depende do que se inclui e da dimensão de cada controle, e cada linha pode possuir um esquema distinto das demais.  Confuso? aparentemente sim, mas na pratica é mais fácil.  A forma mais simples de entender é você olhar cada linha individualmente, como se não houvesse nenhuma relação com a linha anterior, pois cada linha é criada independentemente da anterior ou da próxima.

Desta forma se olharmos nosso primeiro exemplo teremos, na primeira linha três células definidas (1.1, 1.2 e 1.3), cada qual com um TextBlock.  Na segunda linha temos apenas duas células definidas (2.1 e 2.2).  Finalmente na terceira linha temos apenas uma célula definida (3.3).

Pensando desta forma é mais simples, bastando que sejam definidos os controles necessários em cada linha. Teremos posteriormente o estudo do dimensionamento horizontal e vertical e também o conceito de Offset que desloca o controle na célula.  Mas isso é assunto para outro Post, vamos com calma aqui.

Quanto ao resultado da execução deste painel exemplo, teríamos algo assim:


Não acabou ainda,, temos muito mais detalhes para estudar sobre este assunto, no próximo post a respeito vou falar sobre dimensionamento, offsets e classes responsivas.  Por hoje é só, não vamos forçar tudo de uma única vez né, vamos aquecendo aos poucos.