Réutiliser un modèle
Un des avantages principaux des modèles de commande est leur réutilisation. Une fois avoir créé un modèle de commande, vous pouvez l’utiliser dans plusieurs endroits de votre design. Dans notre exemple Cities1-Reuse.mtd, l’objectif est de laisser les utilisateurs choisir leur ville en choisissant le continent, le pays et la ville, dans cet ordre, comme indiqué dans la capture d’écran ci-dessous. (Toutes les données géographiques sont référencées depuis la source de page XML CitiesWorldwide.xml.)
Puisque nous utilisons deux ensembles de boutons radio horizontaux (un pour les pays et un pour les villes), nous avons créé un seul modèle de commande, nommé Boutons Radio Dynamiques (Horizontal), et nous l’utilisons deux fois : une fois pour générer des boutons radio des pays du continent sélectionné et une fois pour générer des boutons radio des villes du pays sélectionné.
Le design du projet
Le projet consiste dans le modèle de commande Boutons Radio Dynamiques (Horizontal), qui est utilisé deux fois dans la page supérieure nommée Select Country and City. Le design de la page supérieure est affiché dans la capture d'écran ci-dessous à gauche. Une fois que l’utilisateur sélectionne un continent dans la liste de choix, les boutons radio des pays de ce continent sont affichés. Lorsqu’un pays est sélectionné, les boutons radio de ces villes de ce pays sont affichés.
Le continent, le pays et la ville sélectionnés par l’utilisateur sont chacun stockés dans des nœuds séparés de la source de page \$PERSISTENT (voir capture d’écran ci-dessus à droite). Déposer ces trois nœuds de sources de page (les attributs @Continent, @Country et @City de l’élément \$PERSISTENT/Root) dans leurs composants de design respectifs permet d’effectuer certaines fonctions importantes :
•@Continent dans la liste de choix : met à jour @Continent, avec la sélection dans la liste de choix et fait de @Continent le nœud contextuel de la liste de choix.
•@Country dans placeholder-control-1 fait de @Country le nœud contextuel de la commande d’espace réservé (et du modèle de commande que la commande d’espace réservé appelle). La valeur dans @Country est mise à jour par le biais de l'action ÉditionÀLaFin du bouton radio dans le modèle de commande (voir ci-dessous).)
•@City dans placeholder-control-2 fait de @City le nœud contextuel de la commande d’espace réservé (et du modèle de commande que la commande d’espace réservé appelle). (La valeur dans @City est mise à jour par le biais de l’action ÉditionÀLaFin du bouton radio dans le modèle de commande (voir ci-dessous)).
La configuration d’un nœud contextuel pour la commande d’espace réservé est cruciale parce que toutes les expressions XPath contenues dans le modèle de commande et appelées par la commande d’espace réservé seront évaluées par rapport à ce nœud contextuel.
Le modèle de commande "Boutons Radio Dynamiques (Horizontal)"
Le modèle de commande a été déclaré comme ayant un paramètre obligatoire nommé \$values. Vous pouvez consulter cette déclaration en cliquant sur la touche Composants supplémentaires dans le volet Pages (encerclé en rouge dans la capture d’écran ci-dessous).
Le design du modèle de commande est affiché dans la capture d'écran ci-dessous. Le modèle de commande consiste en une table qui s’élargit horizontalement, c’est à dire, une nouvelle colonne est créée pour chaque item de la séquence sur laquelle la table s’élargit. Cette séquence (pour l’expansion de la table) est définie pour être celle qui est contenue dans le paramètre \$values (comme indiqué dans la capture d’écran ci-dessous). Chaque colonne contient un bouton radio. Donc, si \$values contient une séquence des noms de pays, une colonne contenant un bouton radio sera créée pour chaque nom de pays dans la séquence. Et si \$values contient une séquence des noms de ville, un bouton radio sera créé pour chaque nom de ville dans la séquence. La définition des contenus de \$values est expliquée ci-dessous.
La commande de bouton radio présente les paramètres suivants (définis dans le volet Styles & Propriétés) :
•Une propriété Texte qui détermine le texte qui accompagne chaque bouton radio. Le texte dans notre exemple est défini pour être le contenu de la variable \$MT_TableColumnContext. Cette variable est une variable d’application MobileTogether qui a été conçue spécialement pour être utilisée avec des tables qui s’étendent horizontalement. Elle contient, pour chaque colonne de ce type de tables, le nœud contextuel actuel. Donc, dans notre exemple, si une nouvelle colonne est créée en raison d’un nom de pays dans la séquence \$values, alors ce nom de pays est le nœud contextuel pour cette colonne et ce nom de pays sera stocké dans la variable \$MT_TableColumnContext pendant que cette colonne est générée. Puisque la propriété Texte du bouton radio a été configuré sur \$MT_TableColumnContext, chaque bouton radio aura le nom de l’item de la séquence qui a provoqué la génération de la colonne actuelle.
•La propriété Action de commande (pour ÉditionÀLaFin) met à jour le nœud actuel avec la valeur de \$MT_TableColumnContext. Tout d’abord, qu’est-ce que le nœud actuel ? Il s’agit du nœud contextuel de la commande d’espace réservé appelant (voir ci-dessus). Dans notre exemple, il s’agit, respectivement (en ce qui concerne le premier et le second espace réservé), des attributs @Country et @City de l’élément \$PERSISTENT/Root. Ensuite, quelle valeur \$MT_TableColumnContext (donc, de quelle colonne) sera transmise dans le nœud actuel ? Réponse : La colonne contenant le bouton radio qui a été cliqué. Par conséquent : Le nom du pays/de la ville du bouton radio cliqué sera passé dans l’attribut @Country or @City, respectivement.
•La propriété Valeur cochée (ou Obtenir valeur depuis XPath) ) du bouton radio définit si le bouton a été sélectionné (une valeur de 1) ou pas (une valeur de 0). L’expression XPath qui détermine cette valeur dans le modèle de commande est : if (\$MT_TableColumnContext = .) then 1 else 0. Cette expression définit la valeur de ce bouton radio à 1 qui a une valeur \$MT_TableColumnContext qui est égale à la valeur du nœud actuel (qui est le nœud contextuel de la commande d’espace réservé et, dans notre exemple, est soit l’attribut @Country soit @City de l’élément \$PERSISTENT/Root). Puisque le nœud actuel a été mis à jour avec la valeur de \$MT_TableColumnContext par le biais de l'action ÉditionÀLaFin, seul le bouton radio qui a été cliqué (et qui a déclenché l'action ÉditionÀLaFin) aura une valeur de 1.
Tout ce qu’il vous reste à faire est de spécifier la séquence qui est passée dans le paramètre \$values du modèle de commande. Cette définition est définie sur la commande d’espace réservé (voir ci-dessous).
| Note : | Les Boutons Radio Dynamiques (Horizontal) vous permettent de créer des boutons radio horizontaux pour toute séquence de valeurs fournies dans le paramètre\$values. |
Les deux Commandes d’espace réservé qui réutilisent le modèle de commande
Une Commande d’espace réservé est créée pour un modèle de commande en déposant la Commande d’espace réservé dans le design à l’endroit souhaité, et en configurant sa propriété Modèle de commande pour sélectionner le modèle de commande que vous souhaitez. En alternative, vous pouvez déposer le modèle de commande souhaité dans le design à l’endroit requis ; la propriété Modèle de commande sera définie automatiquement.
Les configurations principales pour la Commande d’espace réservé dans notre exemple sont expliquées ci-dessous. La capture d’écran ci-dessus montre les propriétés de la première Commande d’espace réservé, qui est utilisée pour choisir des pays.
•Nœud de source de page associée : Cela permet de spécifier le nœud de source de page qui sera le nœud contextuel de la Commande d’espace réservé, et, par extension, le nœud contextuel du modèle de commande qui est appelé. Toutes les expressions XPath dans le modèle de commande (y compris pour ses paramètres et variables) seront évaluées par rapport à ce nœud. Vous pouvez réaliser cette configuration en déposant le nœud de source de page dans la Commande d’espace réservé. Dans notre projet, les nœuds de source de page associés pour les deux Commandes d’espace réservé sont, respectivement, les attributs @Country et @City de l’élément \$PERSISTENT/Root.
•Modèle de commande : Sélectionne le modèle de commande qui sera instancié à l’emplacement de la Commande d’espace réservé. Vous pouvez sélectionner le modèle de commande dans la liste de choix de la propriété. (En alternative, vous pouvez glisser un modèle de commande dans le design et cette propriété sera définie automatiquement pour sélectionner ce modèle de commande.)
•Paramètres : Définit les valeurs à envoyer au paramètre \$values du modèle de commande. Dans le cas de la Commande d’espace réservé qui instancie les boutons radio pour les pays du continent choisi par l’utilisateur, l’expression XPath est : \$COUNTRIES-AND-CITIES/Cities/Continent[@name=\$PERSISTENT/Root/@Continent]/Country/@name. Le filtre de prédicat dans cette expression (marqué en jaune) sélectionne le continent que l’utilisateur a choisi (et qui est maintenant stocké dans l’arborescence \$PERSISTENT). L’expression XPath de la seconde Commande d’espace réservé, qui génère des boutons radio pour les villes dans le pays sélectionné est : \$COUNTRIES-AND-CITIES/Cities/Continent[@name=\$PERSISTENT/Root/@Continent]/Country[@name=\$PERSISTENT/Root/@Country]/City/@name.
Veuillez noter que les deux espaces réservés ont des nœuds contextuels différents et envoient des séquences différentes au paramètre \$values. Cela permet au modèle de commande de générer les boutons radio appropriés dans les deux emplacements où il est instancié par les Commandes d’espace réservé respectives.