tuto silverlight

1

Niveau : dbutant

Auteurs : Philippe Lacomme (placomme@isima.fr), Raksmey Phan (phan@isima.fr), Alexandre Baillif (alexandre.baillif@gmail.com)

Ceci nest pas un cours.

Plan

1. Installation du plugin silverlight .............................................................................................. 2 2. Dvelopper avec Eclipse sur mac ............................................................................................ 7 3. Dvelopper avec Eclipse sous windows................................................................................. 12 4. Creation dune application silverlight avec Eclipse................................................................ 15 5. Creation dune application VISUAL BASIC silverlight - Visual studio 2010 ......................... 20 6. Creation dune application VISUAL C# / silverlight avec Visual studio 2010 ........................ 26 7. Utilisation de SILVERLIGHT : visionneuse de photo............................................................ 37 8. Connexion un WEB SERVICE ........................................................................................... 43 9. Connexion une base sql server 2005 ................................................................................... 55 10. Deploiement dune application silverlight ............................................................................. 76 11. Utilisation de microsoft blend : animation ............................................................................. 94 12. Utilisation de microsoft blend : manipulation dimages ....................................................... 112 13. supports de cours................................................................................................................. 120 14. Les livres............................................................................................................................. 120

Liste des outils utiliss dans ce tutorial

1. Le pluging Silverlight 2. Eclipse pour MacIntosth 3. Eclipse pour Windows 4. Microsoft Visual Studio 2010 5. Microsoft Blend

Un conseil, consulter le site suivant

http://silverlighttutorials.blogspot.com/2007/06/silverlight-video-tutorials.html

2

1. INSTALLATION DU PLUGIN SILVERLIGHT

Si vous utilisez un MacIntosh, connectez-vous ladresse suivante et choisissez la version adapte votre plateforme :

http://msdn.microsoft.com/fr-fr/silverlight/bb419316.aspx

3

4

5

Dans la barre de lancement, vous pouvez ensuite lancer Silverlight :

6

Sous Windows, la fin de linstallation, vous pouvez vrifier que tout fonctionne en utilisant le menu Dmarrer :

7

2. DEVELOPPER AVEC ECLIPSE SUR MAC

Il est possible de raliser des applications Silverlight en utilisant Eclipse.

Tlcharger Eclipse et installer Eclipse sur votre machine.

Par prcautions, vrifier que vous possder la dernire version. Faire : Help / Check for updates

8

Choisir Available Software sites et faire Add.

Choisir comme adresse : http://www.eclipse4sl.org/update/mac/

9

Laissez-vous guider et procder linstallation.

10

11

12

3. DEVELOPPER AVEC ECLIPSE SOUS WINDOWS

Comme prcdemment, il faut installer le plugin Silverlight.

13

14

15

4. CREATION DUNE APPLICATION SILVERLIGHT AVEC ECLIPSE

Faire File / New / Project

Ce qui donne sur un MacIntosh :

16

Ce qui donne sous Windows :

Puis un MacIntosh :

17

Et sous Windows :

Lenvironnement de travail se prsente comme suit :

18

Ou bien comme ceci :

19

Choisir comme nom, le nom propos par dfaut : MyPage.xaml

Le projet se prsent comme suit :

20

5. CREATION DUNE APPLICATION VISUAL BASIC SILVERLIGHT - VISUAL STUDIO 2010

Dmarrer Visual Studio 2010

21

Etape 5.1. Cration dun projet.

Et choisir Fichier / Nouveau Projet.

22

Lenvironnement de dvelopement se prsente comme suit :

La premire excution donne :

23

Etape 5.2. Cration dun projet.

En utilisant la bote outils, poser un bouton et un textblock sur la page MainPage.xaml.

24

Faire un double-clic sur le bouton

Modifier la mthode Button1_Clic comme suit :

Partial Public Class MainPage

Inherits UserControl

Public Sub New()

InitializeComponent()

End Sub

Private Sub Button1_Clic(ByVal sender As System.Object,

ByVal e As System.Windows.RoutedEventArgs) Handles Button1.Clic

TextBlock1.Text = "demonstration"

End Sub

End Class

Ceci donne lexcution :

25

Et aprs le clic :

Notons la composition du rpertoire :

Un double-clic sur SilverlightApplication1TestPage.html donne le mme rsultat.

26

6. CREATION DUNE APPLICATION VISUAL C# / SILVERLIGHT AVEC VISUAL STUDIO 2010

Etape 6.1. Cration dun projet.

27

Comme pour lexemple prcdent, laide de la boite outils, on peut monter une interface minimaliste :

Modifier le code associ au bouton :

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 SilverlightApplication2 {

public partial class MainPage : UserControl

{

public MainPage()

{

InitializeComponent();

}

private void button1_Clic(object sender, RoutedEventArgs e)

{

textBlock1.Text = "demonstration...";

}

}

}

28

Ceci donne lexcution :

29

Etape 6.2. Gestion des panels.

En utilisant un Stack Panel et des Check Boxes, construisez un formulaire de saisie.

Ce qui donne :

30

Etape 6.3. Gestion des list box .

Remplacer les cases cocher par une List Box qui se trouve vers le bas de la boite outils.

31

Faire un clic droit sur le nouveau ListBox et choisir Proprit.

Choisir ensuite dajouter une collection la ListBox.

32

Puis cliquer sur Ajouter pour ajouter le premier item.

Faire un clic sur lattribut Items.

33

Et ajout les items les uns aprs les autres

34

Ceci modifie linterface :

35

Ce qui donne lexcution :

36

Etape 6.3. Gestion des PasswordBox.

Remplacer la liste droulante par deux champs de saisie : - un champ classique de type - un champ de type PasswordBox.

37

7. UTILISATION DE SILVERLIGHT : VISIONNEUSE DE PHOTO

Etape 7.1. Cration dun nouveau projet

Faire File / New / Project

Raliser une application simple avec deux boutons et une image. Lapplication sappellera SilverlightApplication7_Visualiseur_JPG.

Utiliser lobjet Image de la bote outils :

38

Lapplication principale doit ressembler ce qui suit :

Etape 7.2. Cration dun nouveau dossier pour les images

Crer un rpertoire contenant des images.

Placer ce rpertoire dans /bin/debug/img/

39

Slectionner par exemple 3 images comme ci-dessous (attention les photos doivent avoir un nom de type photoX.jpg o X va de 1 3) :

Etape 7.3. Modifier le code derrire les deux boutons.

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; using System.Windows.Media.Imaging;

namespace SilverlightApplication6 { public partial class MainPage : UserControl {

int position = 1;

40

public MainPage() { InitializeComponent(); Uri URL = new Uri("/img/photo1.jpg", UriKind.Relative); image1.Source = new BitmapImage(URL); }

private void button1_Clic(object sender, RoutedEventArgs e) { position++; if (position > 3) position = 1; String adresse = "/img/photo" + position + ".jpg"; Uri URL = new Uri(adresse, UriKind.Relative); image1.Source = new BitmapImage(URL); }

private void button2_Clic(object sender, RoutedEventArgs e) { position--; if (position

41

Etape 7.5. Utiliser des images dinternet.

Il est galement possible dutiliser directement les images sur internet. Par exemple, on peut utiliser les 3 images se trouvant cette adresse : fc.isima.fr/~phan/tuto/Silverlight/ Le nom des fichiers sont : photo1.jpg, photo2.jpg, photo3.jpg

Le code est le suivant :

using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using Syst