Dot.Blog

C#, XAML, Xamarin, UWP/Android/iOS

10 bonnes raisons de choisir WPF (nouvel article à télécharger)

WPF cet inconnu... Alors que cette technologie est disponible depuis deux ans elle semble peiner à s'imposer parmi les développeurs. Je me suis demandé pourquoi et je crois que WPF paye un peu son image du "tout graphique hyper looké de la mort", des démos où l'on voit des vidéos danser en l'air sous forme de carrousel, de pages qui se plient comme un livre pour passer d'une fiche à l'autre et autres débauches d'effets spéciaux.

En réalité le développeur "moyen" ne s'y retrouve pas. L'image renvoyée ressemble plus à celle du jeu vidéo qu'à de l'informatique de gestion qui fait le gros des applications "de tous les jours".

Je ne blâme pas ceux qui, par trop enthousiastes, ont pêché par excès en créant et en montrant de telles démonstrations. Après tout lorsqu'une nouvelle technologie vient de sortir on a par force envie de faire voir ce qu'elle sait faire de mieux, c'est naturel. Non, je pense plutôt que c'est sur le plan psychologique que l'erreur a été commise, la même que pour Vista d'ailleurs. Un décalage trop fort, trop rapide, avec une devanture trop graphique qui a fait oublier que derrière tout cela il y a une vraie révolution technique, de vraies avancées.

J'ai donc eu envie d'écrire un article qui montre les grands points forts de WPF et surtout pourquoi cette technologie est de loin supérieure à toutes les autres, dont les Windows Forms encore trop utilisées alors qu'elles se fondent sur des mécanismes interactifs dépassés déjà en place du temps de Delphi 1 Win32 ! Il y a presque 15 ans...

Choisir 10 bonnes raisons d'utiliser WPF a quelque chose d'arbitaire. Mais ce n'est pas grave, cet article se destine à tous ceux qui ne savent pas encore que WPF est parfaitement taillé pour faire des applications "normales", à tous ceux qui pensent que ce n'est "pas fait pour eux" ou pour le style de programme qu'ils écrivent. Il s'adresse aussi à tous ceux qui ont envie de savoir quels sont les points forts de WPF, les nouveaux mécanismes et la nouvelle façon de penser les interfaces.

En un peu plus de 40 pages, ce qui est beaucoup pour un simple article, inutile d'attendre un tour d'horizon complet et ultra technique de WPF, le moindre livre sur la question compte 20 fois plus de pages... Mais si vous voulez rapidement faire un point sérieux sur WPF qui ne soit pas qu'un simple survol, si vous voulez voir du code mais trop, alors cet article est fait pour vous.

Pour le téléchargement (PDF + code source), suivez le lien : 10 bonnes raisons de choisir WPF.

A lire aussi un billet plus récent "9 raisons de plus de choisir WPF"

A voir : Une application exemple sous Silverlight 2.0 

Bonne lecture

Et Stay Tuned !

Quels outils et quelle chaîne graphique pour WPF et Silverlight ?

WPF, Silverlight, 2D, 3D, le monde des nouvelles interfaces desktop et Web réclame désormais de fortes compétences en infographie. S'il semble évident que la présence d'un graphiste soit devenue indispensable en phase de conception des interfaces, savoir quels outils utiliser est en soi déjà un parcours du combattant !

Pour e-naxos je forme une infographiste afin d'offrir très prochainement un service de design pour les applications WPF et Silverlight. Avant de former, il faut savoir de quoi on parle, c'est toute la difficulté pour un bon formateur : avoir la connaissance "livresque" mais surtout la connaissance pratique.

Cela fait donc de long mois que je m'entraîne. je n'ai pas forcément beaucoup évolué niveau dessin, je ne serai jamais Dali ni Da Vinci, je m'y suis fait depuis mes premiers essais en maternelle, et même si les courbes de bézier et autres splines n'ont plus beaucoup de secret, l'investigation en monde 3D n'a pas été un chemin de santé !

Bref, pour produire une application "graphisée" c'est beaucoup plus simple à dire qu'à faire, je peux vous l'assurer ! Gérer un ou plusieurs graphistes, leur faire comprendre ce qu'est une application, la différence entre une listbox et un combobox n'est pas forcément non plus la chose la plus simple. Et pourtant, c'est essentiel. Depuis des mois j'engrange donc une expérience à la fois nouvelle et exitante, car ce qui se profile est l'avènement de nouveaux logiciels conçus autrement. Et j'aime le changement.

Je ne vais pas ici vous détailler l'ensemble du processus de création d'une application WPF ou Silverlight, mais vous proposer un petit tour dans les outils qui peuvent (et doivent) être utilisés pour produire une logiciel designé.

Tour d'horizon des outils

Un dessin valant mieux qu'un long discours, regardons d'abord ce "petit" diagramme que j'ai fait rapidement sur la base de mon expérience :

 

Pour voir l'image en 100% téléchargez-la : 2D3DProduction.png (43,20 kb)

J'ai testé tous les chemins dessinés et tous les softs présentés et même bien plus... Ce qui reste sur ce diagramme sont les principaux chemins que peut prendre un objet graphique et les principaux softs qu'il faut connaître et maîtriser pour produire une solution professionnelle. Certaines personne se limiteront à des portions du diagramme, ce qui reste possible, mais seule la connaissance de la totalité des logiciels et chemins de celui-ci permet de "tout" faire.

Partons de la fin

A l'arrivée nous désirons obtenir une application WPF ou Silverlight. Sous WPF nous avons besoin de composants templatés, d'image PNG ou Jpeg et d'objets visuels en 2D ou 3D. Pour Silverlight nous avons les mêmes besoins sauf en ce qui concerne la 3D qui ne sera supportée que dans Silverlight 3 en 2009.

Chaque éléments graphique impose certains chemins incontournables:

Par exemple, Silverlight gère très bien les objets 2D créé par Expression Design, mais les effets de Expression Design ne sont pas gérés, comme le Drop Shadow. Moralité, un objet 2D créé en Xaml avec E.Design ne peut être utilisé tel quel sous Silverlight, il faudra le transformer en PNG. Sous WPF il est possible d'ajouter des effets comme le Drop Shadow et il sera donc possible d'exploiter directement l'objet 2D Xaml. Objet Xaml ou PNG on voit tout de suite que les chemins de production diffèrent légèrement et que les possibilités pour le développeurs seront très différentes...

Pour produire des objets 3D il y a un goulot d'étranglement : aucun outil Microsoft ne produit d'objets 3D. Le seul logiciel qui permet de faire cela est Zam 3D d'Electric Rain. Il est plutôt agréable à utiliser et pas très cher (environ 200 euros avec le change actuel du dollar). Seulement voilà, parfois vous avez envie d'utiliser un objet 3D un peu compliqué ou mis en scène. Et chez Electric Rain ils sont malins, ou un peu mesquin au choix, et Zam 3D ne possède pas de moteur de rendu ! Il est juste capable de sortir du code Xaml. Et si vous voulez créer un PNG d'un objet 3D ? Pas de solution sauf à acquérir en plus Swift 3D du même éditeur qui dispose d'un moteur de rendu (EMO) qui ne peut pas concurrencer les gros moteurs de ray tracing comme on en trouve sur 3DS Max ou Blender, mais on peut produire des images de belle qualité malgré tout.

On le voit le chemin se complique.. J'ai un objet 3D, pour une application WPF je vais le réutilisé directement, pour une application Silverlight je vais le "prendre en photo" en faisant un PNG, du coup j'ai besoin de Xam 3D pour créer l'objet 3D Xaml et de Swift 3D pour réimporter mon projet Xam 3D et utiliser le moteur de rendu pour créer le PNG ! Vous allez me dire autant acheter tout de suite Swift 3D ! Et bien non... Ce dernier a bien un mode d'export en Xaml mais c'est plutôt pour les animations comme en Flash, par exemple une animation de 20 images créera 20 fois l'objet Xaml sur 20 couches différentes dont l'opacité est à 0% et il y aura 20 timelime générée chacune s'activant à la suite de la précédente pour passer l'opacité de l'image numéro x à 100%. C'est un peu le principe d'animation des petits livres qu'on doit feuilleter à toute vitesse pour avoir l'impression d'un dessin animé.

Bien entendu en bout de course il faut avoir Expression Blend, c'est obligatoire. Et puis ensuite viennent Visual Studio ou Expression Web.

Produire des modèles 2D avec Expression Design c'est sympa, le soft est agréable. Mais il n'a pas le niveau d'un Illustrator CS. Si on veut créer une image 2D un peu "léchée" il faut donc posséder Illustrator CS. On exporte en Xaml directement grâce à un petit plugin gratuit, ou bien on importe le fichier AI dans Expression Design (le copier coller entre Illustrator et E.Design fonctionne aussi et c'est très pratique).

Pour produire de la 3D c'est un peu pareil... Swift 3D ou Xaml 3D sont bien sympathiques, mais le mesh editor est un peu limité, et dès qu'on entre dans l'animation on voit bien que ces logiciels sont parfaits pour produire des banners de pub à la Flash mais pas pour créer des séquences animées à la Maya !

Bref, pour de beaux objets 3D, le mieux est d'utiliser Blender (gratuit mais une vraie usine à gaz) ou 3DS Max, le meilleur que je connaisse et le plus agréable à utiliser. Un peu cher c'est tout. Surtout si on ajoute cela au budget de la quinzaine de logiciels présents sur mon diagramme !

Avec 3DS Max vous allez créer des objets 3D que vous sauvegarderez en format 3DS, pas au format Max ni Dxf ! Et oui.. Swift 3D et Xaml 3D ne savent importer que le format 3DS... Au passage vous perdrez certains éléments ou certaines textures. Rien ne sert donc de trop compliquer. Il faut finir le travail sous Xaml 3D pour être sûr que ce qui est fait est supporté par l'export 3D en Xaml.

Si vous voulez faire des animations, cela se corse ! On a vu que les animations Xaml produites par Swift 3D ne sont pas du Xaml 3D mais des séries de plans 2D en couche, en revanche Swift 3D sait produire des AVI, comme 3DS Max. Un petit AVI peut souvent être bien plus joli qu'une animation d'objets 3D faites à la main dans Expression Blend. Dans certain cas c'est donc une alternative intéressante.

Reste que l'AVI devra être encodé correctement. C'est là qu'intervient Expression Media Encoder. Il peut même produire une page Web avec lecteur Silverlight intégré. Cela est intéressant pour une longue séquence présentée comme un petit film.

Bien entendu qui dit petit film dit montage... Le montage peut être réalisé avec Windows Movie Maker, simple et gratuit. Mais simple... Il faudra certainement passer à Adobe Première pour produire un vrai petit film bien monté.

Qui dit film dit son. vous pouvez facilement prendre un MP3 et le coller dans le projet Movie Maker. Mais, droits de diffusion mis à part, cela va rester très sommaire.

Pour produire une bande son synchronisée avec les images je travaille personnellement avec Cubase. Les synthés et la musique c'est mon "vrai truc" c'est donc la partie que je préfère :-) Créer l'image puis créer le son pour cette dernière est une expérience vraiment intéressante. Si vous êtes musicien vous vous éclaterez dans cette phase ! Sinon, pensez à engager un compositeur (tarifs sur demande !).

Etc !

Je vais m'arrêter là, car il est impossible de décrire ici tous les chemins du diagrammes, toutes les justifications de prendre tel ou tel chemin pour tel ou tel résultat. Et puis c'est aussi la valeur ajoutée que je suis en train de créer pour E-naxos, j'aime partager, la preuve ce billet, mais je ne vais pas vous livrer plus d'un an d'expérimentation et d'expérience comme ça non plus :-)

J'espère en tout cas que ce petit tour d'horizon et le diagramme vous aideront à vous faire une idée du cycle de production d'interfaces professionnelles "graphisées". Si vous êtes développeur cela vous aidera à envisager votre collaboration avec des infographistes, et si vous êtes clients cela vous aidera à mieux comprendre le prix qui vous sera demandé ;-)

Dans tous les cas, bon voyage au pays des logiciels de la prochaine génération !

..Et Stay Tuned !

De la 3D pour Silverlight 3 !

On commence à avoir une petite idée de ce que va être Silverlight 3 qui sera diffusé l'année prochaine et il semble que nos attentes seront comblées...

Au menu, pour ce qui est révélé aujourd'hui :

  • Support étendu pour les médias de tout type notamment le H.264 video utilisé de plus en plus,
  • Grandes avancées en matière graphique avec notamment le support de la 3D et l'accélération matériel par accès automatique au GPU (comme WPF donc),
  • Avancées importantes côté développement avec notamment de nouveaux contrôles et un data-binding encore plus riche

C'est tout ce que l'on sait vraiment sur cette nouvelle version, mais déjà nos principales préoccupations semblent avoir été entendues. De la 3D comme WPF, accélération matérielle graphique comme WPF, et plus de contrôles que demande le peuple n'est ce pas...

Mais selon le billet de Scott Guthrie tout cela n'est qu'une petite partie des nouveautés... Scott est un vicieux, en disant cela notre attente devient un vrai suplice ! :-)

Autre grande nouvelle, Visual Studio et Visual Web Developper Express supporteront un designer interactif pour Silverlight autorisant l'édition complète des pages. Le data-binding sera lui aussi amélioré et disposera de commandes dans ces EDI pour simplifier son utilisation.

Tout ça est vraiment alléchant, vivement l'année prochaine !

Et pour des nouvelles fraîches : Stay Tuned !

Bonne nouvelle, Mise à jour en FR des outils Silverlight ! (et autres infos)

Silverlight, le truc le plus exitant avec LINQ dans toutes les technos MS du moment... La version 2.0 qui est sortie depuis quelques semaines est la première qui propose un CLR portable fonctionnant sous Mac ou Linux avec l'adoption de C# au lieu de JavaScript comme langage de programmation. Ce n'est pas la seule nouveauté de SL 2 (voir mes billets à ce sujet) mais c'est essentiel et c'est ce qui rend la V 2 réellement intéressante.

Les outils pour gérer SL 2.0 étaient déjà dispos depuis quelques temps mais en US seulement et les patches ne pouvaient pas passer sur les versions FR.

ça y est ! Microsoft de vient de mettre de ligne les outils SL 2 pour Visual Studio FR et aussi (et surtout) le SP1 de Blend 2 FR !

Si vous ne possédez pas Blend, achetez-le, c'est le seul vrai moyen de développer sérieusement sous WPF et Silverlight (en tandeme avec Visual Studio). Je vous conseille aussi au passage Expression Design (plus simple à prendre en main que Illustrator) ainsi que l'excellent Xaml 3D de Electric Rain (ou son grand frère Swift 3D), des softs de création 3D que j'adore (j'aurai des choses à vous montrer dans quelques temps). SL 2 ne gère pas encore la 3D come WPF mais il existe un projet CodePlex d'un tel moteur qui est pas mal avancé (projet Balder)

Pour ce qui est des Tools Visual Studio avec le SDK c'est ici : http://www.microsoft.com/downloads/details.aspx?displaylang=fr&FamilyID=c22d6a7b-546f-4407-8ef6-d60c8ee221ed

Pour la mise à jour de Blend 2 SP1 c'est ici : http://www.microsoft.com/downloads/details.aspx?displaylang=fr&FamilyID=eb9b5c48-ba2b-4c39-a1c3-135c60bbbe66

A noter que les outils SL 2 peuvent être installés sur VS Express Web Edition pour obenir une solution totalement gratuite de dev sous SL 2 !

Eclatez-vous bien avec Silverlight, et Stay Tuned !

Créer des documents XAML directement depuis Word 2007

XAML, le langage de description graphique de WPF et Silverlight, est un format XML offrant une grande souplesse pour représenter aussi bien des graphismes en 3D que des fenêtres Windows et leur contenu en passant par les animations, les sites Web ou les flux vidéo et j'en oublie des tonnes... Tout comme HTML il est possible de taper les balises à la main. C'est formateur mais peu productif !

Je me rappelle d'une époque où un "vrai" développeur Web, "un dur, un tatoué", se devait de développer tout un site en HTML uniquement avec le bloc-notes, se servir de DreamWeaver ou autres logiciels de mise en page dédié était un truc de fillette ("les durs, les tatoués" utilisent bien entendu d'autres mots qui tombent sous le coup de la censure anti homophobie...). On retrouve ce réflexe de geek autiste avec toute nouvelle technologie et certains aujourd'hui mettent un point d'honneur à faire une application Silverlight ou WPF en tapant tout le XAML à la main... Même si l'aspect formateur de la chose que je soulignai plus haut possède un certain attrait, cette démarche est loin d'être la plus productive. Il existe en effet des logiciels comme Expression Blend ou même VS 2008 qui offre une approche visuelle de XAML, ce qui est le minimum pour une technologie justement basée sur le visuel !

De fait, qu'il s'agisse d'une application Silverlight ou d'une application desktop WPF ou XBap, il arrive souvent qu'on ait du texte à présenter. Et quitte à écrire des tartines à l'écran, autant que cela soit gracieux...

C'est là que ça se complique... Car bien entendu ni Blend ni VS 2008 ne sont des traitements de texte...

On se demande alors s'il n'y aurait pas une façon élégante d'utiliser Word puis de récupérer le document en XAML, bout de code qu'il n'y aurait plus qu'à coller dans son application.

Si, c'est possible ! ((c) Hassan Céhef, Les Nuls).

En utilisant Word 2007 et le plugin Word 2007 XAML Generator dont le code binaire et le code source .NET sont téléchargeables ici.

Ce plugin pour Word 2007 est intéressant à plus d'une titre. Outre sa fonction première qui est bien utile, le code source illustre la façon d'écrire des plugins pour Word 2007 ce qui donnera peut-être des envies à certains d'entre vous !

Partons d'un document Word (on voit l'onglet XAML, non affiché sur cette capture, en fin de ligne de la barre d'outils) :

 

Une fois le plugin installé, en appelant le menu "enregistrer sous" nous trouvons une option "XAML" (je vous fait grâce de la copie d'écran de ce menu). Il n'y a plus qu'à donner un nom de fichier et à valider. Nous voici maintenant en possession d'une fichier XAML qui contient notre document Word sous la forme d'un FlowDocument si on a choisi une exportation WPF ou un TextbBlock pour Silverlight.

Pour visualiser le résultat rapidement je vous conseille l'excellent freeware Kaxaml. La capture ci-dessous montre dans sa partie supérieure le FlowDocument contenant notre document Word "xamelisé" et, dans sa partie inférieure, le code XAML créé par le plugin. Une fois ce dernier copié/collé dans votre application vous aurez l'assurance d'un visuel de grande qualité. Tout d'abord le texte sera contrôlé (orthographe et grammaire de Word) limitant les coquilles (pas comme sur ce blog pour lequel je n'ai pas de correcteur!), mais il disposera aussi d'une mise en page riche avec des styles cohérents. Enfin, sa représentation à l'écran sera conforme à l'idée qu'on se fait d'une texte propre et professionnel affiché par une application de type WPF ou Silverlight.  Que des avantages donc.

 

On notera que le plugin affiche aussi une barre d'outil dans Word 2007 permettant de régler certains paramètres et d'effectuer le choix entre une exportation WPF ou Silverlight (qui utilise un TextBlock au lieu d'un FlowDocument). La fonction de preview qui est aussi disponible dans la barre d'outils est particulièrement appréciable.

Voici le FlowDocument intégré dans une fenêtre WPF:

Savoir faire fonctionner tous les outils ensemble pour produire des applications riches est une grande force, disposer de petits logiciels ou plugins tels que Word 2007 XAML Generator permet de combler le gap entre certains de ces outils, de faire un pont. Un pont c'est bête, parfois juste une petite planche posée au-dessus d'une tranchée de chantier. Mais qu'est-ce que ça change la vie !

Bon Dev

... Et Stay Tuned !

Des outils simples et gratuits pour faire du XAML

Xaml est le langage de description utilisé par WPF et Silverlight. On peut créer du code Xaml en utilisant Expression Blend, Expression Design ou même Adobe Illustrator (à l'aide d'un petit plugin gratuit XamlExport). Bien entendu le code Xaml peut aussi être manipulé sous VS 2008 mais de façon sommaire.

Pour tester du code Xaml il s'avère souvent nécessaire, qu'on soit en phase d'apprentissage ou qu'on soit un expert, de pouvoir saisir ou modifier quelques lignes pour visualiser le résultat.

Pour cela il existe des "notepad" (bloc-notes).

XamlPad.exe

C'est le plus simple. Rudimentaire même. Il est fourni avec le SDK Windows. Pour info sur ma machine il se trouve dans "C:\Program Files\Microsoft SDKs\Windows\v6.0A\bin". Il dispose d'une page sur MSDN expliquant comment s'en servir. Il ne fait pas grand chose et il est préférable de se tourner vers des versions améliorées. 

XamlPadX

Cet outil est déjà plus évolué. On peut le télécharger sur le blog de Lester. La version actuelle est la 4.0 qui sait gérer les add-ins et possède quelques exemples "hard codés" qui permettent de rapidement tester l'outil. Le setup peut être téléchargé depuis le billet du blog de Lester.
Un petit détail : Avast détecte un Trojan générique lors du téléchargement et refuse d'enregistrer le fichier... Pour l'installer il faut couper Avast, télécharger l'exe, le lancer (c'est un setup) et un fois l'install terminée rétablir Avast. L'exécutable lui-même ne pose aucun problème, je suppose que c'est Avast qui doit prendre pour un Trojan une séquence du module d'installation.

 

Kaxaml

Cet autre outil offre des services similaires mais avec une philosophie légèrement différente. Difficile de dire s'il est meilleur que le précédent c'est à chacun de voir celui qui est le mieux adapté à ses besoins et à sa façon de travailler. Kaxaml dispose de sa propre page web d'où l'on peut télécharger soit la version 1.0 soit la bêta qui supporte Silverlight 2 b2.

 

Conclusion

Ces petits outils n'ont pas la sophistication d'un Blend ou d'un Expression Design, ils ne remplacent pas non plus la partie code-behind de VS 2008. En revanche ils permettent de tester rapidement des idées ou des snippets récupérés ici ou là. Ils ne remplacent donc rien mais viennent compléter agréablement la boîte à outil du développeur WPF qu'il soit expert ou en phase d'apprentissage.

Bon Dev

Et Stay Tuned !