Cómo Crear un Tema Móvil¶

Vinyl 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. Al igual que funcionan los temas estándar en Vinyl, un tema móvil se puede aplicar en todo el sitio o más específicamente a una página de una aplicación. Este artículo proporcionará información sobre cómo funcionan los Temas móviles en Vinyl, así como también 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 Vinyl¶

• Los temas móviles son temas que se activan cuando Vinyl detecta que estás usando un dispositivo móvil (ten en cuenta que se aplican solo a dispositivos móviles, no a iPad ni a 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 aplica un tema móvil. Un tema móvil debe tener un tema base para funcionar, y siempre que se utilice ese tema base (ya sea como un tema para toda la aplicación o simplemente como un tema a nivel de página específico), se llamará además el tema móvil.
• Los temas móviles se aplican "además" 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 se están aplicando 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 ese tema se aplica en toda la aplicación. Además, hay un tema móvil llamado "Tema móvil", y el tema base para este tema móvil está configurado como "Tema base de la aplicación". En este escenario, el tema Móvil estará activo en toda la aplicación, ya que cada página utiliza 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 un tema a nivel de página aplicado llamado "Tema de la página de inicio", lo que significa que este tema solo se aplica en la página "Inicio". Además, hay un tema móvil llamado "Tema móvil de la página de inicio", y el tema base para este tema móvil está configurado como "Tema de la página de inicio". En este escenario, el tema Móvil solo estará activo en la página "Inicio" de la aplicación, ya que solo se llama en las páginas que usan el "Tema de la página principal", que en este caso es solo la página "Inicio".

Cómo Crear un Tema Móvil¶

Un ejemplo de cuándo es posible que desee utilizar un tema móvil es agregar relleno a los contenedores externos en el dispositivo móvil 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. Navega hasta Look & Feel para tu aplicación.
2. Seleccione Móvil en Tipo de tema
3. Haga clic en el botón +Tema
4. Asigne un Nombre del tema. Por ejemplo: Tema Móvil
5. Establezca el valor de Tema base en el tema principal que utiliza la aplicación. Por ejemplo: Ejercicio de temas
6. Confirme o configure la Colección como una Colección a la que su aplicación tenga acceso. Por ejemplo: Entrenamiento de Northwinds
7. Establezca el Tipo en Móvil
8. Haga clic en Guardar

9. Agregue los estilos específicos de dispositivos 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ás 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 es el tema asociado con nuestra aplicación.

1. Navegue hasta App Workbench
2. En Configuración de la aplicación, verifique que el valor Tema esté configurado en el tema base utilizado por su tema móvil creado en el Paso 1.
3. Regrese a la vista de la aplicación, actualice el navegador web y pruebe