Déploiement d application Silverlight

Déploiement d application Silverlight Thibault Laurens Bastien Chauvin

2 Déploiement d'application Silverlight 17/06/09 Sommaire 1 Introduction... 3 2 Intégrer une application à une page Web... 4 3 Les améliorations d une application... 7 3.1 Utilisation en mode Offline d une application Silverlight... 7 3.2 Fonctionnalité de plein écran sur une application Silverlight... 10 3.3 Le Streaming... 11 3.3.1 Présentation du Streaming... 11 3.3.2 Héberger une application... 12 3.3.3 Héberger une vidéo... 15 3.4 Amélioration des performances... 19 4 Conclusion... 20

3 Déploiement d'application Silverlight 17/06/09 1 Introduction Dans ce chapitre, nous allons voir comment déployer nos applications Silverlight sur Internet. Pour cela, différentes possibilités s offrent à nous : la plus simple, mais non la plus performante, consiste par le déploiement de l application sur un serveur FTP de votre FAI par exemple. Nous verrons par la suite qu il est possible d héberger les fichiers de notre application sur un serveur beaucoup plus optimisé où les performances s en verront nettement accrues. Dans un second temps, nous verrons quels sont les améliorations que l on peut apporter à notre application : affichage en plein écran, mode Offline ainsi que le streaming.

4 Déploiement d'application Silverlight 17/06/09 2 Intégrer une application à une page Web Dans cette partie, nous utiliserons le client FTP FileZilla dont il est possible de trouver une capture d écran ci-dessous. Il est possible de télécharger ce client gratuit à cette adresse : http://www.clubic.com/lancerle-telechargement-9747-0-filezilla.html. Voici un aperçu du logiciel : Une fois l installation du client terminée, il faut nous identifier sur le serveur FTP vers lequel nous allons envoyer nos fichiers constituant notre application Silverlight. Une fois connecté sur notre serveur FTP, nous allons sélectionner les fichiers constituant notre application que nous allons publier sur ce serveur FTP.

5 Déploiement d'application Silverlight 17/06/09 Voici les fichiers importants que l on aura besoin de publier afin que l application Silverlight soit publiée. Il est à noter qu il est rare d avoir des projets sans ressources multimédia telles que des images, sons ou vidéos, c est pourquoi il est conseillé de constituer un dossier unique à la racine de l application (tout comme les fichiers host) où l on stockera ces ressources là. - AppManifest.xml : Il est utilisé pour générer le package d application. - Default.html : Ce fichier html va servir à instancier l application ainsi que le plug-in Silverlight. - Nom_du_projet.dll : Celui-ci contient les assemblys de l application. - Nom_du_projet.pdb : Ilcontient les informations de débogage pour l application - Nom_du_projet.xap qui est un fichier généré lorsque le projet est généré. Il contient en fait un package d application indispensable au démarrage de l application. Il contient en quelque sorte les ressources de l application. Il ne reste plus qu à créer un dossier sur notre serveur FTP qui contiendra les fichiers présentés cidessus. Dans l exemple présenté ci-dessous, le dossier créé s appelle «déploiement».

6 Déploiement d'application Silverlight 17/06/09 Il suffit ensuite d accéder, dans notre navigateur, à l adresse du fichier «Default.html» :

7 Déploiement d'application Silverlight 17/06/09 3 Les améliorations d une application 3.1 Utilisation en mode Offline d une application Silverlight Une nouveauté de Silverlight 3, est la possibilité de déployer une application en mode Offline. C est-à-dire que nous pourrons transférer directement l application sur le bureau de notre ordinateur et pouvoir l utiliser sans connexion internet (Horsligne). De ce fait, nous pouvons très bien imaginer une application Silverlight permettant aux commerciaux d une entreprise d avoir accès aux informations pratiques de l entreprise et de pouvoir les présenter à de futurs clients sans pour autant être obligé d être connecté à Internet. Pour ce faire, nous allons devoir atteindre le fichier AppManifest.xml de notre solution. Il se situe dans l onglet «Properties» : En mode online, nous allons utiliser un service de type.net RIA Services et en mode offline, nous utiliserons un Isolated Storage. Voici ce que l on devrait avoir dans notre fichier : Il nous reste donc ensuite à rajouter les lignes suivantes que nous allons détailler ci-dessous :

8 Déploiement d'application Silverlight 17/06/09 //XML <Deployment xmlns="http://schemas.microsoft.com/client/2007/deployment" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" <Deployment.Parts> </Deployment.Parts> <Deployment.ApplicationIdentity> <ApplicationIdentity ShortName="Exempleenligne" Title="Exempleenligne"> <ApplicationIdentity.Blurb> Exempleenligne </ApplicationIdentity.Blurb> </ApplicationIdentity> </Deployment.ApplicationIdentity> </Deployment> Dans un premier temps entre les balises ApplicationIdentity nous allons déclarer tout ce qu il y a d important. Comme le nom de l application que l on va transporter sur le bureau, ou encore modifier l icône que l on aura sur le bureau grâce au code suivant, que l on insère à la suite de ApplicationIdentity.Blurb : //XML <ApplicationIdentity.Icons> <IconSize="16x16"></Icon> <IconSize="32x32"></Icon> <IconSize="64x64"></Icon> <IconSize="128x128">Pictures/sl128.png</Icon> </ApplicationIdentity.Icons> Maintenant il ne reste plus qu à faire un clic droit sur l application et choisir Install «Nom de l application» onto this computer. Une fenêtre va ensuite s ouvrir. Celle-ci nous demandera de choisir d ajouter l application dans le menu Démarrer ou sur le Bureau.

9 Déploiement d'application Silverlight 17/06/09 Notre application est désormais installée sur le poste et il est donc possible de la lancer depuis le ou les raccourcis que l on a choisi grâce à l écran précédent. L application s ouvre maintenant dans une fenêtre tout comme le ferait une application WPF classique. L application ci-dessus est très basique : il s agit simplement fond d écran noir afin de montrer l affichage en mode offline. Note : Si notre application n a pas définit d icône, il lui en a attribué une d office. Il est tout à fait possible de rajouter une icône comme suit : il faut ajouter spécifier l image en tant que «Contenu» dans la propriété «Build Action» de l image. Enfin il est aussi possible de supprimer l application Offline juste en répétant le clic droit : Removethis application depuis l application en ligne.

10 Déploiement d'application Silverlight 17/06/09 3.2 Fonctionnalité de plein écran sur une application Silverlight Grâce aux nouveautés apportées par Silverlight 3, il est possible de rendre une application entièrement en plein écran. Pour cela, il suffit de venir modifier la propriété Content.IsFullScreen de l espace de nom System.Windows.Interop qui nous permettra d afficher le plug-in Silverlight en plein écran. Voici le minuscule extrait de code permettant, dans l évènement click sur un bouton par exemple, de pouvoir passer du mode plein écran au mode classique. // C# private SilverlightHost MyAppliFullScreen = new SilverlightHost(); MyAppliFullScreen.Content.IsFullScreen =!MyAppliFullScreen.Content.IsFullScreen; Dans l application développée ci-dessous, voici le bouton (situé en bas droite dans la capture d écran ci-après) permettant de passer d un affichage classique à un affichage plein écran : Et enfin lorsque nous allons lancer le plein écran, le runtime gérera automatiquement le plein écran. De ce fait nous avons un écriteau automatique qui s affiche comme suit :

11 Déploiement d'application Silverlight 17/06/09 Ci-dessous, un aperçu global de la fenêtre en plein écran. 3.3 Le Streaming 3.3.1 Présentation du Streaming Le streaming en Silverlight est un moyen mis à disposition par Microsoft afin de pouvoir publier des vidéos ou des applications Silverlight sur Internet. En plus de cela, chaque utilisateur dispose gratuitement d un espace de 10 Go de stockage en streaming grâce à son compte Windows Live. Pour profiter de cette offre, il faut simplement bénéficier d une adresse Live ID comme celle de votre compte MSN par exemple. On peut donc considérer ce service comme une solution d hébergement pour les applications Silverlight et les vidéos. Comme vous l avez sûrement vu, nous avons déjà utilisé ce service avec le tutoriel sur Deep Zoom.

12 Déploiement d'application Silverlight 17/06/09 Après une première utilisation vous allez vous rendre compte de la simplicité et de la performance d utilisation de ce service. Microsoft a su étudier la demande utilisateur, et fournir un serveur performant qui utilise le système CDN, qui réduit les temps de chargements. Une fois identifié ou votre compte créé, nous allons voir comment héberger une application ou une vidéo dans la partie suivante. 3.3.2 Héberger une application Pour héberger une application il va falloir préalablement faire quelquesmodifications. Nous allons atteindre le fichier manifest.xml de notre application. Comme nous l avons déjà expliqué dans la partie sur le déploiement, ce fichier va permettre de générer la page qui va permettre la bonne acquisition de l application. Pour cela, il vous suffit d ouvrir ce fichier et d y insérer le code suivant en fonction de votre application : //XML <SilverlightApp> <Source>Nom_de_application.xap</Source> <Version>3.0</Version> <Width>800</Width> <Height>400</Height> </SilverlightApp> Il existe un moyen plus facile qui ne nécessite pas de modification de fichier, étant donné qu il s agit du site de Microsoft Streaming qui proposant directement de créer un fichier tel que le précédent. Pour mettre une application il faut donc tout d abord s identifier :

13 Déploiement d'application Silverlight 17/06/09 Ensuite, il suffit de cliquer sur «Manage Applications» afin d aller dans la partie concernant l hébergement d applications. Cette partie permet de consulter la liste des applications hébergées préalablement. De plus, il est possible d en ajouter une supplémentaire grâce au bouton «Upload an application». Après avoir cliqué sur le bouton «Upload an application», il ne reste plus qu à choisir un nom pour cette nouvelle application :

14 Déploiement d'application Silverlight 17/06/09 Et ensuite, il faut uploader les fichiers nécessaires au bon fonctionnement de l application en streaming comme vu précédemment : Une fois cela fait, il faut générer le manifeste de l application afin qu elle soit correctement configurée. Une fois le fichier créé, l écran ci-dessous s affiche afin de paramétrer le dit fichier.

15 Déploiement d'application Silverlight 17/06/09 Cette solution d hébergement d applications est beaucoup plus performante qu un simple serveur FTP. 3.3.3 Héberger une vidéo Maintenant que nous avons vu comment héberger une application Silverlight nous allons voir comment procéder avec une vidéo. 3.3.3.1 Charger une simple vidéo Tout d abord, il faut se rendre dans la rubrique Manage Vidéos. Et comme avec les applications il va falloir uploader la dite vidéo.

16 Déploiement d'application Silverlight 17/06/09 3.3.3.2 Charger une vidéo et Expression Encoder Il est tout à fait possible d utiliser Expression Encoder de la suite logicielle Expression afin de procéder à la publication en ligne de la vidéo. Cependant une opération est à réaliser préalablement sur Expression encoder, car nous devons rajouter un plug-in mis à disposition par Microsoft, disponible en téléchargement à l adresse suivante, et qui se nomme Silverlight Streaming Publishing Plug-in for Expression Encoder : http://www.microsoft.com/downloads/details.aspx?familyid=702f130c-f783-44bd-bc95-8141a8d3e90e&displaylang=en Une fois téléchargé, installez le plug-in et à l ouverture d un nouveau projet avec Expression Encoder nous avons une nouvelle partie dans l onglet «Output» : Un nouveau panel intitulé «Publish» qui va donc fournir les informations nécessaires à la publication de la vidéo :

17 Déploiement d'application Silverlight 17/06/09 Il faut choisir l option Silverlight Streaming et ainsi vont apparaître une série de case à remplir. Premièrement il faudra récupérer vos ID et Accountkey sur le site de Silverlight Streaming dans la rubrique Manage Account. Il est possible aussi d avoir un listing des applications ainsi qu une information sur l espace disponible déjà en ligne en déroulant le menu inférieur. On peut trouver notre vidéo dans le panel du bas. Pour l importer, il suffit de cliquer sur le bouton «Import». Maintenant que la vidéo est importée dans Encoder,il ne faut pas oublier de choisir un template qui sera le panel de bouton qui s affichera pour nous permettre de contrôler notre vidéo.

18 Déploiement d'application Silverlight 17/06/09 Il ne reste plus qu à encoder la vidéo. Pour cela, rien de plus simple : il suffit de cliquer sur le bouton «Encode». Une barre de progression nous informe de l avancement de l encodage : Et au final Expression Encoder nous montre un aperçu automatiquement dans l explorateur internet : Et le tour est joué. De plus, Encoder nous fournit un Iframe qui nous permettra d intégrer notre vidéo ensuite dans une page web ou autre si nous voudrions la diffuser.

19 Déploiement d'application Silverlight 17/06/09 3.4 Amélioration des performances Depuis la sortie de Silverlight 3, hormis une amélioration des contrôles, des nouveautés dans le multimédia et une accélération graphique, nous pouvons découvrir une amélioration des performances. Il est possible de compresser les polices (Fonts) de nos applications pour une optimisation de la taille du téléchargement et ainsi éviter d avoir des applications où une majeure partie du temps de chargement concerne les images de haute qualité. Du coté serveur nous avons une très nette amélioration des performances car la communication Application/Serveur est améliorée puisque Silverlight supporte désormais le XML binarisé. Pour plus de détails et d informations sur les nouveautés apportées par Silverlight 3, Blend 3 et.net RIA Services, reportez-vous au WhitePaper de Julien Dollon ici.

20 Déploiement d'application Silverlight 17/06/09 4 Conclusion : Au cours de ce chapitre il a été vu comment intégrer une application dans une page web. De plus, quelques petites améliorations qu il est possible d ajouter à une application comme par exemple le mode offline, le mode plein écran et le streaming.