Servicio de Selección de Paneles¶

Servicio de Diseño de Paneles¶

El Panel Layout Service de Vinyl es la solución patentada de Vinyl para diseñar una página una vez y al mismo tiempo representarla de una manera fácil de usar en varios tamaños de pantalla. Estas pantallas incluyen, entre otras, pantallas de teléfonos móviles, pantallas de tabletas y pantallas de escritorio.

A continuación se detallan términos que ayudarán a comprender el algoritmo utilizado por Panel Layout Service:

• Panel: un panel es el componente básico de una página. No hay pantalla demasiado pequeña para renderizar un panel. Esto significa que Vinyl siempre mostrará al menos un único panel. Un panel contiene información que se presentará al usuario. La información puede ser una colección de filas de datos o puede ser un único registro de datos. Puede tener formato estructurado, tabular (tanto en formato tabular horizontal como en formato tabular vertical) o puede no estar estructurado en un formato personalizado definido por el usuario.

• Página: una página es una colección de paneles. Una sola página puede tener un panel o más de un panel.

• Diseño: el diseño de una página define cómo se deben mostrar los paneles cuando todos están visibles en la pantalla. Por ejemplo, algunos paneles se apilan verticalmente (el panel A está encima del panel B), algunos paneles se pueden apilar horizontalmente (el panel A está a la izquierda del panel B). También permitimos agrupar paneles de modo que el panel A y el panel B puedan estar uno al lado del otro mientras están encima del panel C. En este escenario, el panel A y el panel B estarían en su propia agrupación.

• Diapositiva: una diapositiva es un subconjunto de paneles que se representan en una pantalla. Cuando todos los paneles no caben en la pantalla, Vinyl representará el subconjunto correcto de paneles como una diapositiva y permitirá al usuario final pasar de una diapositiva a otra, de manera efectiva entre subconjuntos de paneles.

• Tamaño de pantalla: los tamaños de pantalla se miden tradicionalmente en altura y ancho de píxeles. El Vinyl convierte las alturas y anchos de los píxeles en paneles disponibles. ¿Cuántos paneles podemos colocar en la pantalla verticalmente? ¿Cuántos paneles podemos colocar en la pantalla de forma horizontal? Si la pantalla cabe en 1 panel, entonces consideramos que esa pantalla es 1x1 (1 panel de alto, 1 panel de ancho). Si la pantalla es más ancha y caben 2 paneles de ancho, pero 1 panel de alto, entonces consideramos la pantalla 1x2 (1 panel de alto, 2 paneles de ancho). Los cálculos para determinar cuántos paneles caben en una pantalla se describen más adelante en el documento.

Vinyl utiliza una página y su diseño para determinar qué paneles representar en la pantalla y dónde renderizarlos. Dependiendo del tamaño de la pantalla, Vinyl puede reducir la cantidad de paneles representados en la pantalla, respetando al mismo tiempo el diseño. Es el Servicio de diseño de paneles el que toma la decisión sobre qué paneles omitir de la pantalla y cómo diseñar los paneles restantes.

En el caso de que el Servicio de diseño de paneles omita paneles de la pantalla, crea una colección de Diapositivas. Cada diapositiva contiene un subconjunto de paneles, dispuestos según el diseño definido por el diseñador. Inicialmente, el usuario puede ver la primera diapositiva y tener la posibilidad de desplazarse a cualquier diapositiva adicional para ver más paneles.

La siguiente imagen muestra el algoritmo utilizado por Panel Layout Service para diseñar paneles en varios tamaños de pantalla:

Los tamaños de pantalla se determinan de la siguiente manera:

La altura ideal del panel es X * Y, donde Y equivale a 1 EM de un carácter de texto. Esta es otra forma de decir X caracteres de texto. En cualquier pantalla, por definición, cabe al menos un panel de altura. Sin embargo, si la pantalla tiene suficiente espacio para representar 2 * X caracteres de texto, entonces le permitimos representar 2 paneles de altura. Al conocer la altura de la pantalla en píxeles, Vinyl determina cuántas líneas de texto puede caber y luego cuántos paneles puede caber.

X = Configuración - Altura mínima del panel - Predeterminado = 24

Altura ideal del panel = 24 * 1 EM en píxeles

Número de paneles altos = Piso (Altura del puerto de visualización en píxeles / Altura ideal del panel), donde el Número de paneles altos no es inferior a 1.

Se utilizan matemáticas similares para determinar el ancho ideal del panel.

Ancho ideal del panel = 24 * 1 EM en píxeles

Número de paneles de ancho = Piso (Ancho del puerto de visualización en píxeles / Ancho de panel ideal), donde el Número de paneles de ancho no es inferior a 1.