Cómo Crear un Tema Móvil¶

App Builder hace un gran trabajo al convertir automáticamente cualquier aplicación para que sea compatible con dispositivos móviles. Dicho esto, puede haber casos en los que desee un control más granular sobre la presentación móvil de una aplicación. Como el funcionamiento de los temas estándar 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. Este artículo proporcionará información sobre cómo funcionan los temas móviles en App Builder así como también un paso a paso por 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 ni tabletas).
• Los temas móviles se configuran de la misma manera que los temas estándar; en particular, 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 donde sea que se use ese tema base (ya sea como un tema para toda la aplicación o solo como un tema específico a nivel de página), se llamará además el tema móvil.
• Los temas móviles se aplican "sobre" otros temas preexistentes, no los reemplazan, por lo que para que se apliquen los estilos de un tema móvil, deben ser más específicos que los estilos preexistentes que se aplican desde otros temas que ya están en la página.
  

Temas Móviles para Todo el Sitio¶

Una aplicación llamada "Calculadora de presupuesto" tiene su tema base configurado como "Tema base de la aplicación", lo que significa que el tema se aplica a toda la aplicación. Además, hay un tema para dispositivos móviles llamado "Tema para dispositivos móviles", y el tema base para este tema para dispositivos móviles está configurado como "Tema base de la aplicación". En este escenario, el tema para dispositivos móviles estará activo en toda la aplicación, ya que cada página usa el "Tema base de la aplicación".

Temas Móviles Específicos de la Página¶

Una aplicación llamada "Calculadora de presupuesto" tiene una página llamada "Inicio", que tiene aplicado un tema a nivel de página llamado "Tema de página de inicio", lo que significa que este tema solo se aplica en la página "Inicio". Además, hay un tema para dispositivos móviles llamado "Tema de página de inicio para dispositivos móviles", y el tema base para este tema para dispositivos móviles se establece como "Tema de página de inicio". En este escenario, el tema para dispositivos móviles 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 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 puede ser útil usar un tema para dispositivos móviles es agregar relleno a los contenedores externos para que todas las páginas de la aplicación tengan un poco más de espacio para respirar.

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 de aplicación existente. Este tema de aplicación debe usarse como tema base para su tema móvil.

1. Navegue hasta Look & Feel para su aplicación
2. Seleccione Móvil en Tipo de tema
3. Haga clic en el botón +Tema
4. Asigna un Nombre de tema. Por ejemplo: Tema Móvil
5. Establezca el valor Tema base en el tema principal que usa la aplicación. Por ejemplo: Temas Ejercicio
6. Confirme o establezca la Colección en 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:

   • Seleccione Panel como Componente
   • Haga clic en + Estilo en el panel Estilos
   • Establezca Área en Contenedor
   • Establezca Tipo de estilo en Espaciado
   • En Valores, establezca 3-Relleno en la configuración deseada. Por ejemplo: 2em
   • Haga clic en Guardar

Paso 2: Asociar el Tema Móvil a la Aplicación¶

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

1. Navegue hasta App Workbench
2. En App Settings, verifique que el valor Theme esté configurado en el tema base que utiliza el tema móvil que creó en el paso 1
3. Regrese a la vista de la aplicación, actualice el navegador web y pruebe