Responsividade em formulários AdvPL
Um dos grandes desafios de qualquer aplicação hoje é garantir sua responsividade, mantendo a usabilidade tanto em smartphones quanto em monitores com 5K de resolução.
Importantes iniciativas como o T-Face (TOTVS HTML Framework) ditarão o padrão de interface a médio prazo, para preenchermos a lacuna atual construímos um conjunto de ferramentas de layouts que poderão ser utilizadas a partir do build 170117, com entrega prevista para Jul/Ago de 2018.
O vídeo abaixo detalha o que descreverei neste artigo.
Abaixo poderão baixar o fonte e acompanhar os exemplos:
https://github.com/ricardomansano/layouts_advpl
TLinearLayout
O TLinearLayout permite organizar os componentes vertical e horizontalmente, respeitando uma ordem de inclusão, conforme #defines abaixo.
Neste trecho defino a inclusão dos componentes do Topo ao Rodapé, o resultado pode ser visto na primeira imagem da sequência, as demais representam os outros alinhamentos permitidos.
Importante: No exemplo usamos um addSpacer informando que a 4ª posição após o botão deve se portar como um espaçador, alinhando os botões. Percebemos isso nas duas primeiras imagens, ao Topo e ao Rodapé, já nas duas ultimas não há efeito pois não há espaço livre para um espaçador, caso houve-se o comportamento seria o mesmo.
Vamos estudar o código da User Function LayLinear, disponibilizada no exemplo.
Neste trecho crio o layout superior e adiciono um TSay alinhado ao centro, tanto vertical quanto horizontalmente.
Neste crio três painéis que irão conter os componentes centrais, repare que ao utilizar o método addInLayout eu informo o percentual que desejo que cada um deles ocupe no layout oBodyLyt, perfazendo 100%.
Aqui insiro um layout em cada um dos painéis criados anteriormente, o da esquerda vai exibir um menu de botões e os demais dois conjuntos de texto.
No último trecho inserimos um rodapé.
TFlowLayout
Este layout é muito simples, permitindo a inclusão de componentes da esquerda para direita, organizando sua exibição de acordo com tamanho de cada um deles.
Abaixo a User Function LayFlow.
TGridLayout
O ultimo layout da lista vai se comportar, de maneira grosseira, como uma planilha do Excel onde poderemos inserir componentes.
A quantidade de linhas e colunas é definida automaticamente ao utilizar o método addInLayout, configurando a tela de acordo com sua construção, vamos entender o método addInlayout deste layout em particular.
oGrid:addInLayout(componente, linha, coluna, spanDeLinha, spanDeColuna, alinhamento), sendo na sequência:
-Componente incluído no layout;
-Linha para inclusão do componente;
-Coluna para inclusão;
-Número de linhas que este componente vai ocupar;
-Número de colunas que vai ocupar.
Na User Function LayGrid podemos ver o Span de linha no Botão 08, que ocupou as linhas 04 e 05. A primeira linha neste exemplo contem os botões de 01 a 03, dispostos de maneiras diferentes.
Mas para falar do TGridLayout vou focar na User Function LayGrid2, onde montamos um pequeno formulário.
Aqui crio o o layout principal (oLayGrid), na sequência o oLayGrid2 que recebera um conjunto de TSay e TGet.
Repare que no oLayGrid2 reservo a maior parte de seu espaço para os TGet.
É muito importante ao criar um componente, verificar se seu tamanho é compatível com a célula que vai inseri-lo, como no exemplo, onde defini apenas 20 pixels para os TSay.
Aqui insiro um novo layout(oLayGrid3) pois quero dispor os componentes de maneira diferente do oLayGrid2.
Ao adicionar o botão oBtnCentral eu informo seu alinhamento a direita, isso vai mudar o comportamento durante o redimencionamento da janela, mantendo este botão em particular com o tamanho definido em seu construtor.
Por fim insiro no layout principal os dois layouts criados anteriormente e também o conjunto de botões Cancelar e Ok.
Apenas reforçando o conceito, neste exemplo temos três layouts do tipo grid, o principal destacado abaixo em verde-água, que receberá os dois layouts secundários e o conjunto de botões Cancelar e Ok.
O segundo layout, destacado em vermelho, contém o conjunto de TSay e TGet.
O terceiro, destacado em cinza, contém o TGet e um pequeno TButton.
Como comentei no vídeo, o uso de layouts é amplamente difundido em outras linguagens, mas uma grande mudança de paradigma para programadores puramente AdvPL, porém com uma pequena curva de aprendizado estarão aptos para seu uso.
Links com a documentação oficial sobre os layouts
http://tdn.totvs.com/display/tec/TLinearLayout
http://tdn.totvs.com/display/tec/TFlowLayout
http://tdn.totvs.com/display/tec/TGridLayout
