Plantillas de diseño de software en proyectos de desarrollo móvil
Plantillas de diseño de software optimizar el desarrollo de aplicaciones móviles al eliminar la implementación de componentes repetitivos. La creación de una plantilla de diseño también simplifica las revisiones y actualizaciones, ya que un cambio en la plantilla puede aplicarse a todo un proyecto.
MobileTogether ofrece plantillas de diseño de software para controles de usuario en aplicaciones móviles multiplataforma, lo que facilita la reutilización de diseños y permite crear de manera sencilla opciones eficientes y flexibles para satisfacer diversas necesidades de las aplicaciones.
Una plantilla de control en MobileTogether es un componente de diseño que permite a los desarrolladores especificar y agrupar elementos de interfaz de usuario de manera que sean fácilmente reutilizables. Las plantillas de control admiten parámetros, y cada plantilla puede ser personalizada en función de los valores de los parámetros en tiempo de ejecución.
Veamos un ejemplo.
El diseñador MobileTogether incluye varios proyectos de ejemplo que demuestran las plantillas de control. Describiremos la aplicación Cities4-DynamicSelection. La captura de pantalla que se muestra a continuación muestra una vista parcial de la aplicación en funcionamiento en un teléfono Android:
Esta aplicación ilustra un problema común al presentar datos jerárquicos. En última instancia, la aplicación busca que el usuario seleccione una ciudad. Para ser más eficiente, la lista completa de ciudades está organizada por continentes, presentada en un menú desplegable, y luego se filtra por países dentro del continente seleccionado, mostrados en un conjunto de botones de opción. Finalmente, se muestran las ciudades dentro de cada país en un segundo conjunto de botones de opción.
En la orientación horizontal, los botones de opción se muestran en una lista horizontal (como se muestra arriba), mientras que en la orientación vertical, se muestran de forma vertical
Sería una aplicación muy compleja de crear si los controles de "botón de radio" para cada combinación de selecciones del usuario tuvieran que construirse manualmente. Además, los nombres de países y ciudades se encuentran en un archivo de origen XML, y queremos poder actualizar la aplicación simplemente editando este archivo de origen.
Al abrir la aplicación en el programa MobileTogether Designer, podemos ver la estructura de la página en la ventana de diseño principal.
En la parte superior de la página, el primer control es el cuadro combinado para seleccionar el continente. A continuación, se encuentran dos tablas que contienen controles de marcador de posición. Durante la ejecución, la primera tabla y el marcador de posición generarán la lista de países, mientras que la segunda generará la lista de ciudades.
El diseñador MobileTogether incluye una ventana de ayuda que muestra una estructura jerárquica de todas las páginas, subpáginas y plantillas de controles en cualquier aplicación. En este ejemplo, cada plantilla acepta dos parámetros que serán pasados por el marcador de posición durante la ejecución.
Al seleccionar una de las plantillas de control, sus componentes se muestran en el panel de diseño principal.
Para la versión vertical, la plantilla utiliza una tabla con filas dinámicas, mientras que la versión horizontal utiliza una tabla con columnas dinámicas. En ambos casos, la tabla generada por la plantilla se insertará dentro de una única celda de la tabla principal definida en la página superior. Esto centra verticalmente la casilla de verificación de ordenación en cualquier columna de botones de opción, independientemente del número de filas.
Un marcador de posición define la ubicación de una plantilla de control en una página. La ventana de ayuda "Estilos y propiedades" para el marcador de posición identifica qué plantilla de control se utiliza y proporciona los valores de los parámetros. El marcador de posición para la lista de países define ambas propiedades como expresiones XQuery:
Incluso con una vista parcial de la expresión, podemos observar que la plantilla de control específica que se aplicará en la página se determinará por la orientación del dispositivo en tiempo de ejecución.
Podemos utilizar el simulador MobileTogether para analizar las plantillas de diseño de software durante la ejecución y observar cómo funcionan los elementos de marcador de posición y las plantillas de control. En las siguientes capturas de pantalla, estamos utilizando un iPhone en orientación horizontal como dispositivo de vista previa. Dado que esta aplicación no tiene características específicas de ningún dispositivo ni de ningún sistema operativo, el dispositivo de vista previa exacto no es relevante.
Las opciones que el usuario puede seleccionar para continente, país y ciudad no tienen valores predefinidos en la aplicación. Por lo tanto, al iniciar la ejecución, solo se muestra el encabezado de la página y una lista desplegable vacía para seleccionar el continente
La ventana de "Mensajes" muestra las acciones que se han realizado a medida que seleccionamos un continente, y estas acciones se resaltan en verde en la parte inferior
La ventana de simulación ahora muestra la lista de países correspondiente para Europa, pero no se muestran nombres de ciudades
En este punto, la aplicación está esperando a que el usuario seleccione un país. En lugar de continuar, podemos abrir el editor de XQuery dentro del simulador y evaluar los parámetros que se pasan desde el primer marcador de posición a la plantilla de control. Simplemente copiamos la expresión de los parámetros de la plantilla desde la ventana de "Estilos y propiedades" y la pegamos en la ventana de XQuery. La expresión evalúa un array que contiene la lista de países de Europa y el estado de ordenación:
Pero, ¿por qué la aplicación no muestra ninguna lista de ciudades en la página de simulación? Podemos analizar la expresión del parámetro que se pasa desde el segundo marcador de posición para las ciudades:
La expresión recibió una lista vacía de nombres de ciudades. Dado que los botones de radio correspondientes a las ciudades se encuentran dentro de una tabla con columnas dinámicas, ¡no se renderizó ninguna columna!
El control de casilla de verificación para elegir la ordenación no se encuentra en una columna dinámica, pero tampoco se muestra. La propiedad de visibilidad de la casilla de verificación está definida como "$PERSISTENT/Root/@Country != ''", lo que significa que la casilla de verificación y la etiqueta de texto no serán visibles hasta que el usuario seleccione una ciudad.
En resumen, el ejemplo Cities4-DynamicSelection demuestra cómo varios controles pueden combinarse en plantillas de diseño de software personalizadas y luego integrarse en el diseño de una aplicación móvil para crear una solución elegante que muestra el resultado correcto en función de las opciones elegidas por el usuario en tiempo de ejecución u otras condiciones externas. La aplicación de demostración y el archivo de datos de origen se incluyen con el software MobileTogether Designer, por lo que puede seguir los pasos descritos anteriormente o incluso profundizar más para explorar por sí mismo.
MobileTogether Designer es una herramienta gratuita que permite crear rápidamente aplicaciones móviles multiplataforma a partir de un único diseño. Vea demostraciones en video para ver los tipos de aplicaciones que los usuarios de MobileTogether crean cada día, y descargue el instalador para comenzar a utilizar las plantillas de diseño de software.