Retroalimentación visual en aplicaciones móviles
La retroalimentación visual en las aplicaciones móviles proporciona una experiencia de usuario más agradable, y las aplicaciones móviles que son divertidas de usar se lanzan con mayor frecuencia que las aplicaciones estáticas y aburridas. MobileTogether, el marco de desarrollo rápido de aplicaciones móviles (RMAD) de Altova, incorpora todas las herramientas que necesita para desarrollar aplicaciones móviles multiplataforma con funciones de retroalimentación visual atractivas.
La paleta de controles de arrastrar y soltar en el diseñador MobileTogether incluye un control de botón que cambia automáticamente su apariencia al ser pulsado. También puede definir condiciones que añadan o modifiquen texto, imágenes u otras características de cualquier botón mientras la aplicación se ejecuta.
Además, se pueden definir muchos otros controles que funcionen como botones, donde una o más acciones se ejecutan cuando se hace clic en el control. Anteriormente, hemos escrito sobre la aplicación de imágenes de iconos como botones de herramientas en aplicaciones móviles para crear un menú de herramientas elegante y sofisticado. En esta publicación, añadiremos interactividad a nuestras imágenes de herramientas para proporcionar una retroalimentación visual atractiva para cada clic.
La captura de pantalla que se muestra a continuación muestra una página de la aplicación "Where Am I" que creamos para demostrar el uso de imágenes como botones.
Cada imagen azul en la sección inferior de la pantalla es un botón que proporciona acceso a una herramienta, diseñada para ofrecer más información sobre la ubicación, ya sea recuperando datos a través de una API o abriendo una página web externa. Un clic breve en cualquier botón realiza la función asignada, mientras que un clic prolongado abre una ventana de mensaje que proporciona información sobre el botón
El botón de clima, ubicado en la esquina inferior izquierda de la captura de pantalla, se colorea para indicar que ha sido pulsado. Al hacer un clic rápido, la imagen se colorea brevemente antes de que se ejecute la acción.
Un simple clic en el botón del clima genera una solicitud a la API de OpenWeather y abre una subpágina que muestra los datos meteorológicos en formatos de gráfico y texto
Definición de la retroalimentación visual en aplicaciones móviles
La retroalimentación visual para un clic del usuario en cualquier imagen se implementa cambiando brevemente el color de fondo detrás del botón de la imagen. Las imágenes en nuestra aplicación se organizan en tablas, como se puede ver en esta vista parcial de MobileTogether Designer:
Cada celda de la tabla tiene un conjunto de propiedades que pueden definirse individualmente, incluyendo el color de fondo de la celda. Cada imagen también tiene una definición específica de las acciones que se ejecutan cuando se hace clic en la imagen.
Podemos registrar un número de índice en el elemento llamado "userButton" cuando se hace clic en la imagen del pronóstico del tiempo. Luego, podemos modificar el color de fondo de la celda en función del contenido del elemento "userButton", tal como se define en la expresión XQuery que se encuentra en la propiedad "Color de fondo".
Aquí está la lista de acciones para la herramienta de pronóstico del tiempo:
En primer lugar, se actualiza el valor del elemento denominado "userButton".
A continuación, se ejecutan las acciones que realmente modifican la apariencia de la imagen. Dado que estas acciones serán necesarias cada vez que se haga clic en una imagen, se almacenan en un grupo de acciones específico llamado "Button Flash".
MobileTogether ejecuta automáticamente la acción "Actualizar pantalla" una vez al final de cualquier secuencia de acciones. Para implementar una retroalimentación visual, queremos ejecutar "Actualizar pantalla" al principio de la secuencia para cambiar el color de fondo, pausar brevemente, restablecer el valor de "userButton" y, luego, ejecutar "Actualizar pantalla" nuevamente para borrar el color de fondo.
La función sleep() de XQuery establece la duración de la pausa en milisegundos. Después de que el botón parpadea, la ejecución continúa con el grupo de acciones "Obtener pronóstico del tiempo". Este grupo de acciones genera una consulta a una API de pronóstico del tiempo para obtener el pronóstico de 5 días para cualquier latitud y longitud, y luego abre la subpágina del clima que se muestra arriba.
También queremos obtener una respuesta visual al realizar una pulsación prolongada en cualquier imagen. MobileTogether nos permite definir acciones separadas para una pulsación prolongada, como se muestra aquí:
El resultado de la pulsación prolongada se muestra en la segunda captura de pantalla que se muestra arriba, donde la ventana de mensaje describe la función del botón "Obtener el clima".
Para la pulsación prolongada, solo necesitamos una función "Actualizar Pantalla" para cambiar el color de fondo, y no necesitamos la función "pausa()" para detener la ejecución. Una acción "Actualizar Pantalla" se ejecuta automáticamente cuando el usuario cierra la ventana del mensaje, por lo que el fondo de la imagen se restaurará.
Retroalimentación visual en aplicaciones móviles que utilizan tablas con filas repetitivas
No podemos utilizar la misma técnica de indexación para identificar los iconos de herramientas en las páginas donde presentamos listas basadas en datos recibidos a través de consultas a la API. Por ejemplo, la captura de pantalla que se muestra a continuación muestra los resultados de la búsqueda de hoteles y moteles cerca de una ubicación específica:
Se presentan páginas similares para alertas de tráfico y eventos culturales cercanos, y queremos ofrecer una retroalimentación visual para las imágenes de las herramientas en cada entrada, como se muestra aquí con un clic prolongado en una de las imágenes de teléfonos:
Cada conjunto de resultados para estas páginas se define como una tabla desplazable con filas repetidas, donde mostramos la información obtenida a través de consultas a la API:
MobileTogether incluye una función de extensión XQuery llamada mt-rowgroup-index() que ofrece una solución eficaz para identificar las imágenes en cada fila. Podemos combinar esta función con un valor para identificar la columna dentro de la tabla y así manipular cada imagen individualmente. La imagen del teléfono que se muestra arriba tiene la siguiente definición de color de fondo:
Las primeras acciones que se ejecutan cuando el usuario hace clic en la imagen del teléfono para actualizar cualquier resultado son: se modifica el valor del elemento "userButton" y se ejecuta el grupo de acciones "Button Flash"
Hemos añadido 300 al índice del grupo de filas para indicar la tercera columna de imágenes en la fila. Nuestra consulta a la API de búsqueda solicita un máximo de 50 resultados, por lo que, dependiendo del número de fila del resultado seleccionado, el valor del elemento "userButton" para esta imagen podría variar entre 301 y 350. La retroalimentación visual solo se aplica a esta única imagen, según lo determinado por la función mt-rowgroup-index() en la definición del color de fondo de la celda de la tabla.
MobileTogether incluye muchas otras funciones de extensión que se pueden utilizar en expresiones XPath/XQuery, lo que evita que los desarrolladores tengan que crear funciones personalizadas para ampliar las bibliotecas estándar de XPath, XQuery y XSLT, y así cubrir las tareas más comunes en aplicaciones móviles.
Aprenda más y pruébelo usted mismo
Si está listo para comenzar a agregar retroalimentación visual en aplicaciones móviles, simplemente descargue el MobileTogether Designer, que es de uso gratuito. Y no olvide visitar la página de demos de MobileTogether, donde encontrará enlaces a videos, tutoriales y más aplicaciones de demostración. Puede examinar la aplicación descrita en esta publicación descargando una copia desde GitHub en este repositorio.