C'est depuis le salle de conférence de l'Hotel Casino Mandalay Bay en direct de Las Vegas que j'écris cet article alors que la KeyNote du MIX 2010 présentée par Scott Guthrie bat son plein. Scott annonce clairement la couleur cette année en précisant que cette Keynote sera entièrement orientée sur Silverlight 4.
Juste un petit post pour vous faire un petit retour sur les Techdays et mettre à disposition mes Slides concernant la collaboration Designer Développeur et SketchFlow. Dans l'une des photos de la galerie ci-dessous, vous noterez la présence de Frédéric Queudret CEO de la société MPoware. Il est en pleine démonstration de l'application Cyclone dédiée à la conception et à la diffusion d'applications pour le CloudComputing. Vous remarquerez la présence de la team Access-It. Frédéric a également présenté Cyclone en conférence, le descriptif de sa session est ici. Bravo à lui et à Aude Mousset qui rejoint MPoware 
SketchFlow
Collaboration Designer Développeur
Si certains ont des questions sur les Slides n'hésitez pas...
J'ai récemment participé au développement d'un plugin pour wordpress au côté de Boris Forconi. Celui-ci est basé en partie sur celui de Tim Heuer. L'idée était de créer une galerie Silverlight en utilisant l'API wordpress mais en développant la galerie elle-même en Silverlight. Boris s'est occupé de toute la partie PHP et de l'intégration à Wordpress. Pour ma part, j'ai développé la partie Silverlight. L'objectif est de fournir un moyen simple de mettre des images en ligne pour Wordpress comme montré ci-dessous :
Il suffit d'écrire une balise de type : [sl-gallery: ...]
Vous pouvez définir les paramètres comme indiqué dans l'exemple ci-dessous :
La première bonne nouvelle, c'est qu'il est possible d'utiliser un menu pour paramétrer tout ça en 2 secondes. Il s'ajoute à l'administration des articles Wordpress. Une petite fenêtre apparaît lorsque vous cliquez sur le bouton (voir ci-dessous).
La seconde bonne nouvelle, c'est que nous mettrons rapidement les sources à disposition sur wordpress.com. De cette manière vous pourrez modifier entièrement le visuel de la galerie côté Silverlight. Dans tous les cas, celle-ci récupère dynamiquement les images de la galerie Wordpress. Vous pouvez en télécharger une première version ici.
Je mets en ligne deux nouveaux composants exposés ci-dessous :
ColorChooser
Depuis sa version beta, ce contrôle a été largement améliorée. Il est désormais possible de cliquer directement sur la surface des deux nuanciers pour sélectionner une couleur. La propriété SelectedColor est cette fois de type Color. Tous les tests d'écriture d'une couleur sont directement accomplis par cette classe. Cela simplifie beaucoup le code et évite l'utilisation d'une classe de conversion.
ColorPicker
Ce composant a pour but de faire apparaitre un ColorChooser via l'utilisation interne d'une instance de Popup. Toute la problématique consiste à placer le ColorChooser à côté du ColorPicker. À cette fin, j'ai créé une méthode d'extension pour la classe Popup. Il est également possible d'accéder au style et template du ColorChooser directement par l'intermédiaire des menus Edit Template=> Edit Aditional Template comme montré ci-dessous.
ColorPicker possède la propriété de dépendance IsOpen couplée aux événements Opened et Closed.
Mis à part cette astuce ce contrôle se contente d'exposer, les propriétés et événements du ColorChooser.
je remonte ce post de Aude Mousset qui explique comment contourner le problème d'embarquement des polices dont le nom contient des caractères spéciaux...
J'ai finalisé récemment l'écriture de mon livre Pratique de Silverlight dédié à la technologie du même nom. Celui-ci devrait faire plus de 500 pages et s'articule autour de l'apprentissage des bonnes pratiques de production en équipe. Il est édité par Pearson Education France et sort le 2 février 2010. Je ne l'ai pas conçu comme un glossaire de fonctionnalités mais plutôt comme un guide de production et d'apprentissage. Il trace un portrait robot de la conception d'applications Silverlight, en partant de la liste d'affichage jusqu'au chargement de données externes au sein du modèle de conception MVVM en passant par le prototypage ou l'organisation des flux de production.
L'idée générale du livre est de fournir des exemples concrets téléchargeables aussi bien pour les graphistes que pour les développeurs. Vous pouvez en réserver un exemplaire sur le site de Pearson France ici.
Cet ouvrage s'adresse aux intégrateurs Web, aux designers interactifs, aux graphistes purs et aux développeurs web peu familier de la plateforme .Net. Il crée un pont entre développement et graphisme, pour améliorer la collaboration et la productivité.
Son contenu prend en compte les spécificités des développeurs et des designers interactifs sous formes d'exercices complémentaires. Le C# est choisi comme seul langage logique pour plus de clarté. La théorie, les exemples et exercices (téléchargeables) sont progressifs et peuvent constituer une base d’apprentissage pour les non développeurs. Toutefois ce livre ne s’adresse pas aux débutants du Web, mais bien aux personnes qui possèdent des bases acquises sur d’autres technologies.
Voici le sommaire du livre
Partie I. Approche de Silverlight
1. Introduction
1.1 Qu’est-ce que Silverlight ?
1.2 De .Net 1 à Silverlight
1.3 Les avantages de Silverlight
1.4 La suite Expression Studio
1.5 Positionnement métier
1.6 Langages de développement et choix
2. Le couple XAML / C#
2.1 XML
2.2 XAML, un langage déclaratif puissant
2.3 Les fondamentaux du langage C#
3. HelloWorld
3.1 Une première application Silverlight
3.2 Architecture d'une solution
3.3 Le conteneur racine
3.4 Ajouter du texte
3.5 Tester et compiler
4. Un site plein écran en 2 minutes
4.1 Les projets de type site Internet
4.2 Créer des conteneurs redimensionnables
4.3 Le composant bouton
4.4 Ajouter de l’interactivité
4.5 Fichiers déployés
5. L’arbre visuel et logique
5.1 Composants visuels
5.2 Principe d’imbrication
5.3 Ajouter des enfants à la liste d’affichage
5.4 Supprimer des objets de l’arbre visuel
5.5 Échanges d’index
Partie II. Interactivité et création graphique
6. Animations
6.1 Introduction
6.2 Animer avec Expression Blend
6.3 Gérer l’accélération
6.4 Animer avec C
6.5 Les transformations relatives
6.6 Animer des particules
7. Boutons personnalisés
7.1 Créer un lecteur vidéo
7.2 Style visuel
7.3 Bouton générique
7.4 Le gestionnaire d’états visuels
7.5 Le bouton interrupteur ou ToggleButton
8. Interactivité et modèle événementiel
8.1 Les fondements du modèle événementiel
8.2 Supprimer l’écoute d’un événement
8.3 Le couplage faible en pratique
8.4 Propagation événementielle
8.5 Les comportements
9. Les bases de la projection 3D
9.1 L’environnement 3D
9.2 Les propriétés 3D
9.3 La caméra
9.4 Introduction aux matrices
10. Prototypage dynamique avec SketchFlow
10.1 L’environnement
10.2 Prototype simple
10.3 Le lecteur SketchFlow
10.4 Interactivité
10.5 Interface riche
Partie III. Conception d’applications riches
11. Ressources graphiques
11.1 Qu’est-ce qu’une ressource
11.2 Les pinceaux
11.3 Les polices de caractères
11.4 Styles et modèles de composants
11.5 Le modèle Slider
11.6 Les liaisons
11.7 Le modèle ListBox
12. Composants personnalisés
12.1 Contrôle utilisateur
12.2 Boîte de connexion
12.3 Contrôles personnalisables
13. Médias et données
13.1 Chargement de médias
13.1.1 Chargement dynamique d’images
13.1.2 Formats vidéo et modes de diffusion
13.1.3 Un lecteur vidéo simple
13.1.4 Chargement dynamique de vidéos
13.2 Conception MVVM
13.2.1 Principes
12.2.2 Modèle
12.2.3 Vue-Modèle
13.3 Chargement de données
13.3.1 L’objet WebClient
13.3.2 Introduction à LINQ
13.3.3 Expression lambda
13.3.4 Consommer du XML avec LINQ
13.3.5 Charger un flux JSON
13.3.6 Sécurité inter-domaine
Pour les besoins d'une production récente, j'ai du concevoir un contrôle de progression circulaire nommé PieProgressBar. Ce dernier hérite de la classe RangeBase et bénéficie à ce titre de toutes les capacités inhérentes à ce type de contrôle. Il se comporte au final comme n'importe quel contrôle de type ProgressBar avec quelques petites choses en plus. La petite difficulté fut de créer dynamiquement le camembert de progression via C#. Contrairement à WPF, Silverlight ne permet pas de surcharger de méthode permettant de créer de nouveaux genres de Shape. Autrement dit, même si Shape est une classe abstraite, il ne sert à rien d'en hériter car la méthode de conception du tracé ne peut être surchargée.
L'autre technique consiste à utiliser le "Path mini language" qui permet de créer des figures géométriques en XAML. J'ai du utiliser 3 segments dont un ArcSegment afin de réaliser ce contrôle. comme je ne pouvais pas créer de primitive Pie pour le graphiste sous Blend, il a fallu ruser... La technique consiste a créer dynamiquement le camembert lors de l'assignation d'une partie de contrôle (ControlPart). En interne, les propriétés de remplissage du tracé généré, sont liées aux propriétés du contrôle via une simple liaison de données créées cote C#.
Vous pouvez en voir des exemplaires ci-dessous et télécharger la librairie tweenedcontrols ici.
Une fois la dll référencée, vous pouvez instancier des contrôle PieProgressBar dans Blend via le panneau Assets comme montré ci-dessous :
Ce composant va être sans doute inclu comme d'autres dans le projet CodePlex SLExtensions que Thierry Bouquain met à jour en ce moment et que je salue au passage
Tim Heuer mets en ligne une série de vidéos dédiées à Silverlight 4. Les thèmes sont listés ci-dessous :
Quelles sont les principales choses à savoir sur Silverlight 4 ? Une comparaison avec Silverlight 3?
Quels sont les nouveaux contrôles de Silverlight 4?
Comment établir des privilèges élevés pour vos applications ?
Que sont les notifications toast?
Comment peut-on héberger du contenu HTML dans une application ?
Comment les nouvelles API d'impression / webcam Microphone fonctionnent-elles ?
Avec sa version 4, la frontière entre Silverlight et WPF s'efface. Comment décider quelle technologie utiliser?
Quel sera l'impact pour vos futurs développement ?
Voici un lien vers le blog de Tim, n'hésitez pas à visionner les vidéos pour mieux découvrir les nouveautés de Silverligh 4.
http://www.sparklingclient.com/silverlight-4-podcast-pack-with-tim-heuer
Silverlight 4 en version bêta est maintenant disponible.
Cette annonce a été faites au PDC 2009 qui se déroule actuellement à Los Angeles. Une centaine de nouveautés sont déjà sur les rails dont :
Vous trouverez toutes ces fonctionnalités et de nombreuses autres détaillées sur le portail Silverlight.net http://silverlight.net/getstarted/silverlight-4-beta/
Récemment, j'ai du utiliser les shaders ou effets Silverlight pour mes besoins personnels. En soit, cela est assez courant, leur utilisation peut toutefois se faire au détriment des performances de votre application. Cet article explique comment optimiser la mémoire et la charge processeur lorsque vous appliquez des effets aux instances d'UIElement.
Tout d'abord, chaque fois que vous appliquez l'un des shaders ou effets fournis par défaut, soit DropShadow et Blur, sur une instance d'UIElement, vous générez en réalité deux bitmaps en RAM à l'exécution. La première bitmap est un rendu simple des vecteurs, la seconde bitmap est l'image affichant l'effet finalisé. Celle-ci est calculée à partir de la première. En termes de performance, ce comportement, peut conduire à certains problèmes si vous ne prenez pas garde :
Il nous faut tout d'abord calculer la mémoire utilisée par un effet standard appliqué à un UIElement 200 * 200. Pour cela, nous prenons en compte que chaque pixel (40000 pour une telle image) est codé sur 4 octets en mode ARGB:
* la couche de transparence Alpha est codée sur 1 octet (appelé octet en français) et 8 bits, conduit à 256 valeurs possible de 0 à 255 ou 0x00 à 0xFF en hexadécimal. les autres couches sont sur le même modèle.
* Red | 1 octet | 8 bits | 0xFF | 0-255
* Green | 1 octet | 8 bits | 0xFF | 0-255
* Blue | 1 octet | 8 bits | 0xFF | 0-255
Les images étant générées à l'exécution, celle-ci sont stockées dans la mémoire vive. Comme elles ne sont pas compressées, il est facile de calculer leur poids via la formule ci-dessous :
PixelsWidth * PixelsHeight * 4 octets = poids total de la bitmap intermédiaire dans la mémoire RAM
Dans notre cas, le bitmap est d'environ 160 Ko, mais cela correspond uniquement au poids de l'image intermédiaire. La seconde image occupera au moins 160 k octets voir plus, pour le projeté d'ombre et le flou. Celle-ci déborde en effet de l'enveloppe afin d'afficher l'effet finalisé. le poids total est donc au minimum d'environ 400 kilo octets si l'on considère que ces effets ont un rendu de surface plus grand que l'enveloppe d'origine.
Concernant les effets personnalisés que vous créez par vous-même via des logiciels comme Shazam en utilisant le langage HLSL (High Level Shader Language), les comportements du lecteur sont assez différents car Silverlight ne génère pas d'image intermédiaire pour rendre l'effet. Ce comportement présente de grands avantages en termes d'occupation mémoire mais reste spécifique aux effets que vous développerez par vous-même. Attention toutefois au fait que ce comportement n'est plus valable lorsque vous appliquez de la 3D ou que vous mettez le vecteur en cache via la propriété CacheMode. Dans ces derniers cas, l'image intermédiaire est systématiquement créée...
Le filtre est souvent recalculé au cours du temps lors de certaines transformations du vecteur original. Seules exception, ce n'est pas le cas pour les transformations de type déplacement (TranslateTransform). Pour toutes les autres opérations, l'image intermédiaire est recréée de toute pièce, l'image finalisée l'est donc également. Par exemple, si vous décidez d'animer l'échelle, la rotation ou l'inclinaison d'un rectangle, le rendu de l'effet et les images en mémoire qui en découlent seront regénérées à chaque fois. Ce comportement permet de conserver un effet sans pixelisation ou crénelage. Par exemple, pour un raffraichissement de 60 image par seconde et une animation d'échelle, Silverlight génèrera environ 60 bitmaps intermédiaires et 60 bitmaps affichant l'effet final. Les designers et les développeurs doivent prendre garde à ce type de comportement. Dans le cas contraire, la charge mémoire et CPU utilisée pour afficher de simples effets, pourrait augmenter de manière drastique et diminuer ce faisant les performances de votre application... Pour éviter ou limiter ces ralentissements, l'équipe d'ingénieurs Silverlight a autorisé une taille maximum de 2048 pixels en largeur et en hauteur. Cette limitation n'est toutefois pas si simple à mettre en valeur car certains artefacts de rendu peuvent apparaître dans ces dimensions. Lorsqu'un effet est supprimé ou qu'un UIElement est détruit, la mémoire réservée pour rendre l'effet est automatiquement libérée.
Vous trouverez certaines des meilleures pratiques ci-dessous:
* Plus la surface sur laquelle vous appliquez un effet est petite, mieux c'est. Les effets ne doivent pas être appliqués de manière inconsidérée et sont susceptibles d'alourdir considérablement votre visuel.
* Evitez les effets sur les éléments qui subissent des animations. Mise à part dans le cas de déplacement, cela conduit à recalculer les images bitmaps et à les replacer en mémoire systématiquement selon la cadence de votre animation.
* L'effet Blur est très lent car multipasse. Conservez un faible rayon. Au delà de 10 pixels, vous commencerez à remarquer une dégradation flagrantes des performances.
Pour finir, sachez que depuis .NET 3.5, Silverlight 3 et WPF reposent tous deux sur le même langage HLSL ce qui permet d'utiliser les mêmes effets de filtre personnalisés sur les deux plateformes.
