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

Les contrôles personnalisés sont ni plus ni moins que des portions de codes associées à des rendus graphiques, développés pour répondre à une/des problématique(s) fonctionnelle(s) récurrentes. Le principal intérêt des "Custom Control" est tout simplement leur réutilisation. En effet, imaginez qu'il faille redévelopper un bouton (en terme de fonctionnalité mais aussi en terme de rendu) à chaque fois que l'on souhaite en utiliser un, cela deviendrait très vite périlleux.

Grace aux contrôles personnalisés Silverlight (Custom Control) vous allez pouvoir résoudre ce problème. Malheureusement avec Silverlight il n'existe pas encore de contrôle natif tel que la TextBox ou le Button. Parcontre, pour pallier à cette lacune temporaire Silverlight nous expose la possibilité de créer des contrôles utilisateurs personnalisés (via des UserControl) facilement. Vous pourrez d'ailleurs retrouver dans le SDK de la version 1.1 alpha des exemples de contrôles basiques tel que la ListBox ou le Slider.

A ce propos, je viens tout juste de terminer un nouvel article dédié aux contrôles personnalisés avec Silverlight version 1.1 alpha. Au cours de cet article vous apprendrez à développer votre propre contrôle personnalisé et à maitriser les aspects techniques tel que les propriétés personnalisées et le rendu graphique de votre contrôle, le tout en code managé C#.

Voici un aperçu du rendu final de l'exemple décrit dans l'article. Il s'agit d'un compteur ayant les propriétés suivantes Value, Maximum, Minimum et Step :

<Wygwam:Meter Value="10" Maximum="16" Minimum="8" Step="2" />

Si vous souhaitez approfondir le sujet, je vous invite donc à venir parcourir l'intégralité de mon article en version française à l'adresse suivante : http://www.asp-php.net/tutorial/xaml/silverlight-usercontrol.php

Les sources de l'article sont disponibles en téléchargement [ Download Source : Format ZIP 25 ko ]. Il s'agit d'un projet Expression Blend 2 (May CTP).

Miguel de Icaza le vice président de Novell et le fondateur du projet Mono a annoncé qu'une version Linux de Silverlight verra le jour "prochainement". Pour rappel Mono est une mise en oeuvre libre de la plateforme de développement de Microsoft (Framework .Net).

Cela confirme la politique de Microsoft à propos de la technologie Silverlight (anciennement WPF/E) qui est de rendre cet outil cross-platform. Silverlight est déjà compatible Windows mais aussi MacOSx via les navigateurs Internet Explorer, Firefox & Safari.

Le prochain step est bien évidement l'arrivée de Silverlight dans nos poches via Windows mobile. Ceci est bien entendu une très bonne nouvelle pour les développeurs RIA et laisse présager un très bel avenir à cette technologie naissante.

Comme je l'ai annoncé il y a environ une semaine le concours CSS organisé à l'occasion de la conférence du Mix 07 s'est terminé le 10 Avril. Les résultats sont tombés ce vendredi 13 à 10:01 PM(GMT) et sont accessibles sur le site officiel de la conférence. Il y a eu 100 participants.

Les critères de jugements sont (assez vague) :

• Quality of the design
• Creativity in remixing the home page
• Thoughtful user experience

Voici le podium avec les 3 grand gagnants du concours qui se verront offrir 1000$ de billiet d'avion et un passe d'entrer à la conférence Mix07 ainsi qu'à la soirée avec les Pussy Cat Dolls !

Et voici le top 10 qui lui se verra offrir un package Zune d'approximativement 500$ :

	Un yguanne, des fleurs, je ne perçois pas l'idée général de la création. L'équilibrage de la page est intéressant et bien fait. Résolution 16/10ème s'absetenir sous peine d'avoir 50% de l'espace inutilisé.
	La création est comique dans son ensemble l'aspect safari ne ressort peut être pas assez. La police de la baseline est interessante et rappel le côté "Jungle". Petit bémole, il me semble avoir déjà vu ces photomontages sur le web.
	Voici ma création j'ai surement du être pénalisé par le mode de navigation horizontale pas très académique et la lourdeur de la page. Mais bon c'est ca qui est bon... Le positionnement par absolu a pu rebuter le juri en effet le design ne s'adaptant pas au contenu ceci pouvait être un point faible bien qu'il s'agisse d'un concours de design. bas débit s'abstenir ! ;)
	Propre, pro, graphisme adaptable au contenu ceci est selon moi représentatif d'un podium idéal
	Je ne suis pas fan de ce genre de création, cela est semblable à un fond d'écran retravaillé. Dommage que le menu n'est pas très accessible une fois la page étant scrollé.
	"Flower" très basique. Dommage qu'il n'y est pas eu de recherche sur la partie mise en page de la page. L'aspect global de la skin reste très classique et statique.
	Une des créations que je préfère. Bien quelle s'appuie directement sur la charte officiel, le choix des couleurs et la précision des tracés (courbes) me séduisent tout particulièrement.
	Comme nous pouvions nous y attendre, le web 2.0 étant très à la mode, de nombreuses créations on été dédié à ce "mouvement graphique". Des couleurs flashies, des icones à gogo, propre, aéré, cette création est très représentative du mouvement, c'est donc un pari réussi. nldr: C'est Patrice qui va faire la gueule ;)
	Le graphisme / montage photo réalisé en fond de page est réussi. Le reste beaucoup moins. La typo a je pense fait baisser la note global de la création.
	Très inspiré des différentes chartes graphiques réalisé par Microsoft pour le Mix cette création n'est pas révolutionnaire en soit.

Mon podium :

A ne pas oublier :

La touche d'humour :

Je remet la palme de l'humour à James Wright pour son magnifique Radio Edit.

Retour d'expérience :

Tout comme l'année dernière la thématique "Mix, Las Vegas" n'a absolument pas joué sur le jugement (cf. le gagnant de l'étape). Les critères de jugement semble encore un peu trop vague à en juger certaines entrées du top 10 qui, j'ose le dire, ne méritent pas leur place comparé à d'autres entrées du concours. Nous pouvons regretter de ne pas avoir eu les notes obtenues dans les différents critères ce qui aurait pu apporter une touche de professionnalisme au concours.

Je souhaite remercier Microsoft pour ce concours CSS qui permet encore une fois de promovoir cette techno et peut être même permettra de persouader quelques dinosaures du web quant à l'utilisation des CSS... mais aussi...  me permettra de me sentir moins seul au bureau (cf. Note sur le zune) ;)

Peut-être à l'année prochaine ?

Tout comme l'année dernière j'avais participé au concours "Remix" de Microsoft qui mèle à la fois CSS et Design, j'ai décidé cette année de retenter ma chance avec cette fois ci un concept un peu plus osé. Cette année à l'honneur : la conférence du Mix 2007 organisé encore une fois à Las Vegas qui est ni plus ni moins que "la grande messe du développement web" comme nous le rappel Aurélien.

Entrons tout de suite dans le vif du sujet avec ma création de cette année (2007) optimisée pour IE7 et Firefox 2 :

La version intégrée est accessible directement depuis le site officiel à cette adresse : http://www.visitmix.com/default.aspx?remix=QuadriColor 

Comme vous pourrez vous en rendre compte cette création fait appel principalement aux nouveautés implémentées dans le navigateur Internet Explorer 7 :

• Utilisations des PNG ;
• Utilisations des :hover sur les éléments ;
• Utilisations du positionnement Fixed.

Les principales particularités de cette skin sont :

• Les animations (gif) ;
• Le mode de navigation horizontal qui laisse découvrir une fresque ;
• La barre de communauté Microsoft skinnée ;
• L'interface utilisateur (menu + community bar) est positionnée de manière fixe à la fenêtre permettant une accessibilité aisée ergonomiquement parlant.

Les résultats officiels seront annoncés le vendredi 13 Avril sur le site du concours. Superstitieux s'abstenir !

Pour rappel, voici ce que j'avais proposé l'année dernière (2006) :

Voici en quelques lignes mon avis/feedback sur ce concours : Je trouve regrettable que dans ce type de contest les règles du jeux puisse changer pendant le déroulement du concours. J'entends par là les multiples changement du template HTML, qui je dois le dire, m'ont beaucoup handicapé. J'en tire une leçon simple, j'aurais du poster le 10 avril à 23h59 GMT, ou alors, faire un design sans modification de layout et donc non innovant... C'est assez dégradant sur le plan artistique de voir sa skin imploser à cause de ce type de modification de dernière minute. A bon entendeur.

Toute fois, je souhaite une bonne chance à tous les participants et plus particulièrement à mes 2 amis francophone Simon - avec lequel j'ai rendez-vous dans le hall de l'hôtel - et Paul - Dont j'attends la mise en ligne de sa skin avec impatiente ; pour l'anecdote il a posté sa skin 1 jour avant la mienne... -

Cesse de plaisanterie, peut-être à l'année prochaine pour la prochaine édition... surtout n'hésitez pas à donner votre avis via les commentaires pour ma création "QuadriColor Mix". Votre avis m'intéresse.

PS: Bruno V. si tu nous regardes, on pense à toi...

Guillaume André

Suite à mon billiet sur la sortie de WPF/E et m'interessant de très prêt à la technologie WPF.
Voici une mini application réalisée avec la technologie WPF/E :

Pour rappel, WPF/E est la solution proposée par Microsoft pour réaliser des applications riches et cross-platform pour le web. Cette mini application est une horloge tel que l'on peut trouver dans la Windows Sidebar de Vista.

Je vous invite à Télécharger les sources pour plus d'informations. Ces sources sont disponibles sur la communauté WPFStorm.com.

DOWNLOAD SOURCES

Si si je vous assure ! Lors des TechDays 2007 qui se dérouleront en début de semaine prochaine au Palais des Congrès à Paris j'animerai 2 workshops. Premièrement un Workshop sur les Gadgets de Windows Vista et deuxièmement un workshop sur les applications WPF (Windows Presentation Foundation).

Qu'est ce qu'un Workshop ? Il s'agit d'un atelier dirigé intéractif de 1 heure et accessoirement un laps de temps qui permet de vous détendre productivement entre 2 sessions !

Je vous invite donc Lundi à 11h (Gadget) et 13h (WPF) pour 2 scéances. Surtout n'oubliez pas votre PC portable car mon petit doigt me dit que vous n'allez pas vous ennuier. Cela dit si vous n'avez pas de PC portable tournant sous Windows Vista, un parc de PC prévu à cet effet sera à votre disposition.

Voici le programme plus en détail.

Création d'application WPF et WPF/E :

Elaboration d’un agrégateur de flux RSS en WPF :

• Création d'un layout en XAML
• Utilisations de Blend, styles, datatemplates...
• Récupération des données RSS via databinding.
• Mise en place d’un scénario et d’une interface interactive via des animations.

Démonstration d’une application WPF/E

-- -- --

Création d'une Gadget sous Windows Vista :

• Découverte de l’environnement, du modèle de programmation, et des différentes possibilités techniques offerte par la Windows Sidebar.
• Démonstration et approfondissement des modes : Docked, Undocked, et Flyout.
• Création d’un panneau de configuration (settings) de la Gadget.
• Mise en pratique des acquis via un cas concret de Gadget. Chaque participant repartira avec sa propre Gadget !

A lundi et venez nombreux, l'entrée est gratuite ! :)

A new community dedicated to the presentation layer of .net 3 is born : http://www.wpfstorm.com/
In this website, you will find articles, news, tips, etc. about WPF and WPF/E the cross platform version of WPF.

Already available :

Article :

• WPF Overview

Tips :

• Transparent WPF/E in web page
• Transparent Window
• "From" and "To" attribute in WPF Animation

News :

• The first preview of WPF/E is there!
• WPF Conversion Contest Winners announced
• Flash to WPF Converter
• .Net Framework 3.0 is done

Good reading

» I want to visit wpfstorm.com

Source : http://www.istartedsomething.com/20061115/ready-summit-expression-blend/

Un nouveau nom ? une nouvelle cible ? Il semble que ce "nouvel outil" s'adresse plus à une cible d'intégrateur "blend" (mélange de code et graphisme ?) que de designer... l'avenir proche nous le dira. Il semble que cette version devrait... bientôt voir le jour !

Mon petit doigt me dit que cette semaine s'annonce être une semaine très WPF... ;o)

EDIT 04/12/2006 : http://www.microsoft.com/products/expression/en/default.mspx

“WPF/E” is Microsoft’s solution for delivering rich, cross-platform, interactive experiences including animation, graphics, audio and video for the Web and beyond. Utilizing a subset of XAML (eXtensible Application Markup Language) based Windows Presentation Foundation technology, “WPF/E” will enable the creation of content and applications that run within multiple browsers, and operating systems (Windows and Mac) using Web standards for programmability.  Consistent with web architecture, the XAML markup is programmable using Java Script and works well with ASP.NET AJAX. Broadly available for customers the first half of 2007, “WPF/E” experiences will require a lightweight browser plug-in made freely available by Microsoft."

• Microsoft .NET Framework 3.0
• Microsoft Windows SDK for Windows and .NET Framework 3.0 Runtime Components
• Microsoft Visual Studio 2005 CTP Extensions for .NET Framework 3.0 (WCF & WPF)
• Microsoft Visual Studio 2005 extensions for .NET Framework 3.0 (Windows Workflow Foundation)