Mise en œuvre: exemple HelloWorld

 

Programmation.

Créer le projet.

 

Dans Visual Studio ouvrir :

 

Nouveau Projet à Silverlight àApplication SiverLight.

 

CréerProjet

 

 

Visual studio vous propose ensuite de créer une page de test :

 

PageTest

 

Pour le moment choisir la deuxième proposition. Visual Studio vous prépare TestPage.html, une page Html, qui encapsule votre composant SilverLight ; en particulier elle intègre la technique de contrôle de l’existence de Silverlight sur le navigateur et son téléchargement éventuel. Par la suite, il vous restera possible d’enrichir cette page.

 

Visual studio prépare alors les fichiers ci après (demander à voir tous les fichiers) :

 

Fichiers

 


 

Coder la page Silverlight.

 

Commencer par le xaml, pour définir le visuel.

 

La technologie xaml est déjà utilisée dans les applications client serveur Windows Présentation Foundation, déjà disponibles dans Visual Studio. Vous codez la page xaml de manière classique, pour le moment il n’y a pas d’éditeur WYSIWYG.

Blend offre un éditeur WYSIWYG, Visual Studio 2010 devrait aussi offrir un outil.

 

Vous pouvez également préparer l’interface sous WPF et recopier le xaml. Noter cependant que en WPF, la page hérite de la classe System.Windows.Window ; alors qu’une page Silverlight hérite de System.Windows.Controls.UserControl. Prévoir quelques reprises.

 

 Pour SilverLight. Il faut taper par exemple le code :

 

 

<UserControl x:Class="Hello.Page"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Width="400" Height="300">

 

  <StackPanel x:Name="stackHello" Orientation="Horizontal">

<Button x:Name="btnHello" Content="Cliquer ici" Height="50"          Click="btnClicHello"/>

      <TextBox x:Name="txtHello" Height="50" Width="100"/>

  </StackPanel>

 

</UserControl>

 

 

L’élément StackPanel est un container, il en existe plusieurs, celui-ci aligne ses enfants. Nous incluons dans le panel un bouton et un champ texte.

 

Pour obtenir ce Visuel :

 

Visuel

 

Attention aux pièges :

 

 

 

Et de même taper du code behind :

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

 

namespace Hello

{

    public partial class Page : UserControl

    {

        public Page()

        {

            InitializeComponent();

        }// fin constructeur

 

        //le handler de l’événement clic

        private void btnClicHello(object sender, RoutedEventArgs e)

        {

            this.txtHello.Text = "Hello";

        }// fin hello clic

    }//fin classe

}// fin namespace

 

 

Ici nous nous contentons de réagir au clic sur le bouton et d’afficher un message de bienvenue.

Test local.

 

Demander la génération :

 

------ Début de la régénération globale : Projet : Hello, Configuration : Debug Any CPU ------

C:\WINDOWS\Microsoft.NET\Framework\v3.5\Csc.exe /noconfig /nowarn:1701,1702 /nostdlib+ /errorreport:prompt /warn:4 /define:DEBUG;TRACE;SILVERLIGHT /reference:"c:\Program Files\Microsoft SDKs\Silverlight\v2.0\Reference Assemblies\mscorlib.dll" /reference:"c:\Program Files\Microsoft SDKs\Silverlight\v2.0\Reference Assemblies\System.Core.dll" /reference:"c:\Program Files\Microsoft SDKs\Silverlight\v2.0\Reference Assemblies\system.dll" /reference:"c:\Program Files\Microsoft SDKs\Silverlight\v2.0\Reference Assemblies\System.Net.dll" /reference:"c:\Program Files\Microsoft SDKs\Silverlight\v2.0\Reference Assemblies\System.Windows.Browser.dll" /reference:"c:\Program Files\Microsoft SDKs\Silverlight\v2.0\Reference Assemblies\System.Windows.dll" /reference:"c:\Program Files\Microsoft SDKs\Silverlight\v2.0\Reference Assemblies\System.Xml.dll" /debug+ /debug:full /optimize- /out:obj\Debug\Hello.dll /resource:obj\Debug\Hello.g.resources /target:library App.xaml.cs Page.xaml.cs Properties\AssemblyInfo.cs "D:\MesDocuments\Visual Studio 2008\Projects\silverligth\slnHello\Hello\obj\Debug\App.g.cs" "D:\MesDocuments\Visual Studio 2008\Projects\silverligth\slnHello\Hello\obj\Debug\Page.g.cs"

 

Compilation terminée -- 0 erreurs, 0 avertissements

Début de la génération du manifeste de l'application

La génération du manifeste de l'application a réussi

Validation des noms de fichiers ajoutés au package dans XAP

Hello -> D:\MesDocuments\Visual Studio 2008\Projects\silverligth\slnHello\Hello\Bin\Debug\Hello.dll

Début de l'empaquetage Xap

Empaquetage de Hello.dll

Empaquetage de AppManifest.xaml

L'empaquetage Xap a réussi

Création de la page de test

Page de test créée avec succès

========== Régénération globale : 1 a réussi, 0 a échoué, 0 a été ignoré ==========

 


 

L’opération se solde :

·       Par la création de Hello.xap. Hello.xap est un fichier zip qui contient tout le nécessaire pour faire fonctionner votre composant SilverLight, il vous faudra le copier sur votre serveur web.

·       Par la création de la page de test TestPage.html, dont voici l’essentiel :

 

 

<body>

<div id="silverlightControlHost">

<object data="data:application/x-silverlight," type="application/x-silverlight-2" width="100%" height="100%">

                  <param name="source" value="Hello.xap"/>

                  <param name="onerror" value="onSilverlightError" />

                  <param name="background" value="white" />

                  <param name="minRuntimeVersion" value="2.0.31005.0" />

                  <param name="autoUpgrade" value="true" />

<a href=http://go.microsoft.com/fwlink/?LinkID=124807 style="text-decoration: none;">

<img src="http://o.microsoft.com/fwlink/?LinkId=108181" alt="Tléchargez Microsoft Silverlight" style="border-style: none"/>

</a>

</object>

</div>

</body>

 

 

Il y a donc un objet html qui demandera le téléchargement de Hello.xap, ensuite le module silvlelight s’en débrouillera.

 

Cliquer sur la flèche verte pour lancer l’essai…cela doit fonctionner.


 

Déploiement

 

Configurer votre serveur Web pour ajouter les nouveaux types MIME :

 

Extension

MIME Type

.xaml

application/xaml+xml

.xap

application/x-silverlight-app

 

 

 

 

 

Chapitre suivant.