Microsoft a mis en ligne il y a quelques temps un nouveau site de formation Silverlight très bien fait : .toolbox dont le motto est “Learn. Create. Share.” c’est à dire “Apprendre. Créer. Partager”. Le tout axé sur Silverlight et Expression Studio.
Le site est bien fait, agréable, riche, mais c’est surtout l’aspect formation qui mérite d’être relevé.More...
Êtes-vous plutôt Hard ou Soft ? Ok, c’est trop personnel comme question. Mais si on la pose à une ListBox immédiatement on se sent plus à l’aise pour répondre… More...
Des règles et des bonnes pratiques pour développer des applications Silverlight il en existe bien plus que deux, faire croire le contraire ne serait pas honnête. Ne serait-ce que par la richesse des EDI utilisés (Visual Studio, Expression Blend, Expression Design…) il faut accumuler de l’expérience et mémoriser de nombreuses patterns pour architecturer et designer correctement une application.
Alors, en vrac, voici deux règles qui me passent par la tête et que je voulais vous communiquer:
Programmation par Templates
Sous Silverlight lâchez les vieilles habitudes. L’une de celles-ci que je rencontre souvent est celle qui consiste à se jeter sur son clavier pour créer un UserControl (ou un Control par héritage) dès qu’on a besoin d’un nouveau composant qui semble absent de la bibliothèque.
Erreur. Méthode du passé.
En effet, Silverlight et WPF impliquent des changements radicaux de mode de pensée et d’habitudes. Sous ces environnements, la majorité des besoins sont couverts par les composants existants, il “suffit” juste d’en modifier le template.
Nous sommes passés d’une programmation par héritage à une programmation par modèle (template).
Deux exemples pour bien cerner ce que j’entends par là.
Sticky Note
Prenons pour premier exemple un cas d’école, déjà ancien mais en plein dans notre propos : sticky notes pour WPF (sticky notes listbox). Ce “composant” se présente comme une liste verticale de petites notes de type “post-it” légèrement décalées les unes par rapport aux autres.
L’effet est sympathique et donne un peu de fantaisie et de vie à ce qui ne serait qu’une liste rectangulaire dans une grille en programmation classique.
Ce magnifique “composant” n’utilise aucun code “'classique”. Inutile dans les sources de chercher la classe StickyNotes qui hériterait de Control ou même de chercher dans les fichiers de l’application le UserControl créé pour l’occasion.
Rien de tout cela.
Sticky Notes est créé uniquement en jouant sur le templating d’une simple… Listbox ! Une poignée de Xaml et des templates, c’est tout.
Language button
Dernièrement dans une application Silverlight je devais implémenter un bouton permettant de choisir depuis la page d’accueil la langue à utiliser (français ou anglais). Forcément on pense à un ToggleButton ou quelque chose d’équivalent (ce qui n’existe pas de base). On pourrait aussi associer deux RadioButton dans une grille.
Mais le plus intéressant consiste à se demander “quel control existant se rapproche le plus du comportement que je souhaite implémenter”. En y réfléchissant quelques secondes on s’aperçoit assez vite qu’une CheckBox possède deux états stables (oublions ici l’état indéterminé). Ce composant comporte toute la logique et les états visuels permettant de gérer deux états.
Par défaut une CheckBox c’est une case à cocher avec un bout de texte devant ou derrière.
Le plus dur consiste à se l’imaginer comme deux drapeaux (français et US) côte à côte, celui qui est sélectionné étant à 110% de sa taille et l’autre à 50%. Par convention arbitraire et chauvinisme inconscient certainement j’ai considéré que IsChecked = True était le Français, à False l’anglais. En partant d’une CheckBox que j’ai totalement vidée de son contenu, et en ajoutant les deux drapeaux (et quelques autres ingrédients et animations via le VSM) j’ai obtenu un merveilleux “ToggleButton” sans jamais “sous-classer” le moindre contrôle. Juste en écrivant un template.
Le ViewModel de la page d’accueil offre une propriété IsFrench de type booléen qui est simplement bindée à la propriété IsChecked du CheckBox (en mode TwoWay) et l’affaire est jouée !
Règle 1 : De l’héritage au templating
La programmation Xaml (Silverlight / WPF) est une programmation visuelle qui s’effectue par templating. Créer des UserControl et encore plus sous-classer des contrôles existants devient quelque chose de rarissime.
Nous sommes passés de l’ère de la programmation objet par héritage à celle de la programmation visuelle par templating. Bien comprendre toute la signification de ce changement est un point primordial et un préliminaire indispensable pour comprendre cette technologie et donc la programmer intelligemment.
Programmation par Properties
Il s’agit du même genre de glissement, une pente douce mais dont la longueur finit par conférer une vitesse tellement grande à celui qui s’y laisse glisser que le décor n’a plus rien à voir avec celui qu’on a tout le temps d’admirer en balade à dos d’âne…
Dans l’exemple précédent on touchait du doigt cette nouvelle approche mais sans la mettre en exergue.
En effet, dans la pattern M-V-VM plutôt que de créer un code incompatible avec le visuel d’un côté pour ensuite créer de l’autre des tripotés de convertisseurs (programmation classique non M-V-VM sous WPF et Silverlight dans une moindre mesure) il semble bien plus simple d’exposer dans les ViewModels des propriétés directement exploitables par l’UI. Si adaptation des données il doit y avoir c’est le ViewModel qui s’en charge (directement si cela est ponctuel, ou via une classe de service si la chose doit être réutilisées ailleurs).
Dans l’exemple précédent du Checkbox transformé en ToggleButton de langue, aucun événement n’est programmé, aucun gestionnaire n’est écrit pour réagir au clic. Tout se joue dans le ballet automatique de IsChecked de la CheckBox et de IsFrench du ViewModel sous l’égide discrète mais indispensable d’un binding two way…
Quant l’utilisateur clique sur la CheckBox (enfin sur le ToggleButton avec les deux drapeaux) le composant sous-jacent bascule sa propriété IsChecked à vrai ou faux selon le cas. Comme cette dernière est liée à IsFrench du ViewModel, une propriété de type booléen aussi pour assurer la compatibilité des comportements, le ViewModel reçoit pas un événement mais l’une de ces propriétés (IsFrench) se voit modifiée. Ce qui déclenche le Setter de cette dernière. Ce dernier s’occupant de modifier le fichier de ressource utilisé pour puiser les chaines de caractères. De là et par une série de notification de changement de propriétés, il avertit en retour la Vue que toutes les propriétés de type texte ont été modifiées. La vue (et ses binding) y réagit en rafraichissant les affichages…
Toute cette mécanique s’est déroulée sans aucun gestionnaire d’événement, sans aucune programmation “classique” (en dehors du ViewModel et de ces propriétés gérant INotifyPropertyChanged, ce qui peut être automatisé ou simplifié en utilisant Mvvm-light par exemple).
Règle 2 : de l’événementiel à binding
La seconde règle d’or à bien comprendre pour tirer totalement partie de Xaml et de ses enfants (Silverlight et WPF) est ainsi d’opter pour un modèle de développement de type Model-View-ViewModel se basant presque exclusivement sur des couples de propriétés mis en relation via binding.
On est passé de l’ère du développement dit “événementiel” des premières versions de Windows à ce qu’on pourrait appeler la “programmation par Binding” ou par “properties”.
Conclusion
Pour résumer :
Règle 1 on cherche à templater des contrôles existants sans créer des UserControl ni dériver des contrôles existants.
Règle 2 : on base la dynamique de l’application sur le binding entre propriétés et non plus sur les gestionnaires des événements des contrôles.
Si vous avez déjà fait vôtre ses règles alors vous allez devenir, si ce n’est pas déjà le cas, de très bons développeurs Silverlight et Xaml très recherchés !
Si vous n’aviez pas encore vu les choses sous cet angle là, je serai très heureux si par chance j’ai réussi à tirer le voile qui vous empêchait de les voir ainsi. Vous ne ferez qu’entrer plus vite dans la catégorie précédente !
Bon Dev, et, œuf corse,
Stay Tuned !
Une petite astuce rapide en passant…More...
La convergence Silverlight / WPF j’en ai parlé souvent, parfois en étant incompris de certains lecteurs d’ailleurs. Mais pour moi le sujet est dépassé, et ceux qui n’y ont pas cru en sont pour leurs frais … Silverlight 4 offre la compatibilité binaire avec WPF par exemple. Si ce n’est pas de la convergence à l’état pur, alors c’est à en perdre son latin… Concernant ce point là, la messe est dite me semble-t-il.
J’ai aussi expliqué quelque fois une autre de mes visions, encore moins bien comprises que la précédente, celle d’un monde dans lequel Silverlight remplacerait WPF. On se souviendra de mon billet Silverlight 4 Mamma Mia! ou d’autres et des commentaires parfois étonnants que cela a suscité.
Avec l’arrivée de Windows Phone 7, c’est pourtant bien cette prochaine étape qui se dessine…
Windows Phone 7 : Silverlight, XNA et Metro
Avec Windows Phone 7, Microsoft apporte une vraie réponse à l’I-Phone.
De nombreux constructeurs ont tenté d’imiter l’I-Phone. Imiter. Seulement. Et tout le monde préfère le vrai Coke aux imitations, le vrai Nutella à ses pâles copies, les vrais After-Height aux chocolats à la menthe grossiers qu’on trouve chez certains discounters. Et même quand le produit est passable, il n’en reste pas moins une imitation sans classe ni âme. Tous les téléphones dernière génération souffrent de cette tare congénitale de n’être né que sous les auspices de l’imitation et non de l’innovation.
Windows Phone 7 est une vraie réponse car s’il s’inscrit dans la vague de l’I-Phone il ne cherche pas à l’imiter. Il est le résultat d’une démarche de design unique. Il constitue un cahier des charges précis et il s’appuie sur une technologie d’interface qui n’est pas qu’un bricolage plus ou moins efficace pour ressembler à l’I-Phone.
Metro
Metro is our code name for our design language. We call it metro because it’s modern and clean. It’s fast and in motion. It’s about content and typography. And it’s entirely authentic.
“Metro est le nom de code de notre langage de design. Nous l’avons appelé Metro parce qu’il est moderne et clean. Il est rapide et en mouvement. Il est centré sur le contenu et la typographie. Et il est totalement authentique.”
En dehors de la vision d’un métro “clean” (dans quelle ville du monde vit le publicitaire qui a écrit ça ?), le ton est donné (en s’imaginant le métro comme dans les films de SF donc, clean). Cette phrase est issue d’un petit livre donné au MIX10 qui présente la vision de Windows Phone 7.
Metro n’est en réalité qu’une association de bienfaiteurs : Silverlight et XNA (plus des guidelines de design).
Toute l’interface de Windows Phone 7, et vraisemblablement des prochaines machines tablet PC à écran multi-touch (comme le TouchSmart tm2 de HP annoncé au dernier CES), est gérée par ces deux technologies.
Pour l’affichage il faut choisir, soit on développe en Silverlight, soit en XNA, mais les deux sont compatibles en termes de librairies (on peut faire une interface Silverlight et utiliser toute la partie audio assez évoluée de XNA, ou, au contraire, partir sur une interface XNA mais faire appel aux facilités de Silverlight pour accéder à des Web services par exemple).
XNA ? Si, vous connaissez certainement, c’est le langage de programmation de la XBOX, basé sur le framework .NET. XNA est, graphiquement, très spécialisé dans la production de jeux : 3D en mouvement, lumières, textures, effets spéciaux, etc.
Le code Silverlight sera totalement portable entre Windows, Apple, et Phone 7. Du vrai code portable à quelques petites différences peut-être comme le non support des pixels shaders (seul le floutage et l’ombre portée seront conservés). Si on veut des effets 3D et bitmap “killer” on le comprend, MS pousse vers XNA.
Toutes les applications ne nécessitant pas la gestion de monstres gigotant sur fond de particules animées et mouvements de caméra, Silverlight sera la technologie privilégiée pour la grande majorité des applications Phone 7.
Côté développement Visual Studio 2010 bénéficiera d’un plugin pour le développement Windows Phone 7 avec émulateur multi-touch. Une version spéciale Blend pour Phone 7 est annoncée pour la fin d’année. A noter, pas de VB.NET ici, pour le moment seul C# sera supporté.
Silverlight Everywhere ?
Quel amusant retournant des choses… Silverlight était appelé à l’origine WPF/E, soit WPF Everywhere (WPF Partout).
WPF se fait de plus en plus discret. Son adoption confidentielle fait que son nom n’est pas synonyme de winner. Il va subir le sort de XBap. La techno elle-même ne meurt pas, mais c’est sous la bannière flamboyante de Silverlight qu’elle sera portée. Mes prévisions en la matière se confirment de jour en jour.
Alors après WPF/E, finalement n’allons-nous pas à grand pas vers Silverlight Everywhere ?
J’en suis convaincu et je ne peux que vous inciter à réserver votre prochain Windows Phone 7 au plus vite, à changer votre écran LCD contre un écran multi-touch et commencer à vous former rapidement à tout cela (en même temps que de vous faire des amis dans le monde des designers), car on est presque déjà demain. Et demain, Silverlight sera Partout !
Stay Tuned, l’aventure Silverlight ne fait que commencer !
Microsoft vient d’annoncer l’ouverture d’un nouveau site de formation dédié à Silverlight et à Expression, “.toolbox”
En proposant deux noyaux de formation avec des cours de difficulté croissante autour des scénarios de Design et des principes de Design, l’approche proposée constitue une vision nouvelle qui dépasse les “how do I” ou tous les petits tutors parcellaires.
Une unité plus grande autour de thèmes spécifiques au développement Silverlight, le tout gratuitement, .toolbox est un site à bookmarker immédiatement !
L’inscription depuis la page d’accueil s’effectue via un compte Windows Live ID (créez-en un si vous n’en possédez pas). Choisissez un point de départ et formez-vous. C’est aussi simple que cela.
Autre volet du projet .toolbox, l’échange et le partage avec les autres utilisateurs.
Les liens :
Formez-bous bien et .. Stay Tuned !
MVVM, Model-View-ViewModel, est une pattern de développement que je vous ai présentée plusieurs fois (billet et un article récent de 70 pages) en raison de son importance dans le développement d’applications Silverlight principalement.
A ces occasions j’ai présenté plusieurs frameworks permettant de faciliter le développement en suivant la pattern MVVM. Je viens d’en découvrir un autre, encore plus simple que MVVM Light, c’est “Simple MVVM” un projet CodePlex.
La gestion des commandes n’est pas prise en compte mais comme je le montre dans le long article évoqué en introduction en utilisant Silverlight 4 (en bêta pour l’instant mais bientôt releasé) on peut facilement gérer l’interface ICommand dans une vaste majorité de cas sans utiliser de librairie annexe.
Simple MVVM est vraiment simple. C’est un peu “MVVM pour les nuls”. Mais justement, c’est en partant d’exemples simples, de librairies hyper light qu’on peut mieux cerner une technologie et choisir ensuite des frameworks plus lourds et plus complets. Je vous conseille donc d’y jeter un œil.
Dans tous les cas je suis pour les librairies les plus light possible. Les gros “zinzins”, même très bien faits, pose toujours un problème de maintenabilité (si vous, personnellement, vous avez investi du temps pour apprendre telle ou telle grosse librairie, c’est bien, mais que ce passera-t-il s’il faut qu’un autre informaticien maintienne votre code au pied levé ? Combien coûtera sa propre formation sur la dite librairie ? Alors que souvent ces dernières ont pour objectif de simplifier le travail et donc de couter moins cher “à la longue”. C’est faux en réalité, et c’est donc un contre-sens que de les utiliser, aussi puissantes ou savantes soient-elles, sauf cas exceptionnels…).
Ce qui se conçoit bien se programme clairement – Et le code pour le faire vient aisément… (paraphrase libre du célèbre proverbe de Nicolas Boileau).
Stay Tuned !
Et un de plus dans la galerie ! :-)
http://www.e-naxos.com/slsamples/lorem/loremgen.html
“Lorem ipsum…” vous connaissez tous ce texte en pseudo-latin que tous les infographistes utilisent pour tester la mise en page de leurs documents, de la carte de visite aux sites web, de la plaquette commerciale sur papier glacé jusqu’à, bien entendu, des applications Silverlight.
Il existe beaucoup d’extraits de ce fameux texte. Je vous propose “ma” version, en Silverlight.
Fonctionnalités
Génération
LIG (Lorem Ipsum Generator) est capable de générer des Paragraphes, des Phrases et des Mots de façon aléatoire.
Une phrase est constituée de mots, il est possible de choisir une fourchette, par exemple entre 3 et 8 mots. Le tirage est aléatoire pour chaque phrase.
Un paragraphe est constitué de phrases, il est ici aussi possible de choisir une fourchette, par entre un paragraphe fait de 5 à 8 phrases.
Qu’il s’agisse de paragraphes, de phrases ou de mots, la “chose” générée le sera en plusieurs exemplaires (tous différents) et ce nombre est fixé par une fourchette.
Les radio boutons en bas à gauche permettent de choisir le mode de fonctionnement.
Une case à cocher sous le texte permet de forcer la première phrase (en mode Paragraphes) à sa valeur la plus connue, le célèbre “Lorem ipsum …”.
Visualisation et statistiques
Le texte généré est immédiatement visualisé à l’écran. De plus, LIG fournit des statistiques simples mais importantes sur ce dernier : nombre de symboles et nombre de mots.
Récupération du texte
Le plus simple est de cliquer sur le bouton “Copy”. Une confirmation est demandée par mesure de sécurité. Il suffit ensuite de coller ce texte où vous en avez besoin…
Bouton Info
Il affiche une page d’information sur l’application
Installation Out-Of-Browser (OOB)
LIG supporte le mode de fonctionne OOB, en cliquant sur le bouton “Install” (en haut à droite, il s’illumine quand on passe la souris dessus) l’application LIG sera téléchargée depuis le Web et installée sur votre machine. Selon votre choix une icône peut être placée sur le bureau ainsi qu’une entrée dans le menu Démarrer (ou l’équivalent sous Mac).
Lors de la première installation l’application sera ouverte immédiatement, le site web sera toujours à l’écran aussi. Fermez ce dernier. Vous disposez maintenant d’une application locale totalement indépendante… Bien entendu LIG n’a alors plus besoin de connexion Internet pour fonctionner et durant son utilisation ni il n’envoie ni il ne reçoit des données depuis Internet. C’est totalement safe et sans espionnage.
Conclusion
Du coup, me privant d’une remontée d’info automatique pour respecter la liberté de chacun de ne pas être pisté par la moindre application, je remercie par avance les utilisateurs de LIG de bien vouloir me laisser un mot pour me dire s’ils apprécient ou non l’application.
Le code source sera mis à disposition d’ici quelques temps, alors… Stay Tuned !
Juste quelques mots pour vous parler d’une librairie de code qui se trouve sur CodePlex et qui n’est pas assez connue à mon avis.
Il s’agit de “Expression Blend Samples” qu’on trouve ici : http://expressionblend.codeplex.com/
Cette lib, disponible en binaire avec installeur et en code source, contient de nombreux Behaviors et des effets visuels (Pixel shaders) tout à fait pratiques et utilisables dans vos projets Silverlight.
Ne vous laissez pas tromper par le mot “samples” (exemples) dans le titre, c’est bien plus que de simples exemples, c’est du code très utile !
On trouve par exemple des Behaviors (comportements) pour contrôler le composant média (play, pause…) sans passer par du code VB ou C# donc. Mais ce n’est pas tout, bien entendu, il y a aussi de nombreux Behaviors orientés données, d’autres spécifiques au prototyping… Une vraie mine d’or.
Des Triggers (déclencheurs) sont aussi disponibles dont le StateChangeTrigger qui détecte le passage à un état donné ou tout changement d’état d’un contrôle ou d’autre plus exotiques comme le MouseGestureTrigger qui permet de dessiner une gesture et ainsi de piloter une application via des mouvements pré-établis de la souris !
Enfin, la librairie contient tout un ensemble d’effets visuels issus de la librairie http://www.codeplex.com/fx avec deux petites différences qui comptent : d’une part “Expression Blend Samples” est fourni avec un module d’installation ce qui évite d’avoir à compiler les shaders, et d’autre part l’effet “Wave”, un des plus sympas, fonctionne à merveille alors même qu’il refuse de se compiler dans sa librairie originale…
Une librairie à posséder donc…
Model-View-ViewModel, je vous en parlais il y a très peu de temps (MVVM, Unity, Prism, Inversion of Control…) et je vous avais promis un exemple pour rendre tout cela plus concret. C’est fait ! Et même mieux, un article de 70 pages l’accompagne !
Vous saurez tout (ou presque) sur cette design pattern absolument incontournable pour développer sérieusement sous Silverlight.
Après des explications sur la pattern elle-même l’article vous présente une application exemple entièrement réalisée avec ce qu’il y a “out of the box”. J’ai fait le choix de n’utiliser aucun Framework existant (Prism, Cinch, Silverlight.FX, MVVM Light…) pour vous montrer que M-V-VM peut entièrement être mis en œuvre “à la main” sans aide extérieure.
Cela ne veut pas dire que tous ces Frameworks (dont l’article parle aussi) ne sont pas intéressants, au contraire ! Mais comment choisir une librairie facilitant M-V-VM si vous ne savez pas comment mettre en œuvre cette pattern et si vous ne connaissez pas les difficultés qu’elle soulève autant que ses avantages ?
Cet article vous permettra de faire le point sur M-V-VM et de pouvoir ensuite choisir le Framework qu’il vous plaira en toute connaissance de cause ou bien cela vous aidera à développer votre propre solution. Après tout, l’application exemple fonctionne parfaitement sans aucun de ces Frameworks….
Le code source du projet est fourni. En raison de l’énorme avantage de la gestion des commandes introduites dans Silverlight 4 (toujours en beta) l’article utilise cette version qui sera bientôt disponible. Tout est expliqué pour savoir comment faire fonctionner le code exemple à l’aide de VS 2010 ou Blend 4 (en beta aussi).
L’article peut être lu sans faire tourner le code si vous ne souhaitez pas installer la beta de SL4, et la première partie théorique s’applique aussi bien à M-V-VM sous SL3.
Bonne lecture !
(PS: n'oubliez pas que depuiis août 2012 les articles sont regroupés sur la page publications).
Téléchargement ici : M-V-VM avec Silverlight, de la théorie à la pratique.