Retour visuel dans les applications mobiles

Les applications mobiles offrant un retour visuel améliorent l'expérience utilisateur, et les applications mobiles agréables à utiliser sont lancées plus fréquemment que les applications statiques et ennuyeuses. MobileTogether, la plateforme de développement rapide d'applications mobiles (RMAD) d'Altova, intègre tous les outils nécessaires pour développer des applications mobiles multiplateformes dotées de fonctionnalités de retour visuel attrayantes.

La palette de contrôles "glisser-déposer" dans l'outil MobileTogether Designer comprend un bouton qui modifie automatiquement son apparence lorsqu'on clique dessus. Vous pouvez également définir des conditions qui ajoutent ou modifient du texte, des images ou d'autres éléments de n'importe quel bouton pendant l'exécution de l'application.

De plus, de nombreux autres éléments de contrôle peuvent également être définis pour fonctionner comme des boutons, où une ou plusieurs actions sont exécutées lorsque l'élément est cliqué. Nous avons déjà écrit à propos de l'utilisation d'images d'icônes comme boutons d'outils dans les applications mobiles pour créer un menu d'outils élégant et raffiné. Dans cet article, nous allons ajouter de l'interactivité à nos images d'outils afin de fournir un retour visuel attrayant pour chaque clic.

La capture d'écran ci-dessous montre une page de l'application "Where Am I" que nous avons créée pour illustrer l'utilisation d'images comme boutons.

Chaque image bleue située dans la partie inférieure de l'écran représente un bouton qui permet d'obtenir plus d'informations sur le lieu, soit en récupérant des données via une API, soit en ouvrant une page Web externe. Un simple clic sur n'importe quel bouton exécute l'action correspondante, tandis qu'un clic prolongé ouvre une fenêtre de message concernant ce bouton

Le bouton "Météo" situé dans le coin inférieur gauche de la capture d'écran est coloré pour indiquer qu'il a été cliqué. Lors d'un simple clic, l'image est brièvement colorée avant que l'opération ne soit effectuée.

Un simple clic sur le bouton météo envoie une requête à l'API OpenWeather et ouvre une sous-page affichant les données météorologiques sous forme de graphiques et de texte

Définir le retour visuel dans les applications mobiles

Un retour visuel est fourni à l'utilisateur lorsqu'il clique sur une image, en modifiant brièvement la couleur de fond derrière le bouton de l'image. Les images de notre application sont organisées en tableaux, comme on peut le voir dans cette vue partielle de MobileTogether Designer :

Chaque cellule de tableau possède un ensemble de propriétés qui peuvent être définies individuellement, notamment la couleur de fond de la cellule. De même, chaque image possède une définition spécifique des actions qui sont exécutées lorsqu'elle est cliquée.

Nous pouvons enregistrer un numéro d'index dans l'élément nommé "userButton" lorsque l'image de la prévision météorologique est cliquée. Nous pouvons ensuite modifier la couleur de fond de la cellule en fonction du contenu de l'élément "userButton", comme cela est défini dans l'expression XQuery de la propriété "Couleur de fond".

Voici la liste des actions disponibles pour l'outil de prévision météorologique :

Tout d'abord, la valeur de l'élément nommé "userButton" est mise à jour.

Ensuite, l'ensemble des actions qui modifient réellement l'apparence de l'image est exécuté. Comme ces actions seront nécessaires chaque fois qu'une image est cliquée, elles sont stockées dans un groupe d'actions dédié appelé "Button Flash".

MobileTogether exécute automatiquement l'action "Mettre à jour l'affichage" une seule fois à la fin de toute séquence d'actions. Pour implémenter un retour visuel, nous souhaitons exécuter "Mettre à jour l'affichage" au début de la séquence afin de modifier la couleur de fond, faire une courte pause, réinitialiser la valeur du bouton utilisateur, puis exécuter à nouveau "Mettre à jour l'affichage" pour effacer la couleur de fond.

La fonction XQuery sleep() permet de définir la durée de la pause en millisecondes. Après le clignotement du bouton, l'exécution reprend avec le groupe d'actions "Obtenir les prévisions météorologiques". Ce groupe d'actions génère une requête à une API de prévisions météorologiques pour obtenir les prévisions pour les 5 prochains jours, en fonction de n'importe quelle latitude et longitude, puis ouvre la sous-page météo indiquée ci-dessus.

Nous souhaitons également obtenir un retour visuel lors d'un appui prolongé sur n'importe quelle image. MobileTogether nous permet de définir des actions distinctes pour un appui prolongé, comme vous pouvez le constater ici :

Le résultat du clic prolongé est visible sur la deuxième capture d'écran ci-dessus, où la fenêtre de message explique la fonction du bouton "Obtenir la météo".

Pour le clic prolongé, nous n'avons besoin que d'une seule action de mise à jour de l'affichage pour modifier la couleur de fond, et nous n'avons pas besoin de la fonction "sleep()" pour une pause dédiée. Une action de mise à jour de l'affichage est exécutée automatiquement lorsque l'utilisateur ferme la fenêtre du message, de sorte que l'arrière-plan de l'image sera restauré.

Retour visuel dans les applications mobiles où les tableaux comportent des lignes répétées

Nous ne pouvons pas utiliser la même technique d'indexation pour identifier les icônes d'outils sur les pages où nous présentons des listes basées sur des données provenant de requêtes API. Par exemple, la capture d'écran ci-dessous montre les résultats de recherche pour les hôtels et motels situés près d'un endroit spécifique :

Des pages similaires sont proposées pour les informations sur le trafic et les événements culturels à proximité, et nous souhaitons afficher des images illustratives pour chaque élément, comme vous pouvez le voir ici pour un clic prolongé sur une image de téléphone :

Chaque ensemble de résultats pour ces pages est défini comme un tableau défilant composé de lignes répétées, dans lequel nous affichons les informations obtenues à partir de requêtes API :

MobileTogether inclut une fonction d'extension XQuery appelée mt-rowgroup-index() qui offre une solution efficace pour identifier les images dans chaque ligne. Nous pouvons combiner cette fonction avec une valeur pour identifier la colonne dans le tableau, ce qui permet de manipuler chaque image individuellement. L'image de téléphone mentionnée ci-dessus possède la définition de couleur de fond suivante :

Lorsqu'un utilisateur clique sur l'image du téléphone pour obtenir une mise à jour des résultats, les premières actions effectuées consistent à modifier la valeur de l'élément "userButton" et à exécuter le groupe d'actions "Button Flash" :

Nous avons ajouté 300 à l'index du groupe de lignes pour indiquer la troisième colonne d'images dans la ligne. Notre requête à l'API de recherche demande un maximum de 50 résultats. Par conséquent, en fonction du numéro de la ligne du résultat sélectionné, la valeur de l'élément "userButton" pour cette image peut varier de 301 à 350. Le retour visuel n'est appliqué qu'à cette seule image, comme le détermine la fonction mt-rowgroup-index() dans la définition de la couleur de fond de la cellule du tableau.

MobileTogether comprend de nombreuses autres fonctions complémentaires qui peuvent être utilisées dans les expressions XPath/XQuery, ce qui permet aux développeurs d'éviter de créer des fonctions personnalisées pour étendre les bibliothèques standard XPath, XQuery et XSLT, et ainsi simplifier la réalisation de tâches courantes dans les applications mobiles.

Apprenez-en davantage et essayez par vous-même

Si vous êtes prêt à commencer à intégrer des éléments visuels interactifs dans vos applications mobiles, téléchargez gratuitement le logiciel MobileTogether Designer. N'oubliez pas de consulter la page MobileTogether Demos, qui contient des liens vers des vidéos, des tutoriels et d'autres applications de démonstration. Vous pouvez examiner l'application décrite dans cet article en téléchargeant une copie depuis GitHub, dans ce dépôt.