Saltar al contenido

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 cómo se presenta la aplicación en móviles. Al igual que ocurre con los temas estándar en App Builder, se puede aplicar un tema móvil a toda la plataforma o de manera más específica a una página de la aplicación. Esta página proporciona información sobre cómo funcionan los temas móviles en App Builder e incluye pasos para la configuración básica de la creación de 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 y construido previamente, con objetivos táctiles amigables, tipografía escalada para móviles, espaciado compacto y apilamiento de campos de formulario de una sola columna. Esto se aplica automáticamente solo a las aplicaciones que utilizan uno de estos temas del sistema directamente, y no se traslada 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 usas un dispositivo móvil (ten en cuenta que solo se aplican a móviles, no a iPad o 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 toda la aplicación o solo como tema a nivel de página), se llamará el 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 cualquier estilo de un tema móvil, debe ser más específico que cualquier estilo preexistente que ya se esté aplicando desde otros temas en la página.

Nota

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

Temas móviles a nivel de plataforma

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 configura 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 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 configura 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 usar un tema móvil es agregar relleno a contenedores externos en móviles para que todas las páginas de la aplicación tengan un poco más de espacio para respirar.

mobilethemeexample.png

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 se debe usar como el tema base para tu tema móvil.

  1. Ve a Look & Feel para tu aplicación.
  2. Selecciona Mobile en Theme Type.
  3. Haz clic en el botón + Theme.
  4. Asigna un Theme Name. Por ejemplo: Theme Mobile.
  5. Establece el valor Base Theme al tema principal que usa la aplicación. Por ejemplo: Themes Exercise.
  6. Confirma o establece Collection a una colección a la que tu aplicación tenga acceso. Por ejemplo: NorthwindsTraining.
  7. Establece Type a Mobile.
  8. Haz clic en Save.

  9. Agrega los estilos específicos para móviles que sean necesarios. Por ejemplo:

  10. Selecciona Panel como Componente.

  11. Haz clic en + Style desde el panel Styles.
  12. Establece Area en Container.
  13. Establece Style Type en Spacing.
  14. En Values, establece 3-Padding en la configuración deseada. Por ejemplo: 2em.
  15. Haz clic en Save.

Paso 2: Asocia el tema móvil a la app

En este paso asociarás el tema móvil a la app. Para este ejemplo queremos que el tema móvil aparezca en todo el sitio, por lo que confirmaremos que el tema base es el tema asociado con nuestra app.

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

Nota

Hay configuraciones móviles adicionales disponibles en la pestaña App Settings del App Workbench, en More > Edge Case.

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

Los temas móviles predefinidos se aplican automáticamente solo a las apps que usan directamente uno de los temas del sistema estándar. Si tu app usa 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:

  1. Navega a Look & Feel para tu app.
  2. Localiza el tema móvil predefinido para el tema del sistema en el que se basa tu tema personalizado.
  3. Haz clic en Copy para agregar el tema móvil a tu colección.
  4. Establece el Base Theme 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 lo hace cualquier otro tema móvil.