Silverlight 1.0 est un outil de présentation. Comme tout outil de présentation il permet de créer des schémas, des graphiques, des illustrations 2D, et des contenus riches. Silverlight est une technologie à vocation web. Partant de ces deux constats j'ai réalisé un cas pratique d'enrichissement d'un formulaire HTML et plus particulièrement de la balise <SELECT>.

Comme vous le savez sans doute, le plug-in Silverlight permet aux développeurs d'accéder au DOM de la page courante en d'autres termes, Silverlight a la possibilité de communiquer avec la page HTML qui le contient. De plus, la propriété WindowsLess du plugin Silverlight nous permet de venir superpositioner une application Silverlight dans une page HTML et d'y ajouter une transparence pour une meilleur intégration dans le document (au détriment de la performance*). L'idée du cas pratique est donc de venir ajouter une nouvelle expérience à la balise HTML <SELECT>.

Voici ma démarche :

• Création de mon formulaire HTML classique ;
• Ajout d'un PNG transparent par dessus mon <SELECT> pour pouvoir annuler l'action de déroulement des <OPTIONS> sur le clic ;
• Abonnement à l'évènement clic de mon image transparente en JavaScript ;
• Affichage de l'animation Silverlight sur l'évènement précédent ;
• Création de l'animation Silverlight en fonction des <OPTION> présentes dans le <SELECT>
• Récupération de l'évènement MouseEnter de mes rectangles de couleurs XAML ;
• Association d'un JavaScript permettant de modifier l'élément <OPTION> "selected" à l'évènement précedent.

Voici en image le cas pratique :

C'est une couche cliente qui est donc ajoutée au formulaire et qui n'a aucune incidence sur la phase de POST du formulaire. Il reste donc plus qu'à créer un script qui ajoute ce contrôle si et seulement si le plugin silverlight 1.0 est installé sur la machine cliente et le tour est joué en terme "d'accessibilité". Votre formulaire est opérationnel dans 100% des cas.

Silverlight peut donc amener une nouvelle expérience utilisateur à nos bons vieux formulaires HTML, tout comme on le voit déjà avec JavaScript mais de façon beaucoup moins riche. Le fait que Silverlight communique avec le DOM nous permet donc d'avoir une création à la volée de l'animation Silverlight et des différentes couleurs. Bien entendu il s'agit ici d'un cas pratique et non finalisé mais qui permet au moins de comprendre le concept et la valeur ajoutée de la technologie Silverlight.

Les personnes interessées pour une version plus avancée de ce contrôle, peuvent me contacter.

Download sources

N.B : Pour pouvoir lire le projet sur votre machine vous devez avoir Silverlight 1.0 RC installé sur votre ordinateur. Il s'agit d'un projet Expression Blend 2 September Preview.

* Le mode windowless du plugin Silverlight nécessite au navigateur de refaire le rendu de chaque frame de l'animation. Une animation en mode windowsless=true est donc plus gourmande au niveau du navigateur que si elle ne l'était pas.