Diseño de interfaz de usuario (UI) adaptable para aplicaciones, con hojas de estilo de varios niveles
Utilizar un framework de desarrollo móvil multiplataforma como MobileTogether es una excelente opción para crear aplicaciones nativas, ya que el entorno de diseño se encarga de renderizar correctamente la interfaz de la aplicación, utilizando la apariencia nativa de cada sistema operativo. Solo necesita crear un diseño.
Esto permite a los desarrolladores de aplicaciones crear aplicaciones sofisticadas y centradas en los datos para todos los usuarios de forma muy rápida. Para facilitar este proceso, MobileTogether utiliza un enfoque RMAD, junto con opciones flexibles para diseñar una experiencia de usuario atractiva. Para ayudar específicamente con este último punto, se utilizan hojas de estilo de varios niveles que permiten personalizar y aplicar estilos, ya sea de forma estática o dinámica, en diferentes niveles del diseño de la interfaz de usuario de la aplicación, con tan solo unos pocos clics.
Diseña una interfaz de usuario atractiva
Introducidas por primera vez en la versión 3.0 de MobileTogether, las hojas de estilo de varios niveles permiten a los desarrolladores de aplicaciones definir estilos globales que pueden aplicarse a nivel de proyecto, página, tabla y control. Esto proporciona un repositorio centralizado de estilos que se pueden utilizar en múltiples niveles a lo largo del proyecto de desarrollo de la aplicación.
¿Por qué personalizar los estilos? En primer lugar, quiero enfatizar que esto es opcional. MobileTogether aplica automáticamente los estilos predeterminados, la apariencia de los botones, etc., para cada sistema operativo (iOS, Android, Windows, etc.), lo que le permite crear una interfaz de usuario limpia y funcional sin necesidad de realizar cambios. Sin embargo, a veces es necesario personalizar los estilos para cumplir con las guías de estilo corporativas, implementar funcionalidades específicas o simplemente por motivos de creatividad. Las nuevas hojas de estilo de varios niveles de MobileTogether están diseñadas para facilitar y agilizar este proceso.
Para empezar, abra el cuadro de diálogo de hojas de estilo desde el menú Proyecto. Esto le permite crear dos tipos de hojas de estilo: hojas de estilo del proyecto y hojas de estilo creadas por el usuario.
La hoja de estilo del proyecto es donde se definen las personalizaciones de nivel superior. Los estilos que se definan aquí se aplicarán automáticamente en todo el proyecto. Esto es ideal si desea realizar cambios generales en la apariencia de todos los botones, definir el tamaño de la fuente para todos los elementos de texto o controlar los colores de fondo en todo el proyecto.
El segundo tipo son las hojas de estilo creadas por el usuario, que reciben un nombre asignado por el desarrollador y se pueden aplicar según sea necesario a páginas, tablas y controles individuales. En otras palabras, estos estilos no se aplican a todo el proyecto. En la captura de pantalla que se muestra a continuación, hay una hoja de estilo creada por el usuario que he llamado "MisEstilos", que define algunos estilos para botones, gráficos y etiquetas.
Al definir estilos en el panel derecho del cuadro de diálogo de Hojas de Estilo, puede seleccionar o ingresar un valor de propiedad estático, o puede ingresar una expresión XPath que evalúe a un valor de propiedad. Un ejemplo de asignación dinámica sería hacer que el valor de una propiedad dependa de algún criterio, como el ancho de la pantalla del dispositivo móvil del usuario final, o de las preferencias del usuario, como permitir que el usuario ajuste el tamaño de la fuente a través de una página de configuración en su aplicación, y que ese tamaño de fuente se aplique a todos los elementos de texto.
En la hoja de estilo MyStyles que se muestra a continuación, he utilizado XPath para ajustar dinámicamente la altura y el ancho de los gráficos, adaptándolos precisamente al dispositivo que está utilizando el usuario.
Puede definir tantas de estas hojas de estilo creadas por el usuario como desee, para proporcionar opciones de formato para diferentes elementos.
Durante el desarrollo de la aplicación, aplicar una hoja de estilo creada por el usuario a un componente de diseño es tan sencillo como seleccionar el nombre de la hoja de estilo en la ventana de "Estilos y propiedades".
También puede especificar la selección de la hoja de estilo de forma dinámica utilizando XPath, por ejemplo, para que la elección de la hoja de estilo dependa del tipo de dispositivo móvil actual. Una gran ventaja de utilizar una expresión XPath para seleccionar una hoja de estilo creada por el usuario es que la selección puede condicionarse a criterios ambientales dinámicos. Por ejemplo, si desea especificar una hoja de estilo para dispositivos iOS y otra para todos los demás dispositivos, podría utilizar la siguiente expresión XPath: si ($MT_iOS=true()) entonces 'iOSStyleSheet' en caso contrario 'GeneralStyleSheet'.
Cuando se especifica una hoja de estilo creada por el usuario para cualquier página o elemento, esta prevalece sobre cualquier valor correspondiente en la hoja de estilo del proyecto, lo que permite realizar tanto ajustes generales como detallados.
Las hojas de estilo de varios niveles permiten ahorrar una gran cantidad de tiempo, ofreciendo una flexibilidad incomparable para personalizar la apariencia de las aplicaciones en todas las plataformas. Por ejemplo, como mencioné en la introducción, si necesita que todos los botones de la aplicación tengan el mismo aspecto en iOS, Android y Windows (es decir, en lugar de utilizar la apariencia predeterminada de los botones), ahora puede definirlos una sola vez por proyecto (o en cualquier otro nivel, según sea necesario).
Pruebe esta funcionalidad creando una aplicación en el diseñador MobileTogether, que es gratuito. Puede descargarlo aquí: https://www.altova.com/download/mobiletogether.html