Dot.Blog

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

Xaml, l'ami des artistes

XAML, comme le savez, est au coeur de WPF et de Silverlight. Sa puissance, doublée par celle du Framework et de langages comme C#, en fait une machine de guerre sans équivalent pour qui veut développer des applications modernes, c'est à dire efficaces techniquement mais "lookées". 

Mais si XAML est l'ami des développeurs, il est aussi celui des artistes !
Il créé un lien entre deux mondes parallèles : celui des métiers IT et celui des métiers de l'art, graphisme, vidéo, son et musique.

Démontrer une nouvelle technologie est généralement assez facile, il suffit de se former et d'écrire un article et des exemples. Mais comment "démontrer" et rendre tangible ce lien immatériel entre informatique et art créé par XAML ?

Car une application aujourd'hui, en plus du fonctionnel, c'est aussi de l'image et du son. De l'interface, mais aussi de la "promo" visuelle, des vidéos, de la musique, des logos.

Evoquer ce lien entre art et technique, c'est la finalité de E-Naxos Art, une démo Silverlight 2 qui permettra peut-être de réveiller l'artiste qui sommeille en vous et vous inciter à vous lancer dans WPF et Silverlight si vous hésitez encore !

Pour l'instant l'application est en bêta et elle n'est pas encore très fournie. Il y a tout de même à voir des vidéos en 3D, des dessins et des bouts de sons ou de musiques. Tout cela sera complété au fil du temps.

Alors pour mieux comprendre le mariage entre "art" et technologie que matérialise XAML, bonne visite sur E-Naxos Art !

Et Stay tuned ! 

 

Article : Créer des Splash Screens sous Silverlight

Encore un article tout chaud à peine démoulé ! Le sujet aussi est brûlant : Avec l'arrivée prochaine de la version 3 Silverlight est un environnement qui a le vent en poupe... Puissant et hyper agréable à programmer, surtout accompagné de la suite Expression, Silverlight est un vrai plaisir.

Raison de plus pour savoir comment enrichir vos belles applications avec des Splash Screens originaux !

Comment ? Vous saurez tout en lisant ce nouvel article que je vous ai concocté : Conception de Splash Screens sous Silverlight (PDF 22 pages avec source des exemples VS 2008/Blend 2 sp1)

Bonne lecture !

 

(voir aussi le billet sur la façon de centrer un splash)

Les propriétés de dépendance et les propriétés jointes sous WPF (article à télécharger)

En voilà un beau sujet ! Vous allez me dire qui irait investir deux jours à taper 25 pages sur ce sujet, il faut être totalement givré ! Et bien vous en avez un devant vous (par blog interposé) ... donc pas de remarques désobligeantes sur ma santé mentale, hein !

Certes les propriétés de dépendance et les propriétés jointes de WPF et Silverlight ne semblent pas être un sujet aussi exitant que quelques astuces LINQ ou la meilleure façon d'intégrer de la 3D dans Silverlight 3 (miam!)... Je vous le concède. Mais en revanche c'est un sujet capital car derrière ces propriétés bien particulières se cache l'un des piliers de la puissance de WPF, un mécanisme qui autorise la gestion des styles, des animations, du Data Binding et de bien d'autres choses sans lesquelles WPF ne serait pas ce qu'il est.

Savoir ce qu'est une propriété de dépendance ou une propriété jointe, savoir en déclarer et savoir les utiliser représente une base impossible à zapper.

Alors, pour tout savoir sur le sujet, téléchargez mon dernier article "Propriétés de dépendance et propriétés jointes (WPF/Silverlight)" !

L'article est fourni en PDF avec les sources du projet exemple (utilisable sous VS 2008 ou Blend 2).

NB: Pour mieux comprendre cet article si vous n'êtes pas encore un expert de WPF, je vous conseille la lecture de mon précédent article "10 bonnes raisons de préférer WPF".

Bonne lecture,

... Et Stay Tuned !

Un exemple d'application Silverlight "bien de chez nous" !

Le nombre des applications Silverlight augmente de jour en jour mais il est vrai que les exemples de réalisation en français ne sont pas encore légion. J'ai donc décidé de mettre en ligne une petite application de démonstration !

Comme c'est avec les vieux pots, parait-il, qu'on fait les meilleurs soupes, je pense que celle-ci va être délicieuse ! En effet, je suis reparti de l'idée d'un ancien exemple réalisé à cette époque lointaine sous Delphi Win32, un Web Service des codes postaux français qui avait eu un très grand succès (Microsoft l'avait d'ailleurs utilisé pour des Techdays afin de montrer la compatibilité entre un Web Service Delphi et le framework .NET qui venait tout juste d'émerger...).

Il était donc finalement naturel de reprendre cette bonne idée mais en la modernisant radicalement. C'est ainsi que j'ai le plaisir de vous annoncer que la démonstration "Les Codes Postaux Français" est ligne aujourd'hui. Bien entendu il ne s'agit plus seulement d'un Web Service (aujourd'hui réalisé avec WCF), mais aussi d'un frontal réalisé avec Silverlight 2.

Pour jouer avec l'application suivant ce lien : les Codes Postaux Français sous Silverlight.

Vous pouvez aussi consulter ce petit PDF de présentation (dont le texte se retrouve dans la about box de l'application): Codes Postaux Français.pdf (482,07 kb)

Amusez-vous bien !

[EDIT] Le titre de ce billet doit s'entendre dans le sens "enfin une démo en français sur un thème français" ce qui était rarissime au moment de l'écriture de celui-ci, et certainement pas comme une quelconque exaltation de sentiments nationalistes ou franchouillards. Personne ne me l'a dit, mais c'est moi qui, en ce jour de janvier 2010, en relisant le post hors de son contexte me fait la réflexion à moi-même... Citoyen du monde plus que français, ayant en horreur le nationalisme et les débats sur l'identité nationale, qui ne signifie rien en tant que terrien, je tenais à apporter cette petite précision pour lever toute forme d'ambiguité ! [/EDIT]

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 !

WPF et Silverlight - VSM, Toolkits et nouvelles du front

WPF Tookit

Si vous ne l'aviez pas vu passer, la version d'octobre 2008 sur CodePlex ajoute des contrôles et surtout le preview pour le VisualStateManager. Cet outil essentiel a d'abord fait son apparition dans Silverlight et se trouve donc progressivement porté vers WPF. Le VSM permet de gérer les changements d'état des contrôles de façon plus instinctive et naturelle que les Triggers de WPF. Bien entendu, même si cela peut se piloter par programmation, c'est sous Expression Blend que vous en profiterez au maximum !

Activer VSM dans Blend 2 

Toutefois, l'intégration dans Blend 2 n'est pas automatique, le VSM de WPF n'est qu'en Preview et il faut activer la gestion des états via une entrée de la base de registres. Tout cela est expliqué clairement dans ce billet de l'équipe Expression / Blend chez Microsoft.

Silverlight Toolkit

Controls Example 

A chacun son toolkit ! La version de décembre 2008 pour Silverlight ajoute 3 nouveaux thèmes, des bug fixes et des améliorations (plus de 80). A ce jour, le toolkit offre l'AutoCompletBox, le DocPanel, le HeaderedContentControl, le Label, le NumericUpDown, le TreeView, le WrapPanel en version stable mais aussi dans la catégorie "preview" : le ButtonSpinner, le Charting, l'Expander, l'ImplicitThemeManager, le Spinner, le ViewBow, etc.

Vous pouvez tester en live les composants du toolkit, sans oublier la home page du SL Tookit.

Bon Dev et Stay Tuned !

XAML Power Toys mis à jour pour WPF .NET 3.5 SP1 et Silverlight 2 !

Les XAML Power Toys sont des petits outils bien pratiques qui s'intègrent à Visual Studio 2008, leur mission : générer du code XAML pour des tas de situations et ainsi simplifier le codage.

Laissons l'auteur des XAML Power Toys dire à quoi ils servent :

"L'objectif principal de XAML Power Toys est de fournir des outils qui permettent aux développeurs de rapidement mettre en page et maintenir des formulaires de type business en utilisant les contrôles d'I.U. livrés avec Visual Studio."
(The primary goal of XAML Power Toys is to deliver tools that enable developers to quickly layout and maintain Line of Business Application forms using the UI controls that ship with Visual Studio.)
Bon, c'est pas forcément plus clair dit comme ça... Alors le mieux, vous savez quoi ? ... et bien c'est d'aller sur le site de ce bon Karl et de regarder les captures d'écran et les exemples qu'il y commente !
XAML Power Toys est en tout cas un add-in à posséder, il rend vraiment service lorsqu'on travaille sous VS. On préfèrera certainement l'aspect visuel de Expression Blend pour modifier du XAML mais lorsqu'on développe une application WPF ou Silverlight on a de toute façon VS et Blend ouverts en même temps, l'un pour le visuel, l'autre pour le code C# et quand on est sous VS, il est parfois plus rapide de modifier le code XAML "à la main" pour certaines choses que de switcher sur Blend. Donc même quand on travaille avec les deux EDI à la fois, ces petits "jouets puissants" (Power Toys !) sont des aides à ne pas négliger !
Bon XAML
... 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 !

Donnez des couleurs à Blend et Design (intégration de Adobe Kuler).

Comme une coïncidence je parlais de Adobe dans mon dernier billet... Et si je n'en faisais pas forcément l'éloge pour la facette programmation de leurs outils, en revanche je reconnaissais bien volontier leur talent en ce qui concerne les outils de graphisme. En voici une illustration, et un moyen de récupérer ce savoir-faire dans les produits de design de la gamme Microsoft Expression !

Adobe a mis en ligne un site qui s'appelle Adobe Kuler, son utilité est de permettre facilement, et visuellement, de créer des nuanciers de couleurs. Les graphistes utilisent fréquemment les nuanciers car une fois ajoutés à un projet ils sont le garant du respect de la charte décidée pour celui-ci.

Bien entendu les outils tels que Expression Design ou Expression Blend savent gérés les nuanciers, chacun à sa façon. Design le gère de façon similaire à Adobe Illustrator, Blend le fait sous la forme de ressources de brosses. Mais qu'importe la technique exacte cela revient au même. Surtout, les contraintes qu'un graphiste doit prendre en compte restent les mêmes, qu'il travaille sous Illustrator ou Design ou même Blend : le respect de la charte est essentiel.

Je ne pourrais pas dire, faute de le connaître, si Jonas Follesoe est type bien ou sympa, en revanche je peux vous affirmer que c'est un bon développeur WPF qui aime Blend et Design ! Et il a créé un add-in pour ces deux produits qui permet de disposer d'une palette supplémentaire se connectant à Adobe Kuler pour aller y chercher des nuanciers !

Recherche des favoris, des plus populaires, etc, voire recherche sur un mot (tous les nuanciers "ocean" par exemple), tout cela est possible. On récupère les nuanciers par simple copie dans le logiciel (ou même par drag'n drop). C'est vraiment génial. D'autant qu'on peut aussi accéder au site Adobe Kuler pour modifier un nuancier ou en créer un totalement nouveau. Le site propose des modes intelligents comme la création de palettes à partir d'algorithmes de type couleurs complémentaires, nuancier monochromatique, etc.

Toutes les instructions pour télécharger le plugin Blend/Design ainsi que l'application WPF stand-alone sur son le blog de Jonas.

Le site Adobe Kuler vaut lui aussi une visite si vous ne connaissez pas.

Enfin, le projet de Jonas est sur CodePlex, dont open source, toujours bon pour repiquer les bonnes idées de développement et progresser dans son apprentissage !

Et comme c'est joli toutes ces couleurs, voici une petite capture écran du plugin en action sur mon Blend 2 SP1 :

 

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 !