Exporter (0) Imprimer
Développer tout

Première expérience avec WPF/E (nom de code actuel)

Paru le 01 décembre 2006
Par Laurence Moroney, Microsoft Corporation

Ce livre blanc offre une vue d'ensemble de grand qualité du « WPF/E » et explique comment ce dernier s'adapte à la pile de développement de la nouvelle génération d'applications Web.

S'applique à :
- WPF/E (nom de code actuel)
- Visual Studio 2005

Article traduit : Enrich Your HTML Applications with the WPF/E CTP.

Sur cette page

Qu'est-ce que le WPF/E ?
Évolution du développement des solutions Web : Passage à Web.Next
Création d'une application « WPF/E » simple
Préparation d'un fichier de conception graphique pour « WPF/E »
Utilisation de Visual Studio 2005 pour créer un projet « WPF/E »
Préparation d'un projet Visual Studio 2005 pour « WPF/E »
Édition de votre page Web pour afficher le contenu « WPF/E »
Comprendre Javascript
Édition du code XAML pour ajouter du texte
Édition du code XAML pour l'animation simple
Édition du code XAML pour l'interaction simple
Ajouter des supports au mélange
Conclusion
Annexe I : L'expérience d'installation
Annexe II : Configuration des types de serveur MIME

Qu'est-ce que le WPF/E ?

Le WPF/E est un nom de code pour une nouvelle technologie de présentation de solutions Web, créée pour s'exécuter 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 le 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 du WPF/E.

Ce livre blanc vous guide dans la découverte des principes fondamentaux du WPF/E et vous explique comment vous pouvez utiliser l'ensemble des outils Microsoft, tels que Microsoft Expression Graphic Designer, Microsoft Visual Studio 2005 et XAML, pour créer des sites graphiques riches. En premier lieu, examinons les notions fondamentales sur les raisons qui ont conduit au WPF/E et où il se situe par rapport dans le domaine du développement.

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

Lorsque l'Internet moderne a été inventé par Tim Berners-Lee à CERN, il 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 création ou à l'utilisateur. Les technologies telles que CGI permettent ce type d'action. Au fil du temps, la capacité de générer des documents sur le Web est devenue prééminente et la technologie a évolué grâce à CGI, Java, l'ASP, puis à l'ASP.NET.

L'ASP.NET a été un jalon en terme de capacité pour les développeur de développer des applications Web de qualité en utilisant rapidement un paradigme développement-serveur et les meilleurs outils de la gamme de produits Visual Studio.

L'expérience de l'utilisateur constituait une grande barrière dans les applications Web, où les contraintes techniques empêchaient les applications Web d'assurer la même richesse d'expérience utilisateur qu'une application client aurait fourni avec les données locales.

L'objet XMLHttpRequest, publié par Microsoft comme partie intégrante d'Internet Explorer 5 en 2000, est devenu la base de Javascript asynchrone et d'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.

Le WPF/E est l'étape suivante dans l'évolution des expériences utilisateur riches que les développeurs d'applications et les concepteurs peuvent présenter à leurs clients. Pour ce faire, il permet aux concepteurs d'exprimer leur créativité et d'enregistrer leur travail dans un format qui fonctionne directement sur le Web. Dans le passé, un concepteur aurait dû concevoir un site Web et une expérience utilisateur avec des outils qui fournissent une production riche, mais le développeur aurait dû satisfaire aux contraintes de la plate-forme Web pour pouvoir les fournir. Dans le modèle « WPF/E », les concepteurs peuvent créer l'expérience utilisateur désirée et l'exprimer sous forme de code XAML. Ensuite, ce code XAML peut être directement incorporé par un développeur dans une page Web à l'aide du moteur d'exécution du « WPF/E ». Ainsi, les deux peuvent travailler plus conjointement que jamais pour offrir une expérience utilisateur client riche.

Comme XAML est en langage XML, il est basé sur le texte et offre une description conviviale et facile à inspecter des contenus riches pour le pare-feu. Bien que les autres technologies telles que les applets Java, ActiveX et Flash peuvent être utilisées pour déployer un contenu plus riche que DHTML/CSS/Javascript, elles envoient toutes le contenu binaire au navigateur. Ceci ne facilite pas la vérification en terme de sécurité sans mentionner les difficultés de mise à jour, étant donné que toutes les modifications nécessitent la réinstallation de toute l'application. Cette expérience n'est donc pas la plus facile à utiliser et peut entraîner la stagnation des pages. Lorsque le WPF/E est utilisé et qu'une modification est nécessaire dans un contenu riche, un nouveau fichier XAML est généré côté serveur. La prochaine fois que l'utilisateur navigue dans la page, cet XAML est téléchargé et l'expérience est mise à jour sans aucune réinstallation nécessaire.

Au cœur du « WPF/E », le module optimisant la navigation affiche XAML et crée les graphiques résultants sur la surface du navigateur. C'est un petit téléchargement (moins de 2 Mo) pouvant être installé lorsque l'utilisateur accède au site avec le contenu du « WPF/E ». Ce module expose aux développeurs de 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, les 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 « WPF/E ».

Création d'une application « WPF/E » simple

Commençons par examiner Microsoft Expression Graphic Designer pour créer un graphique très simple dans XAML pour le « WPF/E ». La figure 1 présente le produit en action."

WPF/E

Figure 1. Outil Expression Graphic Designer

Expression Graphic Designer est un nouvel outil de Microsoft qui réunit le meilleur des outils de graphisme vectoriels et en pixels, permettant aux concepteurs d'explorer de nouvelles possibilités créatives. Il vous permet d'incorporer des graphiques créés dans d'autres applications et d'exporter des éléments de conception vers une variété d'outils logiciels, tels que XAML pour le WPF et le « WPF/E ».

Préparation d'un fichier de conception graphique pour « WPF/E »

Avec Expression Graphic Designer, ouvrez le fichier Popcan.xpr. Vous pouvez le trouver dans votre répertoire Program Files\Microsoft Expression\Design Beta 1\Samples (en anglais). C'est le fichier graphique utilisé dans la figure 1.

Lorsque vous aurez ouvert le fichier, vous verrez qu'il est assez grand s'il est mesuré en pixels. Vous pouvez le voir en utilisant les règles verticales et horizontales et découvrir qu'il mesure en fait 1 280 × 1 024 pixels. La figure 2 présente la règle horizontale affichant la largeur de l'image.

WPF/E

Figure 2. Règle horizontale dans Expression Graphic Designer

Vous pouvez également la voir dans la boîte de dialogue Taille du document (Fichier > Taille du document), comme le montre la figure 3.

WPF/E

Figure 3. Boîte de dialogue Taille du document

L'utilisation de la boîte de dialogue Taille du document redimensionne l'image à 300 pixels par 150 pixels. Pour ce faire, saisissez 300 dans la zone de texte Largeur et 150 dans la zone de texte Hauteur dans la boîte de dialogue de Taille du document , comme le montre la figure 4.

WPF/E

Figure 4. Définition des dimensions sur 300 par 150 pixels

Lorsque vous cliquez sur OK dans cette boîte de dialogue, l'image sera redimensionnée. A présent, la boîte peut sembler être aussi bien déformée que courte et aplatie comme l'illustre dans la figure 5.

WPF/E

Figure 5. Document redimensionné à 300 par 150 pixels

Comme il s'agit d'un dessin vectoriel, vous pouvez le redimensionner sans perdre la fidélité. Lorsque vous êtes dans la surface de conception, appuyez sur CTRL + A pour sélectionner tous les éléments du dessin. Un contour vert apparaîtra et affichera les éléments sélectionnés, comme l'illustre la figure 6.

WPF/E

Figure 6. Tous les éléments d'une image sont sélectionnés (Cliquez sur l'image pour agrandir l'image)

Vous pouvez à présent faire glisser l'image le long du contour et faire glisser les coins pour la redimensionner jusqu'à ce que vous obteniez une proportion agréable. La figure 7 montre que la boîte a été redimensionnée pour paraître plus réaliste et placée dans l'angle supérieur gauche du document.

WPF/E

Figure 7. Redimensionnement de la boîte pour avoir une meilleure proportion

Vous êtes à présent prêt à l'exporter sous forme d'image XAML « WPF/E » :

Pour ce faire, cliquez sur Fichier, Exporter, XAML ou utilisez CTRL + ALT + X. Cela appelle la boîte de dialogue Common Save (Enregistrer en commun), que vous pouvez utiliser pour spécifier où vous voulez mettre le fichier XAML. Appelez le fichier Popcan.xaml et sélectionner Enregistrer. La boîte de dialogue Export XAML apparaîtra. Cette boîte de dialogue vous permet d'effectuer des spécifications ultérieures sur le fichier d'exportation. Par exemple, vous pouvez spécifier si vous voulez exporter en XALM compatible « WPF/E », comme l'illustre la figure 8.

WPF/E

Figure 8. Exportation de XAML « WPF/E »

Le côté droit de l'écran présente un volet de visualisation dans lequel vous pouvez inspecter votre image, à l'aide des paramètres de zoom et de panoramique, pour vous assurer qu'elle est bien avant de procéder à la prochaine étape. Sur le côté droit, les onglets vous permettent de basculer entre l'inspection de l'image et le code XAML qui la représente. Si XAML vous est inconnu, il est judicieux d'examiner l'onglet CXAML Code (Code XAML), pour pouvoir comprendre comment il s'applique à l'image.

Les options déroulantes sur la droite vous permettent de spécifier des attributs d'exportation, tels que la manière dont les images rastérisées doivent être gérées, si elles doivent être vectorisées ou tout simplement sorties vers un répertoire spécifique. Pour le moment, il suffit de conserver les valeurs par défaut, en s'assurant que le « WPF/E » est sélectionné sous Format de document, comme l'illustre la figure 8.

Lorsque vous êtes prêt, cliquez sur le bouton Exporter et le code XAML « WPF/E » sera écrit sur disque. Vous l'utiliserez un peu plus tard dans votre projet WebVisual Studio 2005. Dans l'étape suivante, vous verrez comment configurer un projet Web et le préparer pour XAML.

Utilisation de Visual Studio 2005 pour créer un projet « WPF/E »

Le SDK de WPF/E inclut un modèle pour Visual Studio 2005 vous permettant de créer des projets « WPF/E ». Pour pouvoir l'utiliser dans Visual Studio 2005, vous devrez télécharger les modules complémentaires suivants sur l'IDE.

En premier lieu, vous avez besoin de la mise à jour pour prendre en charge les projets d'application Web. Elle peut être depuis le site Microsoft.

Une fois que la mise à jour est correctement installée, vous pouvez installer le module complémentaire des projets d'application Web Visual Studio 2005. Cliquez sur le lien suivant pour télécharger et installer (en anglais). Le téléchargement du SDK du « WPF/E » inclut un fichier comprimé, appelé "WPF/E" JSApplication.zip. Créez un répertoire de WPF/E dans votre répertoire \Program Files\Microsoft Visual Studio 8\Common7\IDE\ProjectTemplates\CSharp et copiez-y ce fichier compressé. Ensuite, assurez-vous que votre environnement de développement est fermé et exécutez à partir d'une invite de commande : devenv.exe/setup

Visual Studio est maintenant prêt à créer des projets « WPF/E ». Vous pouvez le faire en lançant Visual Studio IDE et en cliquant sur Fichier, Nouveau projet Vous verrez le « WPF/E » parmi les types de projet disponibles, de même que le modèle d'application de Javascript du « WPF/E » utilisé pour créer une nouvelle application « WPF/E », comme l'illustre la figure 9.

WPF/E

Figure 9. Utilisation du modèle de Visual Studio

Ceci crée un nouveau projet contenant une seule page HTML et un fichier XAML représentant un bouton simple. Il est judicieux d'examiner le code HTML pour voir comment il utilise Javascript pour configurer le contrôle « WPF/E » (nous reviendrons là-dessus) et comment le code XAML expose un événement qui peut être intercepté et contrôlé dans Javascript.

Préparation d'un projet Visual Studio 2005 pour « WPF/E »

Pendant que vous pouvez créer une application à l'aide du modèle de la section précédente, il est également judicieux de comprendre comment le « WPF/E » fonctionne et est rendu. Cela vous permet de vous rendre compte de la simplicité avec laquelle un site Web existant peut être configuré pour déployer le module « WPF/E » sur le navigateur. Dans cette section, vous verrez comment configurer votre site Web manuellement pour qu'il soit un site « WPF/E ».

Durant l'écriture de ce livre blanc, j'ai utilisé Visual Studio 2005 et l'aperçu CTP « Orcas ». Vous n'avez pas besoin d'« Orcas, » mais si vous l'avez installé, il vous facilitera un peu l'écriture du code XAML comme vous avez IntelliSense et un aperçu du code XAML terminé dans le concepteur XAML « Cider ». Cependant veuillez noter que Cider est conçu pour WPF, plutôt que pour le « WPF/E ». Il ne doit pas être utilisé pour développer votre code XAML « WPF/E » pour l'instant.

Pour commencer, lancez Visual Studio 2005 et créez un nouveau site Web en utilisant la boîte de dialogue Nouveau site Web sous Fichier, comme l'illustre la figure 10.

WPF/E

Figure 10. Création d'un nouveau site Web dans Visual Studio 2005

Ceci créera une nouvelle solution contenant une page simple Default.aspx ASP.NET qui générera lors de son exécution le code HTML qui sera affiché sur le navigateur. Ceci fournira la base de votre première page « WPF/E ».

Ensuite, vous aurez besoin d'importer les fichiers de déploiement pour le plug-in. Pour ce faire, commencez par créer un répertoire Bin sur votre site Web en cliquant avec le bouton droit sur le projet (http://localhost/MyFirstWPFE) dans l'Explorateur de solutions et en sélectionnant Nouveau Dossier Renommez le nouveau dossier « Installation » et ajoutez les fichiers suivants du téléchargement « WPF/E » à ce nouveau répertoire : install.msi, MozillaControl1712.exe, WPFE.dmg, xcpctrl.cab et xcpctrl.xpi. (Vous pouvez les faire glisser de l'Explorateur Windows et les déposer directement dans le répertoire Bin dans la fenêtre Explorateur de solutions de Visual Studio 2005.) Vous pouvez également obtenir ces fichiers depuis tout projet que vous développez à l'aide du modèle Visual Studio 2005, comme décrit dans la section précédente.

Ensuite, vous devez ajouter le fichier aghost.js à votre site Web. Encore une fois, vous pouvez le faire en glissant le fichier de l'Explorateur Windows et en le déposant dans votre solution. Finalement, créez un autre nouveau dossier appelé XAML dans votre solution et copiez-y le fichier Popcan.xaml que vous avez créé précédemment.

Édition de votre page Web pour afficher le contenu « WPF/E »

Examinez à présent l'édition de votre page Web pour qu'elle puisse gérer le contenu intégré « WPF/E ». C'est très simple, car il implique seulement l'ajout d'une seule référence Javascript et un appel à un objet Javascript défini dans aghost.js. Les bibliothèques Javascript et les programmes d'installation de « WPF/E » feront le reste.

En premier lieu, modifiez votre page pour qu'elle ressemble à celle représentée dans le Listing 1. Viici tout ce qui a été fait ici : le titre a été modifié de « Page sans titre », une référence Javascript a été ajoutée à aghost.js et un nouveau Div contenant l'appel à l'objet agHost a été ajouté au corps de la page. Ceux-ci ont été encadrés dans la liste 1.

Liste1. Le code HTML défaut.aspx

        <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
        Inherits="_Default" %>

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

        <html  >
        <head id="Head1" runat="server">
        <title>My first "WPF/E" Page!</title>
        <script type="text/javascript" src="agHost.js "></script>
        </head>
        <body>
        <form id="form1" runat="server">

        <div id="AgControl1Host">
        <script type="text/javascript">
        new agHost("AgControl1Host", "AgControl1", "400",
        "400", "#00000000", null, "xaml/Popcan.xaml",
        "True", "30", null);
        </script>
        </div>
        </form>
        </body>
        </html>
      

L'appel de Javascript à « nouveau AgHost » pourrait sembler un peu obscur pour l'instant mais ne vous inquiétez pas : nous l'examinerons un petit plus tard. Dans les sections suivantes, vous examinerez d'abord votre projet en exécutant cette application sous Internet Explorer et Mozilla Firefox. Après cela, vous examinerez l'objet Javascript qui contrôle le « WPF/E, » en faisant des modifications pour ajouter l'animation à votre graphique et le faire vivre. Vous êtes à présent prêt à exécuter votre application et à ce que l'ASP.NET génère la page avec le contenu du « WPF/E ». Appuyez sur F5 dans Visual Studio 2005 pour démarrer l'application. La première fois que vous exécutez une application, le navigateur détectera si le « WPF/E » est installé ou non. S'il n'est pas installé, vous obtiendrez une boîte de dialogue vous demandant si vous voulez installer le module « WPF/E » lorsque votre page se lance. L'annexe I détaille l'expérience d'installation pour Internet Explorer et Mozilla Firefox fonctionnant sous Windows.

Comprendre Javascript

Le code de Javascript qui a intégré ce XAML dans la page utilisant le « WPF/E » figure ci-après.

        new agHost("AgControl1Host", "AgControl1", "400", "400", "#00000000",
        null, "xaml/Popcan.xaml",
        "True", "30", null);
      

Cela crée une nouvelle instance du plug-in WPF/E, en utilisant une liste de paramètres qui peuvent être utilisés pour le créer. Ces paramètres sont (dans l'ordre) :

HostElementID : C'est le nom de l'élément HTML dans lequel le contrôle plug-in sera hébergé. Si vous avez un <div.> sur la page qui contient le plug-in, donnez un nom au <div.> et utilisez-le ici

controlID : C'est l'D du plug-in lui-même.

height : C'est la hauteur désirée du contrôle en pixels.

width : C'est la largeur désirée du contrôle en pixels.

backgroundColor : C'est la couleur d'arrière-plan désirée pour le contrôle.

sourceElement : C'est le nom de l'élément de page qui contient XAML pour le contrôle. C'est une façon de configurer le XAML pour le contrôle, où le XAML est sur la page contenue, dans unélément de <script> . Si vous deviez utiliser cette approche, mettez l'ID de l'élément de <script> dans ce paramètre et le contrôle le prélèvera à partir de là.

sourceURL : C'est l'emplacement d'un fichier XAML externe.

IsWindowless : C'est du Booléen. Configurez-le sur True si vous voulez que le contrôle « WPF/E, » soit sans fenêtres. Cela signifie que dans une page HTML, le contrôle « WPF/E, » sera incorporé dans le HTML. Par exemple, si vous le configurez pour qu'il soit transparent, le HTML sera affiché « derrière » lui. Si ce n'est pas sans fenêtres (en d'autres termes, s'il est configuré sur False), le contenu de WPF/E sera dans une région distincte de la page et la balise HTML se déplacera autour de lui.

maxFrameRate : C'est un numéro spécifiant la fréquence d'image maximale à laquelle le « WPF/E, » affichera le contenu animé.

loadHandler : C'est le nom d'unélément de <script> sur la page qui se déclenche lorsque le contrôle est chargé.

errorHandler : C'est le nom d'unélément de <script> sur la page qui se déclenche si une erreur survient sur le contrôle.

Lorsque vous créez une nouvelle instance d'un contrôle agHost à l'aide de ces paramètres, un appel est fait à aghost.js (vous aurez donc besoin d'une référence de script vers ce fichier dans votre HTML), qui génère labalise d'<objet> qui héberge le contrôle. Ainsi, dans le cas précédent, la balise d'<objet> suivante est générée, si vous utilisez Internet Explorer.

        <object id="AgCotnrol1" height="400" width="400"
        Codebase="install/xcpctrl.cab"
        classid="CLSID:32C73088-76AE-40F7-AC40-81F62CB2C1DA">
        <param name="Source" value="xaml/Popcan.xaml" />
        <param name="MaxFrameRate" value="30" />
        <param name="BackgroundColor" value="#00000000" />
        <param name="WindowlessMode" value="True" />
        </object>
      

Si vous préférez, vous pouvez toujours utiliser ce code directement dans votre page, mais l'utilisation de l'objet Javascript est beaucoup plus longue et n'embourbe pas votre page HTML dans des détails d'implémentation de la balise d'<objet>.

Édition du code XAML pour ajouter du texte

Vous pouvez éditer le XAML directement dans Visual Studio 2005 pour y ajouter quelque chose. Dans cet exemple, vous ajouterez un contrôle TextBlock au XAML pour contenir du texte fondamental « Bonjour le monde ».

Ouvrez le fichier XAML dans Visual Studio 2005. Si vous avez les CTP « Orcas » installés, vous pourrez afficher un aperçu du XAML dans l'éditeur « Cider », comme l'illustre la figure 11. Notez que vous ne pourrez pas utiliser la boîte à outils pour ajouter des contrôles au XAML « WPF/E, », car le concepteur « Cider » est réservé aux applications WPF. Dans le cas contraire, vous aurez juste l'éditeur XML ouvert.

WPF/E

Figure 11. Utilisation de Visual Studio 2005 pour modifier le XAML (Cliquez sur l'image pour l'agrandir)

Pour ajouter un bloc de texte à votre XAML, faites défiler vers le bas et ajouter le code suivant, juste avant la balise de fermeture </Canvas>.

        <Canvas x:Name="Layer_3">
        <TextBlock x:Name="MyLink" Canvas.Left="150" Canvas.Top="0"
        FontFamily="Verdana" FontSize="18"
        Width="250" TextWrapping="Wrap">
        Drink some of this yummy WPFE soda!
        Much better than a Hello, World App, right?
        </TextBlock>
        </Canvas>
      

Vous pouvez voir son effet sur votre page Web dans la figure 12.

WPF/E

Figure 12. XAML contenant le bloc de texte

Édition du code XAML pour l'animation simple

XAML spécifie des tables de montage séquentiel avec chronométrage pour l'animation. Dans cet exemple, vous ajouterez une animation simple à la page « WPF/E, » qui fait rebondir le texte du haut et du bas de l'écran. Pour ce faire, ajoutez un élément EventTrigger qui se déclenche lorsque le canevas est chargé. Cet élément Event Trigger peut contenir une action. L'action spécifiée est de commencer une table de montage séquentiel avec chronométrage qui contient une « DoubleAnimation ». Ce type d'animation est utilisé pour manipuler un numéro via une plage allant de « De » à « À ». Il peut être configuré pour se répéter à tout jamais et pour son auto-inversion. Ainsi, vous pouvez le spécifier pour faire « rebondir » le texte, vous animez sa partie haute de 0 à une quantité spécifiée, en inversant automatiquement l'animation lorsque c'est fait et en le répétant à tout jamais. La table de montage séquentiel avec chronométrage à atteindre est la suivante.

       <Storyboard Storyboard.TargetName="MyLink"
            Storyboard.TargetProperty="(Canvas.Top)" >
  <DoubleAnimation AutoReverse="True" RepeatBehavior="Forever"
                   BeginTime="0" Duration="0:0:1"
                   From="0" To="90">
  </DoubleAnimation>
</Storyboard>
      

La spécification complète du canevas contenant le texte et les déclencheurs pour déclencher l'animation est la suivante.

        <Canvas x:Name="Layer_3">
  <Canvas.Triggers>
    <EventTrigger RoutedEvent="Canvas.Loaded">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard Storyboard.TargetName="MyLink"
                      Storyboard.TargetProperty="(Canvas.Top)" >
            <DoubleAnimation AutoReverse="True" RepeatBehavior="Forever"
                             BeginTime="0" Duration="0:0:1"
                             From="0" To="90">
            </DoubleAnimation>
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Canvas.Triggers>
  <TextBlock x:Name="MyLink" Canvas.Left="150" Canvas.Top="0"
             FontFamily="Verdana" FontSize="18" Width="250"
             TextWrapping="Wrap">
               Drink some of this yummy "WPF/E" soda!
               Much better than a Hello, World App, right?
  </TextBlock>
</Canvas>
      

A présent, lorsque vous voyez votre site Web en action, le texte « rebondit » en haut et en bas sur le côté droit.

Édition du code XAML pour l'interaction simple

Le « WPF/E » permet aux codeurs Javascript d'interagir avec le code XAML. Dans cet exemple, vous verrez comment contrôler un événement survenu lorsque l'utilisateur interagit avec le fichier XAML. Le texte « rebondissant » de l'exemple précédent deviendra un lien hypertexte que vous utiliserez ensuite comme lien vers une autre page.

Pour ce faire, spécifiez le gestionnaire d'événements dans la déclaration TextBlock. Vous capturerez un clic de la souris et utiliserez ainsi le gestionnaire d'événements de MouseLeftButtonDown pour spécifier la fonction Javascript qui gérera le clic. Voici comment apparaîtra le bloc de texte, avec une déclaration pour un gestionnaire Javascript appelé hyperlink_MouseLeftButtonDown.

<TextBlock MouseLeftButtonDown="javascript:hyperlink_MouseLeftButtonDown"
    x:Name="MyLink" Canvas.Left="150" Canvas.Top="0"
    FontFamily="Verdana" FontSize="18"
    Width="250" TextWrapping="Wrap">Channel 9 is cool!</TextBlock>

A présent, vous pouvez contrôler cet événement à l'aide de Javascript sur la page d'hébergement (ou dans une bibliothèque externe à laquelle la page fait référence), comme suit.

    <script language="javascript">
       function hyperlink_MouseLeftButtonDown(sender, args) {
            window.open("http://channel9.msdn.com");
        }
    </script>

A présent, lorsque vous exécutez votre page, vous aurez un lien hypertexte mobile que vous cliquez pour parcourir le site MSDN Channel 9 !

Ajouter des supports au mélange

Le « WPF/E, » apporte le meilleur des supports Windows au développeur Web. Vous pouvez ajouter facilement le contenu des supports aux applications « WPF/E, » en utilisant la balise <MediaElement> dans XAML, comme suit.

<Canvas x:Name="Layer_4">
    <MediaElement x:Name="VideoLayer" Source="Butterfly.wmv"
                  Canvas.Top="0" Canvas.Left="130"
                  Height="200" Width="200">
    </MediaElement>
</Canvas>

Noter que vous aurez besoin d'avoir le fichier Butterfly.wmv dans votre site Web de racine pour que cela fonctionne. Ce fichier WMV est un des « exemples de vidéo » fournis avec Windows Vista et peut être trouvé dans votre dossier Documents. Si vous ne l'avez pas, remplacez-le par un fichier WMV.

L'élément MediaElement expose des méthodes pouvant être utilisées pour démarrer, arrêter, interrompre ou rechercher la vidéo. Pour obtenir plus d'informations sur ce sujet,consultez la documentation « WPF/E » et les échantillons.

Vous pouvez voir l'application « WPF/E, » avec la vidéo intégrée dans la Figure 13.

WPF/E

Figure 13. Le « WPF/E, » avec la vidéo intégrée

Conclusion

Ce livre blanc vousa proposé une vue d'ensemble de grand qualité du « WPF/E » et expliqué comment ce dernier s'adapte à la pile de développement de la nouvelle génération d'applications Web. Vous avez pu observé comment 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 examiné Expression Graphic Designer et découvert comment l'utiliser pour définir des graphiques pour votre page Web et comment ceux-ci peuvent être exportés vers du XAML « WPF/E, ». Vous avez importé ensuite ce code XAML dans un projet Web Visual Studio 2005 et vous avez vu comment le configurer pour déployer le moteur d'exécution XAML sur Internet Explorer et Firefox, afin d'afficher le XAML « WPF/E, » à partir du concepteur. Finalement, vous avez examiné comment manipuler le code XAML pour ajouter animation, interaction et supports.

Ce que vous venez de faire dans cet article n'est qu'un aperçu du potentiel de « WPF/E ». Il y a tellement de fonctionnalités dans cette technologie que vous pouvez utiliser pour commencer à créer aujourd'hui le Web de demain. Cela doit être un parcours amusant ! Alors tous à bord !

Annexe I : L'expérience d'installation

Afin d'afficher des pages Web avec le contenu « WPF/E », vous avez besoin d'améliorer le navigateur avec le « WPF/E ». Pour ce faire, vous pouvez utiliser une méthode de balisage d'objet qui invitera l'utilisateur à l'installation. Vous pouvez également détecter si le navigateur a été amélioré avec le WPF/E et orienter l'utilisateur vers la page de téléchargement appropriée pour obtenir le module :

- Pour PC : http://go.microsoft.com/fwlink/?LinkID=77792&clcid=0x409
- Pour Macintosh : http://go.microsoft.com/fwlink/?LinkID=77793&clcid=0x409

Avec notre application, nous utilisons une balise d'objet qui invite l'utilisateur à installer le module WPF/E approprié s'il n'est pas installé. Ainsi,, la première fois que vous exécutez une application, le navigateur détectera si le « WPF/E, » est installé ou non. Si ce n'est pas le cas, lorsque votre page se lance, vous obtenez une boîte de dialogue vous demandant si vous voulez installer le « WPF/E ». Les sections suivantes détaillent l'expérience utilisateur si l'on suit ce workflow à l'aide d'Internet Explorer et de Mozilla Firefox.

Exécution de la page dans Internet Explorer

La boîte de dialogue Alerte de sécurité Internet Explorer affichée dans la figure 14 apparaîtra. Si vous sélectionnez Installer, le plug-in sera téléchargé et installé comme détaillé dans les sections suivantes.

WPF/E

Figure 14. Alerte de sécurité du navigateur pour l'installation du « WPF/E ».

Sélectionner Installer et l'Assistant de programme d'installation se lancera, comme l'illustre la figure 15.

WPF/E

Figure 15. Démarrer l'installation de WPF/E.

Lisez attentivement le contrat de licence de l'utilisateur final. Si vous êtes prêt à continuer, sélectionnez J'accepte. Ainsi, l'installation de WPFE commencera comme l'illustre la figure 16.

WPF/E

Figure 16. Installation de WPF/E

Une fois que l'installation se termine correctement, vous verrez la boîte de dialogue Installation terminée, comme l'illustre la figure 17.

WPF/E

Figure 17. Installation de WPF/E

Cliquez sur Terminer et vous pouvez alors continuer. En fait, votre XAML s'affichera tout de suite, comme l'illustre la figure 18.

WPF/E

Figure 18. Votre XAML, affiché dans le navigateur

Dans la section suivante, vous ferez l'expérience de l''installation du plug-in sur le navigateur Mozilla Firefox.

Exécution de la page dans Mozilla Firefox Dans la section précédente, vous avez vu comment le « WPF/E » a amélioré Internet Explorer. Toutefois le « WPF/E » est une technologie multi-navigateur et multi-plateforme. Dans cette section, vous verrez son fonctionnement dans Mozilla Firefox fonctionnant sous Microsoft Windows Vista.

Si le « WPF/E » n'est pas installé, vous aurez à l'cran quelque chose qui ressemble à la figure 19 en exécutant Firefox.

WPF/E

Figure 19. Exécution du WPF/E sur Firefox

Cliquez sur Install Missing Plugins (Installer les plugins manquants) sur le côté droit supérieur de l'écran. Firefox recherchera les plugins connus qui correspondent au type « WPF/E » (application/xcp-plugin), mais il n'en trouvera aucun. Comme le WPF/E n'est pas encore un produit publié, le plug-in n'a pas été publié dans le Firefox Plugin Finder Service Directory (en anglais) (il le sera, une fois le produit publié). Voir la figure 20.

WPF/E

Figure 20. The Firefox Plugin Finder Service

Cependant, vous pouvez exécuter une installation manuelle à partir de la boîte de dialogue de Plugin Finder Service (Service de détection de plugin). Cela vous permettra de naviguer vers une URL contenant le fichier MSI qui peut être lancé pour installer le moteur d'exécution du « WPF/E » À ce stade, l'expérience d'installation sera identique à celle déjà décrite avec Internet Explorer, dans la section précédente.

Lorsque vous avez terminé, exécutez votre page. Le XAML sera affiché par le « WPF/E » dans Mozilla Firefox, comme l'illustre la figure 21.

WPF/E

Figure 21. Affichage du XAML dans Mozilla Firefox

Annexe II : Configuration des types de serveur MIME

Configuration d’IIS 6.x

Il est très simple de configurer IIS pour les types MIME nécessaires pour fournir les applications « WPF/E ». Si vous obtenez une page vierge au lieu du XAML affiché, il se peut que vous n'ayez pas configuré XAML pour être un type de XML reconnaissable dans IIS. Pour ce faire, appeler votre boîte de dialogue Propriétés du site Web et sélectionnez l'onglet HTTP Headers (En-têtes HTTP), comme l'illustre la figure 22.

WPF/E

Figure 22. Configuration d’IIS 6.x

Vous trouverez en bas de cette boîte de dialogue un bouton vous permettant de spécifier ces types. Veuillez noter que seuls les fichiers de serveur IIS avec des extensions sont enregistrés sur cette liste. Si .xaml n'est pas enregistré, vous ne pourrez pas utiliser ces fichiers et vous n'obtiendrez pas XAML dans votre contrôle « WPF/E ». La figure 23 affiche la configuration. Utilisez le bouton Nouveau de cette boîte de dialogue pour l'ajouter, si nécessaire.

WPF/E

Figure 23. Configuration du type MIME dans IIS

Veuillez noter que si la figure 23 ne l'affiche pas, et que vous voulez que votre application soit installable sur Macintosh, vous devez utiliser l'application/octet-stream comme type MIME pour l'extension de fichier .DMG.

Configuration d’IIS 7.x Pour configurer IIS 7.x dans Windows Vista, vous devez commencer par cliquer avec le bouton droit sur Ordinateur dans le menu Démarrer de Windows, et sélectionner Gérer. Ceci lancera la console de gestion de l'ordinateur, d'où vous pouvez sélectionner IIS, comme l'illustre la figure 24.

WPF/E

Figure 24. Console de gestion de l'ordinateur (Cliquez sur l'image pour l'agrandir)

Faites défiler la liste d'éléments jusqu'à ce que vous voyiez l'applet MIME Types. Lancez-le pour configurer des types MIME, comme l'illustre la figure 25.

WPF/E

Figure 25. Configuration des types MIME IIS 7 (Cliquez sur l'image pour l'agrandir)

Vous pouvez utiliser le volet Actions pour ajouter les types MIME nécessaires.

  .XAML : text/xml
  .DMG: application/octet-stream
Afficher:
© 2014 Microsoft