Atelier « Premiers pas avec Silverlight et Expression ...€¦ · Silverlight était anciennement...
Transcript of Atelier « Premiers pas avec Silverlight et Expression ...€¦ · Silverlight était anciennement...
Document préliminaire Send feedback to: [email protected] Page 1
Atelier « Premiers pas avec Silverlight et Expression Blend » (v0.6)
Durée et Audience cible Durée : La durée de ce Hands On Labs est d’approximativement 45 minutes, hors temps de
téléchargement et d’installation de Silverlight et d’Expression Blend
Cible : Développeurs tous niveaux ou Designers, avec ou sans première expérience en
développement .NET
Pré-requis : Ordinateur fonctionnant sous Windows XP SP2 ou Windows Vista, Compte Windows Live
ID pour télécharger la version d’évaluation d’Expression Blend (facultatif).
Contenu
Table des matières Durée et Audience cible .......................................................................................................................... 1
Contenu ................................................................................................................................................... 1
Avant Propos ........................................................................................................................................... 2
Préparer et configurer son environnement de travail ............................................................................ 3
Installation de Silverlight ..................................................................................................................... 3
Installation d’Expression Blend ........................................................................................................... 4
Exercice 1 : Créer le projet ...................................................................................................................... 5
Etape 1 : Créer la structure du projet .................................................................................................. 6
Etape 2 : Définir le Canvas de base ..................................................................................................... 8
Etape 3 : Ajouter le fond de la vidéo ................................................................................................... 8
Exercice 2 : Ajouter la vidéo .................................................................................................................. 10
Etape 1 : Ajouter l’élément player vidéo ........................................................................................... 10
Etape 2 : Modifier les propriétés de la vidéo .................................................................................... 11
Etape 3 : Prévisualiser l’application ................................................................................................... 12
Etape 4 : Comprendre le fonctionnement du plug-in Silverlight ...................................................... 13
Etape 5 : Modifier les options du MediaElement .............................................................................. 15
Exercice 3 : Ajouter de l’interactivité .................................................................................................... 16
Etape 1 : Créer le design du bouton .................................................................................................. 16
Etape 2 : Ajouter une icône ............................................................................................................... 19
Document préliminaire Send feedback to: [email protected] Page 2
Etape 3 : Constituer le bouton .......................................................................................................... 20
Etape 4 : Créer le Bouton Pause ........................................................................................................ 20
Exercice 4 : Utiliser les Animations........................................................................................................ 21
Etape 1 : Créer une animation simple ............................................................................................... 21
Exercice 5 : Scripter le comportement des boutons ............................................................................. 23
Etape 1 : Nommer le MediaElement ................................................................................................. 23
Etape 2 : Ecrire le code Javascript ..................................................................................................... 23
Etape 3 : Gérer les évènements ........................................................................................................ 23
Conclusion et Ressources ...................................................................................................................... 24
Ressources ......................................................................................................................................... 24
Avant Propos Silverlight est le nom d’une nouvelle technologie de couche de présentation Web qui a été conçue
pour pouvoir fonctionner sur un large éventail de plate-formes. Cette technologie permet la création
et l’exécution d’applications proposant des interactions riches, ainsi que des effets visuels captivants
et le support de contenus multi-médias tels que le son ou la vidéo, y compris le rendu de vidéos en
Haute Définition.
A l’instar de WPF (alias Windows Presentation Foundation) qui est la technologie de présentation
apparue avec le Microsoft .NET Framework 3.0, Silverlight est basé sur un langage de description
d’interfaces nommé XAML (eXtensible Application Markup Language).
Toutefois, les objectifs de WPF et de Silverlight étant différents, le langage XAML supporté par
Silverlight est relativement restreint par rapport à celui de son ainé WPF, et peut être vu comme un
sous-ensemble de ce dernier. Certaines fonctionnalités présentes dans WPF sont pour le moment
absentes de Silverlight 1.0, comme par exemple les contrôles permettant de gérer le Layout des
éléments dans une scène, les contrôles visuels de type Combobox, Textbox, Listbox, etc… ainsi que
les fonctionnalités liées au rendu de scènes en 3D.
Silverlight était anciennement connu sous le nom de code de « WPF/E » pour « Windows
Presentation Foundation / Everywhere », pour souligner son aspect multi-plateformes.
Supportant côté client un large éventail de navigateurs (Internet Explorer 6 et 7, Mozilla Firefox et
Safari d’Apple sur MacOSX), Silverlight n’a en revanche aucune dépendance avec la ou les
technologies serveur que vous utilisez sur vos sites Web.
Une application Silverlight est essentiellement constituée par une page HTML, un fichier Javascript
qui va contenir le code définissant le comportement et les interactions de l’application et
éventuellement un ensemble de ressources telles que des images, du son ou de la vidéo.
Document préliminaire Send feedback to: [email protected] Page 3
Vous pouvez donc totalement envisager d’ajouter des fonctionnalités en Silverlight sur vos sites
existants en Java JSP, PHP, CGI ou toute autre technologie serveur, qu’elle provienne du catalogue de
Microsoft ou pas.
Contrairement à d’autres technologies permettant la création d’interfaces utilisateur riches et
réactives dans le navigateur, telles que les Applets Java, les contrôles ActiveX ou les objets Flash, qui
sont distribués sous la forme de contenus binaires, les scènes XAML sont reçues par le navigateur
sous la forme de fichiers XML humainement lisibles, et dont le contenu peut être indexé par les
moteurs de recherche tels que Windows Live Search.
Enfin, les scènes Silverlight sont exécutées dans le cadre d’un plug-in léger (il s’agit d’environ 2Mo
pour le plug-in Silverlight 1.0) qui peut être installé à la demande depuis toute page web contenant
une scène Silverlight, et sans nécessiter que l’utilisateur ne possède les privilèges Administrateur sur
sa machine, ni redémarrage du système d’exploitation.
Du point de vue de la création d’applications Silverlight, Microsoft propose un ensemble cohérent
d’outils à destination des Designers et des Développeurs, sous la forme d’une famille d’outils de la
gamme Expression d’une part, et de Visual Studio 2008 d’autre part, qui permettent de créer une
chaine de production cohérente et qui favorise la collaboration entre les populations de designers et
de développeurs. Nous allons d’ailleurs utiliser le produit Expression Blend plus tard dans ce tutoriel
pour réaliser notre première application Silverlight.
NB : Les outils de la gamme Expression ainsi que Visual Studio 2008 ne fonctionnent que sur
Windows. Il n’existe pas de version MacOSX de ces outils.
Préparer et configurer son environnement de travail
Installation de Silverlight
Comme nous l’avons évoqué dans l’Avant-propos, une scène Silverlight est définie dans un fichier
XML qui contient les éléments XAML constitutifs de l’application. Si dans l’absolu, il est parfaitement
possible d’éditer ce fichier XAML avec un simple éditeur de texte tel que Notepad, il est des
opérations pour lesquelles le recours à un outil spécifique permet des gains de productivité
importants.
Il est temps maintenant de faire entrer les outils Expression Design et Expression Blend en scène. Ces
outils permettent de designer des objets ou des scènes complètes depuis des environnements
graphiques puissants, et d’exporter le tout sous la forme d’assets XAML ou de projets qui pourront
ensuite être partagés avec les développeurs du projet qui viendront enrichir les éléments statiques
de Design produits par les designers pour leur ajouter les différents comportements et interactions
souhaités avec l’utilisateur.
Par la suite, nous allons limiter notre utilisation de ces outils à Expression Blend. Mais avant
d’installer Expression Blend, nous allons déjà préparer notre environnement en installant le plug-in
permettant l’affichage et le rendu des scènes et applications Silverlight.
Pour installer Silverlight sur votre machine, ouvrez votre navigateur et faites le pointer sur l’adresse
suivante : http://www.microsoft.com/silverlight
Document préliminaire Send feedback to: [email protected] Page 4
Depuis cette page, cliquez sur le lien « Tools and Resources » dans le menu de gauche, puis cliquez
sur l’option « Installation Files ». Vérifiez que votre système correspond aux pré-requis indiqués dans
les pages « System Requirements » de la section « Silverlight 1.0 » puis cliquez sur le logo de
Windows ou de MacOSX en fonction du type d’ordinateur que vous utilisez.
L’installation démarre et en quelques instants, vous devriez voir apparaitre la boite de dialogue
suivante qui confirme que l’installation de Silverlight sur votre ordinateur est terminée :
L’installation s’effectue en deux clics depuis Windows XP, et en trois clics sur Windows Vista, du fait
de la présence de UAC (= User Access Control).
Installation d’Expression Blend Si vous ne possédez pas de licence d’utilisation d’Expression Blend, vous pouvez vous rendre à
l’adresse suivante afin de télécharger une version d’évaluation complète, toutefois limitée dans le
temps, du produit :
http://www.microsoft.com/expression/products/download.aspx?key=blend2preview
NB : Pour pouvoir télécharger cette pré-version d’Expression Blend, vous devrez posséder un compte
Windows Live ID valide.
Votre environnement de travail est maintenant prêt. Vous allez pouvoir commencer à suivre les
étapes de ce Labo de Travaux Dirigés dont le résultat sera une application de type player vidéo dont
voici un aperçu :
Document préliminaire Send feedback to: [email protected] Page 5
Vous aurez remarqué que ce document comporte une vingtaine de pages. La longueur (relative) de
ce « Hands On Labs » vient du fait que nous avons souhaité détailler chacune des étapes et des
opérations pour votre plus grand confort.
Toutefois, vous ne devriez pas avoir besoin de plus de 45 minutes pour compléter ce lab, hors
temps de téléchargement et d’installation de Silverlight et d’Expression Blend.
En route !
Exercice 1 : Créer le projet Sans plus attendre, lançons l’exécution d’Expression Blend et créons notre projet.
Arrêtons nous un instant pour prendre le temps de repérer certaines zones et outils importants pour
la suite de cet atelier. Voici une capture d’écran de Expression Blend 2 :
Document préliminaire Send feedback to: [email protected] Page 6
1 – Il s’agit des onglets permettant de basculer entre la vue « Designer visuel » et code source XAML
pour la scène de notre application.
2 – Cet outil représenté par un carré contenant des rectangles de couleur est l’outil Canvas. A ne pas
confondre avec l’outil Rectangle, symbolisé par un rectangle plein et situé juste au dessus.
3 – L’éditeur de « Brushes », qui permet de définir les couleurs de remplissage (ou encore de fond)
pour une forme via l’outil « Fill », ou encore la couleur de contour avec « Stroke » et le masque
d’opacité en dessous des deux premiers. Les trois onglets en bas de l’encadré rouge permettent de
définir (de gauche à droite) : aucune brosse (No brush), une couleur pleine (Solid color brush), et
enfin un dégradé (Gradient brush).
4 – L’outil permettant de définir des Storyboards, qu’on utilisera en fin de cet atelier pour créer les
animations sur nos boutons Play et Pause.
Etape 1 : Créer la structure du projet
Pour cela, on clique sur l’option « New Project » depuis le menu « File », ou bien on utilise le
raccourci clavier « CTRL+SHIFT+N ». La boite de dialogue suivante apparaît :
Document préliminaire Send feedback to: [email protected] Page 7
NB : Si vous ne trouvez pas les options permettant de créer un projet Silverlight dans Expression
Blend, c’est que vous utilisez la version standard de Expression Blend, et pas la pré-version de
« Expression Blend 2 » qui apporte justement le support des projets Silverlight. Dans ce cas,
téléchargez la version d’évaluation de Expression Blend 2 depuis le lien indiqué plus haut. Les deux
versions Expression Blend et Expression Blend 2 Preview peuvent être installées côte à côte sur votre
machine.
On va choisir un type de projet correspondant à un runtime Silverlight 1.0 en cliquant sur la troisième
option en partant de la gauche « Silverlight Application (Javascript) ». On donne au projet le nom de
« MonPlayer » et on appuie sur le bouton « OK ». Vous trouverez l’indication du langage C# dans la
troisième combobox. De toutes façons, le seul langage utilisable en Silverlight 1.0 est Javascript, la
valeur de cette troisième combobox n’a donc aucun effet sur la création de notre projet.
Expression Blend crée alors la structure du projet, ainsi que les éléments minimaux nécessaires à son
exécution. Détaillons le contenu du projet ainsi créé en explorant l’arborescence des fichiers dans
l’onglet « Project » de la boite à outils de droite :
On constate que notre projet se compose d’une page HTML par défaut, nommée Default.html qui va
servir de conteneur à notre application nommée Page.xaml. Chacun de ces deux éléments est associé
à un fichier Javascript. Le fichier Default_html.js contient l’appel à la fonction qui réalise
Document préliminaire Send feedback to: [email protected] Page 8
l’instanciation du conteneur Silverlight dans la page HTML, quant au fichier Page.xaml.js, il va
contenir le code Javascript définissant le comportement de l’application. Nous reviendrons plus tard
sur ce fichier Page.xaml.js en fin de Lab pour ajouter les actions liées aux boutons Play et Pause que
nous allons créer.
Etape 2 : Définir le Canvas de base
Par défaut, le Canvas de base dans notre projet est créé par Expression Blend avec une taille de 640
par 480 pixels. Afin de conserver une taille raisonnable à notre application, nous allons le
redimensionner en 400 par 300. Pour cela, on clique sur la surface blanche du Canvas dans le
designer, ou bien on va sélectionner ce Canvas dans la hiérarchie des objets du projet en cliquant sur
l’élément nommé Page, comme montré sur la copie d’écran suivante :
Puis depuis l’onglet « Properties » de la boite à outils de droite, on va modifier les propriétés Width
et Height de notre Canvas pour en fixer sa dimension à 400 par 300 pixels, comme sur la capture
d’écran suivante :
Etape 3 : Ajouter le fond de la vidéo En tant que première étape, nous allons ajouter un fond noir dans notre Canvas de base. Cette étape
n’est pas indispensable mais elle permettra d’afficher un fond sombre plus agréable en attendant
que la vidéo soit affichée dans notre player.
Pour cela, on va sélectionner l’outil Rectangle dans la boite à outils de gauche et placer un rectangle
par-dessus notre Canvas de base, de dimensions 380 par 280 pixels, centré sur le Canvas de base. On
Document préliminaire Send feedback to: [email protected] Page 9
aboutit à un objet supplémentaire dans la hiérarchie de notre projet, comme sur cette capture
d’écran :
On va ensuite modifier la couleur de remplissage et de l’entourage de notre rectangle, en allant dans
ses propriétés dans les boites à outils de droite. Avec notre nouveau rectangle sélectionné, on va
cliquer sur l’outil « Fill » dans la zone d’édition des « Brushe » et sélectionner la couleur noire, puis
après avoir sélectionné l’outil « Stroke », on va choisir l’option « No Brush » pour rendre le contour
invisible. Voici le résultat :
Arrêtons nous un instant dans la construction de notre player pour basculer en mode « Editeur XAML
et observer ce que nous avons créé pour l’instant. Pour cela, on va cliquer sur l’onglet « XAML » en
haut à droite de la surface de notre designer, et on voit apparaître le code XAML suivant :
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300"
Background="White"
x:Name="Page"
Document préliminaire Send feedback to: [email protected] Page 10
>
<Rectangle Width="380" Height="280" Canvas.Left="10" Canvas.Top="10"
Fill="#FF000000" />
</Canvas>
Ceci nous enseigne qu’en Silverlight, un élément est positionné relativement au Canvas qui le
contient. Ici, on note qu’il y a une marge de 10 pixels horizontalement et verticalement entre notre
rectangle et le Canvas de niveau supérieur qui le contient. Si vous modifiez les valeurs de ces
propriétés en mode XAML et que vous basculez en mode Design en cliquant sur l’onglet éponyme,
vous verrez que les modifications sont immédiatement prises en compte. Le designer visuel XAML de
Expression Blend se base donc intégralement et uniquement sur le document XAML pour générer le
rendu visuel. Les vues XAML et Design sont donc toujours synchronisées.
Nous sommes prêts maintenant à ajouter le conteneur vidéo à notre player. C’est ce que nous allons
faire à l’étape suivante.
En Synthèse : Dans cette première partie, nous avons configuré notre machine en installant le plug-in
Silverlight ainsi que l’outil Expression Blend. On se souviendra que bien que les outils de création
d’applications tels que Expression Blend et Visual Studio 2008 ne fonctionnent que sur les
ordinateurs équipés de Microsoft Windows, les applications Silverlight ainsi créées fonctionnent
quant à elles sur Windows et MacOSX et dans les navigateurs principaux (Internet Explorer, Mozilla
Firefox et Apple Safari).
Exercice 2 : Ajouter la vidéo
Etape 1 : Ajouter l’élément player vidéo
Dans la barre d’outils de gauche, on va cliquer sur l’icône représentant un double chevron pour faire
apparaitre la fenêtre qui contient l’ensemble des éléments à disposition. On coche la case
« ShowAll » puis on sélectionne le MediaElement, comme sur la copie d’écran suivante :
Document préliminaire Send feedback to: [email protected] Page 11
Comme on l’a déjà fait pour le Rectangle, on va déposer un MediaElement sur la surface de notre
Designer, et on lui donnera une dimension de 360 par 260 pixels. On le centrera aussi au milieu de la
surface de notre Canvas de base, ce qui au final aura pour effet de donner une valeur de 20 pixels à
ses propriétés Canvas.Left et Canvas.Top.
Etape 2 : Modifier les propriétés de la vidéo
On va maintenant aller modifier les propriétés de notre contrôle MediaElement pour fixer le nom du
fichier vidéo, puis modifier la valeur du paramètre qui contrôle l’étirement de la vidéo :
Document préliminaire Send feedback to: [email protected] Page 12
Pour cela, on va cliquer sur l’icône sous la fenêtre des propriétés pour faire apparaitre les propriétés
étendues qui contiennent le paramètre « Stretch », qu’on fixera à Fill.
On spécifie le fichier vidéo à lire sur la propriété Source. Le bouton comportant les « … » donne
classiquement accès à une boite de dialogue de sélection de fichiers. Vous pourrez trouver des
exemples de fichiers vidéo dans le répertoire Videos\Sample Videos de Windows Vista. Selon votre
inspiration, vous pouvez sélectionner l’une des trois vidéos Bear.wmv, Butterfly.wmv ou Lake.wmv.
Dans cet exemple, nous avons choisi Bear.wmv.
En passant en mode Edition XAML, on vérifie que les propriétés de notre MediaElement sont
conformes à ceci :
<MediaElement Width="360" Height="260" Canvas.Left="20" Canvas.Top="20" Source="Bear.wmv"
Stretch="Fill"/>
Etape 3 : Prévisualiser l’application
Voilà notre application maintenant prête pour un premier test rapide, afin de s’assurer que tout
fonctionne correctement à ce stade intermédiaire.
Pour cela, on va sélectionner l’option « Test application » dans le menu « Project », ou plus
simplement et selon un vieux réflexe pour ceux parmi vous habitués à utiliser Visual Studio, on va
simplement pressez la touche F5 qui est le raccourci clavier correspondant.
Expression Blend démarre la construction du projet, et démarre un serveur Web local (il s’agit en fait
de Cassini, celui là même qui est utilisé par Visual Studio 2005 pendant le développement
d’applications web avec ASP.NET). L’infobulle suivante nous indique que Cassini démarre :
Document préliminaire Send feedback to: [email protected] Page 13
Naturellement, Expression Blend démarre ensuite Internet Explorer et affiche notre application dans
laquelle la vidéo démarre automatiquement. C’est le comportement par défaut du MediaElement.
Nous modifierons ce comportement dans l’étape suivante. Notre application ressemble alors à ceci :
Pour relancer la lecture de la vidéo, à ce stade et n’ayant mis en œuvre aucun contrôle sur l’élément
MediaElement, vous devrez recharger l’application dans le navigateur en appuyant sur F5 ou en
sélectionnant l’option « Refresh » du menu « View » de Internet Explorer.
Etape 4 : Comprendre le fonctionnement du plug-in Silverlight
Attardons-nous un instant sur le contenu de notre page HTML. Comme nous l’avons rapidement
évoqué au point 1.1 lors de la création de notre projet, celui-ci est constitué d’une page HTML, d’un
fichier XAML et de quelques scripts Javascript.
En fait, notre page HTML contient une balise DIV dont le nom est silverlightHost et qui contient un
appel en Javascript à la méthode createSilverlight(), comme ceci :
<div id="SilverlightControlHost" class="silverlightHost">
<script type="text/javascript">
createSilverlight();
</script>
</div>
Cette fonction createSilverlight est définie dans le fichier Javascript Default_html.js et contient le
code suivant :
function createSilverlight()
{
Document préliminaire Send feedback to: [email protected] Page 14
var scene = new MonPlayer.Page();
Silverlight.createObjectEx({
source: "Page.xaml",
parentElement: document.getElementById("SilverlightControlHost"),
id: "SilverlightControl",
properties: {
width: "400",
height: "300",
version: "1.0"
},
events: {
onLoad: Silverlight.createDelegate(scene, scene.handleLoad)
}
});
}
En résumé, cette méthode createSilverlight – générée par Expression Blend – va effectuer un appel à
la méthode Silverlight.createObjectEx qui est définie dans Silverlight.js, en lui passant en paramètre
différentes propriétés de notre scène, en particulier le nom du fichier XAML principal (ici, Page.xaml),
les dimensions souhaitées pour le conteneur Silverlight (ici 400 par 300 pixels), et aussi la version de
Silverlight nécessaire à l’exécution de cette application.
La méthode Silverlight.createObjectEx comporte des mécanismes de « fallback », ce qui signifie
qu’elle va présenter dans la page une image et les liens permettant de télécharger Silverlight depuis
les machines dont il serait absent. Ce fallback se présente à l’écran sous la forme suivante :
En cliquant sur cette image, l’utilisateur est amené sur une page du site Microsoft.com depuis
laquelle le téléchargement de la version requise de Silverlight lui est proposé. L’installation de
Silverlight depuis Internet Explorer ne nécessite pas de redémarrage du navigateur. Pour les autres
navigateurs, un redémarrage est nécessaire.
Si Silverlight est présent sur la machine, la méthode Silverlight.createObjectEx va créer le tag OBJECT
correct dans la page au niveau de notre DIV silverlightHost, ce qui va rendre possible le démarrage de
notre application.
Plutôt que d’utiliser toute cette mécanique, on pourrait limiter le contenu de notre page HTML au
tag object suivant :
<object width="400"
height="300"
id="SilverlightControl"
type="application/x-silverlight">
<param name="source" value="Page.xaml">
</object>
Document préliminaire Send feedback to: [email protected] Page 15
Vous pouvez effectuer le test, ça fonctionne parfaitement autant dans Internet Explorer que dans
Mozilla Firefox, à condition que Silverlight soit pré-installé. En effet, en utilisant directement ce tag
OBJECT on ne dispose pas d’un mécanisme de Fallback.
L’autre petite différence que vous aurez notée est qu’en créant notre conteneur « à la main » avec
un tag OBJECT, l’utilisateur doit cliquer une première fois sur la zone pour autoriser l’activation du
contenu du tag OBJECT. C’est un autre avantage apporté par l’utilisation de la méthode
createSilverlight. Etant créé par un script résidant dans la section HEADER de notre page HTML, notre
conteneur est directement actif et l’utilisateur n’a pas besoin de cliquer pour l’activer.
En résumé, le fonctionnement de la chaîne d’instanciation de notre conteneur Silverlight est
schématisé sur le graphique suivant :
Le fonctionnement détaillé de la fonction createSilverlight() est documenté dans cet article de MSDN
– en Anglais :
http://msdn2.microsoft.com/en-us/library/bb412401.aspx
Etape 5 : Modifier les options du MediaElement
Puisque dans une étape suivante nous allons ajouter des boutons pour contrôler la lecture de notre
vidéo, nous ne voulons pas que sa lecture démarre automatiquement au lancement de l’application.
On basculera ensuite en mode Edition XAML pour ajouter une propriété qui empêchera la lecture
automatique de la vidéo lors du lancement de notre player. Il suffit pour cela d’ajouter
AutoPlay=’’False’’ aux propriétés de notre MediaElement.
On pensera aussi à cocher la case « IsMuted » afin de couper le son lors de la lecture de cette vidéo,
car l’écoute de ces sons peut devenir rapidement irritante quand on fait des tests ;)
Document préliminaire Send feedback to: [email protected] Page 16
Au final, on contrôlera en mode Edition XAML que la définition de notre MediaElement est conforme
au fragment XAML suivant :
<MediaElement Width="360" Height="260" Canvas.Left="20" Canvas.Top="20" AutoPlay="False"
IsMuted="True" Source="Bear.wmv" Stretch="Fill"/>
Exercice 3 : Ajouter de l’interactivité Dans cette étape, nous allons designer deux boutons destinés à lancer la lecture et mettre en pause
notre vidéo. Commençons par essayer de créer des boutons visuellement agréables, et cédant aux
canons de la mode actuelle, avec des coins arrondis, un gradient de couleur et la semi-transparence :
Vous verrez qu’Expression Blend permet d’obtenir ce type d’effets avec un minimum d’efforts.
Etape 1 : Créer le design du bouton
Commençons par créer un conteneur pour recevoir les différents éléments qui vont constituer notre
bouton. On ajoute donc un nouveau Canvas à notre scène, on lui donnera une dimension de 60 par
40 pixels, et on le positionnera en bas à droite de notre scène avec une valeur de Left à 310 et de
Top à 230.
Ajoutons le premier rectangle à notre Canvas, celui-ci va constituer le fond de notre bouton. Faisons
lui occuper toute la surface de notre Canvas, donc donnons-lui les mêmes valeurs de géométrie que
pour le Canvas conteneur, à savoir une dimension de 60 par 40 pixels, et une valeur de Left à 0 et de
Top à 0.
On va ensuite donner des coins arrondis à notre rectangle. Pour cela, on utilisera les poignées qui
sont affichées dans le coin supérieur gauche de notre rectangle :
Document préliminaire Send feedback to: [email protected] Page 17
A défaut d’utiliser ces poignées pour régler visuellement la valeur du rayon de l’arrondi, on peut aller
directement modifier la valeur de cette propriété au niveau de notre rectangle :
Donnons à cet arrondi la valeur de 7 pixels de rayon pour le rayon vertical et horizontal. Vous pouvez
essayer différentes combinaisons de valeurs de rayons en X et Y pour varier les effets.
Nous allons maintenant choisir une couleur de fond rouge #FFFF0000 pour le fond de notre
rectangle, et fixer la valeur de son contour à « No Brush » pour le rendre invisible. Ensuite on va
régler la transparence de ce rectangle à 85%, ce qui donne le résultat suivant :
Nous allons maintenant placer un second rectangle par-dessus le premier afin d’ajouter le gradient
de couleur qui donnera un effet de volume à notre bouton.
De la même façon que l’on vient de le faire, on va créer un bouton dont les propriétés sont les
suivantes :
Width =55
Height = 35
Left = 2,5
Top = 2,5
RadiusX, RadiusY =5
Opacity = 85%
Document préliminaire Send feedback to: [email protected] Page 18
Nous allons ensuite fixer l’entourage de ce rectangle à « No Brush » puis sélectionner un gradient de
couleur pour son fond (Fill) alors que jusqu’à présent on n’avait utilisé que des couleurs pleines (Solid
color brush).
Changeons en blanc le premier point de notre gradient qui est noir par défaut. Ajoutons-lui un niveau
de transparence. Au final, la couleur de ce premier point est #D0FFFFFF. Déplaçons le second point
de ce gradient au milieu du spectre en faisant glisser le curseur, et donnons-lui la couleur de
transparence #00FFFFFF. Vous pouvez ajouter d’autres points à ce gradient en cliquant n’importe où
sur le spectre, et vous pouvez supprimer des points du gradient en faisant glisser ce point vers le bas
en dehors du spectre. Voici le résultat obtenu :
Il nous reste juste à changer l’orientation de ce gradient qui est par défaut horizontal, or, nous le
voudrions vertical. Pour cela, on va aller chercher l’outil « Brush transform » dans la barre d’outils.
Cet outil est symbolisé par une large flèche oblique :
Ceci fait apparaître une flèche horizontale au dessus de notre rectangle, et nous permet en déplaçant
ses extrémités, en faisant varier sa longueur et son orientation de modifier l’aspect de notre gradient
de couleurs. Voici les étapes intermédiaires :
Document préliminaire Send feedback to: [email protected] Page 19
En faisant varier la longueur et l’orientation de la flèche contrôlant le gradient :
Pour arriver au résultat final escompté :
Etape 2 : Ajouter une icône
Nous allons maintenant ajouter l’icône triangulaire qui symbolise traditionnellement le lancement de
la lecture d’une vidéo. Pour cela, on va ajouter un élément Polygon. Afin de gagner un peu de temps,
et pour changer de façon d’opérer, nous allons ajouter cet élément en l’insérant directement entre
nos deux rectangles, en mode Edition XAML. Ajouter la ligne suivante entre nos deux rectangles :
<Polygon Canvas.Left="20" Canvas.Top="10" Points="0,0 0,24 24,12" Fill="Black"
Opacity="0.70" />
Notez au passage que Silverlight réalise l’affichage des éléments dans l’ordre dans lequel il lit la
source XAML, sauf autrement spécifié par l’utilisation de la propriété ZIndex. En insérant notre
Polygon avant le rectangle contenant le gradient de couleur, il apparaît comme en dessous de celui-
ci, et le gradient de couleur s’applique à notre triangle, ce qui donne un meilleur effet de volume à
tout notre bouton. Voici notre bouton « Play » terminé :
Document préliminaire Send feedback to: [email protected] Page 20
Etape 3 : Constituer le bouton
Nous allons maintenant donner un nom logique au Canvas contenant les éléments qui constituent
notre bouton. En double cliquant sur le label [Canvas] nous allons modifier son nom en
« playButton », comme ceci :
Notre Canvas va nous servir de conteneur logique pour notre bouton. Vous remarquerez que si vous
modifiez les valeurs de Left ou Top pour ce Canvas, c’est tout notre bouton qui « suit » les
déplacements. Nous avons donc via ce Canvas un moyen de contrôler intégralement notre bouton,
soit pour le déplacer, soit pour le redimensionner, soit pour le faire apparaître ou disparaitre en
jouant sur ses différentes propriétés.
Etape 4 : Créer le Bouton Pause A vous de jouer maintenant. En reprenant ce que nous venons de faire, vous allez créer un second
bouton qui servira à mettre en pause la lecture de notre vidéo.
Petit conseil : En sélectionnant le canvas « playButton », vous pouvez simplement dupliquer ce
bouton en faisant un banal CTRL+c puis CTRL+v !
C’est magique ! Renommez ce bouton de « playButton_copy » en « pauseButton » et changez le
triangle en deux rectangles allongés qui symbolisent traditionnellement une mise en pause.
Voici le code pour les deux rectangles que vous devrez créer :
<Rectangle Opacity="0.85" Width="8" Height="24" Fill="Black" Stroke="#FF000000"
Canvas.Left="20" Canvas.Top="8"/>
<Rectangle Opacity="0.85" Width="8" Height="24" Fill="Black" Stroke="#FF000000"
Canvas.Left="34" Canvas.Top="8"/>
Et voilà le travail !
Document préliminaire Send feedback to: [email protected] Page 21
Exercice 4 : Utiliser les Animations
Etape 1 : Créer une animation simple
Nous allons maintenant ajouter des effets à nos boutons. Ces effets vont faire disparaitre
progressivement nos boutons après qu’on ait appuyé dessus. Pour cela, on va sélectionner tour à
tour chacun de nos boutons et créer un nouveau Storyboard qui contiendra la définition des
animations.
On commence par le bouton Play. On clique sur la flèche « > » en face de la liste – pour le moment
vide – des Storyboards associés à notre bouton et la liste suivante apparait.
On appuie sur le bouton « + » pour créer une nouvelle animation à laquelle on va donner le nom de
FadeOutPlayButton, comme ceci :
Notre Storyboard est créé, et Expression Blend passe en mode « Enregistrement », symbolisé par un
cadre rouge autour de notre scène dans le designer :
Document préliminaire Send feedback to: [email protected] Page 22
Il va suffire de définir une position sur l’axe du temps à 1 seconde, puis de fixer alors la valeur de
l’Opacité à 0%, puis de revenir à l’instant zéro et fixer l’Opacité à 90%. Voici ce qu’Expression Blend
nous affiche :
Pour terminer l’enregistrement de notre Storyboard, on clique sur le bouton rond rouge dans le coin
supérieur gauche de la surface du Designer.
En coulisses, Expression Blend a généré le code XAML suivant qui représente cette animation de
l’opacité de notre Canvas :
<Canvas.Resources>
<Storyboard x:Name="FadeOutPlayButton">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="playButton" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.9"/>
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Canvas.Resources>
On lit alors dans ce fragment XAML qu’il s’agit d’une animation qui va faire varier une valeur flottante
Double (ie DoubleAnimation), en faisant varier la valeur UIElement.Opacity de l’élément cible
playButton, en faisant varier sa valeur de 90% à 0%. C’est bien ce qu’on voulait obtenir ;)
En cliquant sur le petit bouton Play au dessus de la Timeline, on peut voir une prévisualisation de
notre animation directement depuis Expression Blend, sans avoir à lancer l’application.
On effectue la même opération pour le bouton Pause et on obtient alors ceci :
<Storyboard x:Name="FadeOutPauseButton">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="pauseButton" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.9"/>
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
Document préliminaire Send feedback to: [email protected] Page 23
En synthèse : Expression Blend est un outil qui peut - entre autres - être utilisé pour créer les scènes,
les animations et le design de nos applications Silverlight. Expression Blend permet de créer des
contenus Silverlight sans avoir besoin de connaître le langage XAML. Toutefois, pour les utilisateurs
avancés,Expression Blend permet de modifier directement le XAML. Expression Blend et Visual
Studio 2008 constituent une chaine de production complète entre les designers et les développeurs,
grâce au format pivot XAML partagé par les deux outils.
Exercice 5 : Scripter le comportement des boutons
Etape 1 : Nommer le MediaElement
Nous aurons besoin d’accéder par le code Javascript à notre MediaElement. Pour nous simplifier la
tâche, nous allons le renommer en « mediaElt ». Attention, ceci étant ensuite utilisé depuis le code
Javascript, la casse utilisée pour le nom de cet élément est importante. Pour cela, comme nous
l’avons déjà fait, on va double cliquer sur le label *MediaElement+ dans la barre d’outils de gauche et
modifier le nom de notre contrôle.
Etape 2 : Ecrire le code Javascript
Nous allons ajouter le code suivant dans le fichier Page.xaml.js, juste après la définition de la
méthode MonPlayer.Page, qui est d’ailleurs vide.
Pour éditer ce code, on va faire un clic droit sur le fichier Page.xaml.js dans l’explorateur de projet
dans la barre d’outils de droite, après avoir cliqué sur l’onglet « Project ». Si vous n’avez pas Visual
Studio sur votre machine, vous pouvez parfaitement éditer ce fichier avec Notepad.
Voici le code à ajouter :
function mediaelement_play(sender, args) {
sender.findName("mediaElt").play();
sender.findName("FadeOutPlayButton").begin();
sender.findName("pauseButton").Opacity = 0.85;
}
function mediaelement_pause(sender, args) {
sender.findName("mediaElt").pause();
sender.findName("FadeOutPauseButton").begin();
sender.findName("playButton").Opacity = 0.85;
}
Etape 3 : Gérer les évènements
Il va suffire d’ajouter l’attribut MouseLeftButtonDown à la définition de nos deux boutons Play et
Pause. Voici ce qu’il vous faudra ajouter, en passant en mode Edition XAML :
<Canvas x:Name="playButton" MouseLeftButtonDown="mediaelement_play" (...)
Et …
<Canvas x:Name="pauseButton" MouseLeftButtonDown="mediaelement_pause" (...)
Document préliminaire Send feedback to: [email protected] Page 24
Voilà. Nous avons terminé la réalisation de notre player, et nous pouvons maintenant profiter du
résultat final en lançant notre application dans le navigateur en appuyant simplement sur la touche
« F5 ».
Vous observerez les animations que nous avons créées : après l’appui sur un bouton, celui-ci
s’estompe progressivement et l’autre apparaît. Amusant ;)
En synthèse : Silverlight 1.0 peut être programmé en Javascript. Ce langage est connu et maitrisé par
les développeurs Ajax. Les développeurs qui utilisent Javascript dans leurs applications peuvent tirer
profit de la bibliothèque client Microsoft ASP.NET Ajax. Visual Studio 2008 apporte la fonctionnalité
d’IntelliSense aux développeurs Javascript, participant à l’amélioration de la productivité et à la
meilleure qualité du code produit.
Conclusion et Ressources
Bravo ! Vous êtes arrivé au bout de ce premier « Hands On Lab » sur Silverlight et Expression Blend.
Dans ce Lab, vous avez appris à :
Créer un projet Silverlight 1.0
Les bases de XAML
Utiliser Expression Blend pour designer une scène, modifier les propriétés des éléments,
réaliser un dégradé de couleur, définir un Storyboard et placer des points sur la Timeline
Scripter les événements et ajouter de l’interactivité à des contrôles Silverlight
Nous espérons que ce Hands On Lab vous aura donné envie d’aller plus loin avec Silverlight… Si tel
était le cas, voici un ensemble de ressources que vous ne manquerez pas d’explorer.
Happy coding avec Silverlight !
Ressources
Silverlight 1.0 QuickStarts (en Anglais)
http://www.silverlight.net/quickstarts/silverlight10/default.aspx
Cette série de Quickstarts couvre les concepts de base de Silverlight 1.0, concepts également
applicables à Silverlight 1.1, et utilise le langage client Javascript pour la programmation des
comportements de l'interface, ainsi que le langage XAML pour la construction de l'interface
utilisateur.
Silverlight 1.1 QuickStarts (en Anglais)
Document préliminaire Send feedback to: [email protected] Page 25
http://www.silverlight.net/quickstarts/managed.aspx
Ces tutoriels traitent des spécificités de Silverlight 1.1. Ils ne sont pas des tutoriels d'introduction à
Silverlight 1.1. Vous voudrez sans doute suivre les précédents – ceux qui s’appliquent à Silverlight 1.0
- avant d'attaquer celui-ci. Celui-ci traite donc en particulier de l'utilisation du code managé dans
Silverlight 1.1, de l'interaction entre le DOM HTML et le code managé, de l'Isolated Storage, des
Langages Dynamiques, ou encore de l'utilisation de XML, etc...
Webcasts Silverlight sur Channel9 (enAnglais)
http://channel9.msdn.com/ShowForum.aspx?ForumID=38&TagID=209
Si vous préférez regarder des webcasts plutôt que de suivre des Tutoriels ou des Quickstarts, vous
devriez aller voir du côté de Channel9 sur MSDN qui propose une série d'une trentaine de petits
webcasts sur différents aspects de Silverlight. A ne pas manquer…