Pas plus tard qu’aujourd’hui, en discutant avec un collègue voulant s’initier à Silverlight, il est apparu pendant notre conversation que la création d’applications de type Silverlight (on peut étendre à tout RIA) peut se révéler obscure au niveau de la conception ou de l’intégration dans des pages web.
Pour clarifier cela, quelques basiques : l’intégration d’une application Silverlight dans une page HTML, l’interface Expression Blend et les notions de contrôles dans Blend.
Intégration d’une application Silverlight dans une page HTML
Je concède que le développement de sites web et leur design sont deux métiers à part entière. On ne s’improvise pas expert ni dans l’un ni dans l’autre, et je suis le premier à en souffrir.
Tout d’abord, lorsque l’on veut créer une application Silverlight, il faut avoir un projet concret et une bonne idée de comment on veut le mettre en forme. Donc avoir une idée du contenu et de comment on veut le présenter.
Ensuite, une fois les aspects (non exhaustifs) cités ci-dessus établis, il faut oublier le HTML pour créer ses applications Silverlight. Créer une application ne repose sur aucune notion HTML, ASPX, PHP ou autre. On verra dans un bulletin à venir qu’il est possible d’interragir avec la page HTML depuis l’application mais c’est un tout autre sujet.
Par ailleurs, on ne créé pas une application Silverlight depuis un éditeur de page HTML mais avec un environnement de développement pouvant gérer le XAML. Pour les plus téméraires, on peut toujours créer son design depuis Notepad :-)
Une application Silverlight est un objet qui est inclus dans une page web qui assumera la tâche de la charger dans le navigateur lors de l’ouverture de cette page.
Pour illustrer le concept, on pourrait représenter une page web avec une applications Silverlight comme ceci :
Au sein de la page HTML, le code est le suivant pour les différents éléments :
Le texte :
<p>Ceci est du texte affiché dans la page HTML. Ceci est du texte affiché dans la page HTML. Ceci est du texte affiché dans la page HTML.
Ceci est du texte affiché dans la page HTML. Ceci est du texte affiché dans la page HTML. Ceci est du texte affiché dans la page HTML.</p>
-> du code HTML classique
L’application Silverlight :
<object id="Silverlight_Application" data="data:application/x-silverlight-2," type="application/x-silverlight-2">
<param name="source" value="Silverlight_Application.xap"/>
<param name="onerror" value="onSilverlightError" />
<param name="minRuntimeVersion" value="2.0.31005.0" />
<param name="autoUpgrade" value="true" />
<param name="Background" value="#00000000" />
<param name="Windowless" value="true" />
</object>
-> du code HTML classique avec des spécifications permettant de présenter l’”objet” Silverlight
L’image :
<img alt="" height="278" src="Image.gif" width="241" /></p>
-> du code HTML classique
L’interface Expression Blend.
Blend est l’outil idéal pour créer son application Silverlight (Visual Studio est une alternative). On peut y définir le design, ajouter des contrôles (boutons, images, listes déroulantes, etc…) très rapidement.
Dans la version 3, on peut même y éditer le code VB ou C#.
Les contrôles dans Blend
Une des questions abordées avec mon interlocuteur aujourd’hui était la représentation des contrôles dans l’application Silverlight.
Prenons un exemple : je veux ajouter une image dans mon application. Un simple copier/coller depuis Windows Explorer vers mon application suffit à rajouter cette image dans mon application. Mais Silverlight ne va pas seulement créer une image. Il va créer un “conteneur” de type image ayant une propriété (parmi d’autres) spécifiant l’emplacement du fichier image sur mon disque.
Ce qu’il faut comprendre c’est que mon application Silverlight est un conteneur d’objets (ou de contrôles) qui eux-mêmes disposent de propriétés permettant d’influer sur leur apparence, leur comportement, etc…
Rien de nouveau dans le développement orienté objet…
En image :
Voilà pour aujourd’hui… pardonnez-moi pour les termes utilisés ici qui ne sont pas tous tirés d’une des bibles du développement, mais l’idée est de donner ma vision de la chose en espérant avoir posé les bases principales utiles à tout amateur…
~ Guillaume
