"MVP", "Global Summit", des termes à connotation Microsoft pas forcement compréhensible par tous au premier abord.

Qu'est-ce qu'un MVP ?

The MVP Award recognizes exceptional technical community leaders worldwide who actively share their real world expertise with others. As part of the award, MVPs receive a thank you gift, an MVP certificate, and a variety of resources to help them make the most of their experience as a Microsoft MVP.

En d'autres termes "Most Valuable Professional", il s'agit d'un progamme à l'initiative de Microsoft qui récompense les communautaires actifs sur le partage de leur expertise avec autruis. Il s'agit d'un programme à échelle mondial et touchant la plupart des produits/technologies Microsoft. Chaque prétendant peut accèder au programme pour la durée d'un an et peut-être renouvellé. Pour consulter les différentes catégories ainsi que les lauréats : https://mvp.support.microsoft.com/communities/mvp.aspx

Qu'est-ce que le MVP Global Summit ?

MVP Award recipients are invited to attend the MVP Global Summit, one of the largest multiday Microsoft MVP events. At the MVP Global Summit, MVPs receive access to exclusive technical content, participate in direct feedback sessions, and meet with Microsoft executives, product teams, and their peers from around the world. Microsoft executives and employees welcome MVPs to the Global Summit at Microsoft headquarters in Redmond, Washington and in Seattle. The MVP Global Summit features more than 400 technical sessions in which MVPs can connect with other MVPs, build relationships with Microsoft experts, and provide real-world insights and feedback to Microsoft product teams.

Cet évènement va de pair avec le titre MVP cité ci-dessus. Il permet aux MVPs de se retrouver en un lieu pour le moins mythique : le Campus de Microsoft (à Redmond dans l'état de Washington). Cet évènement est annuel et se déroule sur plusieurs jours. Il permet aux MVPs de participer à des sessions intéractives, rencontrer les chefs produits, mais aussi et surtout de partager ses propres expériences avec ses paires qui bien souvent retrouvent les mêmes problématiques quotidiennes de développement...

Vous l'aurez compris, un tel évènement permet essentiellement d'aborder les différentes roadmaps et d'avoir un rapport privilégié avec les équipes produits. Chose à laquelle j'ai eu la chance de participer cette année grâce a Wygwam, bureau d'étude depuis pas moins de 5 ans qui présente 6 MVPs. Malheureusement cet évènement est soumis à NDA ce qui signifie que je ne pourrais pas détailler les différentes sessions intéractives auxquelles j'ai assisté. Pour ma part, quoiqu'il en soit, il est très motivant et enrichissant de voir les équipes "Client App Dev" s'intéroger et nous intéroger sur le futur (proche ou éloigné) des technologies tel que Silverlight ou WPF.

La documentation complète du language XAML est en ligne.

Pour rappel, XAML pour Extensible Application Markup Language est un language de type XML de description d'interface utilisé dans Silverlight et Windows Presentation Foundation les technologies RIA & RDA de Microsoft.

La documentation est accessible sur le site de Microsoft à l'adresse suivante : http://www.microsoft.com/downloads/details.aspx?FamilyId=3356AF19-A36E-4D6D-9D13-C37DB81EE607&displaylang=en

On y retrouve 2 PDFs conséquents et détaillés comme à l'accoutumé.

Silverlight 2 étant une technologie encore en phase de Beta, je viens tout juste de terminer une VPC avec la configuration suivante :

• Silverlight 2 Beta 1
• Silverlight 2 SDK Beta 1
• Expression Blend Preview March 2008

Voici un bref aperçu de la création d'un projet Silverlight 2 avec Expression Blend. A la création du projet nous retrouvons les fichiers classiques XAML, C# & co mais aussi un fichier de manifeste pour la configuration du projet ainsi que le fichier App.xaml qui rappel bien entendu WPF et la possibilité d'externaliser par exemple des dictionnaires de ressources.

Nous retrouvons aussi de nombreux contrôles tel que : TextBox, Button, HyperLinkButton, Slider, Calendar, DatePicker, ListBox, ScrollViewer, RadioButtion, CheckBox... mais aussi des contrôles de mise en page tel que le Grid (s'apparente au tableau HTML), les StackPanels pour empiler des contrôles à l'horizontale ou à la verticale, et l'indétronable Canvas pour le positionnement en absolu.

NB: On pourra remarquer que le comportement du contrôle TextBox reste à améliorer : des combinaisons de touche tel que Ctrl+A ne fonctionnent pas ainsi que lorsque la taille du texte dépasse la taille de la TextBox, le texte n'est pas repositionné correctement.

Au premier chargement de la page un préchargement du XAML est effectué et un loading (en%) apparait, aussitôt le fichier XAML interprété dans sa totalité celui-ci est affiché. Une fois en cache les contrôles restent très réactifs c'est donc une réussite en terme de performance.

En regardant la source de la page on peut voir aussi qu'il y a eu quelques changement, regardons de plus prêt :

<div id="silverlightControlHost">
  <object data="data:application/x-silverlight," type="application/x-silverlight-2-b1" width="100%" height="100%">
   <param name="source" value="SilverlightApplication3.xap"/>
   <param name="onerror" value="onSilverlightError" />
   <param name="background" value="white" />
   <a href="http://go.microsoft.com/fwlink/?LinkID=108182" style="text-decoration: none;">
        <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
   </a>
  </object>
  <iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>
</div>

Plus d'insertion de balise object via JavaScript. Suite à l'arrangement trouvé dans le cadre l'affaire Eolas, la politique de gestion des ActiveX d'Internet Explorer fait un retour en arrière (validation des activx automatiquement) donc l'astuce du JavaScript n'est plus d'actualité. On peut aussi y voir apparaitre le fameux fichier XAP.

Cette nouvelle version de Silverlight 2 donne aussi la possibilité de se promener au travers du document via la touche TAB en donnant le focus aux divers contrôles. Ceci laisse sous entendre des notions d'accessibilités plus évoluées que la version 1.0

Stay tuned

Pour rappel, Mix 08 est ni plus ni moins que la grande messe annuelle des interfaces riches chez Microsoft. Voici les principales informations  liées à Silverlight 2 qu'il faut retenir suite au keynote animé par Ray Ozzie et Scott Guthrie

Les annonces concernant Silverlight 2 :

• Plus d'un 1.5M  de downloads de Silverlight par jour
• Silverlight 2 Beta 1 disponible
• Silverlight dans les mobiles : http://www.nokia.com/A4136001?newsid=1197788
• Nouveau forum pour les outils Expression : http://forums.expression.microsoft.com/en/forums

Les "nouveaux outils" accompagnant Silverlight 2 :

• Microsoft Silverlight Tools Beta 1 for Visual Studio 2008
• Microsoft® Silverlight? 2 Software Development Kit Beta 1
• Expression Blend 2.5 March 2008 Preview
• Expression Studio 2

Pour télécharger Silverlight 2 c'est par ici http://silverlight.net/GetStarted/#betajump il s'agit d'une version Beta 1. En bonus, vous trouverez un jolie tableau comparatif des fonctionnalité de Silverlight 1.0 et Silverlight 2 à cette adresse et ci-dessous : http://silverlight.net/GetStarted/overview.aspx

Features	Silverlight 1.0	Silverlight 2 Beta 1
2D Vector Animation/Graphics
AJAX Support
Cross-Browser (Firefox, IE, Safari)
Cross-Platform (Windows, Mac)
Framework Languages   (Visual Basic, Visual C#, IronRuby, Ironpython)	-
HTML DOM Integration
HTTP Networking
Isolated Storage	-
JavaScript Support
JSON, REST, SOAP/WS-*, POX, and RSS Web Services (as well as support for Sockets)	-
Cross Domain Network Access	-
LINQ to Objects	-
Canvas Layout Support
StackPanel, Grid and Panel Layout Support	-
Managed Control Framework	-
Full suite of Controls (TextBox, RadioButton, Slider, Calendar, DatePicker, DataGrid, ListBox, and others)	-
Deep Zoom Technology	-
Managed HTML Bridge	-
Managed Exception Handling	-
Media ? Content Protection	-
Media ? 720P High Definition (HD) Video
Media ? Audio/Video Support (VC-1, WMV,   WMA, MP3)
Media ? Image Support  (JPG, PNG)
Media Markers
Rich Core Framework (e.g. Generics,     collections)	-
Security Enforcement	-
Silverlight ASP.NET Controls     (asp:media, asp:xaml)
Type Safety Verification	-
Windows Meda Server Support
XAML Parser (based on WPF)
XMLReader/Writer	-

On peut y voir des fonctionnalités très très interessantes qui n'ont pas encore forcement fait parler d'elles comme par exemple le support des Sockets ou l'Isolated Storage...

Pour conclure, le keynote a bien entendu été aggrémenté de nombreuses démonstrations des partenaires plus impressionantes les une que les autres.
Pour ma part je retiendrais tout particulièrement la démonstration de la société VERTIGO (Video.show souvenez-vous!) démontrant la puissance de "deepzoom" (une technologie seagdragon) ou en d'autres termes, comment se déplacer dans plusieurs images avec un total de 2 billions de pixel : http://memorabilia.hardrock.com/ et ce, de manière fluide.

Voilà approximativement 1 an que Silverlight 1.0 a été dévoilé et c'est aujourd'hui, vendredi 22 février, que Scott Guthrie dévoile en partie la version 2 de Silverlight via son blog : http://weblogs.asp.net/scottgu/archive/2008/02/22/first-look-at-silverlight-2.aspx

Celui-ci nous apprend que la version 2 de Silverlight comportera entre autre :

• Des contrôles basiques (TextBox, CheckBox, RadioButton, Slider, Calendar, DatePicker, etc) ... ce n'est pas trop tôt me direz vous !
• Des contrôles de layout pour la mise en page des interfaces (StackPanel, Grid, Panel, ScrollViewer) sur le même principe que le framework UI de WPF.
• Des contrôles de d'affichage données (DataGrid, ListBox) semblables aux contrôles ASP.NET de Microsoft voir même aux contrôles de data de Flash
• Du data-binding tel qu'on peut en trouver dans WPF
• Des styles & template pour le bonheur des intégrateurs et des graphistes mais aussi pour la bande passante avec le poid des pages XAML
• Easy support REST, WS*/SOAP, POX, RSS
• Gestion du "Cross domain network"...

En d'autres termes, tout ce que tout bon développeur était en mesure d'attendre d'une technologie de RIA...
En bonus, Scott G. met à disposition 8 tutorials très interessant montrant l'avancée en terme de développement de la technologie Silverlight 2.

• Part 1: Creating "Hello World" with Silverlight 2 and VS 2008
• Part 2: Using Layout Management
• Part 3: Using Networking to Retrieve Data and Populate a DataGrid
• Part 4: Using Style Elements to Better Encapsulate Look and Feel
• Part 5: Using the ListBox and DataBinding to Display List Data
• Part 6: Using User Controls to Implement Master/Details Scenarios
• Part 7: Using Templates to Customize Control Look and Feel
• Part 8: Creating a Digg Desktop Version of our Application using WPF

La version 2 va permettre à Silverlight de prendre une toute nouvelle envergure. Notoriété, concurrence, adoption chez les développeurs, Microsoft met visiblement tout en oeuvre pour que cette technologie soit LA technologie RIA du moment et ce, pour le plus grand plaisir des développeurs web. Au vue des dates et de l'avancée du développement de Silverlight 2, il y a fort à parier que le Mix 08 sera une date clé pour cette nouvelle version 2.

EDIT: Comme le souligne CLaueR dans les commentaires, il faut dire Silverlight 2 et non Silverlight 2.0.

Pourquoi utiliser le clipping dans une application Silverlight ?

Les clips permettent de délimiter via un chemin ou des formes géométriques les zones d?affichage d?un élément. Dans le cas de Silverlight il est possible d?attacher des clips à des éléments XAML. Typiquement, un <Canvas>, un <Rectangle>,... pourra se voir attribuer la propriété Clip pour que tout son contenu qui tend à dépasser d'une zone définie soit non visible. Voir exemple ci-dessous, le <Canvas> est de couleur rouge.

• Sans Clipping :

• Avec Clipping :

Pour les intégrateurs web, la notion de Clip en Silverlight s?apparente à la notion de « overflow :hidden ; » en CSS/HTML.

Comment créer et appliquer un clip dans une application Silverlight ?

Expression Blend est la solution de simplicité. En utilisant le logiciel Expression Blend la problématique de Clip peut être résolue très facilement sans se soucier de la technique utilisée.

1 ? Créer un <Canvas> de couleur de fond (background) rouge. Créer un <TextBlock>de couleur (foreground) blanc qui soit un enfant de <Canvas>.

Positionner les éléments comme suit :

2 ? Créer un <Rectangle> au même niveau que votre <Canvas> dans l?arbre XAML. Ce rectangle représentera la zone visible de votre <Canvas>.

3 ? Sélectionner l?élément <Canvas> ainsi que l?élément <Rectangle> comme le montre l?image ci-dessus. Dans la barre de menu située en haut de la fenêtre : « Object > Path », cliquer sur « Make Clipping Path ».

Le résultat obtenu est plutôt convaincant regardons de plus prêt comment cela fonctionne réellement.

D?un point de vue XAML il est intéressant de regarder comment Blend à traité la problématique. En regardant l?onglet XAML, on peut visualiser le code suivant :

<Canvas Background="#FFFF0000" Clip="M0.5,0.5 L332.5,0.5 L332.5,67.5 L0.5,67.5 z"></Canvas>

Blend associe un object Path à la propriété Clip. L?object Path est très intéressant mais peut très vite s?avérer très complexe à déchiffrer notamment quand on commence à utiliser des outils tel que la plume « Pen (touche P) dans Blend » pour réaliser des formes plus complexes que le rectangle. Il existe donc une solution plus accessible et déclarative : l?utilisation de l?objet Geometry qui consiste à dessiner des formes géométriques. L?objet Geometry est ainsi utilisable pour les clips et peut être traduit comme un Path. Un clip peut ainsi être une EllipseGeometry, un RectangleGeometry, un GeometryGroup, une LineGeometry ou un PathGeometry. Ci-dessous un exemple d'utilisation <GeometryGroup>.

   1:  <Canvas 

   2:      xmlns="http://schemas.microsoft.com/client/2007" 

   3:      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

   4:      x:Name="Scene" 

   5:      Width="450" Height="325" Background="#FF000000"> 

   6:      <Canvas Width="396" Height="250" Canvas.Left="26" Canvas.Top="38" Background="#FFFF0000"> 

   7:          <Canvas.Clip> 

   8:              <GeometryGroup> 

   9:                  <EllipseGeometry Center="50,100" RadiusX="50" RadiusY="50" /> 

  10:                  <EllipseGeometry Center="150,190" RadiusX="40" RadiusY="40" /> 

  11:                  <EllipseGeometry Center="220,20" RadiusX="30" RadiusY="30" /> 

  12:                  <EllipseGeometry Center="205,110" RadiusX="30" RadiusY="30" /> 

  13:                  <EllipseGeometry Center="269,155" RadiusX="20" RadiusY="20" /> 

  14:                  <EllipseGeometry Center="360,90" RadiusX="10" RadiusY="10" /> 

  15:              </GeometryGroup> 

  16:          </Canvas.Clip> 

  17:          <Image Width="396" Height="343" Source="Garden.jpg" Stretch="Fill" /> 

  18:      </Canvas> 

  19:  </Canvas> 

Comment animer un clip dans une application Silverlight ?

Pour animer un clip il faut animer la propriété clip qui est soit un Path, soit une Geometry. Animer un Path devient très vite archaïque? le choix se fera donc très vite sur l?animation de formes géométriques. Cependant les animations ont elles aussi leurs limites. En silverlight il existe trois types d?animations : DoubleAnimation, PointAnimation, ColorAnimation vous n?aurez donc pas la possibilité (contrairement à WPF par exemple) d?animer des rectangleGeometry. Cela veut simplement dire que pour réaliser un Collapse/Expand panel l'utilisation des LineGeometry et des PointAnimation sera prescrit. Voici un exemple d?utilisation ci-dessous.

   1:  <Canvas Width="326" Height="192" Canvas.Left="56.296" Canvas.Top="75">

   2:      <Canvas.Clip>

   3:          <PathGeometry>

   4:              <PathFigure>

   5:                  <LineSegment x:Name="rctLineSeg1" Point="0,0"/> 

   6:                  <LineSegment x:Name="rctLineSeg2" Point="326,0"/>

   7:                  <LineSegment x:Name="rctLineSeg3" Point="326,192"/> 

   8:                  <LineSegment x:Name="rctLineSeg4" Point="0,192"/>

   9:              </PathFigure> 

  10:          </PathGeometry>

  11:       </Canvas.Clip>

  12:       <TextBlock .../>

  13:  </Canvas>

La subtilité est donc d'animer les LineSegment via un <Storyboard> lors du MouseLeftButtonUp.

Fermeture du Panel :

   1:  <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rctLineSeg3" Storyboard.TargetProperty="Point">

   2:      <SplinePointKeyFrame KeySpline="0,0.4,0.6,1" KeyTime="00:00:00.45" Value="326,0"/>

   3:  </PointAnimationUsingKeyFrames>

   4:  <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rctLineSeg4" Storyboard.TargetProperty="Point">

   5:      <SplinePointKeyFrame KeySpline="0,0.4,0.6,1" KeyTime="00:00:00.45" Value="0,0"/>

   6:  </PointAnimationUsingKeyFrames>

Ouverture du Panel :

   1:  <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rctLineSeg3" Storyboard.TargetProperty="Point">

   2:       <SplinePointKeyFrame KeySpline="0,0.4,0.6,1" KeyTime="00:00:00.45" Value="326,192"/>

   3:  </PointAnimationUsingKeyFrames>

   4:  <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rctLineSeg4" Storyboard.TargetProperty="Point">

   5:      <SplinePointKeyFrame KeySpline="0,0.4,0.6,1" KeyTime="00:00:00.45" Value="0,192"/>

   6:  </PointAnimationUsingKeyFrames>

Cette tâche qui au premier abord semble très simple s'avère bien plus compliquée qu'elle n'y parait. Nous pouvons donc espérer que la version 2 de Silverlight apportera quelques nouveautés dans le domaine du clipping et viendra enrichir le moteur d'animation déjà présent dans le plugin 1.0.

>> L'intégralité des sources est téléchargeable (Download)

Au cours des articles « Silverlight, Le « TOUT » Silverlight est-il une solution ? Qu?en est-il de l?approche par Composant HTML ? » et « Silverlight, Enrichissez vos formulaires ! » vous aurez noté que j?encourage l?utilisation de la technologie Silverlight 1.0 via composant. Après avoir lu ces deux articles, je suppose que vous vous êtes lancé dans le développement de composant Silverlight? non ? Et bien moi si? et je suis tout de suite tombé sur une problématique purement pratique? Comment insérer deux applications Silverlight ou composant Silverlight au sein d?une même page HTML ? Expression Blend ne permettant pas de réaliser ce type de manipulation, je vais vous proposer une solution au travers de ce post.

Point de vue théorique et sémantique

Une application Silverlight est embarquée dans une page HTML via une balise <OBJECT>. Cette balise <OBJECT> permet de référencer le plug-in Silverlight au sein de votre page en lui précisant quelques paramètres tels que, la source du fichier XAML, la couleur de fond, le mode d?affichage et j?en passe. Théoriquement, il suffit donc de dupliquer la balise <OBJECT> pour créer une seconde application Silverlight dans votre page, comme suit :

<html>
<body>
<object width="400" height="300" id="SilverlightControl1"
        type="application/x-silverlight">
 <param name="source" value="Page.xaml" />
</object>
<object width="400" height="300" id="SilverlightControl2"
        type="application/x-silverlight">
 <param name="source" value="Page.xaml" />
</object>
</body>
</html>

Cependant, cette façon d?inclure votre application Silverlight dans votre page HTML fait abstinence de toute la partie « Fallback » (silverlight.js), c'est-à-dire entre autre, de toute la gestion du versioning  du plugin Silverlight au sens logiciel du terme. Chose qui n?est donc pas préconisée.

Point de vue pratique :

En pratique il va donc falloir intégrer de manière proprement les deux balises <OBJECT> Silverlight au sein de votre page avec la gestion des Fallbacks et la gestion des évènements de chaque application.

Au même titre que le fait le logiciel Expression Blend pour une seule animation je vais vous proposer une solution utilisant les fichiers Silverlight.JS & CreateSilverlight.JS remanié. Pour cela rien de tel qu?un exemple concret !
Nous allons mettre en place une page HTML classique avec dans le corps de ce document deux bandeaux publicitaires Silverlight distincts :

Voici le nouvel appel de la fonction createSilverlight au sein de la page HTML :

<html><body>
?<div id="SLSponsor" class="sponsor">
 <script type="text/javascript">
  createSilverlight('Sponsor.xaml', new Sponsor.Page(), 'SLSponsor');
 </script>
</div>?
</body></html>

Voici le nouveau fichier CreateSilverlight.JS et la function ?createSilverlight? remaniée :

function createSilverlight(xaml_page, sl_scene, parent_element)
{
 Silverlight.createObjectEx({
  source: xaml_page,
  parentElement: document.getElementById(parent_element),
  id: "SLControl_" + parent_element,
  properties: {
   width: "100%",
   height: "100%",
   version: "1.0"
  },
  events: {
   onLoad: Silverlight.createDelegate(sl_scene, sl_scene.handleLoad)
  }
 });
}

Vous l'aurez donc compris il suffit ni plus ni moins que de customiser la fonction CreateSilverlight. L?intégralité du projet est disponible en téléchargement et est très facilement modifiable, n?hésitez donc pas à le télécharger et faire vous-mêmes vos propres composants. Le projet est compatible Expression Blend 2 September Preview.

Contrairement aux ASP.NET Futures et le contrôle XAML, je tiens à préciser que cette solution n?est aucunement dépendante du serveur d?hébergement et est donc compatible avec les applications de type PHP, JAVA, .NET...

Guillaume André - http://www.wygwam.com/

Vous souhaitez découvrir Silverlight ? Connaître les tenants et aboutissants de cette technologie ? Comment aborder cette nouvelle technologie Microsoft ? Comment et où la mettre en oeuvre dans vos projets ?

Je vous propose de venir participer à une session portant sur la technologie Silverlight Mardi 27 Novembre lors d'un séminaire Microsoft au Luxembourg que j'aurai la chance d'animer. Au progamme du jour : Silverlight 1.0 et Silverlight 1.1.

Mise en pratique et retour d'expérience seront au rendez-vous.

Pour s'inscrire une adresse à retenir : http://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032360094&Culture=fr-BE

Alors, on se retrouve dès 13H pour l'accueil ? ;)

Voici le descriptif que vous retrouverez sur le site MSDN :

"Microsoft® Silverlight? est un plug-in de navigateur multi-plate-formes, qui vous permet de mettre en place une expérience media de la nouvelle génération et des applications interactives pour le Web. Il active la création d'environnements riches, attractifs et interactifs que vous pouvez exécuter partout : dans les navigateurs et sur plusieurs périphériques et systèmes d'exploitation de bureau (tel qu'Apple Macintosh). Le modèle de programmation flexible supporte AJAX, VB, C#, Python, et Ruby, et s?intègre avec des applications Web existantes. Mieux encore, Silverlight vous permet une expérience multimedia supportée par les navigateurs les plus courants, sur Mac OS ou sur Windows et bientôt, sur Linux également. En cohérence avec WPF (Windows Presentation Foundation), la technologie de présentation dans Microsoft .NET Framework 3.0 (infrastructure de programmation de Windows), XAML (eXtensible Application Markup Language) est la base des fonctionnalités de présentation de Silverlight. Découvrez Silverlight 1.0, ses propriétés et ses avantages, ainsi que l?environnement de développement Microsoft et les futures possibilités de la nouvelle version, 1.1."

Guillaume André - http://www.wygwam.com/

C'est Mike Harsh en personne (le Program Manager de l'équipe Silverlight) qui vient de mettre en ligne plus d'une cinquantaine de vidéos qui abordent l'essentiel de la technologie Silverlight sur le site Lynda.com.

Voici la liste des thématiques abordées :

1. Comprendre Silverlight
2. Découvrir l'expérience Silverlight
3. Les outils Silverlight : Expression & Visual Studio
4. Commencer avec XAML, JavaScript, et HTML
5. XAML avancé
6. JavaScript avancé dans Silverlight 
7. Bases et préparations pour les graphistes
8. Travailler avec des medias dans Silverlight
9. Créer un Mediaplayer avec Silverlight
10. Les animations en programmation 
11. Déploiement Silverlight

Comme vous pouvez vous en rendre compte, les vidéos s'adressent non seulement aux développeurs mais aussi aux graphistes. On retrouvera ainsi des vidéos comme "Exporting XAML from Adobe Illustrator CS3"... des cas concrets qui pourraient en intéresser plus d'un ;)

Le contenu de ces vidéos est entièrement en anglais : Accéder aux vidéos "Silverlight Essential Training".

Silverlight est une technologie très jeune, la preuve en est, la version 1.0 est en téléchargement depuis le 5 Septembre 2007. Comme le souligne le site officiel dédié à cette technologie, Silverlight est une technologie qui met à disposition des développeurs les outils adéquats pour réaliser des composants riches et des applications de type « Rich Internet Application ». Dès lors se dessine deux approches à bien dissocier. D?une part on parlera d? « approche par composant » et d?autre part d? « approche tout Silverlight ». Ces deux approches sont fondamentalement différentes et soulèvent chacune leur propre problématique en terme de développement mais aussi d?accessibilité.

Attention, au cours de ce post je dissocie volontairement le terme « approche par composant » et le terme « approche par composant HTML ». J?entends par « approche par composant HTM L » : un object HTML (dans le cadre de Silverlight). Et « approche par composant » une méthodologie de développement commune à la plupart des langages de programmation.

Sans doute la plus simple à appréhender en terme de développement et sans doute la plus répandue et utilisée, il s?agit de confier à Silverlight toute la logique d?interface de votre application. Qui dit « tout Silverlight » dit, une balise OBJECT dans vos documents HTML. (Ndlr : c?est les intégrateurs qui vont être content...) avec toutes les limites qu?impose ce type de balise d?un point de vu sémantique. Vous l?aurez sans doute compris, cette approche soulève des problématiques d?accessibilité et de référencement pour votre application web. Aucune solution viable et déontologiquement acceptée des moteurs de recherche n?a encore été apporté à ces problématiques.

Ce type d?approche peut aussi être utilisé dans les sites de présentation ayant une forte interactivité avec des médias, par exemple, des sites d?artistes, maisons de disques, de film, etc. tout comme le fait déjà la technologie Flash. Pour terminer on pourrait retrouver aussi l?approche « tout » Silverlight dans des logiques d?application interne et propriétaire tel que les intranets.

Attention ce type d?approche n?exclu pas la méthodologie de travail par composant bien au contraire !

L?approche par Composant HTML :

Cette approche consiste à créer de multiples composants pour répondre à toutes les problématiques de votre application. Chaque composant sera représenté par un objet Silverlight. Ceci aura donc pour effet de parsemer votre document HTML de plug-in Silverlight. Chaque composant a une tache dédiée qui lui est propre en terme de fonctionnel, il peut être autonome comme travailler avec un autre composant HTML. On utilise généralement cette approche pour venir greffer, enrichir des éléments déjà existants. Un exemple concret de ce type de développement est par exemple la création de composant HTML de formulaire. Vous pouvez dors et déjà en lire plus à ce propos dans mes posts « Silverlight, Enrichissez vos formulaires ! » & « Silverlight : Les contrôles personnalisés ». Bien entendu avec Silverlight 1.0 il est un peu trop tôt pour parler de composant au sens strict du terme mais la méthodologie peut déjà être appliquée.

L?un des gros points fort de cette approche s?évalue en termes de production. Un composant bien pensé, pourra être réutilisé dans divers projet. C?est donc ni plus ni moins une façon de capitaliser votre temps de développement.

Cette approche par composant HTML quant à elle soulève d?un point de vue purement pratique d?autres problématiques que la précédente. Comment insérer plusieurs instances de Silverlight dans une seule et même pages ? Comment faire communiquer ces composants entre eux ? Tant de questions auxquelles je tenterais de répondre via ce blog dans les jours à venir.

Conclusion

Vous l?aurez compris il existe deux grands axes de développement en Silverlight. Avant de mettre en place une telle technologie au sein d?une application web, il est primordial de se poser la question de si oui ou non Silverlight peut apporter un réel plus à votre application. Si Silverlight peut apporter une valeur ajoutée en terme d?usage alors il ne faut pas hésiter. Il ne vous reste plus qu?à faire le choix le plus pertinent en partenariat avec votre client en ce qui concerne l?approche de développement que vous souhaitez mettre en place.

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.

MSDN Belux Flash annonce une session dédiée à Silverlight et plus particulièrement aux bénéfices et fonctionnalités de cette technologie. Les speakers, Gill Cleeren et Ordina, aborderont Silverlight 1.0 et son environnement autour de la plateforme Microsoft. Ils exposeront aussi les différentes possibilités qu'offre la nouvelle mouture Silverlight 1.1

La présentation se déroulera en anglais et nécessite une inscription. Une date à retenir : Mercredi 31 octobre.

Inscription à l'évènement MSDN Evening: Light Up the Web with Microsoft Silverlight

Source : MSDN Belux Flash

C'est durant la plénière du Mix 07 France qui s'est déroulé aujourd'hui (21 juin) à Paris que Miguel de Icaza a annoncé qu'il allait faire une démo de Moonlight le soir même durant une session dédiée à Silverlight présentée par Christophe Lauer et Pierre Lagarde. Miguel a d'ailleurs précisé qu'il fallait être "nice", donc indulgent, par rapport à la version qui nous sera présenté le soir même...

Pour la petite histoire, Miguel de Icaza nous décrit ses péripéties quant au développement de Moonlight et n'hésite pas à souligné que le développement de Moonlight a débuté le 31 mai 2007 suite à un e-mail d'invitation au Mix 07 de Microsoft France. Pour rappel Moonlight est le nom de code donné à la version de Silverlight 1.1 supportée par linux. C'est donc 21 jours (et nuit souligne Miguel) qui auront suffit à l'équipe de Mono pour développer ce projet d'envergure.

Au délà de cloner Silverlight en terme de fonctionnalité et de rendu, Miguel nous a montré (par l'intermédiare d'une magnifique présentation OpenOffice (ndlr: ironie)) l'implémentation de fonctionnalités encore inexistantes sous Silverlight (version Windows). Pour ces fonctionnalités on notera principalement la possibilité de créer des <VideoBrush> et des <ImageBrush>. Lors des démonstrations on a pu voir la projection d'une vidéo directement dans les lettres d'une chaine de caractère chose qui n'est pas encore géré nativement par Silverlight 1.0. Via une autre démonstration Miguel a montré qu'il était possible d'embarquer Moonlight dans un browser (logique me direz vous...) mais aussi en tant qu'application de bureau (tel que la WPF ou AIR pour Windows). Ceci laissant présagé un avenir certain aux applications riches desktop sous Linux. Pour terminer les démonstrations nous avons pu voir la version Moonlight de l'application SilverlightSurface réalisé en Silverlight qui permet de redimensionner et déplacer des images et des vidéos.

Pour conclure, Christophe Lauer a invité Miguel de Icaza à un échange de t-shirt. L'un Mono et l'autre Microsoft.

Crédit photo : Benjamin Gauthey

Pour un premier jet et un projet où Miguel nous a mis en garde quant à son avancement actuel je le trouve vraiment très avancé. Miguel de Icaza a montré un réel engouement lors de se présentation et semble vraiment motivé par ce projet qu'il nomme, je cite, comme son "jouet".

Rappel, vous retrouverez toutes les informations du projet Moonlight à l'adresse suivante : http://www.mono-project.com/Moonlight

Comme annoncé sur le site officiel du WygDay j'ai pu animer mardi après-midi (5 juin) une session entièrement dédiée à la technologie Silverlight au côté de Aurélien Verla.

Voici l'intitulé de la session : "A l'aube de la (re)naissance de l'application web riche : Silverlight (L400)". Vous pouvez d'ores et déjà télécharger le fichier powerpoint de la présentation. Cette session avait pour principal objectif de comprendre le fonctionnement de cette nouvelle technologie mais aussi de mettre en avant sa valeur ajoutée au sein d'un projet via des démonstration concrètes.

Voici un bref aperçu du plan de la session :

• Les présentations
• L'installation
• Comment ça marche ?
• Structure d'une application classique
• Les outils
• Silverlight, un nouveau workflow
• Silverlight 1.0 > Démo de la création d'un player full silverlight et mise en place de chapitrage
• Silverlight 1.1 > Démo d'un ChartViewer : Exploitation d'un fichier Google Analytics via webservice et LINQ et affichage des données via une interface Silverlight.

Je vous invite à consulter régulièrement le site WygDay où nous devrions ajouter toutes les vidéos mais aussi les slides des sessions d'ici peu. J'éditerai ce post dès qu'ils seront en ligne.

Comme je l'annoncé dans un précédent post intitulé : "Silverlight, Enfin des applications RIA sous Linux", Mono travail activement à l'élaboration d'un plugin "Silverlight" Mozilla sous Linux mais aussi à l'achèvement des librairies qui permettraient à Silverlight de voir le jour sous environnement Linux. Ce projet portera le nom de code "Moonlight". Un site dédié à ce projet et à son élaboration a été créé à l'adresse suivante : http://www.mono-project.com/Moonlight

Pour en savoir un peu plus sur le développement je vous invite à rejoindre le groupe de discussion à l'adresse suivante : http://groups.google.com/group/mono-olive