Mafyou's blog - Proud to be human


by Mafyou

Binding WP7

Bonsoir!

Aujourd’hui, on va parler de binding Windows Phone 7!

Bon, de base, il faut installer, Visual Studio ou la verision gratos Express, les outils de développement Windows Phone 7, et pour les plus chanceux (étudiants principalement) créer un compte AppHub gratuitement, sinon 99$ l’année afin de pouvoir publier des applications!

Alors, pour ce qui est de qu’est qu’on va faire:

  1. Créer une application Windows Phone 7.5 en MvvM
  2. Faire joujou avec le XAML
  3. Des notions de base du Binding en XAML pour le MvvM

Alors, on va commencer par télécharger (encore?!) l’outil pour développer proprement, et donc avoir une bonne architecture, Galasoft MvvM 🙂

Ensuite, une fois installé, vous allez tomber sur ça:

Création de projet Wp7 Mvvm

Création de projet Wp7 Mvvm

Donc c’est parti!! On créer notre projet, Hop hop, niquel on arrive sur notre application 🙂

Ya pu qu’à voir le XAML derrière… Ouvrez « MainPage.xaml » dans votre explorateur de solutions, et ensuite, voyez ceci:

Page de démarrage de projet Wp7 en XAML

Page de démarrage de projet Wp7 en XAML

La partie de gauche est l’émulateur Windows Phone, puis à droite le XAML!

Cherchez votre « boîte à outil » et ensuite faite du « Drag & Drop » sur votre émulateur des différents composant 🙂 Z’avez vu les différentes lignes de XAML qui s’ajoutent? Sympa hein 🙂 les contrôles ont un margin pour le placement, un nom histoire de les nommer, et un Style pour les stylisés, normal donc 🙂

Le souci maintenant, c’est que dans les bonnes pratiques, on ne met pas de code dans le barbare « Code-behind » car ce n’est pas bien.
=> Code-behind: Code derrière une Page Windows Phone (.NET plus généralement)
=> Pas bien: C’est simplement car si une équipe se met sur un projet, on veut que les choses soient bien « splitées »! Une personne qui s’occupe de la base de données, une autre des fonctions « prise de tête » et le dernier du Design de la page. Donc si on mélange le « prise de tête » avec la Design, cela pose beaucoup de problèmes! Et puis, vous verrez, c’est bien plus pratique 😉

Du coup, on va parler de la discussion entre la View et le Controleur ou plutôt ici, le ViewModel qui nous sert pour les fonctionnalités prise de tête (Appelée aussi fonction métier) qui vont intéragir entre la couche Model (de la base de donnée quoi) et le Design (la vue).

Dans le XAML, on va regarder la ligne qui a été ajouté grâce à Galasoft:

<TextBlock Text="{Binding Welcome}" Style="{StaticResource PhoneTextNormalStyle}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="40" />

Le petit et non des moindre :

Text="{Binding Welcome}"

Représente en fait une source de donnée.

Ok, mais vers quoi? Hé ben vers le Context de la page! Le Context de la page peut être compris comme une salle de cours et un prof: On va mettre ce prof là pour cette salle de cours là. On aura donc à avoir à parler au prof pour avoir nos réponses. On a donc à parler à notre Context pour avoir nos le résultat de notre propriété Bindée. Après cette métaphore…. 😛

Si on remonte un peu, on va voir notre Context qui a été automatiquement mis en place grâce à MvvM Galasoft:

DataContext="{Binding Main, Source={StaticResource Locator}}"

c’est la source de donnée, le Context ‘Locator‘, et la propriété utilisée sera « Main ».

Le locator sert à localiser tous nos ViewModel.

On a donc un notre propriété Main de type MainViewModel dans le ViewModelLocator. Alors, dans MainViewModel, on aura notre propriété tant attendu « Welcome »!!

Alors, pour résumer:

  1. On créer une vue
  2. On spécifie notre context par le biais de Datacontext
  3. On ajoute un contrôle et on met le Binding en place
  4. On instancie notre ViewModel dans le Locator
  5. On créer notre ou nos propriétés utilisées dans la vue!

 

Et voilà, un beau commencement d’une application 3 Tiers dans les règles!

Pour la suite, je pense parler des Command et de comment discuter entre ViewModel 🙂

Bonne journée!.