Modèles de conception pour applications mobiles

Dans un article précédent, nous avons évoqué l'utilisation de modèles de conception de logiciels pour les applications mobiles, afin de faciliter la réutilisation des éléments de conception et de simplifier la création d'options efficaces et flexibles pour répondre aux différents besoins des applications. Nous avons décrit un exemple de modèle de contrôle conçu pour afficher plusieurs niveaux de données hiérarchiques en fonction des sélections de l'utilisateur au moment de l'exécution.

Notre exemple a été créé à l'aide de MobileTogether, l'outil de développement rapide d'applications mobiles (RMAD) d'Altova, afin de faciliter le travail des développeurs développer des applications multiplateformes qui offrent des performances d'applications dynamiques et sophistiquées, offrant ainsi une expérience utilisateur optimale.

Vous pouvez également créer des modèles de contrôle pour les applications mobiles multiplateformes en combinant plusieurs éléments de contrôle en une unité plus importante, comme un sous-ensemble complexe constitué de pièces individuelles. Cela permet de créer des modèles de conception pour les applications mobiles qui peuvent être facilement intégrés partout, ce qui accélère le développement et garantit la cohérence.

Le logiciel MobileTogether Designer, l'outil d'Altova pour le développement mobile multiplateforme qui combine des outils de conception visuelle par glisser-déposer avec des techniques de programmation fonctionnelle, inclut des applications exemples pour illustrer diverses fonctionnalités. L'application CompanySales interroge une base de données de commandes pour générer un rapport de ventes en temps réel, destiné à la direction, pour une entreprise fictive. Ce rapport présente les ventes globales, ainsi que les ventes par produit, par région ou par commercial, avec des dates de rapport sélectionnables par l'utilisateur et une comparaison avec les périodes précédentes.

Ci-dessous, vous trouverez des images de la page d'aperçu qui présente les ventes en temps réel pour le 15 février, ainsi que de la page "Ventes par produit", qui détaille les ventes par produit pour cette journée.

Chaque page de l'application propose des fonctionnalités de sélection de date, permettant aux utilisateurs de consulter les ventes passées en choisissant n'importe quelle date.

Dans la fenêtre principale de l'interface de conception, on peut constater que les fonctionnalités de sélection de date sont intégrées grâce à la combinaison de trois boutons et d'un sélecteur de date

Le sélecteur de date affiche la date du rapport et permet à l'utilisateur de choisir n'importe quelle date passée. Les boutons fléchés gauche et droite permettent de naviguer d'un jour en arrière ou en avant, et l'action associée au bouton "Aujourd'hui" sélectionne la date actuelle.

Lorsque le rapport est configuré pour la date actuelle, les boutons "Aujourd'hui" et la flèche vers la droite sont désactivés.

Modèles de conception pour les applications mobiles

Avant de créer les éléments de contrôle mentionnés ci-dessus, il faut d'abord ajouter un modèle de contrôle dans la fenêtre d'aide "Pages". Pour ajouter de nouvelles pages et des modèles de contrôle, cliquez sur le bouton vert "+" situé en haut à gauche :

Alternativement, vous pouvez créer un modèle de contrôle en sélectionnant des contrôles existants sur n'importe quelle page, puis en choisissant une option dans le menu contextuel qui s'affiche en faisant un clic droit

Dans le sélecteur de date amélioré, les actions effectuées par le bouton "Aujourd'hui", les boutons fléchés et le contrôle du sélecteur de date sont également définies dans le modèle de contrôle. Ci-dessous, vous trouverez les actions associées au bouton "Aujourd'hui" et au bouton fléché gauche :

Nous ne voulons pas que le bouton "Aujourd'hui" soit actif lorsque la date sélectionnée est la date actuelle, et nous ne voulons pas non plus que l'utilisateur puisse avancer vers le futur. Nous pouvons définir quand ces boutons sont activés dans la fenêtre d'aide "Styles et propriétés". Voici un aperçu partiel des paramètres pour le bouton "Aujourd'hui" :

Le bouton "Aujourd'hui" est désactivé lorsque la date sélectionnée pour le rapport correspond à la date actuelle. Nous avons également défini différentes couleurs pour indiquer si le bouton est cliquable ou non.

Les définitions de couleurs sont facultatives. Une exigence du programme pour l'application CompanySales était de présenter les mêmes couleurs sur tous les appareils, afin de simuler une identité visuelle cohérente. Si vous laissez les champs des définitions de couleurs vides, MobileTogether utilisera automatiquement les couleurs par défaut pour chaque plateforme : Android, iOS, Windows 10, etc.

Ajouter un modèle de contrôle à une page

Le modèle de contrôle de sélection de date amélioré est utilisé sur la page du rapport des ventes exécutives de l'application, ainsi que sur trois des quatre sous-pages. Nous avons simplement fait glisser le contrôle de sélection de date amélioré depuis la fenêtre d'aide "Pages" vers chaque page où il était nécessaire. Cela permet de gagner plusieurs étapes en instanciant automatiquement le modèle dans un contrôle de remplacement, comme on peut le voir ici :

Modification des actions des modèles de conception pour les applications mobiles

Nous avons un point supplémentaire à prendre en compte. Lorsque l'utilisateur sélectionne une nouvelle date pour le rapport, nous souhaitons que l'application interroge automatiquement la base de données des ventes afin d'afficher des rapports et des graphiques spécifiques à chaque page. Les actions définies jusqu'à présent dans le sélecteur de date avancé ne sélectionnent qu'une date.

Nous avons trois options pour traiter davantage un modèle de contrôle : appliquer uniquement les actions définies dans le modèle de contrôle lui-même, remplacer les actions du modèle de contrôle par toutes les nouvelles actions définies dans le modèle de substitution, ou combiner les actions du modèle de contrôle avec des actions supplémentaires définies dans le modèle de substitution.

Notre application "CompanySales" utilise la troisième option. Le sélecteur de date avancé permet à l'utilisateur de choisir la date. Le champ de saisie (placeholder) présent sur chaque page ajoute des actions spécifiques pour exécuter des requêtes de base de données et mettre à jour les graphiques, en fonction du contenu de cette page.

Nous avons ajouté des paramètres de remplacement pour les événements dans le contrôle de modèle de chaque page, via le menu contextuel accessible en faisant un clic droit

Cela ouvre la boîte de dialogue "Actions". Ci-dessous, vous trouverez la liste des actions disponibles pour la page "Ventes par produit".

La première action est un groupe d'actions intégré spécial appelé "Appel de fonction pour les événements de modèle". L'inclusion de "Appel de fonction pour les événements de modèle" signifie que toutes les actions définies dans le modèle du contrôle de sélection de date avancé sont exécutées en premier, puis les actions supplémentaires définies dans le champ de remplacement sont exécutées.

Le dernier groupe d'actions affiché dans l'image ci-dessus est développé pour afficher les actions de "Rechargement" qui mettent à jour le rapport "Ventes par produit". Les deux premières actions de "Rechargement" exécutent des requêtes de base de données, tandis que les deux dernières actions de "Rechargement" redessinent les graphiques en fonction des résultats de ces requêtes.

Essayez par vous-même

Vous pouvez télécharger gratuitement MobileTogether Designer et ouvrir l'application exemple CompanySales pour explorer plus en détail les modèles de conception pour les applications mobiles dans cet outil de démonstration de rapports de ventes. Vous pouvez également télécharger l'application mobile et exécuter l'application CompanySales sur votre propre appareil mobile. Le support des modèles de conception dans les applications mobiles n'est qu'une des nombreuses fonctionnalités de MobileTogether qui permettent aux développeurs de créer des applications natives sophistiquées grâce à une approche de développement à faible code, rapide et simple.