Serviço de Seleção de Painel¶

Serviço de Layout de Painel¶

O Vinyl Panel Layout Service é a solução proprietária do Vinyl para projetar uma página uma vez e, ao mesmo tempo, renderizá-la de maneira amigável 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 desktops.

A seguir estão os termos que ajudarão na compreensão do algoritmo utilizado pelo Panel Layout Service:

• 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 Vinyl sempre exibirá pelo menos um único painel. 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 (tanto em formato tabular horizontal quanto em formato tabular 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 Vinyl renderizará o subconjunto correto de painéis como um slide e permitirá que o usuário final alterne entre os slides, alternando efetivamente entre os subconjuntos de painéis.

• Tamanho da tela - Os tamanhos da tela são tradicionalmente medidos em alturas e larguras de pixels. O Vinyl converte alturas e larguras de pixels em painéis disponíveis. Quantos painéis podemos colocar verticalmente na tela? Quantos painéis podemos colocar na tela horizontalmente? Se a tela couber em 1 painel, consideramos que essa tela tem 1x1 (1 painel de altura, 1 painel de largura). Se a tela for mais larga e caber 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 posteriormente neste documento.

O Vinyl usa uma página e seu layout para determinar quais painéis serão renderizados na tela e onde renderizá-los. Dependendo do tamanho da tela, o Vinyl pode reduzir o número de painéis renderizados na tela, respeitando o layout. É o Serviço de Layout de Painel que decide quais painéis serão omitidos da tela e como fazer o layout dos demais painéis.

Caso o Panel Layout Service omita os 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 inicialmente ver o primeiro slide e ter a capacidade de passar para qualquer slide adicional para ver mais painéis.

A imagem a seguir descreve o algoritmo usado pelo Panel Layout Service para fazer o layout dos 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 equivale a 1 EM de um caractere de texto. Esta é outra maneira de dizer X caracteres de texto. Qualquer tela, por definição, pode acomodar pelo menos um painel de altura. No entanto, se a tela tiver espaço suficiente para renderizar 2 * X caracteres de texto, permitiremos renderizar 2 painéis de altura. Conhecendo a altura da tela em pixels, o Vinyl determina quantas linhas de texto cabem e, em seguida, quantos painéis cabem.

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 largos = piso (largura da porta de visualização em pixels / largura ideal do painel), onde o número de painéis largos não deve ser inferior a 1.