Tutorial 10 – Edition de données

La vidéo du tutorial

Controle d’édition de données

Nous allons utiliser le controle ADWProduct pour afficher le détail d’un produit, et éditer ses caractéristiques.

Dans Visual Studio, éditons le controle ADWProduct, en lui ajoutant une table et 2 lignes avec le nom et le numéro du produit. Le controle est défini par du HTML tout à fait standard, nous pouvons organiser les différents éléments comme nous le souhaitons. Nous pouvons éventuellement enrichir le fichier CSS pour habiller le contrôle. Compilons la solution.	<div aas:control="ADWProduct"> <table> <tr> <td>Nom du produit:</td> <td><input name="TxtProductName" type="text" /></td> </tr> <tr> <td>Numero du produit:</td> <td><input name="TxtProductNumber" type="text" /></td> </tr> </table> </div>
Dans BindingStudio, nous pouvons créer une nouvelle vue sur le Controle ADWProduct. Automatiquement, 2 Binding sont créés sur chacun des controle Input TxtProductName et TxtProductNumber, et la propriété value a également été ajoutée.  En fait, à chaque fois qu’un nouveau contrôle est ajouté, BindingStudio crée le Binding associé. Si nous ajoutons un controle, il y a de fortes chances que nous souhaitons binderune donnée dedans. Si vous préférez gérer les Binding manuellement, il est possible de désactiver cette option.
Qu’allons nous binder dans la propriété value ? Ce serait logiquement un DataName Product.Name. Mais nous souhaitons afficher les caractéristiques du produit sélectionné à partir de l’Arbre. Nous voulons que cette vue soit synchroniser avec l’arbre, donc le DataName qui mène à la table Product doit être le même que dans l’arbre. Nous reprenons donc le chemin, à partir de la table ProductCategory, puis ProductSubcategory, puis enfin Product, et choisissons la colonne Name. Le Picker de DataName nous aide à sélectionner cette valeur en naviguant suivant notre schéma. Nous pouvons choisir de même le DataName du controle TxtProductNumber qui pointe vers la colonne ProductNumber.
Comme ce DataName est long, et que la racine est commune à tous les controles de la vue, nous pouvons factoriser cette racine dans le Parent Data de la vue. Quand nous choisissons le DataName du contrôle TxtProductName, nous pouvons cocher la case Child Data et renseigner nos DataName relativement à la racine de la vue.
Il nous reste à lier la vue ADWProduct avec la vue de démarrage ADWMain. Dans le Layout de la vue ADWMain, nous pouvons ajouter la vue ADWProduct dans la zone ZoneProduct. Sauvons notre solution.

Si nous lançons notre Application, nous constatons bien cette nouvelle vue qui est synchronisée avec l’Arbre. 

Il faut bien comprendre que c’est avec les DataName définis dans le Binding que cette synchronisation est réalisée. En fait, un DataName est un chemin unique pour désigner une Donnée de notre Application. Tous les Contrôles qui pointent vers le même DataName sont automatiquement synchronisés; la donnée est unique en mémoire, et les controles affichent le contenue de la donnée.

Si nous modifions le Nom d’un produit, son nom modifié est immédiatement dans l’Arbre. Le nom est mis à jour parce que le Binding est défini OnPropertyChanged, c’est à dire que la donnée est mise à jour à chaque fois qu’elle change, et donc à chaque frappe du clavier.

Nous pouvons modifier notre Binding pour qu’il soit OnValidation, c’est à dire que la donnée est mise à jour lorsque le contrôle perd le focus. Nous verrons plus tard que ce comportement a un impact sur la validation des données.

La suite au prochain épisode.