Tutorial 9 – Layout Binding
La vidéo du tutorial
Enrichissement de l’arbre
Nous allons ajouter un nœud supplémentaire avec les Product, toujours en lazy loading.
Dans Visual Studio, nous allons ajouter une nouvelle Commande pour charger les Product.
Cette commande est très similaire à la précédente; elle charge les Product associés à une SubCategory donnée par son ID.
Compilez la solution. |
DataSet IADWService.LoadProducts(int productSubCategoryId)
{
IDataManager dm = EntityManager.FromDataBaseService("DataAccessAdventureWorks");
dm.LoadAssociated<Product, ProductProductSubcategory>(productSubCategoryId);
return dm.Data;
}
|
|
Dans BindingStudio, sélectionnez la Vue Explorer, puis le Nœud SubCategory.
Ajouter un Nœud Child.
Le nœud est Contextual.
Configurons le DataName vers la Table
.ProductProductSubcategory.Product
Associez la Property Text à la Colonne Name de l’entité Product. |
|
|
De même que pour le nœud ProductCategory, nous configurons un CommandBinding sur le nœud ProductSubcategory pour appeler la Commande de chargement des Products.
Ajoutez un CommandBinding sur l’événement OnFirstExpand.
Sélectionnez la Commande LoadProducts.
Bindez le paramètre sur la colonne d’identifiant du noeud courant.
Sauvegardez l’application. |
|
Lançons l’application. L’Arbre affiche bien les 3 niveaux attendus, toujours en Lazy Loading.
Layout Binding
Nous allons maintenant améliorer la mise en page de nos Vues.
En fait, nous voulons maintenant que cette vue de données soit dans une vue parent.
Dans nos contrôles, nous avions défini le controle ADWMain:
<div aas:control="ADWMain">
<div aas:name="ZoneToolBar" class="Panel"></div>
<div aas:name="ZoneTree" class="Panel"></div>
<div aas:name="ZoneProduct" class="Panel"></div>
</div>
C’est précisément le rôle de ce contrôle, être un container pour les autres contrôles.
Dans BindingStudio, ajoutez une nouvelle Vue sur le controle ADWMain.
Cette vue n’a pas de Binding de données, car elle ne contient que des controles Panel, qui sont des containers d’autres vues, et qui n’affichent pas de données de notre DataSet.
Nous allons configurer le Layout de cette vue. |
 |
Sélectionnez l’onglet Layout.
Cliquez sur le bouton ![clip_image002[4]](http://aspectize.com/blogs/corp/clip_image0024_thumb_24948438.gif "clip_image002[4]") , une ligne de Layout apparait.
Nous pouvons sélectionner une des Zone de la vue; il y en a 3, chacune définie par un Panel nommé. Choisissons ZoneTree.
Associons la vue ADWTree.
Cochons la case à cocher, pour signifier que la vue Child est affichée en même temps que la vue Parent (sinon, la zone sera vide).
La vue ADWMain, est maintenant configurée pour contenir la vue ADWTree. |
 |
Faite un click droit sur la vue ADWMain.
Cliquez sur le Menu “Set as starting View”.
La vue ADWMain est maintenant définie comme vue de démarrage.
Sauvez l’Application. |
 |
Si nous lançons l’application, nous voyons maintenant que la vue de l’Arbre est délimitée en largeur:
Nous allons améliorer un peu le positionnement de la vue, à l’aide d’une feuille de Style.
Dans Visual Studio, ajoutez un fichier Styles.css
Définissez le positionnement des différentes zones, en fonction de leur nom.
Le CSS est tout à fait standard, et permet de personnaliser l’affichage comme vous le souhaitez. |
.ZoneToolBar
{
top:2em;
left:0;
height:3em;
width:100%;
}
.ZoneTree
{
top:3em;
left:0;
height:50em;
width:34%;
border: solid 1px;
border-color:Black;
overflow:auto;
}
.ZoneProduct
{
top:3em;
left:34%;
width:64%;
height:20em;
}
|
Pour que cette feuille de style soit prise en compte, il est nécessaire d’ajouter sa référence dans le fichier ADWWeb.application.htm.ashx, qui contient toutes les références de l’application.
Dans la section CSS Link, ajoutez la ligne:
<link rel='stylesheet' type='text/css' href='~/Style.css' />
Le répertoire du fichier est défini par ~, qui désigne le répertoire de l’Application.
Ce fichier est édité manuellement, car il permet de controler les différents CSS à charger, et l’ordre dans lesquels ils sont chargés. Ceci est utile si vous souhaitez ajouter d’autres CSS comme, par exemple, JQuery.
Compilez la solution. |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:aas='http://aspectize.com/Ajax'>
<head><meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/>
<!-- CSS Link -->
<link rel='stylesheet' type='text/css' href='../Aspectize.core/Aspectize.css' />
<link rel='stylesheet' type='text/css' href='~/Style.css' />
<!-- JS Files -->
<script type='text/javascript' src='../Aspectize.core/Aspectize.runtime.js'></script>
<script type='text/javascript' src='~/ADWWeb.library.js'></script>
<script type='text/javascript' src='~/main.js'></script>
<title>Aspectize ADWWeb Application</title>
</head>
<body></body>
</html>
|
Nous voyons maintenant que le CSS est bien pris en compte:
Voilà, nous avons vu comment les différentes vues pouvaient être agencées les unes par rapport aux autres, et comment l’application va pouvoir s’enrichir avec de nouvelles vues.
La suite, au prochain épisode.