Cómo crear un tema móvil en Jitterbit App Builder

App Builder puede convertir automáticamente cualquier aplicación para que sea compatible con dispositivos móviles. Sin embargo, es posible que desees un control más granular sobre la presentación móvil de una aplicación. Al igual que los temas estándar funcionan en App Builder, un tema móvil se puede aplicar en todo el sitio o más específicamente en una página de una aplicación. Esta página proporciona información sobre cómo funcionan los temas móviles en App Builder y te guía a través de la configuración básica para crear un tema móvil para una aplicación.

Nota

Desde App Builder 4.67, los temas predefinidos Light, Dark, Shapes, Violet, Gradient, Light - Modern y Login Base Theme incluyen cada uno un tema móvil preoptimizado, con objetivos táctiles amigables, tipografía escalada para móvil, espaciado compacto y apilamiento de campos de formulario en una sola columna. Esto se aplica automáticamente solo a las aplicaciones que utilizan directamente uno de estos temas del sistema y no se transfiere a un tema personalizado basado en uno de ellos. Consulta Usar un tema móvil predefinido con un tema base personalizado para utilizar uno de estos temas móviles con un tema personalizado existente en su lugar.

Cómo funcionan los temas móviles en App Builder

Los temas móviles son temas que se activan cuando App Builder detecta que estás utilizando un dispositivo móvil (ten en cuenta que se aplican solo a dispositivos móviles, no a iPad ni tabletas).
Los temas móviles se configuran de la misma manera que los temas estándar, principalmente tienen un tema base, y el tema base es lo que determina cuándo y dónde se llama y se aplica un tema móvil. Un tema móvil debe tener un tema base para funcionar, y dondequiera que se use ese tema base (ya sea como tema de aplicación completa o solo como tema a nivel de página), se llamará al tema móvil además.
Los temas móviles se aplican "encima" de otros temas preexistentes; no los reemplazan, por lo que para que se aplique algún estilo de un tema móvil, deben ser más específicos que cualquier estilo preexistente que ya se esté aplicando desde otros temas en la página.

Nota

Consulta el artículo de W3Schools sobre CSS Specificity para obtener más información sobre el orden en que se aplica CSS.

Temas móviles en todo el sitio

Una aplicación llamada Budget Calculator tiene su tema base configurado como App Base Theme, lo que significa que ese tema se aplica en toda la aplicación. Además, existe un tema móvil llamado Mobile Theme, y el tema base para este tema móvil se establece como App Base Theme. En este escenario, el tema móvil estará activo en toda la aplicación, ya que cada página utiliza App Base Theme.

Temas móviles específicos de página

Una aplicación llamada Budget Calculator tiene una página llamada Home, que tiene un tema a nivel de página aplicado llamado Home Page Theme, lo que significa que este tema solo se aplica en la página Home. Además, existe un tema móvil llamado Home Page Mobile Theme, y el tema base para este tema móvil se establece como Home Page Theme. En este escenario, el tema móvil solo estará activo en la página Home de la aplicación, ya que solo se activa en páginas que utilizan Home Page Theme, que en este caso es solo la página Home.

Cómo crear un tema móvil

Un ejemplo de cuándo es posible que desees utilizar un tema móvil es agregar relleno a contenedores externos en dispositivos móviles para que todas las páginas de la aplicación tengan un poco más de espacio.

Paso 1: Crear un tema móvil

Cuando estés listo para crear un tema móvil para una aplicación, asumimos que ya tienes un tema de aplicación existente configurado. Este tema de aplicación debe utilizarse como tema base para tu tema móvil.

Navega a Look & Feel de tu aplicación.
Selecciona Mobile de Theme Type.
Haz clic en el botón + Theme.
Asigna un Theme Name. Por ejemplo: Theme Mobile.
Establece el valor de Base Theme al tema principal que utiliza la aplicación. Por ejemplo: Themes Exercise.
Confirma o establece la Collection en una colección a la que tu aplicación tenga acceso. Por ejemplo: NorthwindsTraining.
Establece el Type en Mobile.
Haz clic en Save.
Agrega los estilos específicos para móvil que sean necesarios. Por ejemplo:
Selecciona Panel como Componente.
Haz clic en + Estilo desde el panel Estilos.
Establece Área en Contenedor.
Establece Tipo de valor en Espaciado.
En Valores, establece 3-Padding en la configuración deseada. Por ejemplo: 2em.
Haz clic en Guardar.

Paso 2: Asocia el tema móvil a la aplicación

En este paso asociarás el tema móvil a la aplicación. Para este ejemplo, queremos que el tema móvil aparezca en todo el sitio, así que confirmaremos que el tema base sea el tema asociado con nuestra aplicación.

Navega a App Workbench.
En Configuración de la aplicación, verifica que el valor Tema esté establecido en el tema base utilizado por tu tema móvil creado en el Paso 1.
Regresa a la vista de la aplicación, actualiza el navegador web y prueba.

Nota

Hay configuraciones móviles adicionales disponibles para configurar desde la pestaña Configuración de la aplicación de App Workbench, en Más > Caso especial.

Usa un tema móvil predefinido con un tema base personalizado

Los temas móviles predefinidos se aplican automáticamente solo a aplicaciones que utilizan directamente uno de los temas del sistema estándar. Si tu aplicación utiliza un tema personalizado basado en un tema del sistema, sigue estos pasos para usar el tema móvil predefinido de ese tema del sistema en lugar de crear uno nuevo desde cero:

Navega a Apariencia y comportamiento de tu aplicación.
Localiza el tema móvil predefinido para el tema del sistema en el que se basa tu tema personalizado.
Haz clic en Copiar para agregar el tema móvil a tu colección.
Establece el Tema base de la copia en tu tema personalizado.

El tema móvil copiado ahora se aplica dondequiera que se use tu tema personalizado, de la misma manera que cualquier otro tema móvil.