Modèles de conception logicielle dans les projets de développement mobile
Modèles de conception de logiciels optimiser le développement d'applications mobiles en éliminant la mise en œuvre de composants répétitifs. La création d'un modèle de conception simplifie également les modifications et les mises à jour, car une modification apportée au modèle peut être appliquée à l'ensemble du projet.
MobileTogether prend en charge des modèles de conception de logiciels pour les éléments d'interface utilisateur dans les applications mobiles multiplateformes, 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.
Dans MobileTogether, un modèle de contrôle est un composant de conception qui permet aux développeurs de spécifier et de regrouper les éléments de contrôle utilisateur de manière à les rendre facilement réutilisables. Les modèles de contrôle prennent en charge les paramètres, et chaque modèle peut être personnalisé en fonction des valeurs des paramètres au moment de l'exécution.
Examinons un exemple.
Le logiciel MobileTogether Designer comprend plusieurs projets d'exemple qui illustrent les modèles de contrôle. Nous allons décrire l'application Cities4-DynamicSelection. La capture d'écran ci-dessous montre une vue partielle de l'application en cours d'exécution sur un téléphone Android :
Cette application illustre un problème courant lors de la présentation de données hiérarchiques. En fin de compte, l'application vise à ce que l'utilisateur sélectionne une ville. Pour améliorer l'efficacité, la liste complète des villes est organisée par continents, présentée dans une liste déroulante, puis filtrée par pays dans le continent sélectionné, affichée sous forme de boutons radio, puis par villes au sein du pays, présentées dans un deuxième ensemble de boutons radio.
En mode paysage, les boutons radio sont affichés horizontalement (comme illustré ci-dessus), tandis qu'en mode portrait, ils sont affichés verticalement
Il serait très complexe de créer cette application si les contrôles de type "bouton radio" pour chaque combinaison de sélections de l'utilisateur devaient être créés manuellement. De plus, les noms des pays et des villes sont contenus dans un fichier source XML, et nous souhaitons pouvoir mettre à jour l'application simplement en modifiant ce fichier source.
En ouvrant l'application dans l'outil MobileTogether Designer, nous pouvons visualiser la mise en page de la page dans la fenêtre de conception principale.
En haut de la page, le premier élément de contrôle est la zone de sélection de continent. Ci-dessous, vous trouverez deux tableaux contenant des contrôles de type "espace réservé". Au moment de l'exécution, le premier tableau et l'espace réservé généreront la liste des pays, tandis que le deuxième tableau générera la liste des villes.
L'outil MobileTogether Designer comprend une fenêtre d'aide qui affiche une arborescence de toutes les pages, sous-pages et modèles de contrôle présents dans une application. Dans cet exemple, chaque modèle accepte deux paramètres qui seront transmis par le placeholder pendant l'exécution.
La sélection d'un modèle de contrôle affiche ses composants dans le panneau de conception principal.
Pour la version verticale, le modèle utilise un tableau avec des lignes dynamiques, tandis que la version horizontale utilise un tableau avec des colonnes dynamiques. Dans les deux cas, le tableau généré par le modèle sera intégré dans une seule cellule du tableau parent défini sur la page principale. Cela permet de centrer verticalement la case à cocher de tri sur n'importe quelle colonne de boutons radio, quel que soit le nombre de lignes.
Un espace réservé définit la position d'un modèle de contrôle sur une page. La fenêtre d'aide "Styles et propriétés" pour l'espace réservé indique quel modèle de contrôle est utilisé et fournit les valeurs des paramètres. L'espace réservé pour la liste des pays définit ces deux éléments sous forme d'expressions XQuery :
Même avec une vue partielle de l'expression, on peut constater que le modèle de contrôle spécifique utilisé sur la page sera déterminé par l'orientation de l'appareil au moment de l'exécution.
Nous pouvons utiliser le simulateur MobileTogether pour examiner les modèles de conception logicielle pendant l'exécution et observer le fonctionnement des espaces réservés et des modèles de contrôle. Dans les captures d'écran suivantes, nous utilisons un iPhone en mode paysage comme appareil de prévisualisation. Étant donné qu'il n'y a pas de fonctionnalités spécifiques à un appareil ou à un système d'exploitation dans cette application, l'appareil de prévisualisation exact n'a pas d'importance.
Les choix de l'utilisateur concernant le continent, le pays et la ville ne sont définis avec aucune valeur prédéfinie dans l'application. Par conséquent, au démarrage de l'exécution, nous ne voyons que l'en-tête de la page et une liste déroulante vide pour la sélection du continent :
La fenêtre "Messages" affiche les actions effectuées au fur et à mesure que nous sélectionnons un continent, comme indiqué par les zones vertes ci-dessous
La fenêtre de simulation affiche désormais la liste des pays appropriée pour l'Europe, mais aucun nom de ville n'est affiché
À ce stade, l'application attend que l'utilisateur sélectionne un pays. Au lieu de continuer, nous pouvons ouvrir l'éditeur XQuery dans le simulateur et évaluer les paramètres transmis par le premier espace réservé au modèle de contrôle. Nous copions simplement l'expression des paramètres du modèle à partir de la fenêtre "Styles et propriétés" et la collons dans la fenêtre XQuery. Cette expression renvoie un tableau contenant la liste des pays européens et leur statut de tri :
Mais pourquoi l'application n'affiche-t-elle aucune liste de villes sur la page simulée ? Nous pouvons examiner l'expression de paramètre transmise par le deuxième espace réservé pour les villes :
L'expression a reçu une liste vide de noms de villes. Comme les boutons radio représentant les villes sont contenus dans un tableau avec des colonnes dynamiques, aucune colonne n'a été affichée !
La case à cocher permettant de choisir le tri ne se trouve pas dans une colonne dynamique, mais elle n'est pas non plus affichée. La propriété de visibilité de la case à cocher est définie comme "$PERSISTENT/Root/@Country != ''", ce qui signifie que la case à cocher et son étiquette ne seront visibles que lorsque l'utilisateur aura sélectionné une ville.
En résumé, l'exemple Cities4-DynamicSelection illustre comment plusieurs éléments de contrôle peuvent être combinés dans des modèles de conception logicielle personnalisés et intégrés dans la conception d'une application mobile afin de créer une solution élégante qui affiche le résultat correct en fonction des choix de l'utilisateur au moment de l'exécution ou en fonction d'autres conditions externes. L'application de démonstration et le fichier de données source sont inclus avec le logiciel MobileTogether Designer, vous pouvez donc suivre les étapes décrites ci-dessus ou aller plus loin pour explorer par vous-même.
MobileTogether Designer est un outil gratuit qui permet de créer rapidement des applications mobiles multiplateformes à partir d'une seule conception. Visionnez des démonstrations vidéo pour découvrir les types d'applications que les utilisateurs de MobileTogether créent quotidiennement, et téléchargez le programme d'installation pour commencer à utiliser les modèles de conception de logiciels !