Mise en route de Silverlight

Laurence Moroney

Paru le 30 avril 2007

S'applique à :
Microsoft Silverlight (anciennement connu sous le nom de code « WPF/E »)
Microsoft Expression Blend

Résumé : Ce livre blanc offre une vue d'ensemble de Silverlight de haut niveau et explique comment ce dernier s'intègre à la pile de développement de la nouvelle génération d'applications Web. (8 pages imprimées)

S'applique à :
Microsoft Silverlight (anciennement connu sous le nom de code « WPF/E »)
Microsoft Expression Blend

Résumé : Ce livre blanc offre une vue d'ensemble de Silverlight de haut niveau et explique comment ce dernier s'intègre à la pile de développement de la nouvelle génération d'applications Web. (8 pages imprimées)

Sur cette page

Qu'est-ce que Silverlight ?
Évolution du développement des solutions Web : Passage à Web.Next
Création d'une application Silverlight simple
Création de l'interface utilisateur pour un lecteur vidéo
L'invocation Silverlight en détail
Conclusion

Qu'est-ce que Silverlight ?

Silverlight est une nouvelle technologie de présentation de Web créée pour s'exécuter sur une diverses plates-formes. 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). 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.

Ce livre blanc vous guide dans la découverte des principes fondamentaux de Silverlight et vous explique comment vous pouvez utiliser l'ensemble des outils Microsoft, tels que Microsoft Expression Blend, Microsoft Visual Studio 2005 et XAML, pour créer des sites graphiques riches. Tout d'abord, examinons quelques unes des raisons fondamentales qui ont conduit à la création de Silverlight er à son positionnement dans le domaine du développement.

Évolution du développement des solutions Web : Passage à Web.Next

Lorsque de l'invention de l'Internet moderne par Tim Berners-Lee du CERN, celui-ci a été conçu comme un système permettant aux documents statiques d'être stockés et liés sur un système en réseau. Au cours des années, l'innovation a évolué vers l'étape logique suivante, c.-à-d. des documents « actifs » générés au moment où ils sont demandés avec des informations spécifiques au moment de la création ou à l'utilisateur. Les technologies telles que CGI permettent ce type d'action. Au fil du temps, la possibilité de générer des documents sur le Web a commencé à revêtir une importance cruciale et la technologie a évolué grâce à CGI, Java, ASP, puis à ASP.NET.

ASP.NET a constitué un jalon en termes de possibilité pour les développeurs de développer rapidement des applications Web de qualité à l'aide d'un paradigme de développement de serveur et des meilleurs outils de la gamme de produits Visual Studio.

L'expérience utilisateur représentait le principal défaut des applications Web, car les contraintes techniques empêchaient les applications Web d'offrir une richesse d'expérience utilisateur similaire à celle fournie par les applications clientes avec les données locales.

L'objet XMLHttpRequest, publié par Microsoft en tant qu'élément à part entière d'Internet Explorer 5 en 2000, est devenu la base du JavaScript asynchrone et du XML (AJAX), la technologie qui a permis aux applications Web d'offrir une réponse plus dynamique à l'entrée utilisateur, en actualisant de petites parties d'une page Web sans avoir à recharger tout le contenu. Des solutions innovatrices basées sur AJAX, telles que les correspondances locales de Windows Live, ont permis aux applications Web d'aller plus loin en permettant une expérience utilisateur de type client.

Silverlight représente l'étape suivante dans l'évolution de la richesse d'expérience utilisateur que les développeurs d'applications et les concepteurs peuvent proposer à leurs clients. En effet, il permet aux concepteurs d'exprimer leur créativité et d'enregistrer leur travail dans un format qui fonctionne directement sur le Web. Par le passé, un concepteur élaborait un site Web et une expérience utilisateur à l'aide d'outils offrant un résultat riche, mais le développeur devait s'adapter aux contraintes de la plate-forme Web pour pouvoir les fournir. Dans le modèle Silverlight, les concepteurs peuvent créer l'expérience utilisateur désirée et l'exprimer sous forme de code XAML. Le XAML peut ensuite être intégré directement par un développeur dans une page Web en utilisant le service d'exécution de Silverlight. Ainsi, les deux peuvent travailler en collaboration plus étroite que jamais pour offrir une expérience utilisateur client riche.

Comme le XAML est un langage XML, il est basé sur du texte et offre une description conviviale et facile à inspecter des contenus riches pour le pare-feu. Bien que d'autres technologies telles que les applets Java, ActiveX et Flash puissent être utilisées pour déployer un contenu plus riche que DHTML, CSS et JavaScript, elles envoient toutes du contenu binaire au navigateur. Celui-ci est non seulement difficile à vérifier en termes de sécurité, mais également difficile à mettre à jour dans la mesure où toutes les modifications nécessitent une réinstallation complète de l'application, ce qui réduit considérablement la convivialité et peut mener à une stagnation des pages. Avec Silverlight, lorsqu'une modification du contenu riche est nécessaire, un nouveau fichier XAML est produit côté serveur. La prochaine fois que l'utilisateur navigue sur la page, ce fichier XAML est téléchargé et l'environnement est mis à jour sans qu'il soit nécessaire de procéder à une réinstallation.

Au cœur de Silverlight se trouve le module d'optimisation de la navigation qui affiche le XAML et crée les graphiques résultants sur la surface du navigateur. Il s'agit d'un téléchargement léger (moins de 2 Mo) pouvant être installé lorsque l'utilisateur accède au site doté du contenu Silverlight. Ce module expose aux développeurs JavaScript l'infrastructure sous-jacente de la page XAML, pour que l'interaction avec le contenu soit possible au niveau de la page et que le développeur puisse créer, par exemple, des gestionnaires d'événements d'écriture ou manipuler les contenus d'une page XAML à l'aide du code JavaScript.

Mais arrêtons ici la théorie ! Passons à la pratique en examinant notre premier projet Silverlight.

Création d'une application Silverlight simple

Commençons par jeter un coup d'œil sur Microsoft Expression Blend pour créer une application très simple en XAML pour Silverlight. Pour créer une application Silverlight dans Blend, sélectionnez Fichier>-Nouveau projet et la boîte de dialogue New Project s'ouvre. Voir figure 1.

Création d'un nouveau projet Silverlight avec Expression Blend

Figure 1. Création d'un nouveau projet Silverlight avec Expression Blend

Sélectionnez OK pour créer un nouveau projet. Ce projet contiendra une page HTML par défaut, un peu de code JavaScript derrière cette page, un document XAML, un code JavaScript derrière pour le document XAML et Silverlight.js.

Silverlight.js contient le code pour le téléchargement et l'instanciation du contrôle Silverlight. Celui-ci vous est fourni en tant qu'élément du kit de développement logiciel de Silverlight.

Default.html est une page Web HTML standard. Celle-ci contient trois références de script JavaScript pointant vers Silverlight.js, Default.html.js (qui contient le code spécifique à l'application permettant d'instancier Silverlight) et la Scene.xaml.js (qui contient les gestionnaires d'événements pour les événements d'application définis dans le XAML).

Celles-ci sont conçues pour séparer la page (defaut.html) de la logique d'instanciation (default.html.js), la conception (Scene.xaml) et le code d'événement (Scene.xaml.js). Mais assez de théorie, attelons-nous au développement d'une application simple.

Création de l'interface utilisateur pour un lecteur vidéo

Ajoutez un fichier vidéo à votre projet. Pour ce faire, cliquez avec le bouton droit sur le fichier de projet dans la fenêtre Project Files dans le coin supérieur droit de l'écran, et sélectionnez Add Existing Item... .

Lorsque vous sélectionnez un fichier WMV et l'ajoutez à votre projet, le fichier apparaît dans le Project Explorer et un élément média est ajouté à votre scène.

Figure 2. Ajout d'un élément média à la scène XAML

Figure 2. Ajout d'un élément média à la scène XAML

Vous pouvez maintenant exécuter votre projet, et le navigateur lancera et lira votre vidéo !

Vous pouvez arrêter la lecture automatique de la vidéo en modifiant le XAML. Vous verrez qu'à la droite du concepteur XAML se trouvent deux onglets : Design et XAML. Sélectionnez l'onglet XAML pour ouvrir l'éditeur de XAML. Celui-ci est illustré à la figure 3. Utilisez-le pour modifier le texte XAML de MediaElement afin d'ajouter un attribut AutoPlay=False.

Figure 3. Modification du XAML dans l'éditeur de XAML

Figure 3. Modification du XAML dans l'éditeur de XAML

Maintenant si vous exécutez l'application, vous verrez le contenu Silverlight affichant la première image de votre vidéo, mais elle ne la lira pas.

Ajout de contrôles à lecteur vidéo

Ajoutez deux blocs de texte à l'application, et attribuez-leur respectivement les textes Play et Stop et les noms txtPlay et txtStop. Une fois cette opération terminée, le XAML ressemble à ceci :

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="640" Height="480"
    Background="White">
    <MediaElement AutoPlay="False" x:Name="Movie_wmv" Width="320" Height="240" 
      Canvas.Left="128" Canvas.Top="56" Source="Movie.wmv" Stretch="Fill"/>
    <TextBlock x:Name="txtPlay" Width="72" Height="24" Canvas.Left="136" 
      Canvas.Top="336" Text="Play" TextWrapping="Wrap"/>
    <TextBlock x:Name="txtStop" Width="80" Height="24" Canvas.Left="136" 
      Canvas.Top="368" Text="Stop" TextWrapping="Wrap"/>
    </Canvas>        
    
     

Ensuite, ajoutez la déclaration du gestionnaire d'événements au XAML pour les blocs de texte. Pour ce faire, déclarez le gestionnaire pour un clic de souris en utilisant l'attribut MouseLeftButtonDown. Sur le bloc de texte txtPlay , ajoutez un gestionnaire d'événements à DoPlay, et sur le bloc de texte txtStop , ajoutez un gestionnaire d'événements à DoStop. Une fois cette opération terminée, le XAML ressemble à ceci :

        <TextBlock x:Name="txtPlay" Width="72" Height="24" Canvas.Left="136" 
      Canvas.Top="336" Text="Play" TextWrapping="Wrap"  
      MouseLeftButtonDown="javascript:DoPlay"/>

        <TextBlock x:Name="txtStop" Width="80" Height="24" Canvas.Left="136" 
              Canvas.Top="368" Text="Stop" TextWrapping="Wrap" 
              MouseLeftButtonDown="javascript:DoStop"/>

      

Dans le cas présent; le contrôle Silverlight est appelé SilverlightControl, et la variable JavaScript appelée theHost le référence. Ce contrôle est ensuite utilisé pour rechercher l'élément média, qui est dans le cas présent appelé Movie_wmv. Une fois que vous avez ajouté le film au projet, cet élément média a été créé pour vous avec un nom basé sur le nom du film. Donc si vous avez un film appelé Film.Wmv, celui-ci sera appelé Film_wmv. Si vous avez utilisé un film différent, le contrôle portera un autre nom.

L'élément média possède les méthodes Play et Stop, qui peuvent alors être utilisées pour lancer ou arrêter la lecture du média.

Maintenant que nous disposons d'une référence à l'élément média, nous pouvons appeler ces méthodes, et le film s'arrêtera ou démarrera. Vous pouvez voir cette opération à la figure 4.

Figure 4. Exécution de l'application

Figure 4. Exécution de l'application

Vous venez de créer votre première application Silverlight ! Pour plus de ressources sur Silverlight, consultez le nouveau Centre de développement Silverlight et http://www.silverlight.net/.

L'invocation Silverlight en détail

La page HTML appelle createSilverlight(), qui est présent dans la page code-behind Default.html.js.

        Sys.Silverlight.createObjectEx({
        source: "Scene.xaml",
        parentElement: document.getElementById("SilverlightControlHost"),
        id: "SilverlightControl",
        properties: {
        width: "100%",
        height: "100%",
        version: "0.9"
        },
        events: {
        onLoad: Sys.Silverlight.createDelegate(scene, scene.handleLoad)
        }
        });
      

Celui-ci possède un certain nombre de propriétés, notamment celles utilisées pour définir le Xaml à afficher, l'apparence du contrôle Silverlight et les gestionnaires d'événements onLoad onError.

La propriété source: est utilisée pour définir le XAML que vous voulez faire afficher par le contrôle Silverlight. Il peut s'agir d'un fichier externe (comme dans le cas présent) ou d'une balise <script> nommée sur la page qui contient le XAML.

Lorsque vous placez un contrôle Silverlight sur une page, il doit être placé dans un <DIV> nommé. La propriété parentElement: doit être complétée par le nom de ce <DIV>.

L'ID du contrôle est spécifié par la propriété id:.

Les attributs physiques du contrôle, tels que la hauteur, la largeur et la version sont déterminés à l'aide d'un tableau chargé dans la propriété property: . Pour obtenir l'ensemble des propriétés, consultez la documentation du kit de développement logiciel de Silverlight.

Conclusion

Ce livre blanc vous a offert une vue d'ensemble de Microsoft Silverlight de haut niveau et vous a expliqué comment il s'intègre dans la pile de développement de la nouvelle génération d'applications Web. Vous avez pu observer comment l'XAML est utilisé en tant que liant entre les spécifications du concepteur, les outils du développeur et le résultat final pour l'utilisateur. Vous avez eu un aperçu d'Expression Blend et de la façon dont il peut être utilisé pour définir des interfaces utilisateur pour votre page Web, et dont celles-ci peuvent être programmées pour ne pas utiliser JavaScript.

Cet article ne proposait qu'un infime aperçu des possibilités de Silverlight. Cette technologie offre une mine de fonctionnalités que vous pouvez utiliser pour commencer à créer le Web du futur dès aujourd'hui. Cela devrait être passionnant, alors tous à bord !

Afficher: