Servicio de selección de paneles en Jitterbit App Builder
Servicio de diseño de paneles
El Servicio de Diseño de Paneles de App Builder es la solución exclusiva de App Builder para diseñar una página una vez y visualizarla de forma intuitiva en diversos tamaños de pantalla. Estas pantallas incluyen, entre otras, pantallas de teléfonos móviles, tabletas y ordenadores de escritorio.
A continuación se presentan términos que ayudarán a comprender el algoritmo utilizado por el Servicio de diseño de paneles:
Panel - Un panel es el elemento básico de una página. Ninguna pantalla es demasiado pequeña para representar un panel. Esto significa que App Builder siempre mostrará, como mínimo, un solo panel. Un panel contiene información que se presenta al usuario. La información puede ser un conjunto de filas de datos o un único registro. Puede tener un formato estructurado, tabular (tanto horizontal como vertical) o no estructurado, con un formato personalizado definido por el usuario.
Página - Una página es un conjunto de paneles. Una sola página puede tener uno o más paneles.
Diseño - El diseño de una página define cómo se deben mostrar los paneles cuando todos están visibles en pantalla. Por ejemplo, algunos paneles se apilan verticalmente (el panel A está encima del panel B) y otros se apilan horizontalmente (el panel A está a la izquierda del panel B). También se permite agrupar los paneles de forma que el panel A y el panel B puedan estar uno al lado del otro, estando encima del panel C. En este caso, los paneles A y B estarían en su propia agrupación.
Diapositiva: Una diapositiva es un subconjunto de paneles que se renderizan en una pantalla. Cuando no caben todos los paneles en la pantalla, App Builder renderizará el subconjunto correcto como diapositiva y permitirá al usuario pasar de una diapositiva a otra, lo que permite cambiar fácilmente entre subconjuntos de paneles.
Tamaño de la pantalla: El tamaño de las pantallas se mide tradicionalmente en altura y ancho de píxeles. App Builder convierte la altura y el ancho de píxeles en paneles disponibles. ¿Cuántos paneles caben en la pantalla verticalmente? ¿Cuántos paneles caben en la pantalla horizontalmente? Si cabe un panel en la pantalla, se considera que es de 1x1 (1 panel de alto por 1 de ancho). Si la pantalla es más ancha y caben 2 paneles de ancho, pero 1 panel de alto, se considera que es de 1x2 (1 panel de alto por 2 de ancho). Los cálculos para determinar cuántos paneles caben en una pantalla se describen más adelante en este documento.
App Builder utiliza una página y su diseño para determinar qué paneles se mostrarán en la pantalla y dónde. Dependiendo del tamaño de la pantalla, App Builder puede reducir el número de paneles mostrados, respetando el diseño. El Servicio de Diseño de Paneles decide qué paneles omitir y cómo distribuir los restantes.
Si el Servicio de Diseño de Paneles omite paneles de la pantalla, crea una colección de Diapositivas. Cada Diapositiva contiene un subconjunto de paneles, distribuidos según el diseño definido por el diseñador. El usuario puede ver inicialmente la primera Diapositiva y poder desplazarse a las demás para ver más paneles.
La siguiente imagen muestra el algoritmo utilizado por el Servicio de diseño de paneles para diseñar paneles en distintos 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. Esto significa que se necesitan X caracteres de texto. Cualquier pantalla, por definición, puede contener al menos un panel de altura. Sin embargo, si la pantalla tiene suficiente espacio para renderizar 2 * X caracteres de texto, se permite renderizar 2 paneles de altura. Conociendo la altura de la pantalla en píxeles, App Builder determina cuántas líneas de texto puede contener y, posteriormente, cuántos paneles.
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 = Altura del piso (altura de la puerto gráfica en píxeles / altura ideal del panel), donde el número de paneles altos no debe ser inferior a 1.
Se utilizan matemáticas similares para determinar el ancho ideal del panel.
Ancho de panel ideal = 24 * 1 EM en píxeles
Número de paneles de ancho = Ancho del piso (ancho del puerto de visualización en píxeles / ancho ideal del panel), donde el número de paneles de ancho no debe ser menor que 1.