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

App Builder optimiza de forma excelente cualquier aplicación para dispositivos móviles. Sin embargo, puede que en ocasiones necesites un control más detallado sobre la presentación móvil de una aplicación. Al igual que los temas estándar en App Builder, un tema móvil puede aplicarse a todo el sitio web o, más específicamente, a una página de la aplicación. Este artículo te explicará cómo funcionan los temas móviles en App Builder y te guiará paso a paso en la configuración básica para crear un tema móvil para una aplicación.

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 usando un dispositivo móvil (ten en cuenta que se aplican solo a dispositivos 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, 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 este (ya sea para toda la aplicación o solo para una página específica), también se llamará al tema móvil.
• Los temas móviles se aplican "sobre" 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 se aplique desde otros temas que ya están en la página.
  

Nota

Consulta el artículo de W3 Schools sobre Especificidad de CSS para obtener más información sobre el orden de aplicación de CSS.

Temas móviles para todo el sitio

La aplicación "Calculadora de Presupuesto" tiene como tema base el "Tema Base de la Aplicación", lo que significa que se aplica a toda la aplicación. Además, existe un tema móvil llamado "Tema Móvil", cuyo tema base es el "Tema Base de la Aplicación". En este caso, el tema móvil estará activo en toda la aplicación, ya que todas las páginas usan el "Tema Base de la Aplicación".

Temas móviles específicos de la página

La aplicación "Calculadora de Presupuesto" tiene una página "Inicio", que tiene aplicado un tema a nivel de página llamado "Tema de la Página de Inicio", lo que significa que este tema solo se aplica a la página "Inicio". Además, existe un tema móvil llamado "Tema de la Página de Inicio Móvil", cuyo tema base es el "Tema de la Página de Inicio". En este caso, el tema móvil solo estará activo en la página "Inicio" de la aplicación, ya que solo se activa en las páginas que usan el "Tema de la Página de Inicio", que en este caso es solo la página "Inicio".

Cómo crear un tema móvil

Un ejemplo de cuándo podría ser útil usar un tema móvil es añadir relleno a los contenedores externos para que todas las páginas de la aplicación tengan un poco más de espacio.

Paso 1: Crea un tema móvil

Cuando esté listo para crear un tema móvil para una aplicación, asumiremos que ya tiene configurado un tema. Este tema debe usarse como tema base para su tema móvil.

1. Vaya a Apariencia de su aplicación.
2. Seleccione Móvil en Tipo de tema.
3. Haga clic en el botón +Tema.
4. Asignar un Nombre del tema. Por ejemplo: Tema Móvil.
5. Establezca el valor Tema base con el tema principal que usa la aplicación. Por ejemplo: Temas Ejercicio.
6. Confirme o establezca la Colección con una colección a la que su aplicación tenga acceso. Por ejemplo: NorthwindsTraining.
7. Establezca el Tipo en Móvil.
8. Haga clic en Guardar.

9. Agregue los estilos específicos para móviles que necesite. Por ejemplo:

   • Seleccionar Panel como Componente
   • Hacer clic en + Estilo en el panel Estilos
   • Establecer Área como Contenedor
   • Establecer Tipo de estilo como Espaciado
   • En Valores, establecer 3-Relleno con el valor deseado. Por ejemplo: 2em
   • Hacer clic en Guardar

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

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

1. Accede a App Workbench.
2. En Configuración de la aplicación, comprueba que el valor de Tema coincida con el tema base que utilizaste en el tema móvil creado en el paso 1.
3. Regresa a la vista de la aplicación, actualiza el navegador web y prueba.

Nota

Puede configurar ajustes móviles adicionales en App Workbench > Más > Caso extremo.