Une classe de données dans une page web

 Dans le précédant poste nous avons créer un classe de données, nous avons également vu quelques lignes de code pour jouer avec, et bien il y a encore plus simple....

Wakanda propose un certain nombre de composants d'interface (widget) qui s'utilisent via un Browser web pour manipuler les classes de données, le plus impressionnant de tous à ce moment est la DataGrid, je vous propose donc de faire une petite expérience avec.


Dans le dernier poste nous avions créé une Classe de données Article :

Ajout d'une page a notre projet: 

Maintenant nous allons ajouter une nouvelle page à notre projet Démo, pour cela cliquer dans la bar des bouton sur "New Page" et donnez lui un petit nom :

 Une fois le fichier créé, ce dernier est ajouté dans le WebFolder de votre projet, notez que par défaut une page "index" est créée. Cette dernière est la page par défaut de votre projet.
 Un éditeur de contenue de la page est également apparue dans la partie central de Wakanda Studio,
dans cette fenêtre il sera possible de concevoir votre page web à l'aide des différents Widget proposés.  La liste de ces Widgets devrait normalement augmenter avec la popularité de Wakanda car il est possible d'en créer de nouveau... à suivre... cela me rappelle Delphi et si cela suit la même courbe, ce ne sera que du bon....

 Si nous regardons de plus près l'interface voici ce que nous y trouvons :

 En haut à Gauche la liste des Widget, classer par type :

• Automatic Controls : qui doivent être les composants avec une logique métier intégrée comme une grille de données avec les fonction d'édition ou un systeme de login complet
• Form Controls : qui correspondent à décomposant standard d'affichage, avec leurs évènements (On Click, On Double Click) etc
• Containers/Placeholders : Composant de structuration d'une page, notamment il y a le widget (objet) "Component", mais également le "Container" une sorte de "Div", le Dialog très utile pour afficher des messages bloquants, le "TabView" et l’impressionnant "Matrix"..
• Les Miscellaneous Controls : Il y a parmis eux le "Canvas" à éxplorer bien sûre ;-), le Menu Bar pour réaliser les menus, etc...
• Utilities : A explorer
• External : Composants externes...

En dessous cette partie il y a les Source de données, notez qu'en entête de cette partie d'interface, il y an bouton qui est soit positionné sur "Model", soit sur "Datasources" :

• En mode "Model" : Cela nous permet d'accéder à nos Classes de Données (que nous avons créer dans la partie "Model" de Wakanda Studio)
• En mode "Datasource" : Cela nous permet d'accéder aux sources de données déclarées dans notre page. Noter qu'il y a cinq catégories de source de données, nous les explorerons plus tard ;-) !. Dans l'exemple ici, nous allons créer une source de données de type "Datastore Classes"

 Dans la partie droite de l'interface de Wakanda Studio nous avons les propriétés, évènements, Skin et Style de l'objet actif dans l'éditeur. Cette partie nous sera très utile pour jouer sur le comportement ou le paraître de nos composants.

Ajoutons le super composant "Grid" à notre fenêtre :

Pour cela vous pouvez sélectionnez le composant dans la liste, puis le glisser/déplacer dans la partie centrale :

Notons que l'interface nous invite alors à "Glisser/Déplacer" une source de données à l'intérieur de ce composant, essayons donc :

Notez que plusieurs choses ont changé dans votre interface :
Une source de données (Datastore Classes) à automatiquement été créée et ajoutée à votre page.

1. Le Composant, affiche dynamiquement le titre des colonne en fonction des attribut qui ont été créer dans la Classe de données.
2. Dans les propriétés du composant nous pouvons noter que la propriété "Source" est associée à l'objet "article" qui est le nom de la source de données de la page créée. La section inférieure contient la liste de colonnes qui ont été ajoutées au composant (par défaut: toutes).

Exécutons la page pour voir ce que cela donne :

 Pour cela il suffit de cliquer sur le bouton "Flèche verte et Page" dans la barre de bouton contextuelle :

Et voilà :

Bon nous verrons que nous pouvons améliorer ce résultat en jouant sur le style et autres...