Plantillas de diseño para aplicaciones móviles
En una publicación anterior, hablamos sobre el uso de plantillas de diseño de software para aplicaciones móviles, con el fin de facilitar la reutilización del diseño y simplificar la creación de opciones eficientes y flexibles para diversas necesidades de las aplicaciones. Describimos un ejemplo de una plantilla de control diseñada para mostrar múltiples niveles de datos jerárquicos, en función de la selección del usuario en tiempo de ejecución.
Nuestro ejemplo fue creado utilizando MobileTogether, la herramienta RMAD (desarrollo rápido de aplicaciones móviles) de Altova, para ayudar a los desarrolladores Desarrollar aplicaciones multiplataforma que ofrecen un rendimiento de aplicaciones dinámico y sofisticado, brindando una experiencia satisfactoria para los usuarios finales.
También puede crear plantillas de control para aplicaciones móviles multiplataforma combinando varios controles en una unidad más grande, como un subconjunto complejo construido a partir de componentes individuales. Esto crea plantillas de diseño para aplicaciones móviles que se pueden integrar fácilmente en cualquier lugar, lo que acelera el desarrollo y garantiza la consistencia.
MobileTogether Designer, la herramienta de Altova para el desarrollo móvil multiplataforma que combina herramientas de diseño visual con funcionalidad de arrastrar y soltar, junto con técnicas de programación funcional, incluye aplicaciones de ejemplo para ilustrar diversas capacidades. La aplicación CompanySales consulta una base de datos de pedidos para generar un informe de ventas en tiempo real para ejecutivos, correspondiente a una empresa ficticia, con informes de ventas totales, así como ventas por producto, región o representante de ventas individual, permitiendo al usuario seleccionar las fechas del informe y compararlas con períodos anteriores.
A continuación, se muestran imágenes de la página de resumen que muestra las ventas en tiempo real del 15 de febrero, y de la página de "Ventas por producto", que muestra un desglose de las ventas por producto para ese día.
Cada página de la aplicación incluye funciones para seleccionar fechas, lo que permite a los usuarios acceder a cualquier fecha anterior para revisar las ventas históricas.
En la ventana principal de la interfaz de diseño, podemos observar que las funciones de selección de fecha se implementan mediante la combinación de tres botones y un control de selección de fecha
El control de selección de fecha muestra la fecha del informe y permite al usuario seleccionar cualquier fecha anterior. Los botones de flecha izquierda y derecha permiten navegar un día hacia atrás o hacia adelante, y la acción asignada al botón "Hoy" selecciona la fecha actual.
Cuando el informe se configura para la fecha actual, tanto el botón "Hoy" como el botón de flecha hacia la derecha quedan desactivados.
Plantillas de diseño para aplicaciones móviles
Antes de crear los controles que se muestran arriba, se debe agregar primero una plantilla de control en la ventana de ayuda de "Páginas". Para agregar nuevas páginas y plantillas de control, se hace clic en el botón de color verde con el signo "+" que se encuentra en la esquina superior izquierda:
Alternativamente, puede crear una plantilla de control seleccionando controles existentes en cualquier página y eligiendo una opción en el menú contextual que aparece al hacer clic derecho
Dentro del selector de fechas mejorado, las acciones realizadas por el botón "Hoy", los botones de flecha y el control del selector de fechas también se definen en la plantilla de control. A continuación, se muestran las acciones para el botón "Hoy" y el botón de flecha izquierda:
No queremos que el botón "Hoy" esté activo cuando la fecha seleccionada sea la fecha actual, y tampoco queremos que el usuario pueda avanzar a fechas futuras. Podemos definir cuándo estos botones están habilitados en la ventana de ayuda de "Estilos y propiedades". A continuación, se muestra una vista parcial de la configuración para el botón "Hoy":
El botón "Hoy" está desactivado cuando la fecha seleccionada en el informe coincide con la fecha actual. Además, hemos definido diferentes colores para indicar si el botón es pulsable o no.
Las definiciones de color son opcionales. Uno de los requisitos de la aplicación CompanySales era mostrar los mismos colores en todos los dispositivos, para simular la coherencia de la identidad corporativa. Si deja los campos de definición de color vacíos, MobileTogether utilizará automáticamente los colores predeterminados para cada plataforma: Android, iOS, Windows 10, etc.
Añadir la plantilla de control a una página
La plantilla de control de selección de fecha mejorada se utiliza en la página del informe de ventas ejecutivo de la aplicación, así como en tres de las cuatro subpáginas. Simplemente arrastramos el control de selección de fecha mejorado desde la ventana de ayuda de "Páginas" a cada página donde era necesario. Esto ahorra varios pasos, ya que la plantilla se instancia automáticamente en un control de marcador de posición, como se muestra aquí:
Modificación de las acciones de las plantillas de diseño para aplicaciones móviles
Tenemos un aspecto más que considerar. Cuando el usuario selecciona una nueva fecha para el informe, queremos que la aplicación consulte automáticamente la base de datos de ventas para mostrar informes y gráficos específicos para cada página. Hasta ahora, las acciones definidas dentro del selector de fechas avanzado solo seleccionan una fecha.
Tenemos tres opciones para procesar aún más cualquier plantilla de control: aplicar únicamente las acciones definidas en la propia plantilla de control, reemplazar las acciones de la plantilla de control con todas las nuevas acciones definidas en el marcador de posición, o combinar las acciones de la plantilla de control con acciones adicionales definidas en el marcador de posición.
Nuestra aplicación "Sales" utiliza la tercera opción. El selector de fechas mejorado permite al usuario seleccionar la fecha. El elemento "placeholder" en cada página añade acciones específicas para ejecutar consultas a la base de datos y actualizar los gráficos, adaptadas a esa página en particular.
Agregamos opciones de personalización de eventos al control de plantillas en cada página, a través del menú contextual que aparece al hacer clic derecho
Esto abre el cuadro de diálogo de "Acciones". A continuación se muestra el conjunto de acciones disponibles para la página "Ventas por producto".
La primera acción es un grupo de acciones especial, integrado, llamado "Callback de evento de plantilla". Incluir "Callback de evento de plantilla" indica que todas las acciones definidas en la plantilla del control "Enhanced Date Picker" se ejecutan primero, y luego se ejecutan las acciones adicionales definidas en el "Placeholder".
El último grupo de acciones en la imagen anterior se expande para mostrar las acciones de "Recargar" que actualizan el informe de Ventas por Producto. Las dos primeras acciones de "Recargar" ejecutan consultas a la base de datos, mientras que las dos últimas acciones de "Recargar" redibujan los gráficos basándose en los resultados de la consulta.
Pruébalo usted mismo
Puede descargar de forma gratuita el MobileTogether Designer y abrir la aplicación de ejemplo CompanySales para explorar en detalle las plantillas de diseño para aplicaciones móviles en esta herramienta de demostración de informes de ventas. O, descargue la aplicación móvil y ejecute la aplicación CompanySales en su propio dispositivo móvil. El soporte para plantillas de diseño en aplicaciones móviles es solo una de las muchas funciones de MobileTogether que permiten a los desarrolladores crear aplicaciones nativas avanzadas con un enfoque de bajo código, que es rápido y sencillo.