Tutorial 5 – Mes premiers contrôles HTML
La vidéo du Tutorial
L’IHM
Nous allons maintenant écrire le code de notre IHM.
Vu qu’il s’agit d’une application Web, il s’agit essentiellement du HTML. Mais le HTML que nous allons écrire n’est pas exactement le HTML qui sera visible dans notre site.
En fait, nous allons créer des contrôles HTML, qui seront instanciés et configurés plus tard, pour faire le rendu de notre site.
|
Ajoutez un nouvel Item dans le projet
Choisissez le Template Aspectize HTML Control
Nommez le MainControls
Cliquez sur OK |
|
|
Le fichier HTML apparait. |
|
Le fichier HTML contient une balise div avec l’attribut aas :control. Il s’agit d’un contrôle HTML, qui pourra être bindé aux données de l’application.
Tous les Contrôles sont des DIV nommés et contiennent juste le HTML d’affichage.
Le HTML d’affichage s’exprime :
- Avec du HTML standard (Tables, boutons, Texte, Checkbox, Select, …)
- Avec des contrôles Aspectize (Grid, Tree, Panel, Image, Tab, …) désigné par l’attribut class
Tous les Tags doivent être nommés :
- Avec l’attribut name= " " , pour le HTML standard
- Avec l’attribut aas :name= " " pour les contrôles Aspectize
Pour notre exemple, nous allons créer 4 contrôles.
Nous pouvons utiliser la ToolBar et droper les différents contrôles pour générer le HTML.
|
Ajouter 4 balises div avec l’attribut aas :control et les noms associés :
ADWMain, contrôle de démarrage de l’application
Toolbar, qui contient les boutons de notre application
ADWArbre, qui contient l’arbre de navigation
ADWProduct, qui contient le détail du produit |
<div aas:control=”ADWMain”>
</div>
<div aas:control=”ToolBar”>
</div>
<div aas:control=”ADWArbre”>
</div>
<div aas:control=”ADWProduct”>
</div>
|
|
Ajoutons le contenu du contrôle ADWMain, qui contient 3 Panel nommé. |
<div aas:control="ADWMain">
<div aas:name="ZoneToolBar" class="Panel"></div>
<div aas:name="ZoneArbre" class="Panel"></div>
<div aas:name="ZoneProduct" class="Panel"></div>
</div>
|
|
Le contrôle Toolbar contient un bouton Save |
<div aas:control=”ToolBar”>
<input type=”button” name=”Save” value=”Save” />
</div>
|
|
Le contrôle ADWArbre contient un AspectizeTreeView |
<div aas:control=”ADWArbre”>
<div aas:name=”ProductCategoryTree” class=”AspectizeTreeView”></div>
</div>
|
|
Le contrôle ADWProduct contient le HTML de détail d’un produit.
Nous pouvons agencer le HTML comme nous le souhaitons, et faire une table pour aligner les différents éléments. |
<div aas:control="ADWProduct">
<table><tbody>
<tr>
<td align='right'>Nom du produit :</td>
<td><input type="text" name="ProductName" style="width: 313px" /></td>
</tr>
<tr>
<td align='right'>Numero du produit :</td>
<td><input type="text" name="ProductNumber" style="width: 313px" /></td>
</tr>
</tbody></table>
</div>
|
Bonne nouvelle ! Nous avons terminé le développement de l’IHM, il n’y a aucun code à écrire.
L’assemblage des contrôles pour former une page se fait dynamiquement avec du binding.
La suite au prochain épisode.