Dot.Blog

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

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 !