--- title: "Plantillas de diseño de software en proyectos de desarrollo móvil" date: "2020-01-21" categories: - "app-development" - "mobile" - "tools" tags: - "app-design" - "app-development" - "mobile-development" - "mobiletogether" description: Descubra cómo las plantillas de diseño de software en MobileTogether mejoran el desarrollo de aplicaciones móviles al fomentar la reutilización de diseños y simplificar las actualizaciones, especialmente para los controles de usuario dinámicos. --- Status: #blog Tags: #app-design #app-development #mobile-development #mobiletogether Categories: [mobile-development](/blog/es/category/mobile-development.md) | [low-code+no-code](/blog/es/category/low-codeno-code.md) # 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](https://www.altova.com/es/mobiletogether) 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. ![](/blog/images/MT_control_templates.jpg) 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: [![Ejemplo de plantillas de diseño de software en una aplicación en un teléfono Android](/blog/images/screenshot-landscape-2-1030x286.png)](screenshot-landscape-2.png) 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 [![Las plantillas de diseño de software pueden ajustarse automáticamente según la orientación del dispositivo móvil](/blog/images/screenshot-portrait-2.png)](screenshot-portrait-2.png) 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. [![Datos jerárquicos en un archivo XML para su uso en plantillas de diseño de software ](/blog/images/cities-list.png)](cities-list.png) 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. [![Espacios reservados para las plantillas de diseño de software en la ventana de diseño de la aplicación MobileTogether](/blog/images/page-design-1.png)](page-design-1.png) 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. [![La ventana de ayuda de Pages que muestra los componentes de la aplicación en MobileTogether](/blog/images/pages-window-1.png)](pages-window-1.png) Al seleccionar una de las plantillas de control, sus componentes se muestran en el panel de diseño principal. [![Vista de una plantilla de control en MobileTogether](/blog/images/template-design-view.png)](template-design-view.png) 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: [![Características de un marcador de posición para plantillas de diseño de software](/blog/images/control-template-properties.png)](control-template-properties.png) 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 [![Una vista de la aplicación en el simulador MobileTogether](/blog/images/simulation-1.png)](simulation-1.png) 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 [![Interactuar con la aplicación en el simulador](/blog/images/simulation-1.5.png)](simulation-1.5.png) [![La ventana de mensajes indica que se ha seleccionado un continente en la lista desplegable](/blog/images/sim-message-1.png)](sim-message-1.png) La ventana de simulación ahora muestra la lista de países correspondiente para Europa, pero no se muestran nombres de ciudades [![Países del continente seleccionado, generados en tiempo real mediante plantillas de diseño de software](/blog/images/simulation-2.png)](simulation-2.png) 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: [![El evaluador de XQuery nos permite ver los parámetros exactos que se pasan a la plantilla de control ](/blog/images/sim-evaluate-1.png)](sim-evaluate-1.png) 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: [![Parámetros que se pasan a la segunda plantilla de control ](/blog/images/sim-evaluate-2.png)](sim-evaluate-2.png) 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.](https://www.altova.com/es/mobiletogether/app-development#designer) Vea [demostraciones en video](https://www.altova.com/es/mobiletogether/demos) para ver los tipos de aplicaciones que los usuarios de MobileTogether crean cada día, y [descargue el instalador](https://www.altova.com/es/mobiletogether/download) para comenzar a utilizar las plantillas de diseño de software.