Générer des données dans Blend

Tags:
oct 23, 2012 3:02 pm by Julien

Il arrive parfois de vouloir commencer par son design plutot que d'écrire son code, le problème c'est qu'on a pas de jeu de données qui nous permettent de voir le résultat directement. De plus, si la vue et le code ont un couplage fort, cela rend vite la tache fastidieuse et au final, on perd plus de temps qu'autre chose.

En séparant la vue et le code(MVVM) et en utilisant Blend, on arrive rapidement a générer un jeu de données permettant de créer son interface avec un couplage tres faible au jeu de données. Lors de l'implementation du code il faudra juste binder le bon DataContext.

Comment cela se passe t'il ? La méthode est très simple. Commencez par créer un projet sous Blend. (Notre projet sera de créer un jeu de données pour une liste de livres)

Ensuite dans le panneau de droite, sur l'onglet Data, ajoutez une Data Source :
 

Nommez la Books par exemple :
 

A ce stade la, vous devriez voir apparaitre votre source de données avec 2 propriétés.
Supprimez les, et rajoutez 3 propriétés simples :

  • Title : Représente le titre de notre livres
  • Author : Représente l'autheur de notre livre
  • Cover : Représente l'image de couverture du livre

Une fois ajoutées, cliquez sur Editer les données :
 

Sur l'écran suivant, on va pouvoir paramétrer le nombre d'items dans notre collection et les types des proprietés:
 

Dans notre cas , on va choisir de générer 5 Items et on va spécifier que :

  • Author est de type string avec un format Name
  • Title est de type string avec un format lorem ipsum (2 mots max et 8 char max)
  • Cover est de type image avec le path du dossier contenant nos images

Jusqu'a présent, on a pas touché la vue encore, et c'est la que la magie de blend rentre en jeu c'est qu'avec juste un drag'n drop, il va nous générer nos éléments d'interfaces correctement binder à notre Data Source !
Pour cela, prenez votre collection présente dans le Data Source et déplacez la sur notre interface, Blend vous propose de créer les éléments et de les binder ! Et hop, en 5 mn, tout est prêt et on peut commencer son boulot de designer :)
 

Après avoir édité l'ItemTemplate on arrive au résultat suivant :
 

Personnellement, je trouve cette fonctionnalité forte utile, ca permet de designer des interfaces assez rapidement !

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading