Ce post est destiné à ceux qui veulent se lancer dans des développements Silverlight et qui se posent plein de questions, voici un petit tuto du classique “Hello world” :)
Pour commencer il faut déjà installer les pré requis :
- Visual Studio 2008 Service Pack 1
- Silverlight™ 3 Tools for Visual Studio 2008 SP1 (Contient le runtime)
Après avoir installé tout ça, lancer Visual Studio –> Nouveau –> projet. Choisir l’élément “Silverlight” dans l’arbre à gauche et choisi le type de projet “Silverlight Application”.
Si vous n’avez pas installé les .NET RIA Services (Ce qui n’est pas un pré requis pour ce post) vous ne devriez pas voir les 2 derniers types de projets à savoir “.NET RIA Services Class Library” et “Silverlight Business Application”
Cliquer sur OK, Le wizard vous donne alors le choix de créer en même temps que votre application Silverlight, le site web qui va héberger cette dernière. Vérifier que la case à cocher “Host the Silverlight application in a Web site” est bien active et cliquer sur OK.
et c’est finit, vous avez créé votre premier projet Silverlight!!! Regardons maintenant la solution Visual Studio.
Le Wizard nous a bien créé 2 projets :
- Notre application Silverlight
- L’application web qui héberge l’application Silverlight
L’application web contient 2 pages web de test qui permettent de tester notre application silverlight, le plus important à ce stade c’est de savoir que ces pages utilisent le plugin Silverlight installé sur le navigateur qui va exécuter le binaire résultant de la compilation de notre projet Silverlight qui est ClientBin/SilverlightApplication3.xap
Bien évidemment, si on lance l’application web à ce stade on tombe sur une page vide (Génial!!! :))
Si in regarde un peu plus en détail notre application Silverlight on trouve App.xaml et MainPage.xaml. Le xaml est du xml qui va nous permettre de définir notre interface utilisateur de manière déclarative au sein d’une application Silverlight ou WPF
- App.xaml permet de déclarer les ressources. Dans son code Behind, on peut réagir aux évènements au niveau de l’application, et c’est là aussi qu’on définit l’écran / User Control qu’on veut lancer au démarrage de l’application, par défaut c’est MainPage.xaml.
- MainPage.xaml : C’est le User control par défaut, on peut y rajouter des contrôles pour construire notre première IHM en Silverlight
Et c’est ce que nous allons faire … Ouvrez votre MainPage.xaml, trouvez la balise <Grid> et insérer dedans ce bout de code :
<Grid.ColumnDefinitions>
<ColumnDefinition Width="110"/>
<ColumnDefinition Width="300"/>
<ColumnDefinition Width="110"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="60"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<Button Name="btnTryMe" Content="Show Hello" Grid.Row="1" Grid.Column="1" Click="Button_Click"></Button>
Ouvrez ensuite le code behind de MainPage.xaml et y insérer le code suivant :
private void Button_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Hello World");
}
Et voila, notre application Hello World est finie, si vous lancez votre application maintenant, vous trouverez un bouton et si vous cliquez dessus vous devriez avoir quelque chose comme ça :
Ce qu’il faut toujours garder en tête c’est que lorsqu’on fait du Silverlight on fait du code qui s’exécute côté client, on n’a donc pas accès à la base de données directement, il faut faire attention au cross-domain …
Pour aller plus loin mais toujours dans le Hello World Spirit, cliquer sur Fichier –>Nouveau –> Projet. Choisir l’élément “Silverlight” dans l’arbre à gauche et choisi le type de projet “Silverlight Navigation Application”.
Cliquer sur OK, puis cliquer encore sur OK pour créer le projet web correspondant, le wizard va nous créer cette fois-ci une application Silverlight sample, remarquez le dossier “Views” contenant les écrans de l’application.
Lancer le projet, vous devriez avoir une page Home comme celle-ci :
l’URL est la suivante : http://localhost:52523/SilverlightApplication4TestPage.aspx#/Home
Ci on clique sur “about” on obtient l’URL suivante http://localhost:52523/SilverlightApplication4TestPage.aspx#/About
et enfin si on clique sur “Back” du navigateur on revient à l’URL de la page Home, Génial!!! C’est une des nombreuses nouveautés de Silverlight 3, ce dernier embarque un framework de navigation et du coup on peut utiliser la navigation du navigateur même pour les applications Silverlight
Et voila, c’est fini pour ce post, on a fait un Hello World et vu une petite nouveauté Silverlight 3, on verra dans de prochains posts sur Silverlight beaucoup de nouveautés de cette version 3, mais en attendant, n’hésitez pas à laisser vos commentaires :)