Voila une très bonne nouvelle qui va en réjouir plus d’un, et nous les premiers.

Apple à annoncé hier dans un communiqué de presse l’assouplissement de « toute restriction concernant les outils de développement utilisés pour créer les applications iOS« .

Autrement dit, la possibilité de créer des applications pour l’iOS en Flash et de les diffuser sur l’Appel Store est de nouveau d’actualité.

Il est toutefois préciser que ces applications ne pourront pas télécharger de code.

De plus, selon Adobe, la restriction de l’exécution des applications Flash dans le navigateur de l’iOS reste en place.

• us version

Je mettrai en ligne courant de l’été une première release de la librairie Tweened. Celle-ci contient notamment, des composants, des behaviors, un wrapper de tween (facilitant la conception d’animation par code) ainsi qu’un mini moteur 3D très simple d’utilisation. En voici un exemple concret accessible ici et téléchargeable là.
J’ai fais ce moteur avant tout pour des besoins personnels et afin de me remémorer les mathématiques projectives. Réinventer la poudre ne fais quelques fois pas de mal. L’idée est surtout de fournir une dll de moins de 40ko qui permet de faire de la 3D. Celle-ci sera utilisable pour les designers à travers Blend ou dans Visual Studio via C#.  Elle concentrera très vite toutes les fonctionnalités de base réellement utiles et que nous n’avons pas  actuellement via Blend : Caméra 3D, Container 3D, Scène 3D, détection des normales et z sorting intelligent (plus malin et performant que celui actuellement proposé dans Blend). J’y ajoute une classe utilitaire facilitant l’utilisation de mathématiques projectives.

Voilà ces composants :

1. Un conteneur de type Scene3D (hérite de Panel).
   Tous les objets placés en sont sein voient leur propriétés Projection native lockée. Ceux-ci peuvent utilisées les propriétés attachées suivantes :
   • Scene3D.LocalOffsetX
   • Scene3D.LocalOffsetY
   • Scene3D.LocalOffsetZ
   • Scene3D.GlobalOffsetX
   • Scene3D.GlobalOffsetY
   • Scene3D.GlobalOffsetZ
   • Scene3D.RotationX
   • Scene3D.RotationY
   • Scene3D.RotationZ

   Ils sont associés à une instance de type Element3D. Celle-ci est récupérable (lorsque l’événement StartUp de la scène 3d est diffusé) via une méthode d’extension ajoutées pour les instances d’UIElement (GetElement3D).

2. Une caméra associée au conteneur Scene3D. Celle-ci offre les propriétés suivantes :
   • FieldOfView
   • Plan de clipping proche : NearPlane
   • Plan de clipping éloigné : FarPlane
   • Point de fuite (XVanishingPoint, YVanishingPoint)
   • Déplacement (OffsetXCamera, OffsetYCamera, OffsetZCamera)
   • Rotation (RotateXCamera, RotateYCamera, RotateZCamera)

Détection du changement de direction de la normale (Backface culling) et du produit scalaire via les événements NormalDirectionChanged et DotProductChanged. Ces événements sont diffusés par les instances de type Element3D.

Je suis en cours de finition d’un algorithme de tri des profondeurs. Ce moteur devrait être assez optimisé car son rendu ne repose pas sur un DispatcherTimer. Deplus, le pipeline de rendu est assez optimisé car il n’est pas récursif par défaut. Lorsqu’un seul objet est modifié, ce dernier invoque en interne une méthode RenderElement. A contrario, lorsque la scène ou la caméra sont modifiées, il devient récursif et met à jour l’ensemble des objets de la scène… A bientôt donc pour la release finale de la librairie Tweened…

A l’issue des 24h, les équipes remettront leur projet et un jury se réunira pour designer l’application gagnante. Toutes les applications réalisées pendant le AIR Challenge pourront être téléchargées sur le site web pendant 30 jours. L’application qui aura été la plus téléchargée à l’issue de ce délai recevra le prix « choix du public ».

N’hésitez pas à voter pour votre équipe préférée !  Erick Ghaumez de La Fabrick, formateur chez Regart.net y participe, souhaitons-lui bonne chance

Alors rendez-vous le 18 juin à 15h !

La nouvelle version de la suite Expression Studio est dans les bacs ! Cette nouvelle release est déclinée en 3 versions :

• Expression Studio Ultimate
• Expression Studio Premium
• Expression Studio Web professional

La version Expression Web n’intègre pas le logiciel Expression Blend mais uniquement Expression Design, Web et Encoder. Si vos développements s’orientent vers Silverlight ou WPF, il vous faudra acquérir la version Premium ou Ultimate. Cette politique possède l’avantage de s’adapter aux petits budgets. Pour la version Ultimate uniquement, vous bénéficierez également de Expression Encoder Pro qui offre le support d’une plus grande variété de codecs en import comme en export. Celui-ci pourra notamment gérer de la diffusion de vidéos Smooth Streaming live ou l’encodage H.264 (la comparaison des features est ici). Autre changement de politique côté MSDN, concernant cette fois l’arrivée de numéros de série. Ceux-ci vous permettent d’installer la suite un nombre limité de fois. Il n’y a plus qu’à faire son choix…

Flash Player 10.1 RC7 continue de persévérer afin d’offrir un maximum de performances pour s’adapter au monde du mobile. Rappelons rapidement que Flash Player 10.1 apportera de nombreuses nouvelles fonctionnalités afin de répondre aux objectifs fixé par l’Open Screen Project initié par de nombreux constructeurs. Voici une liste non exhaustive des fonctionnalité les plus symboliques :

• Performances accrues. Orienté vers la mobilité avec plus de performances moins de consommation de ressources processeur et de mémoire.
• Gestion de l’utilisation des claviers physique de téléphone
• Support du Multi-touch et de la gestuelle
• Gestion de l’accéléromètre
• Support de l’orientation de l’écran
• Production de swf optimisé pour les mobiles
• Mode « veille »
• Support de l’accélération matérielle spécifique à la lecture de vidéos H.264. Les processeurs supportés sont les suivants : INTEL graphics HD  Broadcom ou cartes graphique ATI et Nvidia, ION compris. Cette accélération n’est aujourd’hui pas supportée sur MacOS mais uniquement par les systèmes windows (à partir de la version Windows XP)
• Cadence (frame rate) du player adaptative
• Gestion des erreurs globales
• Intégration aux navigateurs amélioré
• Mode vie privée du navigateur (desktop uniquement)
• Gestion avancé de la mémoire

Si vous souhaitez plus de précision sur toutes ces avancées, n’hésitez pas à consulter la liste exhaustive qui se trouve ici.

• us version

Blend 4 nous offre de nouvelles fonctionnalités et l’une d’entre elles est assez obscure de prime abord. Dorénavant, il est possible dans Expression Blend de créer des ressources uniquement utilisées au design time (au moment de la conception sous Blend ou Visual Studio). Le problème est assez banal, Il est souvent nécessaire d’affecter des ressources graphiques qui ne sont définies qu’à l’exécution. Du coup, dans l’espace de travail graphique, sous Visual Studio ou Blend, celles-ci  ne sont pas résolues puisque pas encore définies. Cela occasionne des erreurs d’accès et quelques problèmes d’affichage. Blend 4 permet maintenant de résoudre cette problématique mais la manière de procéder n’est pas très évidente. L’objectif est de créer un dictionnaire de ressource contenant une ressource ou plusieurs ressources que vous utiliserez uniquement au design time. Le première chose à faire consiste à créer un projet ainsi qu’une ressource contenue dans un dictionnaire de ressource. Un dégradé ou un solidColorBrush fera bien l’affaire (voir ci-dessous).

Ensuite supprimez le lien contenu par App.xaml, les ressources contenues sont désormais inaccessibles et vous obtenez des erreurs d’accès. Ce n’est pas grave, il vous faut passer par cette étape. Sauvegardez le projet puis ouvrez-le à nouveau sous Blend 4, vous obtenez une jolie boîte de dialogue vous indiquant si vous souhaitez créer un dictionnaire utilisable au design time (voir ci-dessous).

Pour finir, créez la ressource via C#, c’est cette dernière qui sera utilisée par Silverlight à l’exécution.

Au final vous obtenez deux rendus différents. Le premier concerne le design time, le second correspond au rendu final à l’exécution utilisant la ressource instanciée lors de l’initialisation Du coup, le designer est complètement autonomes. Au final, ce procédé n’est pas très orthodoxe mais il est très utile. Le principe ne repose sur rien d’autre qu’une compilation conditionnelle générée au niveau du projet(.csproj). Le code suivant :

<Page Include="Properties\DesignTimeResources.xaml">

 <Generator>MSBuild:Compile</Generator>
 <SubType>Designer</SubType>

 </Page>

est remplacé par celui-ci :

<Page Include="Properties\DesignTimeResources.xaml"

Condition="'$(DesignTime)'=='true'

OR ('$(SolutionPath)'!='' AND Exists('$(SolutionPath)')

AND '$(BuildingInsideVisualStudio)'!='true'

AND '$(BuildingInsideExpressionBlend)'!='true')">

 <Generator>MSBuild:Compile</Generator>
<SubType>Designer</SubType>
 <ContainsDesignTimeResources>true</ContainsDesignTimeResources>

 </Page>

L’avantage d’une RSL est le partage d’une même ressource de classes pour plusieurs applications ou modules SWF. L’application s’en trouve plus légère étant donné que la ressource est chargée dynamiquement au RunTime. Très utile aussi pour externaliser des Skins dans un SWF externe afin de pouvoir le changer sans recompiler l’application, simplement en changeant le SWF RSL.

Il est important de distinguer qu’il s’agit de classes chargées dynamiquement, donc, instanciables à volonté, par rapport à  simplement charger un SWF avec la classe Loader, car dans ce cas, seuls, les objets (instances) sont accessibles. Le chargement de SWF par [Embed] permets l’intsanciation à volonté, mais sera compilé avec l’application, donc non chargés dynamiquement au runtime.

Nous verrons également une alternative un peu plus contraignante mais n’utilisant pas le framework Flex exploitant les propriétés de linkage export/import d’origines de Flash.

Préparer un SWF RSL avec FlashDevelop ( SWC)

Afin de pouvoir utiliser une RSL sous FlashDevelop, il faut 2 fichiers! un SWF qui contient les classes qui seront chargées au runTime et son Clone sous forme de SWC qui fournira les références de ces classes à FlashDevelop afin qu’elles existent au moment du codage. (obligatoire pour l’intelliscence et le compilateur).

Nous verrons que le SWC nous fournit tout ça, étant donné qu’un SWC n’est rien d’autre qu’une archive (zip, rar, ..) contenant le SWF et un XML de références.

Sous FD, créez un nouveau « AS3 Empty Project ». Créez vos nouvelles classes publiques AS3 à l’aide de la commande « Add » du menu contextuel de la fenêtre Project, dans le répertoire src.

Pour l’exemple, je crée 2 classes, une MyRectangle et une MyRound qui sont de simples objets graphiques.

Exemple pour la classe MyRectancle:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

package
{
    import flash.display.Sprite;
    /**
    * ...
    * @author Alama
    */
 
    public class MyRectangle extends Sprite
    {
	public function MyRectangle()
	{
		graphics.beginFill(0xFF0000);
		graphics.drawRect(0, 0, 150, 100);
		graphics.endFill();
	}
    }
}

Une fois les classes terminées, il faut compiler le projet en SWC. Celà peut être fait simplement à l’aide du plugin SWC pour FD que l’on peut trouver ici: http://sourceforge.net/projects/exportswc/

On peut également le faire manuellement à l’aide du compilateur du flex SDK compc. voir les commande ici:
http://livedocs.adobe.com/flex/3/html/help.html?content=compilers_22.html

Préparer un SWF RSL avec Flash CS (création d’un SWC)

Dans un nouveau projet Flash, créez un symbole par élément (classe) qui sera désiré dans votre fichier partagé.

Le SWC que nous allons créer doit contenir toutes les classes des objets créés en bibliothèque. Donc, pour chaque symbole de la bibliothèque, il faut les exporter pour ActionScript. Il n’est pas obligatoire de les avoir sur la scène, uniquement en bibliothèque est suffisant. Mettez une majuscule à vos noms de symboles, car ce seront des classes.

Une fois tous les symboles créés, il suffit de publier votre projet Flash en cochant la case « Exporter SWC » de l’onglet Flash des Paramètres de publication.

Préparer et configurer FlashDevelop pour l’utilisation de Runtime Shared Libraries

Sous FD, créez un nouveau projet AS3.  Une des caractéristiques des RSLs est qu’elles ne sont normalement pas utilisables en AS3 pure! Du moins, à l’heure où ces lignes sont écrites, on peut supposer qu’Adobe changera ça prochainement. Il s’agit d’une fonctionnalité qui est prise en charge par Flex.  On peut contourner le problème en étendant notre Classe document en « SimpleApplication » Flex.

Pour ce faire, il est nécessaire d’utiliser la classe SimpleApplication de Flex. Il faut donc installer le fichier framework.swc dans notre projet (il se trouve dans le répertoire lib du framework Flex SDK). Je le place dans le répertoire « lib » mais ce n’est pas une obligation.

Ensuite, à l’aide du clic droit, il faut l’ajouter à la librairie de FD (« Add To Library »), comme représenté sur cette image:

Ensuite, nous avons besoin d’installer notre SWC créé précédemment de la même manière que nous avons installé le framework.swc. Mais nous avons également besoin d’installer le SWF correspondant au SWC dans le répertoire où s’éxécutera notre application (runtime), en l’occurrence ici, le répertoire « bin ».

Nous avons vu plus haut ce que contenait un SWC (SWF + XML). Donc, il faut ouvrir le SWC à l’aide d’un programme d’archives tel que WinRar. Extraire une copie du SWF (normalement appelé « library.swf ») et placer cette copie dans le répertoire « bin » de notre projet. En ouvrant l’arborescence de nos fichiers SWF et SWC de notre fenêtre Project, on voit qu’ils contiennent identiquement les mêmes classes.

Le SWC ne nous sert que de référence, il ne doit pas être compilé et inclus dans notre application finale, puisque les classes en questions seront chargée dynamiquement au runtime depuis le SWF RSL.

Pour éviter que ce SWC soit compilé, il faut l’exclure de la manière suivante : Clic droit >  Options > External Library.

On a presque fini! il ne nous reste plus qu’a informer le compilateur du fichier RSL à utiliser au runtime, grâce à cela, il ne cherchera pas les classes manquantes puisqu’on lui dit qu’elles seront chargées au runtime.

Pour ce faire, dans le menu principal de FalshDevelop il faut aller dans: Project > Properties > Compiler Options.

Dans « Additional Compiler Options », cliquez le bouton à l’extrême droite.

Dans la nouvelle fenêtre, il faut lui donner le chemin du fichier RSL. La 2 ème ligne sert a contourner une erreur de Sandox.  Comme ceci:

-rsl library.swf
-use-network=false

Voilà, notre système RSL est mis en place, nous sommes prêt à programmer notre application.

Rappel d’une chose ! La classe document doit absolument étendre SimpleApplication, donc elle aura ce look ci:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

package
{
	import flash.events.Event;
	import flash.system.Security;
	import mx.core.SimpleApplication;
 
	/**
	 * ...
	 * @author Alama
	 */
	public class Main extends SimpleApplication
	{
		public function Main():void
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
 
		private function init(e:Event = null):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
 
			// entry point
 
			var rect:MyRectangle = new MyRectangle;
			rect.y = 20; rect.x = 20;
			addChild(rect);
			var round:MyRound = new MyRound;
			round.y = 200; round.x = 70;
			addChild(round);
		}	
 
	}
 
}

L’implémentation d’un système RSL sous FlashDevelop est terminée.

.

.

Solution Alternative sans Flex

Une autre solution sans utiliser le framework Flex ni l’obligation d’étendre la Classe Document en SimpleApplication consiste à utilsier le système classique de Flash CS, c’est à dire, l’export/import liking et de l’utiliser dans FlashDevelop à l’aide de la balise [Embed].

!!! Cette solution est intéressante, mais est plus contraignante car il nous faudra un couple de SWFs par Classe !!!

Pour cela, nous avons absolument besoin de Flash. Nous devons créer 2 FLAs! Un pour l’Export qui sera le vrai Shared Library, car il contiendra les classes. Et un autre, qui servira de référence au premier par linkage. On pourrait tout faire dans le même FLA, mais par clarté, on en fait 2. Donc, Créons 2 répertoires, un appelé « share » et l’autre « links »

Création des Shared SWFs

Créez un FLA Sauvegardez le sous « share/shared_quelque_chose.fla ». Créez les symboles dont vous avez besoin.

Ensuite, nous devons  régler chaque symbole sur « Exporter.. » . Dans la bibliothèque, clic droit sur chaque symbole > « propriété » et cochez la case « Exporter pour le partage..« . L’URL n’est pas utile, si le nom de votre application se place automatiquement dedans, ça ne gênera pas. Comme ceci:

Une fois terminé, il reste à exporter chaque symbole en SWF séparés dans le répertoire share. A nouveau clic droit sur chaque symbole comme cette image:

Voilà, nos Shared SWFs sont à présent créés! (1 SWF par classe).

Création des SWFs de références (linked)

Tout en laissant ouvert le Shared..fla que nous venons de créer, créez un nouveau document et nommez le « Ref_links_quelque_chose.fla« , sauvegardez le dans le répertoire « links » Copier tous les symboles de la bibliothèque du FLA Share dans la bibliothèque du FLA links par la commande « copier/coller ».

Nous devons cette fois, régler les propriétés de chaque symbole de ce nouveau FLA sur « Importer pour le partage.. »

Attention!! ici, dans le champs « URL: » il faut impérativement donner le chemin du SHARED SWF auquel ce symbole sera lié!!

Donc, en mettant les mêmes noms que le SWF qui contient réellement les classes. comme ceci:

Pour terminer, exportez tous les symboles en SWF dans le répertoire « links« .

Utilisation des SWFs sous FlashDevelop

Créez un nouveau Project AS3, placez tous les SWFs du répertoire « links » dans le répertoire « lib » du projet et tous les SWFs du répertoire « share » dans le répertoire « bin » du projet.

Ajouter tous les SWFs de « lib » à la librairie de FD. (Clic droit > add to library). Ce n’est pas obligé dans ce cas ci, mais c’est mieux pour l’auto complétion.

A présent, vous pouvez Embeder vos SWF link (ceux du répertoire lib) dans votre code.   Vous pouvez cliquer droit dessus et faire « Insert Into Document ».

Une fois les swf embarqués et déclarés en tant que Class, vous pouvez les instancier comme n’importe quelle autre classe.

Voici un exemple d’utilisation:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

package
{
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
 
	/**
	 * ...
	 * @author Alama
	 */
	public class Main extends Sprite
	{
		[Embed(source = '../lib/btn.swf')] public var Btn:Class;
		[Embed(source = '../lib/round.swf')] private var Round:Class;
		[Embed(source = '../lib/ovale.swf')] private var Ovale:Class;
 
		public function Main():void
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
 
		private function init(e:Event = null):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point
 
			var btn:MovieClip = new Btn();
			btn.x = 50; btn.y = 50;
			addChild(btn);
 
			var round:MovieClip = new Round();
			round.x = 50; round.y = 150;
			addChild(round);
 
			var ovale:MovieClip = new Ovale();
			ovale.x = 50; ovale.y = 250;
			addChild(ovale);
 
		}
 
	}
 
}

this.tutorial.terminate( );

• us version

Je mets en ligne un nouveau plugin wordpress produit par Regart.net. Il s’agit d’un lecteur vidéo smooth streaming également capable de lire une vidéo standard au format wmv, ou mov, mp4 (lorsque la vidéo est encodée en H264). Il vous faudra tout de même héberger la vidéo sur un serveur IIS si vous souhaitez bénéficier du smooth streaming. Le configurer est relativement simple puisque nous fournissons une fenêtre d’administration côté WordPress. Celle-ci possède un aperçu du lecteur, la possibilité de modifier la couleur, l’url de la vidéo, la lecture automatique, les dimensions ainsi que la couleur de fond du player. Celui-ci vous avertit, lorsque la vidéo n’est pas hébergée sur votre serveur, des contrainte de sécurité que vous pourriez rencontrer (crossdomain.xml ou clientaccesspolicy.xml nécessaire et configuré).

J’ai réalisé la conception côté Silverlight mais je n’ai pas utilisé pour cela le player fourni par Microsoft. J’ai préféré utiliser la librairie SLExtensions conçues par la société Ucaya spécialisée dans la conception de ce type de lecteur. Par le passé, Ucaya a réalisé les players du « Tour de France », « Rolland Garros », « France Télévision » et j’en passe. Quels sont les avantages me direz-vous ? C’est tout simple. Tout d’abord les fonctionnalités apportée par la librairie sont ultra complètes. De plus, celle-ci offre la possibilité de faire du Full MVVM, Du coup l’interface est entièrement Designable (bien mieux que skinnable). Pour finir, sa conception est assez fine car elle permet d’instancier un MediaElement ou l’équivalent pour le smooth streaming selon le type d’url que vous fournissez : ism et isml pour le smooth streaming et wmv, mov, mp4 (H264) pour les vidéos standards. Il est donc possible de faire un player à la carte et d’éviter l’arsenal fourni par la librairie SMF de Microsoft.

Ceux-ci sont directement issus de mon livre Pratique de Silverlight aux éditions Pearson. Vous pouvez consulter de nombreux schémas présent dans le livre sur le blog dédié.

Lundi 17 mai 2010 à partir de 13h30
AÉROCLUB DE FRANCE 6 rue Galilée Paris 16e

À l’occasion de la sortie d’Adobe Creative Suite 5, venez découvrir Flash Catalyst CS5, Flash Professional CS5, Flash Builder 4 et Flex 4.
Au cours de cet après midi, nous reviendrons sur les nouveautés majeures des outils de la Creative Suite 5 et de Flex 4 pour les designers interactifs, les web designers et les développeurs d’applications.

Programme de la journée :

13h30 à 14h00 – Accueil

14h00 à 15h30 – SESSION PLÉNIÈRE : Nouveautés de
Flash Pro CS5, Flash Catalyst CS5 & Flash Builder 4.

15h45 à 17h00 – Un atelier au choix :

A	Flex 4 : skinning avancé de composants avec Spark
B	Flash Builder 4 & PhP (Zend & Adobe)
C	Animation, création, développement, travail en équipe, découvrez toutes les nouveautés de Flash CS5

17h30 à 19h00 – SESSION PLÉNIÈRE :
Adobe et le développement d’applications sur mobiles.
Optimiser du code ActionScript 3.
Update sur le Flash Player 10.1.
Adobe et le multi-touch.

• us version

Silverlight 4 et Blend 4 RC sont à peine sortis que l’on voit déjà tous les bénéfices apportés par ces derniers. Deux nouveautés ont retenues mon attention, l’amélioration du système de liaisons et le modèle de conception MVVM complètement géré dans Silverlight 4 via l’implémentation des commandes. L’objectif de cet article est de vous familiariser avec l’implémentation du modèle de conception MVVM (Modèle, Vue, Vue-Modèle) dans Silverlight 4 et de mettre en valeur les avantages apportés par le système de liaisons.

I – Un mot sur le nouveau système de liaison

Comme vous le savez sans doute, il est désormais possible de créer des liaisons de données entre différentes instances de DependencyObject. Auparavant, il était simplement impossible de créer une liaison de données lorsque vos objets n’héritaient pas de FrameworkElement. Dorénavant, tout ou presque est « bindable » et c’est tant mieux. Nous pouvons donc créer une liaison entre la rotation d’un RenderTransform et la propriété Value d’un Slider. Cet exemple est peut-être utile en matière de design mais pas vraiment pertinent pour un développeur. Nous montrerons donc plus loin les avantages de cette amélioration dans le cadre MVVM.

II – Avant-propos

Sachez tout d’abord qu’il y a de nombreuses interprétations du modèle de conception MVVM, cet article ne reflète que ma propre vision de ce pattern. C’est en partie pour cette raison que le type de projet MVVM « Silverlight MVVM Application » que l’on pouvait générer dans Blend 4 bêta a été renommé Silverlight Databound Application dans la version RC. Cela permet de ne pas figer MVVM à une seule interprétation et en même temps de dépasser le cadre de ce type de développement.

III – Introduction à MVVM

MVVM est un principe de conception et d’organisation qui sépare le développement d’applications RIA en trois catégories : Modèle, Vue et Vue-Modèle. De cette manière, le code et le design d’une application sont totalement découplés et il est plus facile de les faire évoluer. Concrètement le développeur mettra à disposition du designer des appels de méthodes dans Vue-Modèle qui seront  très simple à appliquer sur des composants présents dans la vue.

L’avantage direct de cette méthodologie est de libérer le designer de toute contraintes en matière de design. Il ne se contentera pas de modifier l’aspect visuel de contrôles déjà choisis au préalable. Il pourra, au contraire, définir librement le type de contrôles, leur nom, les transitions sans avoir à se préoccuper des détails de l’implémentation.

Nous verrons un exemple concret de ce concept.

1 – Qu’est-ce qu’une vue ?

Pour faire simple une vue correspond à une interface visuelle dédiée aux interactions utilisateurs. Autrement dit, c’est là que vont agir les utilisateurs, celles-ci sont constituées de trois types de choses :

• Un arbre visuel et logique composé d’instances d’UIElement.
• Des transitions et des animations.
• Des comportements logiques permettant, par exemple, de piloter animations et transitions.

2 – Une vue doit-elle contenir de la logique ?

Ici 90% des développeurs disent non. Pour ma part, je pense qu’une vue doit contenir sa propre logique permettant de gérer ses animations et ses transitions. Dans la majorité des cas, ces tâches ne sont pas gérées par la création de code C# mais par l’utilisation de comportements (behaviors). Ainsi, il n’y a nullement besoin de code C# car les comportements répondent pleinement à cette problématique. Toute la difficulté de conception provient souvent du couplage possible existant entre la gestion des données et l’affichage. Les comportements ont également pour but de répondre à cette problématique. Ceux-ci sont donc déterminants lorsque vous concevez en mode MVVM.

3 – Qu’est-ce que le Modèle ?

Pour faire simple, le modèle contient les données, les mets à disposition. Le modèle gère également toute les appels distants ou opérations permettant les opérations CRUD (Create, Read, Update, Delete). Les développeurs utilisent souvent une classe statique afin d’y accéder simplement. Le modèle peut diffuser des événements si besoin pour indiquer l’état de chaque opération. Vous trouverez quelques développeurs qui verront modèle uniquement comme espace de stockage.

4 – Qu’est-ce que Vue-Modèle ?

C’est là le cœur du modèle de conception MVVM. Pour faire simple, Vue-Modèle est une abstraction de la vue d’un point de vue Modèle. Autrement dit, Vue-Modèle gère la liaison entre les données contenues dans le modèle et leur affichage dans la Vue. C’est donc l’intermédiaire entre Vue et Modèle.

On m’a récemment posé la question :

doit-on partir de Vue-Modèle ou doit concevoir d’abord la vue puis Vue-Modèle ?

Il n’y a pas de réponse simple à cette question. Cela dépend avant tout de votre métier et vers quel type de qualité vous souhaitez tirer l’application. Souhaitez-vous obtenir une forte interactivité graphique ou une architecture propre et efficace avec un maximum de performance ? Certains pensent que les deux sont possibles mais là encore il ne faut pas se leurrer, si l’un n’impactait pas l’autre nous n’aurions qu’un seul type de projet nommé Databound Application. Plus le graphisme et les interactions sont contraignantes, plus il est difficile de fournir une architecture propre et performante en conservant les mêmes délais. Toutefois, lors de la conception d’une application, il est vivement conseillé de partir d’un prototype. La vue est ce qu’il y a de plus concret pour votre client et pour vous en tant que développeur. C’est dans la vue que sont susceptibles de s’opérer de grande modification car c’est ce que le client souhaite mettre à disposition des utilisateurs. Ce ne serait pas forcément le discours d’un spécialiste SQL mais le client n’est pas là pour comprendre des schémas de Base de donnée. Dans le cas d’applications très standards comme un lecteur Vidéo, par exemple, il est possible de concevoir Modèle-Vue en premier car les opérations que souhaite réaliser l’utilisateur seront toujours les mêmes (Lecture, Stoppe, Pause, ect…). L’abstraction des commandes est, dans ce cas, très prévisible. Nous reviendrons sur la notion de commandes plus tard.

5 – Vue-Modèle doit-il gérer les animations et les transitions ?

Si l’on reprend la définition de base (Vue-Modèle est une abstraction de la vue d’un point de vue Modèle), Vue-Modèle ne doit pas gérer les animations directement mais notifier la vue par n’importe quel moyen (propre et efficace) afin que celle-ci déclenche transitions et animations. Encore une fois, les comportements vont grandement nous aider dans cette tâche. Toutefois, dans le cas d’animations créées dynamiquement ou dans certaines problématiques, il arrive que l’on soit obliger de gérer les animations dans Vue-Modèle. Il faudra dans ce cas créer une classe de gestion dédiée ou utiliser des propriétés de dépendances attachées. Tant que possible et contrairement à la croyance répandues, les vues contiennent la logique permettant l’affichage des transitions et animations, c’est à ça que sert le code behind du UserControl Vue. Les comportements ne sont rien d’autres que du code logique placés dans l’arbre visuel et logique. Il n’héritent pas de UIElement mais de DependencyObject. Par défaut, le développeur n’a pas à assurer cette gestion, cela est du ressort du designer interactif dans le meilleur des cas. Cela peut toutefois être remis en cause lorsque vous rencontrez certaines problématiques de conception.

6 – Le tout MVVM ?

La grande question, est-ce que vous devez toujours tout concevoir en MVVM ? La réponse est non. Voici mes arguments:

• Si c’était le cas on aurait pas différents types de projets.
• Utiliser un seul modèle de conception est une pratique extrémiste qui ne répond pas toujours aux contraintes de temps imparties.
• Selon la taille de vos projets et vos besoins en matière d’évolution et de changements, il n’est pas forcément utile d’utiliser MVVM car cela peut par certains côtés ajouter une touche de complexité. Par exemple, lorsque vous essaierez de créer des liaisons de données entre des collections d’objet présent dans la vue et des collections contenues dans Vue-Modèle.
• Faire du Full MVVM relève avant tout du dogme, c’est comme si vous ne cuisiniez que des plats italiens. En bref vous passez à côté de la cuisine française, indienne, etc…
• Plus le design et ses contraintes sont importants, plus il sera difficile de normaliser le développement. C’est l’éternel problématique du développement informatique. Le design et le développement représentent deux facettes de la production qui se lancent des défis en permanence. Pour vous en convaincre, essayez de penser le site suivant en MVVM pour toutes les pages :: www.experience159.com
  

7 – Schéma récapitulatif

Voici un schéma simple reprenant une partie de ce que nous avons exposé :

Après cette brève introduction, nous allons nous plonger dans la conception d’une application complète en MVVM.

IV – Un diaporama MVVM côté Vue

Téléchargez le projet GalleryMVVM_base. Ce projet est créé sur le modèle Silverlight Databound Application.Vous remarquez tout d’abord que MainPage.xaml contient une vue formalisée par un UserControl nommé GalleryView. On peut donc envisager MainPage comme un conteneur d’agencement des vues. Un répertoire contient les UserControl symbolisant la partie Vue, un autre contient les classes correspondant à Vue-Modèle, le dernier contient toutes les classes côté Modèle gérant l’accès aux données (voir Figure ci-dessous).

Dans GalleryView.xaml, tous nos objets sont déjà créés et designés, ce travail peut être réalisé indépendamment du développement côté C#. On considère que le développeur et le designer se sont mis d’accord sur un certain nombre de fonctionnalités listés ci-dessous :

• Afficher / cacher l’objet interactif (bouton par exemple) Image Précédente / Image Suivante
• Charger Image suivante / précédente
• Récupérer l’ImageBrush de la nouvelle et de l’ancienne image chargées (cela permet de créer des transitions)
• Afficher la pagination
• Afficher la description, le titre et l’url de l’image en cours
• Naviguer vers l’état « chargement en cours » ou l’état « chargement terminé »
• Afficher la barre de progression

Le développeur et le designer ont donc élaboré chacun de leur côté une partie du projet. Le design étant finalisé, il nous faut maintenant récupérer l’abstraction Vue-Modèle, nommée GalleryViewModel, comme contexte de données de la vue. Nous reviendrons plus tard au code de GalleryViewModel. Ajoutez l’espace de nom xmlns:local= »clr-namespace:GalleryMVVM », au sein du UserControl racine de GalleryView. Nous allons déclarer une nouvelle ressource de type GalleryViewModel comme montré ci-dessous :

Compilez l’application si besoin par un ctrl+maj+b, maintenant que nous avons instancié la Vue-Modèle comme ressource, nous pouvons facilement la définir comme contexte de données de la grille LayoutRoot comme montré ci-dessous.

Cela n’est pas suffisant, le mieux est de créer une liaison de données car cela permet de mettre à jour la Vue quand Vue-Modèle change, et inversement ( avec liaison à deux voies). Nous remplaçons cette expression

par celle-là :

Rendez-vous maintenant dans le panneau Data, conservez LayoutRoot sélectionné et dépliez Data Context. Vous obtenez une liste de propriétés et de commandes correspondant au cahier des charges établi entre développeur et designer (voir ci-dessous).

Du côté de la vue le tour est joué, il suffit de glisser déposer, les propriétés et les commandes sur les objets de l’arbre visuel et logique. Il est également possible de procéder via l’utilisation du menu DataBinding obtenu lorsque vous cliquez sur l’icône carré présente à droite de chaque propriété d’objet.

Vous pouvez faire un simple test en glissant déposant les commandes DisplayNextPicture et DisplayPreviousPicture sur les boutons et établir une liaison entre le remplissage du Rectangle nommé  newBitmap et la propriété NewPictureIB de la Vue-Modèle. Comme vous le constater, le diaporama est entièrement designable, autrement dit, le graphiste peut choisir librement le type, l’agencement, le nom des composants ainsi que les états visuels qu’il souhaite activer. Pour glisser déposer les propriétés de la Vue-Modèle en choisissant la propriété ciblée, il suffit d’appuyer sur la touche alt en même temps que le glisser-déposer.

V – Gérer les transitions

Le nouveau système de liaison apporté par Silverlight 4 nous donne pas mal de souplesse lorsque l’on développe un projet en suivant ce modèle de conception. Dans ce mode de conception, on essaie de limiter au maximum le code logique de chaque vue, il est donc assez pratique d’utiliser des comportements au sein de Blend pour gérer les transitions et les animations. Nous allons utiliser le nouveau système de liaison basé applicable à l’ensemble des instances de type DependencyObject pour gérer nos comportements interactifs.

1 – Déclencher les transitions

C’est une des problématiques majeures lorsque l’on évoque MVVM. En premier lieu, Microsoft propose un comportement interactif nommé DataStateBehavior qui facilite cette gestion. Vous pouvez le déposer sur LayoutRoot, celui-ci est capable de déclencher une transition selon la valeur d’une propriété de Vue-Modèle. Dans notre cas, il s’agit de la propriété IsLoaded qui a pour valeur false lorsque la nouvelle image est en cours de chargement, et true lorsque celle-ci est chargée. La figure ci-dessous affiche le paramétrage du comportement.

Concrètement, il suffit de créer une liaison entre la propriété Binding du comportement et la propriété IsLoaded de la Vue-Modèle. Lorsque la valeur attendue est égale à True alors on affiche l’état visuel Completed sinon on affiche l’état visuel Loading. Cela peut sembler étrange de mettre un T majuscule, toutefois la propriété Value est typée Object. Ainsi, bien que IsLoaded soit de type boolean, c’est sa représentation sous forme de chaîne de caractère qui est comparée par appel implicite de la méthode ToString(). Cette méthodologie a pour avantage de laisser au designer le soin de déclencher les transitions simplement.

2 – activer ou désactiver un comportement interactif

Dans Silverlight 3, il n’était pas possible de lier une propriété de comportement, comme IsEnabled à une propriété de la Vue-Modèle. Même si cette dernière implémentait INotifyPropertyChanged, la propriété IsEnabled n’était pas « bindable » car les comportements n’héritaient pas de FrameworkElement mais de DependencyObject. Avec le nouveau systèmes c’est désormais chose possible. Placez deux instances du comportement GotoStateAction sur chacun des deux exemplaires de bouton. Lorsque la souris survolera l’un ou l’autre, nous naviguerons vers l’état visuel RightButtonMouseOver ou LeftButtonMouseOver. Lorsque la souris quittera le survol de l’objet, nous afficherons l’état DefaultMouseLeave. La figure ci-dessous Toutefois correspond au paramétrage du bouton de droite.

Jusque-là nous n’utilisons pas le contexte de données de la Vue-Modèle mais nous allons y remédier. Dans le scénario de base développeur et designer sont partis du principe que l’affichage d’une pagination (par exemple : image 1/6) n’est pas toujours de mise. Ainsi, cette navigation ne sera possible que dans le cas ou l’affichage de la pagination est prévue par Vue-Modèle. C’est le cas lorsque la propriété DisplayPageNumbers (de GalleryViewModel) est à true. il suffit donc d’établir une liaison de données entre IsEnabled du comportement et DisplayPageNumbers. Voici le code XAML correspondant :

Le code est assez simple à comprendre :

• La visibilité du bouton est liée à RightArrowVisibility de GalleryViewModel.
• Le texte, affiché via la propriété Content, est lié à la propriété Paging de GalleryViewModel.
• Très important, toutes les instances héritant du type ButtonBase implémentent, depuis Silverlight 4, le commanding via la propriété Command. Celle-ci permet d’exécuter des commandes (des actions de ViewModel). L’événement Click provoque l’exécution de la commande. Pour tout autre type d’événements que Click, vous pouvez utiliser le comportement nommé InvokeCommandAction.
• Pour finir, les comportements de navigation sont activés ou désactivés par la propriété DisplayPageNumbers de GalleryViewModel.

VI – le Diaporama côté Vue-Model

Concernant Vue-Modèle, le développeur est sur des rails. Le code est standard et les étape sont toujours les mêmes :

• Il est assez pratique de créer une classe de base dont toutes les classes de type Vue-Modèle hériteront. Vous pouvez l’appeler ViewModel ou ViewModelBase.
• Cette classe doit implémenter deux interfaces : INotifyPropertyChanged et IDataErrorInfo. INotifyPropertyChanged permet de notifier la vue de tout changement de propriété. Cela permet d’utiliser le mécanisme de créer des liaisons de données qui seront rafraichies lorsque les propriétés de Vue-Modèle seront mise à jour. IDataErrorInfo est une nouvelle interface fournie par Microsoft qui permet aux vues d’afficher les erreurs levées lors d’une mauvaise affectation. Concrètement, cela est particulièrement utile lors de liaisons de données à deux voies. Dans notre cas, l’intérêt est moindre car la vue n’a pas de raison de modifier les propriétés de Vue-Modèle. Dans le cas d’un formulaire IDataErrorInfo est obligatoire car bien plus pratique à utiliser qu’une levée d’exception (via l’instruction Throw new Exception). Je vous renvoie à l’article de John Papa concernant l’implémentation de IDataErrorInfo.
• Il est nécessaire de créer des propriétés qui seront accessibles directement depuis la vue
• Pour finir, nous devons créer des commandes qui seront exécutées depuis la Vue. L’implémentation des commandes est également couvert par un article de John Papa que vous trouverez ici. Concrètement, il propose de créer une classe abstraite nommée DelegateCommand qui facilitera l’instanciation de ces dernières dans Vue-Modèle. Normalement, une commande correspond à un type d’objet mais cela peut-être éviter grâce à la délégation.

1 – Les propriétés accessible au sein de la vue « Bindable »

Pour qu’une propriété soit accessible depuis la vue, elle doit utiliser l’accesseur public. De plus, dans l’optique où celle-ci utilise le système de liaison classique, elle doit notifier la vue lorsque qu’elle est modifiée. Pour cela, il suffit d’utiliser la méthode NotifyPropertyChanged héritée de la classe ViewModel, implémentant INotifyPropertyChanged. Voici un exemple pour la propriété exemple

2 – les commandes

Les commandes doivent toujours faire référence à une méthode ainsi qu’à une valeur booléenne qui indique si la commande doit-être exécutée. Voici le code C# correspondant aux commandes DisplayNextPicture et DisplayPreviousPicture :

Rien de bien compliqué, la propriété Index est affectée d’une nouvelle valeur, et notifie la vue de ce changement via le mécanisme héritée de INotifyPropertyChanged. La méthode CanDisplayPictures renvoie systématiquement true ce qui n’est pas l’idéal, vous pourrez faire certains tests à ce niveau. C’est ce que je fais pour la commande LoadAllPicture qui prend en deuxième paramètre de son constructeur le booléen renvoyé par CanLoadAllPictures :

VII – l’application finale

Elle est visible à cette adresse : http://www.tweened.org/wp-content/uploads/applis/diaporamaMVVM/.

Le projet ainsi que les sources complètes sont quant à eux téléchargeables ici : http://www.tweened.org/wp-content/uploads/applis/GalleryMVVM.zip.