Serviço de seleção de painéis no Jitterbit App Builder

Serviço de layout de painéis

O App Builder Panel Layout Service é a solução proprietária do App Builder para projetar uma página uma vez enquanto renderiza a página de uma forma amigável ao usuário em vários tamanhos de tela. Essas telas incluem, mas não estão limitadas a telas de celulares, telas de tablets e telas de desktop.

A seguir estão os termos que ajudarão a entender o algoritmo utilizado pelo Serviço de Layout de Painel:

• Painel - Um painel é o bloco de construção básico de uma página. Não há tela pequena demais para renderizar um painel. Isso significa que o App Builder sempre exibirá um único painel, no mínimo. Um painel contém informações a serem apresentadas ao usuário. As informações podem ser uma coleção de linhas de dados ou um único registro de dados. Ele pode ser formatado de forma estruturada, tabular (em um formato tabular horizontal ou vertical) ou pode ser não estruturado em um formato personalizado definido pelo usuário.

• Página - Uma página é uma coleção de painéis. Uma única página pode ter um painel ou pode ter mais de um painel.

• Layout - O layout de uma página define como os painéis devem ser exibidos quando todos estiverem visíveis na tela. Por exemplo, alguns painéis empilhados verticalmente (o painel A está acima do painel B), alguns painéis podem ser empilhados horizontalmente (o painel A está à esquerda do painel B). Também permitimos o agrupamento de painéis de forma que o painel A e o painel B possam ficar lado a lado enquanto estão acima do painel C. Nesse cenário, o painel A e o painel B estariam em seu próprio agrupamento.

• Slide - Um slide é um subconjunto de painéis a serem renderizados em uma tela. Quando todos os painéis não couberem na tela, o App Builder renderizará o subconjunto correto de painéis como um slide e permitirá que o usuário final alterne entre os slides, efetivamente alternando entre subconjuntos de painéis.

• Tamanho da tela - Os tamanhos de tela são tradicionalmente medidos em alturas e larguras de pixels. O App Builder converte alturas e larguras de pixels em painéis disponíveis. Quantos painéis podemos encaixar na tela verticalmente? Quantos painéis podemos encaixar na tela horizontalmente? Se a tela couber em 1 painel, então consideramos que a tela é 1x1 (1 painel de altura, 1 painel de largura). Se a tela for mais larga e couber em 2 painéis de largura, mas 1 painel de altura, então consideramos a tela 1x2 (1 painel de altura, 2 painéis de largura). Os cálculos para determinar quantos painéis caberão em uma tela são descritos mais adiante no documento.

O App Builder usa uma Página e seu layout para determinar quais painéis renderizar na tela e onde renderizá-los. Dependendo do tamanho da tela, o App Builder pode reduzir o número de painéis renderizados na tela, enquanto honra o layout. É o Panel Layout Service que toma a decisão sobre quais painéis omitir da tela e como fazer o layout dos painéis restantes.

No caso de o Panel Layout Service omitir painéis da tela, ele cria uma coleção de Slides. Cada Slide contém um subconjunto de painéis, dispostos de acordo com o Layout definido pelo designer. O usuário pode ver inicialmente o primeiro Slide e ter a capacidade de passar para quaisquer slides adicionais para ver mais painéis.

A imagem a seguir descreve o algoritmo usado pelo Panel Layout Service para dispor painéis em vários tamanhos de tela:

Os tamanhos de tela são determinados da seguinte forma:

A altura ideal do painel é X * Y, onde Y é equivalente a 1 EM de um caractere de texto. Esta é outra maneira de dizer X caracteres de texto. Qualquer tela, por definição, pode caber pelo menos um painel de altura. No entanto, se a tela tiver espaço suficiente para renderizar 2 * X caracteres de texto, então permitimos que ela renderize 2 painéis de altura. Sabendo a altura da tela em pixels, o App Builder determina quantas linhas de texto ela pode caber e, em seguida, quantos painéis ela pode caber.

X = Configuração - Altura mínima do painel - Padrão = 24

Altura ideal do painel = 24 * 1 EM em pixels

Número de painéis altos = Piso (altura da porta de visualização em pixels / altura ideal do painel), onde o número de painéis altos não pode ser inferior a 1.

Matemática semelhante é usada para determinar a largura ideal do painel.

Largura ideal do painel = 24 * 1 EM em pixels

Número de painéis de largura = Piso (largura da porta de visualização em pixels / largura ideal do painel), onde o número de painéis de largura não pode ser inferior a 1.