Tutorial 12 – Affichage de vue dynamique

La vidéo du tutorial

Affichage de vue par binding

Nous souhaitons améliorer un peu l’ergonomie de notre application, et faire en sorte que la vue de détail d’un produit n’apparaisse que lorsqu’un produit est sélectionné.

Nous allons donc créer une autre vue, vide, qui va masquer la vue produit, quand un autre noeud sera sélectionné.

Dans BindingStudio, ajoutons une nouvelle vue, sur le controle Html.Panel. Nommons cette vue EmptyView. Il n’y a rien à binder dans cette vue, il s’agit d’un panel vide.
Dans le Layout de la vue ADWMain, ajoutons la vue EmptyView dans la zone ZoneProduct. Il y a maintenant 2 vues dans la même zone. Choisissons d’afficher la vue EmptyView par défaut. La vue ADWProduct ne sera plus affichée par défaut; il ne peut y avoir qu’une vue par défaut pour une zone donnée. Sauvegardons la configuration.

Dans notre application, nous constatons bien que la vue ADWProduct n’est plus affichée par défaut.

Mais elle ne s’affiche pas non plus lorsque nous sélectionnons un Produit. Pour cela, nous devons ajouter quelques bindings.

Dans la vue ADWArbre, sélectionnons le noeud Product. Sur son évènement Click, nous pouvons binder une Commande. Jusqu’à présent, nous avons bindé des Commandes Serveur, mais nous avons à notre disposition des Commandes Client, qui sont exécutées dans le Browser. Le service UIService, qui fait partie du serveur Aspectize, donne accès à tout un tas de commandes utiles pour gérer les données et les vues en local. La commande qui nous intéresse est la commande ShowView. Elle a un paramètre viewName, qui est le nom de la vue à afficher.
Bindons le Paramètre sur la vue ADWProduct. De même que nous avons bindé les paramètres sur les données du DataSet, nous pouvons bindé les paramètres sur les éléments d’une vue. Notre paramètre est le nom de la vue elle-même.
Ajoutons le même CommandBinding sur les noeuds ProductCategory et ProductSubcategory, mais cette fois ci avec le paramètre EmptyView. Sauvegardons la configuration.

Si nous relançons l’application, nous constatons bien que la vue s’affiche quand on click sur un noeud Produit, et qu’elle disparait quand on clique sur un autre noeud.

C’est bien le comportement que l’on souhaitait.

Tri des noeuds de l’arbre

Nous allons faire en sorte que les noeuds de l’arbre soient triés.

Dans la vue ADWTree, sélectionnez le Binding de l’arbre et le NodeBinding ProductCategory. Chaque noeud a une propriété Sort, qui permet de définir l’ordre de tri des données. Cliquez sur le bouton
Nous pouvons choisir la ou les colonnes de tri, qui sont toutes les colonnes de l’Entité qui est bindée. Sélectionnons la colonne Name, avec un tri ascendant. Nous pouvons faire de même pour les autres NodeBinding. Sauvegardons notre configuration.

Si nous lançons notre application, nous constatons que les noeuds sont bien triés par ordre de nom.

Ce tri est purement visuel, il est fait dans le client, et n’a aucun rapport avec la requête qui est faite en base de données.

La suite, au prochain épisode.