Tutorial 7 – Première vue, premiers Bindings
La vidéo du tutorial
Configuration des Vues
Commençons par créer la première Vue de notre Application. Une Vue est une Instance d’un contrôle, que l’on va configurer, c’est à dire :
- Lier ses propriétés avec des Données, avec un DataBinding.
- Lier ses événements avec des Commandes, avec un CommandBinding.
- Lier son affichage avec d’autres Vues, avec un LayoutBinding.
DataBinding
Nous allons créer notre première vue sur le Contrôle ADWTree et faire notre premier DataBinding.
|
Dans le Solution Explorer, sélectionnez l’Application ADWWeb
Faites un Click Droit et choisissez le menu
Add  New View
Sélectionnez ADWTree
Cliquez sur OK |
|
|
Dans une Vue, nous pouvons ajouter un Binding pour chaque Contrôle de la Vue.
Le Contrôle ADWTree a un Contrôle TreeView, ProductCategoryTree, et le Binding associé est automatiquement créé, il porte le nom ADWTree.ProductCategoryTree, qui est le nom de la vue associé au nom du Contrôle. |
|
|
Commençons par ajouter un nœud en cliquant sur le bouton Add Root 
Le DataName permet de choisir l’Entité du DataSet associé au nœud ; l’arbre présente toutes les Entités et Relations du Schéma du DataSet
Choisissons l’Entité ProductCategory, pour binder le premier niveau de l’arbre sur cette Entité. |
|
|
La propriété Text du Nœud apparait dans les Node properties.
Associons un DataName.
Cette fois-ci, ce ne sont pas les tables du DataSet, mais les colonnes de la table ProductCategory qui apparaissent
Choisissez Name, le Text du TreeNode est maintenant bindé sur le champ Name de la table des ProductCategory
Sauvegardez |
|
Lançons notre Application pour voir le résultat.
Nous ne voyons rien du tout dans la page !
Ceci est normal, car la Table du DataSet est vide. A aucun moment, nous avons défini comment et quand les données sont accédées. Pour faire cela, nous allons ajouter un Binding sur notre Vue pour configurer le chargement des Données. Le bon moment pour appeler notre Commande est le chargement de la vue. Nous allons donc configurer l’événement OnLoad de la vue.
CommandBinding
|
Ajoutons un Binding sur la Vue en cliquant sur le bouton  .
Seule le Contrôle de la vue est disponible, la Contrôle ADWTree n’a pas d’autres contrôles configurables, autre que lui-même et le TreeView |
|
|
Dans l’onglet Commands, cliquez sur le bouton ![clip_image014[1]](http://aspectize.com/blogs/corp/clip_image0141_thumb_72600C1A.gif "clip_image014[1]")
Choisir l’évènement OnLoad dans la liste des événements configurables.
Un CommandBinding sur l’évènement OnLoad est ajouté. |
|
|
Sélectionnez notre Commande Server LoadInitialData |
|
|
Sélectionnez le DataSet ADWData en tant Result du CommandBinding
Cochez la case Merge Data
Au chargement de la Vue, la Commande sera automatiquement appelée et son résultat sera fusionné avec le DataSet de l’Application |
|
Nous pouvons lancer l’application pour vérifier que notre configuration correspond bien à ce que nous voulons.
Comprenons bien la cinématique de l’application :
· Au chargement de l’application, la Vue de démarrage (ADWTree) est affichée
· Cette vue a un événement OnLoad qui est déclenché.
· Le Binding de l’événement OnLoad est appelé ; il s’agit de la Commande Serveur LoadInitialData.
· Le code de la commande est exécuté sur le Serveur; les données sont requêtées dans la DataBase.
· Le DataSet résultat est envoyé sur le client et est mergé dans le DataSet ADWData.
· Le Contrôle actualise les données contenues dans la table ProductCategory et affiche les différents nœuds.
A noter que tout ceci s’est produit, uniquement parce que nous avons configuré les différents éléments. Aucun code n’a été nécessaire pour programmer cet enchainement. Le seul code qu’il a été nécessaire d’écrire est la logique de chargement des données (et encore, on pourrait imaginer que cela se fasse automatiquement à partir du DataBinding).
De plus, il y a bien eu un aller et retour serveur, mais uniquement pour exécuter une commande et renvoyer des données. Aucun HTML de notre application n’est généré sur le serveur. Nous verrons plus tard, comment cette construction permet d’avoir une application extrêmement fluide.
La suite, au prochain épisode.