Les Differents Types D Applications Pouvant Etre Developpees Avec Le C

Les diffrents types
d'applications
pouvant tre
dveloppes avec le
C#
Par nico.pyright
www.siteduzero.com
Licence Creative Commons 4 2.0

Dernire mise jour le 19/03/2012
2/63
Sommaire
Sommaire ........................................................................................................................................... 2
Les diffrents types d'applications pouvant tre dveloppes avec le C# ......................................... 3
Crer une application Windows avec WPF ....................................................................................................................... 3
Crer une application web avec ASP.NET ...................................................................................................................... 12
ASP.NET WebForms ................................................................................................................................................................................................. 12
ASP.NET MVC ........................................................................................................................................................................................................... 20
Crer une application client riche avec Silverlight ..........................................................................................................

Le graphisme et les jeux avec XNA ................................................................................................................................
Crer une application mobile avec Windows Phone 7 ...................................................................................................
Crer un service web avec WCF ....................................................................................................................................
32
39
44
52
Partager ..................................................................................................................................................................................................................... 62
www.siteduzero.com
Sommaire
3/63
Les diffrents types d'applications pouvant tre

dveloppes avec le C#
Par nico.pyright
Mise jour : 19/03/2012
Difficult : Difficile
485 visites depuis 7 jours, class 244/797
Vous savez quoi ? Avec le C# on peut crer autre chose que des applications consoles !! Dingue non ? Des applications avec
des boutons et des menus, ou des sites web et mme des jeux.
Ces bonnes nouvelles sonnent la fin de nos applications console toutes noires et toutes tristes mais grce a, cest le dbut
dune toute nouvelle aventure.
Dans ce chapitre, je vais vous prsenter rapidement ce quon peut faire dautre avec le C#. Chaque paragraphe de ce chapitre
ncessite un livre entier pour tre correctement trait. Aussi, je vais simplement vous montrer ce que lon peut faire, histoire
davoir un premier point de dpart et de pouvoir dcider vers quoi orienter vos prochaines lectures.
Jespre que vous me pardonnerez par avance de ce trop bref aperu mais je souhaite nanmoins piquer votre curiosit pour
vous donner envie daller explorer tous ces nouveaux mondes qui souvrent vous.
Il y aura srement des notions que vous ne comprendrez pas compltement en fonction des thmes abords. Il faudra aller jeter
un il complmentaire sur internet ou attendre un prochaine tutoriel
.
Sommaire du tutoriel :
Crer une application Windows avec WPF

Crer une application web avec ASP.NET
Crer une application client riche avec Silverlight
Le graphisme et les jeux avec XNA
Crer une application mobile avec Windows Phone 7
Crer un service web avec WCF
Crer une application Windows avec WPF

Les applications Windows sont ce quon appelle des applications clients lourds. Elles sexcutent directement depuis notre
systme dexploitation. Nous pouvons crer toutes sortes dapplications, comme un traitement de texte, une calculatrice, etc.
Nous avons dj cr une application Windows travers notre projet console, sauf que nous tions rapidement limits. Avec
WPF, nous allons pouvoir crer des applications graphiques avec des boutons, des menus, Bref, tout ce qui compose une
application habituelle.
WPF signifie Windows Presentation Foundation. Il sagit dune bibliothque permettant de raliser des applications graphiques.
Ces applications sont dites vnementielles car elles ragissent des vnements (clic sur un bouton, redimensionnement de la
fentre, saisie de texte, etc.)
Pour crer une application WPF, il faut commencer par choisir le type de projet adquat. Dans Visual C# Express, nous
choisissons le modle Application WPF :
www.siteduzero.com
Les diffrents types d'applications pouvant tre dveloppes avec le C#
4/63
La premire chose savoir dans une application WPF est quelle se construit grce deux langages. Un langage de prsentation
qui va permettre de dcrire le contenu de notre fentre : le XAML (prononcez xamelle) et du C# qui va permettre de faire tout le
code mtier.
Une application WPF est dcompose en fentres qui sont affiches partir de lapplication principale. Chaque fentre est
compose dun fichier .xaml qui contient la description de la fentre (lemplacement des boutons, des images, ) et dun fichier
de code .xaml.cs qui contient le code associ cette fentre. On appelle ce fichier le code behind .
Nous pouvons voir ceci aprs avoir cr notre projet car Visual C# Express cr automatiquement une fentre par dfaut qui
sappelle MainWindow. Ce fichier est dailleurs ouvert automatiquement. Si nous dplions ce fichier dans lexplorateur de
solutions, nous pouvons voir un autre fichier dessous qui possde lextension .xaml.cs, le fichier de code behind.
Le XAML est une espce de fichier XML qui va nous permettre de dcrire le contenu de notre fentre. Cette fentre est
compose de contrles , qui sont des lments graphiques unitaires comme un bouton, une case cocher, etc. Nous pouvons
soit remplir ce fichier XAML la main si nous connaissons la syntaxe, soit utiliser le designer pour y glisser les contrles
disponibles dans la boite outils :
www.siteduzero.com
Positionnons un bouton par exemple grce au glisser-dplacer. Nous obtenons :
www.siteduzero.com
5/63
6/63
Nous pouvons voir trois choses :

La premire est le rendu de notre fentre dans la partie haute du fichier MainWindows.xaml. Cest a qui sera affich lors
du lancement de notre application.
La deuxime est le descriptif de cette fentre dans le code XAML, c'est--dire le langage permettant de dcrire la fentre.
Ce XAML est modifi si nous ajoutons des contrles avec le designer. Inversement, si nous modifions le code XAML, le
designer se met jour avec les modifications.
La troisime est que nous pouvons voir et modifier les proprits du contrle dans la fentre de proprits. Ici par
exemple, jai chang la proprit Content de mon bouton pour y mettre la phrase Cliquez-moi , ce qui a pour effet de
changer le texte du bouton et le code XAML.
Il y a beaucoup de contrles dans la boite outils. Rajoutons un Label, qui est une zone de texte non modifiable, ainsi quun
Textbox, qui est une zone de texte modifiable, au-dessus du bouton.
Rajoutons galement un autre Label en dessous du bouton.
Modifiez la proprit Content du premier label pour y saisir Saisir votre nom : . Dessinez le TextBox de manire ce quil soit
suffisamment grand pour accueillir un prnom et modifiez le nom du contrle, en haut de la fentre de proprit, pour lappeler
nom . Enfin, dans le deuxime label, changez la proprit Foreground pour mettre du rouge et videz la proprit Content pour
avoir une chaine vide.
www.siteduzero.com

Votre designer devrait ressembler :
Et votre XAML :
Code : XML
<Window x:Class="DemoWPF.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Button Content="Cliquez-moi" Height="23"
HorizontalAlignment="Left" Margin="214,86,0,0" Name="button1"
VerticalAlignment="Top" Width="75" />
<Label Content="Saisir votre nom :" Height="28"
HorizontalAlignment="Left" Margin="34,42,0,0" Name="label1"
VerticalAlignment="Top" />
<TextBox Height="23" HorizontalAlignment="Left"
Margin="155,44,0,0" Name="nom" VerticalAlignment="Top" Width="295"
/>
<Label Height="28" HorizontalAlignment="Left"
Margin="94,132,0,0" Name="label2" VerticalAlignment="Top"
Width="309" Foreground="Red" />
</Grid>
</Window>
A noter que les valeurs des proprits Margin ou Height seront sans doute diffrentes, vu quelles refltent la faon dont jai
dessin les contrles sur le designer.
Slectionnez dsormais le bouton dans le designer et cliquez sur le petit clair dans la fentre des proprits pour accder
longlet des vnements :
www.siteduzero.com
7/63
8/63
Dans lvnement Click, saisir un nom de mthode, par exemple OnClickBouton. A la validation, Visual C# Express nous gnre
une mthode dans le code behind :
Code : C#
private void OnClickBouton(object sender, RoutedEventArgs e)
{
}
Cest cette mthode qui va tre appele lorsque nous cliquerons sur le bouton.
En complment, le XAML se met jour pour devenir :
Code : XML
<Button Content="Cliquez-moi" Height="23" HorizontalAlignment="Left"
Margin="214,86,0,0" Name="button1" VerticalAlignment="Top"
Width="75" Click="OnClickBouton" />
Nous pouvons y voir que la proprit Click (qui est un vnement) est associe au nom de la mthode qui sera appele lors du
clic sur le bouton.
Le but de cette petite dmo est de pouvoir saisir du texte dans le contrle TextBox et dafficher un message dans le label sous le
bouton en fonction du nom saisi, par exemple Bonjour [prnom] . Pour accder aux informations qui ont t saisies dans le
champ, on utilise des variables qui ont t gnres par Visual C# Express partir du code XAML de description de la fentre. Il
y a une variable gnre par contrle, sachant quelles possdent le nom donn au contrle. En loccurrence, notre contrle
TextBox sappelle nom . Nous allons pouvoir accder la valeur saisie grce la proprit Text de lobjet nom. A noter que la
variable nom est du type TextBox qui est un contrle de WPF. Cest la mme chose pour le label, que nous navons pas
renomm. Nous pouvons le modifier en utilisant sa proprit Content, ce qui donne :
Code : C#
{
label2.Content = "Bonjour " + nom.Text + " !!";
}
www.siteduzero.com
9/63
Lanons notre application avec F5, nous pouvons voir une fentre qui souvre avec nos contrles. Si nous saisissons un nom
dans la zone de texte et que nous cliquons sur le bouton, nous pouvons voir :
Superbe !! Notre premire application WPF fonctionnelle

Regardons dun peu plus prs le code behind :
Code : C#
using
using
using
using
using
using
using
using
using
using
using
using
using
System;
System.Collections.Generic;
System.Linq;
System.Text;
System.Windows;
System.Windows.Controls;
System.Windows.Data;
System.Windows.Documents;
System.Windows.Input;
System.Windows.Media;
System.Windows.Media.Imaging;
System.Windows.Navigation;
System.Windows.Shapes;
namespace DemoWPF
{
/// <summary>
/// Logique d'interaction pour MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}

{
label2.Content = "Bonjour " + nom.Text + " !!";
}
Nous pouvons voir que Visual C# Express nous a inclus plein despace de noms qui nous serviront surement plus tard, mais
aussi que la classe sappelle du mme nom que la fentre : MainWindow. Ce nest pas un hasard, en fait la fentre est un objet
qui hrite des fonctionnalits de base dune fentre, en drivant de la classe Window. WPF est compose de toute une
www.siteduzero.com
10/63
hirarchie de classes reprsentant les fentres, les contrles et plein dautres choses dans une approche oriente objet. Ces
classes sont fortement rutilisables pour nos besoins.
En loccurrence, notre fentre va hriter de plein de proprits, comme sa taille, son titre, etc. A ces proprits vont tre rajoutes
des variables membres qui servent accder aux contrles que nous avons dcrits dans le XAML.
En fait, le XAML a t transform en code permettant de crer la fentre et ses composants. Cest ainsi que les label et le textbox
ont t construits puis ajouts au contenu de la fentre. Ce code gnr est appel depuis la mthode InitalizeComponent qui se
trouve dans le constructeur de la classe. Une fois les contrles initialiss, nous pouvons les utiliser grce aux variables membres
dont le nom est le mme que celui des contrles.
Nous retrouvons ici lintrt de la classe partielle. Le code automatique est gnr dans la classe partielle et nous augmentons
ses fonctionnalits, comme le traitement de lvnement de clic sur le bouton, dans un autre fichier sans risque dcrasement des
modifications.
Voil ! Notre premire application WPF est termine. Plutt pas mal non ? Il y aurait beaucoup de choses dire encore, de
contrles dcrire, mais je vais terminer cet aperu en vous parlant dune fonctionnalit trs pratique : le binding.
Le binding (ou liaison de donnes) est un moyen de lier des donnes un contrle. Cela permet de positionner automatiquement
des valeurs aux proprits des contrles en fonction du contenu de la source de donnes. En effet, il est trs frquent de mettre
des valeurs dans des TextBox ou dans des Label comme nous lavons fait. Le binding est l pour faciliter tout ce qui peut tre
automatisable et risque derreurs. De plus, si la source de donnes change, il est possible de faire en sorte que le contrle soit
automatiquement mis jour. Inversement, si des modifications sont faites depuis linterface, alors on peut tre notifi
automatiquement des changements.
Pour illustrer son fonctionnement le plus simple, nous allons ajouter un contrle de type ListBox notre fentre de manire ce
que notre fentre contienne une ListBox et un label.
Puis nous allons modifier le code behind de la fentre pour avoir :
Code : C#
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
listBox1.ItemsSource = new List<string> { "Nicolas",
"Jrmie", "Delphine" };
}
}
Lorsque nous dmarrons lapplication, nous pouvons voir que la ListBox sest alimente avec les valeurs de notre liste. Ici, cest
la proprit ItemsSource du contrle qui va permettre la liaison de donnes. En fait, la proprit ItemsSource peut recevoir
nimporte quelle source de donnes tant quelle implmente IEnumerable ou sa version gnrique. Cela peut tre une requte
Linq, issue dune base de donnes ou non, ou simplement une liste comme ci-dessus. Cela donne :
www.siteduzero.com
11/63
Ici, nous lions les donnes une source de donnes grce au code behind. Il ny a rien dautre faire, cest le contrle qui se
charge tout seul dafficher les donnes.
Ce genre de binding peut galement se faire directement depuis le XAML et de manire plus ou moins complexe.
Illustrons ce fonctionnement en changeant le XAML du contrle Label pour que sa proprit Content ressemble :
Code : XML
<Label Content="{Binding ElementName=listBox1, Path=SelectedItem}"
Height="28" HorizontalAlignment="Left" Margin="261,71,0,0"
Name="label2" VerticalAlignment="Top" Width="230" Foreground="Red"
/>
C'est--dire modifier Content de cette faon :

Code : XML
Content="{Binding ElementName=listBox1, Path=SelectedItem}"
Cette syntaxe permet dindiquer ici que nous souhaitons lier llment slectionn de la listbox au contenu du label. Nous
utilisons les accolades pour indiquer la liaison de donnes. Ici, la liaison se produit sur la proprit SelectedItem de la ListBox
listBox1 .
Cela veut dire que lorsque nous allons dmarrer lapplication et slectionner un lment de la ListBox, sa valeur va
automatiquement safficher dans le label :
Plutt pratique non ?

Le binding est une trs vaste notion absolument indispensable pour toute application qui se respecte. A noter quil y a plusieurs
modes de liaison :
Binding
Description
OneTime
La liaison se fait une unique fois au dbut. Si un changement se fait sur la source de donnes, on ne voit pas
les modifications
One-way
La liaison ne se fait que dans un sens, de la source de donnes vers le contrle. Cest celui que nous avons
vu plus haut.
Two-way
La liaison se fait dans les deux sens. Cela veut dire quune modification dans linterface se rpercute
automatiquement sur la source de donnes.
One-way-tosource
Cest le contraire du one-way, si la valeur du contrle change, la source est mise jour.
www.siteduzero.com
12/63
Il y a beaucoup de binding diffrents. Nous avons vu ici comment se lier une liste partir du code behind et comme lier une
proprit dun contrle la proprit dun autre. Si vous tudiez en dtail les diffrents bindinds de WPF, vous pourrez voir
toute la puissance de la liaison de donnes travers de multiples exemples.
Voil pour ce petit tour de WPF. Il y aurait normment dautres choses dire mais jespre vous avoir donn envie de vous y
plonger encore plus. Vous pouvez faire tout ce quune application de gestion fait habituellement en tirant parti de toute la
puissance de WPF.
Notez quavant WPF existaient les applications Winforms. Il sagissait de bibliothques permettant de construire galement des
applications Windows graphiques. Winforms tait une bibliothque imparfaite cr rapidement pour permettre de crer des
applications Windows avec .NET. WPF est son remplaant et a tir parti des erreurs de jeunesses des Winforms afin de proposer
un framework puissant et mature.
Crer une application web avec ASP.NET

ASP.NET cest la plateforme de Microsoft pour raliser des applications web. Cest un peu comme PHP, sauf que, vous vous en
doutez, ASP.NET sappuie massivement sur le framework .NET. Et tout comme WPF, il sagit de bibliothques qui vont permettre
de raliser facilement son site web.
La premire chose savoir est quil est possible de raliser son site web avec du C#. Forcment, sinon je nen parlerai pas ici.
La deuxime chose savoir est quil existe 2 ASP.NET : lASP.NET WebForms et lASP.NET MVC. Je vais vous parler rapidement
des deux, mais il faut savoir que ces deux versions se basent sur un socle commun qui offre toute la puissance de cration
dapplications web.
ASP.NET WebForms cest tout un mcanisme qui permet de faciliter la cration dune application web en faisant comme si ctait
une application Windows. C'est--dire que le framework soccupe de grer toute la persistance dinformations entre les diffrents
tats des pages alors que le protocole http est sans tat. Il permet aussi de travailler avec une approche vnementielle, comme
une application Windows. Le premier but dASP.NET WebForms tait de faire en sorte que les personnes qui avaient dj fait du
dveloppement Windows (avec des langages comme le Visual Basic ou autre) puisse facilement faire du dveloppement web,
dans un contexte qui leur serait familier.
ASP.NET MVC est plus rcent et offre une approche o le dveloppeur doit bien connaitre tous les mcanismes du web. Il offre
galement une plus grande maitrise sur le rendu du site web. Enfin, il intgre par dfaut tous les mcanismes prouvs du fameux
patron de conception (design pattern) MVC.
On ne peut pas dire quASP.NET WebForms soit mieux ou moins bien quASP.NET MVC. Il sagit de deux faons diffrentes de
crer des sites web. Chacune a ses avantages et ses inconvnients. Par contre, les deux se basent sur un socle commun qui est
le cur dASP.NET.
Je vais vous prsenter rapidement ici comment crer une petite application web avec ces deux ASP.NET.
Mais tout dabord, vous avez besoin dun nouvel outil. Cest le Visual C# Express ddi au dveloppement web. Il sappelle
Visual Web Developper Express que vous pouvez tlcharger ici. Linstallation ne pose pas de problmes particuliers. Il va vous
demander dutiliser le plateform installer et dinstaller le SP1 de Visual Web Developper Express. Loutil install, vous pouvez le
dmarrer et vous rendre compte quil ressemble beaucoup Visual C# Express. Cest normal, cest la version express de Visual
Studio, ddie au dveloppement web.
ASP.NET WebForms
Pour raliser une application WebForms, il va falloir crer un nouveau projet grce Visual Web Developper Express, savoir un
projet Application Web ASP.NET vide :
www.siteduzero.com
13/63
Comme nous avons choisi lapplication vide, Visual Web Developper Express ne nous ajoute quun fichier Web.config. Cest le
fichier de configuration de lapplication web. Cest comme le fichier app.config que nous avons dj vu, sauf quil fonctionne
pour les applications web.
La premire chose faire est de rajouter une page. Cliquez droit sur le projet et faites Ajouter puis Nouvel lment . Vous
obtenez la liste de tout ce quon peut rajouter dans une application web. Choisissez le modle Web Form et appelez le fichier
MaPage.aspx. La webform est llment de base dune application ASP.NET. Elle correspond une page :
www.siteduzero.com
14/63
Cette page est reprsente par plusieurs fichiers. Un premier fichier possde lextension .aspx, cest le fichier de description de la
page. Sous ce fichier, il y a un autre fichier possdant lextension .aspx.cs, cest le fichier contenant le code behind de la page. Si
vous avez compris le chapitre sur WPF, vous pouvez vous dire quASP.NET fonctionne quasiment pareil. Enfin, il y a un dernier
fichier aspx.desginer.cs dont nous parlerons plus tard.
Le fichier ASPX va contenir toutes les balises nous permettant de construire notre page. Cette page sera un mlange de langage
web (HTML, css, javascript) et de balises spcifiques ASP.NET.
Nous pouvons le constater lorsque cette page souvre sur notre IDE, elle est compose de :
Code : HTML
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="MaPage.aspx.cs" Inherits="MonApplicationWeb.MaPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
Nous retrouvons les balises classiques dune page HTML, par exemple la balise <html> ou encore la balise <body>.
Comme pour une application Windows, une page ASP.NET est compose de contrles. Parmi les contrles basiques, on retrouve
tous les contrles classiques dune page web, savoir une zone de texte, un bouton, etc.
Pour ajouter un contrle, cliquez sur longlet design qui se trouve en bas de la fentre :
Nous retrouvons laperu de notre page ainsi que la fameuse boite outils. Faisons glisser un contrle TextBox, un contrle
Button et un contrle Label sur notre page, en passant la ligne entre chaque, pour avoir :
www.siteduzero.com
15/63
Si nous rebasculons sur le code source en cliquant sur longlet Source en bas du designer, nous pouvons voir que la page
ASPX sest enrichie :
Code : HTML
<title></title>
</head>
<body>
<div>
</div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<asp:Button ID="Button1" runat="server" Text="Button" />
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</form>
</body>
</html>
Elle possde des balises supplmentaires prfixes par asp: et qui possdent un attribut spcifique, lattribut runat="server".
Cela veut dire que tous les contrles qui possdent cet attribut sont grs par ASP.NET. Cela veut aussi dire que dans le fichier
designer.cs va tre gnr du code permettant de manipuler ces contrles grce une variable du mme nom que lattribut ID de
la balise, comme avec WPF. Retournons dans le designer et slectionnons le bouton pour aller voir ses proprits dans la fentre
du mme nom. On retrouve longlet vnement accessible via un petit clair et notamment lvnement Click :
www.siteduzero.com
16/63
Vous vous en doutez, grce a, nous pourrons grer le clic sur le bouton.
Aprs avoir saisi un nom de mthode, lIDE nous gnre le prototype de la mthode qui sera appele lors de ce fameux clic sur le
bouton :
Code : C#
protected void OnClickBouton(object sender, EventArgs e)
{
}
Retournons dans longlet Source du fichier ASPX. Comme cest un mlange dHTML et de code ASP.NET, il est possible de
rajouter des balises HTML classique. Rajoutons par exemple un titre et un message pour avoir :
Code : HTML
<title></title>
</head>
<body>
<h2>Bienvenue dans ma premire page</h2>
<p>Veuillez saisir votre nom :</p>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<asp:Button ID="Button1" runat="server" Text="Button"
onclick="OnClickBouton" />
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</form>
</body>
</html>
Notons au passage le nouvel attribut onclick qui a t rajout dans la balise <asp:Button>. Il correspond bien sr ce que nous
avons fait plus haut dans le designer. Profitez-en pour changer lattribut Text pour le remplacer par quelque chose de plus
www.siteduzero.com
17/63
explicite, par exemple Cliquez-moi :

Code : HTML
<asp:Button ID="Button1" runat="server" Text="Cliquez-moi"
onclick="OnClickBouton" />
A noter que nous aurions pu changer cette proprit en utilisant la fentre de proprits. C'est comme avec WPF, il est tout fait
possible de modifier le contenu directement dans la page ainsi que dans le designer. A chaque fois, les modifications sont
rpercutes dans l'autre mode.
Ouvrons prsent le code behind, nous voyons le code suivant :
Code : C#
using
using
using
using
using
using
System;
System.Collections.Generic;
System.Linq;
System.Web;
System.Web.UI;
System.Web.UI.WebControls;
namespace MonApplicationWeb
{
public partial class MaPage : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
{
Nous pouvons voir que Visual Web Developper Express nous a gnr une classe partielle du mme nom que notre page ASPX
qui hrite de lobjet Page. Ici, cest comme avec WPF. Les bibliothques dASP.NET proposent toute une hirarchie dobjets et
de contrles dont hrite notre page. Les variables reprsentant les contrles sont gnrs par lIDE et sont visibles dans le
fichier .designer.aspx. Nous allons pouvoir les utiliser.
Remarquons quune mthode Page_Load a t gnre. Elle sera excute lors du chargement de la page. Pour faire simple,
lorsquon demande au serveur web dafficher la page ASP.NET, elle va passer par tout un cycle de vie (initialisation, chargement,
vnements, etc.). Ici, le chargement de la page est le moment opportun pour faire les initialisations de contrles.
Ce que nous voulons faire, cest afficher un petit message lorsque lutilisateur a saisi son nom dans la zone de texte et a cliqu
sur le bouton. Donc, dans la mthode OnClickBouton, rajoutez :
Code : C#
{
Label1.Text = "Bienvenue " + TextBox1.Text;
}
La variable Label1 correspond au contrle Label que nous avons positionn dans la page. Sa proprit ID donne le nom de la
variable gnre par Visual Web Developper Express reprsentant ce label. Si nous utilisons sa proprit Text, nous allons
www.siteduzero.com

pouvoir modifier son contenu.
Si vous dmarrez notre application web en appuyant sur F5, nous pouvons voir 2 choses. La premire est que Visual Web
Developper Express dmarre un serveur web de dveloppement qui est lcoute sur un certain port (ici 49161) :
Cest ce serveur web qui va recevoir les requtes provenant du navigateur souhaitant afficher nos pages.
La deuxime chose que nous observons est quil lance le navigateur par dfaut et affiche notre page :
Waouh ! Notre premire page ASP.NET. Bon, OK, il y a un petit dfaut, un mot Label qui traine. Mais bon, nous allons y
remdier
.
En attendant, saisissez votre nom et cliquez sur le bouton, nous obtenons :
www.siteduzero.com
18/63
19/63
Joli non ?
Allons corriger le lger dfaut que nous avons vu, pour cela plusieurs possibilits. Vous pouvez par exemple vider la proprit
Text dans le designer ou directement dans le code ASPX. Sinon, nous pouvons utiliser lvnement Page_Load pour nous
occuper dinitialiser cette proprit :
Code : C#
protected void Page_Load(object sender, EventArgs e)
{
Label1.Text = string.Empty;
Label1.ForeColor = System.Drawing.Color.Red;
}
Vous aurez devin que nous en profitons pour changer la couleur du label. Ainsi dsormais, la page commence par safficher
sans le dtestable mot label, puis lorsque nous cliquons sur le bouton nous pouvons voir notre magnifique message en rouge :
Il y a plusieurs choses constater ici.

La premire est que le navigateur sest automatiquement mis naviguer sur ladresse http://localhost:49161/MaPage.aspx.
Localhost correspond, comme son nom le suggre, ladresse locale de notre serveur web de dveloppement. Le port est
ensuite prcis, 49161, on le retrouve dans les proprits du projet (il est fortement probable quil soit diffrent chez vous). Enfin,
nous affichons la page MaPage.aspx. Ici, le serveur web de dveloppement est capable dinterprter le contenu des pages ASPX,
dexcuter le code C# associ et de renvoyer du HTML.
Oui oui, du HTML, et cest la deuxime chose observer ici. Si vous affichez le code source de la page ainsi obtenue, vous aurez
quelque chose du genre :
Code : HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x

<head><title>
</title></head>
<body>
<form method="post" action="MaPage.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
value="/wEPDwUKMjA3NjE4MDczNg9kFgICAw9kFgICBQ8PFgYeBFRleHQFDkJpZW52ZW51ZSBOaWNvHglGb3J
/>
www.siteduzero.com
20/63
</div>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwKEx

</div>
<input name="TextBox1" type="text" value="Nico" id="TextBox1" />
<br />
<input type="submit" name="Button1" value="Cliquez-moi" id="Button1" />
<br />
<span id="Label1" style="color:Red;">Bienvenue Nico</span>
</form>
</body>
</html>
Ce qui est bel et bien du HTML. Les contrles serveurs ont t transforms en HTML avec en complment, les ventuelles
valeurs que nous avons mises jour. Par exemple le TextBox a t transform en balise <input type="text" /> (il y a
aussi des valeurs bizarres, comme le viewstate, que je nexpliquerai pas dans cette introduction).
La troisime chose constater est que lorsque nous avons cliqu sur le bouton, nous avons pu voir que la page stait
recharge. On appelle cela un postback , cest laction denvoyer les informations de la page au serveur afin quil nous mette
jour la page. Les informations envoyes sont les lments du formulaire HTML (comme la valeur de la TextBox). Ainsi,
ASP.NET est capable de traiter la valeur du TextBox envoye (le prnom) et de la rafficher dans une autre zone, le Label.
On va sarrter l pour ce petit tour dASP.NET WebForms. A noter que tout est fait pour faire en sorte que le dveloppeur ait
limpression quil dveloppe une application vnementielle, comme sous Windows. Avec ASP.NET, les mcanismes de binding
volus sont galement prsents ainsi que la possibilit de facilement faire de lAJAX, trs la mode. Bref, nous avons ici tout
un lot de fonctionnalits permettant de construire des applications web professionnelles.
ASP.NET MVC
ASP.NET MVC nest pas le remplaant dASP.NET WebForms, malgr sa plus rcente mise en place et les nombreux efforts fait
par Microsoft pour que cette plateforme soit rapidement mature. Il sagit bel et bien dune autre faon de raliser des applications
web, dans un cadre plus structur et laissant la place plus de maitrise sur le rendu html.
Plus structur car bnficiant nativement du support du patron de conception MVC, qui signifie Model View Controler. Il sagit
dune modlisation ayant fait ses preuves depuis de nombreuses annes qui permet darchitecturer une application web en
sparant les donnes (Model) de leur rendu (View) et de la logique mtier (Controler). Cest une faon efficace darchitecturer
son application web permettant de limiter les interactions entre ces diffrentes couches, vitant les fameux plats de spaghetti o
la moindre modification entraine des modifications en chaines plusieurs endroits.
Le rendu HTML est mieux maitris galement mais ncessitant plus de connaissances HTML. Ici, nous travaillons directement
avec le code HTML et non pas avec des contrles comme avec ASP.NET WebForms. Le code ASPX contient non seulement du
HTML mais aussi directement du code C#.
Pour commencer, nous avons besoin de crer un nouveau projet de type Application web ASP.NET MVC 3 :
www.siteduzero.com
Un assistant apparait pour nous aider au paramtrage de notre projet :
www.siteduzero.com
21/63
22/63
Partons sur un modle vide et sur un moteur de vue ASPX. Ici, le choix est important. ASP.NET MVC propose diffrents moteurs
permettant dinterprter le code des vues, c'est--dire le code des pages. Nous pourrions donc crire la mme page avec deux
langages diffrents. Razor est un moteur de vue plutt pratique utiliser, optimis pour ASP.NET MVC, mais ncessitant un
apprentissage de sa syntaxe particulire. Nous allons utiliser ici le moteur de vue ASPX pour que cela soit plus simple.
LIDE nous gnre donc notre solution avec plusieurs choses dedans. Ce qui nous intresse surtout cest de constater quil y a
une arborescence avec un rpertoire Controllers , un rpertoire Models et un rpertoire Views . Vous laurez devin,
cest ici que nous devrons mettre nos contrleurs, nos modles et nos vues. Le fait de mettre directement les bons lments aux
bons endroits permet dviter de la configuration supplmentaire car un des mots dordre de ce framework est de prfrer les
conventions la configuration. Donc si le moteur ASP.NET MVC sait o chercher les infos, a sera plus simple pour tout le
monde
.
A noter que dans les grosses applications, nous aurons intrt ne pas suivre cette convention et regrouper les
contrleurs ou vues dans des assemblys diffrentes. A ce moment-l, de la configuration sera ncessaire.
Dautres rpertoires sont crs, comme le rpertoire scripts qui permet de regrouper tous les bibliothques javascript, comme
JQuery. Le rpertoire Content permet de mettre les images, les css, etc.
Commenons par crer un modle archi-basique. Pour rappel, il sagit de tout ce qui va permettre daccder aux donnes de notre
application, typiquement ce qui est gnr par Entity Framework et notre couche daccs aux donnes. Pour les besoins de cette
dmo, je vais simplement crer une classe Personne dans le rpertoire Models :
www.siteduzero.com
23/63
Code : C#
namespace MonApplicationWebMvc.Models
{
public class Personne
{
public int Id { get; set; }
public string Nom { get; set; }
public int Age { get; set; }
}
}
Nous avons besoin ensuite dun contrleur. Les contrleurs soccupent de traiter les requtes faites au serveur web. Dans une
application classique les requtes correspondent en gnral un fichier sur le serveur. Nous avons par exemple vu dans
lexemple prcdent utilisant ASP.NET WebForms que nous avons cr un fichier MaPage.aspx et que nous y accdons avec
lurl http://localhost:49161/MaPage.aspx. Avec ASP.NET MVC, ce nest pas le cas. Les urls font rfrence des mthodes de
classes : les classes contrleurs.
Crons donc un nouveau contrleur. Pour cela, crez un rpertoire Bonjour dans le rpertoire Controllers (je vais vous
expliquer dans un instant pourquoi), puis faites un clic-droit sur ce rpertoire Bonjour et choisissez Ajouter , Contrleur :
Nommez ce contrleur BonjourController et choisissez pour modle un contrleur vide :
www.siteduzero.com
24/63
Visual Web Developper Express nous gnre la classe suivante :

Code : C#
public class BonjourController : Controller
{
//
// GET: /Index/
public ActionResult Index()

{
return View();
}
Ce contrleur hrite des fonctionnalits de la classe Controller du framework ASP.NET MVC et dfini une action Index, sous la
forme dune mthode retournant un objet de type ActionResult.
Cela veut dire que nous pourrons accder cette action grce lurl http://localhost:port/Bonjour/Index.
Pourquoi cette url ? Grce au mcanisme de routage dASP.NET MVC. Ce mcanisme soccupe dinterprter lurl et dexcuter
laction correspondante. Ce moteur de routage est compltement configurable, mais lIDE nous a gnr une rgle par dfaut que
nous pouvons retrouver dans le fichier global.asax.cs et notamment la mthode RegisterRoutes :
Code : C#
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
"Default", // Nom d'itinraire
"{controller}/{action}/{id}", // URL avec des paramtres
new { controller = "Home", action = "Index", id =
UrlParameter.Optional } // Paramtres par dfaut
);
}
www.siteduzero.com
25/63
Ici ce quil est intressant de voir, cest que la route par dfaut fait en sorte quune url sous la forme {contrleur}/{action}/{id}
est automatiquement associe linstanciation dun contrleur dont le nom est {contrleur} et lappel de la mthode {action}
avec ventuellement un paramtre.
Ce qui fait que lorsque nous souhaitons appeler notre mthode Index de la classe BonjourController, nous allons devoir utiliser
la route http://localhost:port/Bonjour/Index.
A noter quil est inutile de suffixer le nom dans lurl du contrleur par le mot Controller. En effet, la convention de nommage fait
quun contrleur doit tre suffix par Controller. Pour tre trouv convenablement, ce contrleur doit se trouver dans un sousrpertoire du mme nom.
Ici, la mthode Index sera appele lorsque nous allons faire des requtes de type GET. Cette mthode va renvoyer une vue par
dfaut, grce la mthode View(). En fait, cette mthode va renvoyer la vue qui porte le nom par dfaut Index et qui sera situe
dans le rpertoire du mme nom que le contrleur. Pour le vrifier, vous pouvez dmarrer notre projet en appuyant sur F5 et en
naviguant sur http://localhost:49203/Bonjour/Index/ (chez moi le port attribu mon projet est 49203). Vous obtenez une
exception indiquant :
Citation : Page erreur
La vue 'Index' ou son matre est introuvable, ou aucun moteur de vue ne prend en charge les emplacements o est effectue
la recherche. La recherche a port sur les emplacements suivants :
~/Views/Bonjour/Index.aspx
~/Views/Bonjour/Index.ascx
~/Views/Shared/Index.aspx
~/Views/Shared/Index.ascx
~/Views/Bonjour/Index.cshtml
~/Views/Bonjour/Index.vbhtml
~/Views/Shared/Index.cshtml
~/Views/Shared/Index.vbhtml
Cest mme un peu plus compliqu. Il commence par chercher dans ce rpertoire, puis ensuite il va vrifier dans le rpertoire
partag (Shared) sil trouve quelque chose, etc.
Nous avons donc besoin de crer une vue cet emplacement.
Si vous navez pas dmarr le projet, il faut maintenant que vous compiliez lapplication. En effet, pour la suite nous allons avoir
besoin que la classe Personne soit compile.
Cest le moment dajouter une vue. La vue est lie au modle et pour simplifier les dveloppements, il est possible de la lier
directement un modle dj prsent dans lapplication.
Retournez dans le code du contrleur et faites un clic-droit dans le code de la mthode Index(). Visual Web Developper nous
propose dajouter une vue :
www.siteduzero.com
26/63
Gardez le nom Index ainsi que le moteur de vue ASPX . Puis cochez Crer une vue fortement type et allez choisir dans la
liste droulante le nom de notre classe de modle. Dcochez galement lutilisation de la page matre :
www.siteduzero.com
27/63
Visual Web Developper Express nous cre donc une vue vide associe notre modle. Il sagit dun fichier portant lextension
.aspx automatiquement situ dans le rpertoire Views/Bonjour et qui sappelle Index.aspx. On a vu que ctait cette vue dont on
avait besoin, a tombe bien. Cette page ASPX ressemble normment une page HTML :
Code : HTML
<%@ Page Language="C#"
Inherits="System.Web.Mvc.ViewPage<MonApplicationWebMvc.Models.Personne>"
%>
<!DOCTYPE html>
<html>
<title>Index</title>
</head>
<body>
<div>
</div>
</body>
</html>
On voit seulement que la vue est lie la classe personne grce au type dont elle hrite :
System.Web.Mvc.ViewPage<MonApplicationWebMvc.Models.Personne>. Il sagit dune classe gnrique du framework
ASP.NET MVC type avec notre classe de modle.
Nous allons maintenant garnir un peu notre page. Cela se fait en utilisant les balises HTML mais aussi avec des helper HTML
qui permettent de gnrer le code du contrle HTML. Par exemple, ajoutons dans la balise <body> :
www.siteduzero.com
28/63
Code : HTML
<body>
<%using (Html.BeginForm())
{
%>
<% =Html.TextBox("NomPersonne", Model.Nom) %>
<br />
<input type="submit" value="click" />
<%
} %>
<br />
<span style="color:red"><%=ViewData["MessageBienvenue"]%></span>
</body>
Nous utilisons les scriptlets <% et %> pour ajouter du code C#. En loccurrence ici nous commenons par faire de notre page un
formulaire HTML grce au code <%using (Html.BeginForm()).
Grce ce helper, il va gnrer la balise <form> ainsi que les attributs qui vont bien pour notre vue. Nous ajoutons ensuite du
HTML classique pour afficher le message de bienvenue.
Ensuite, le helper Html.TextBox va permettre de gnrer une zone de texte qui portera le nom NomPersonne et qui sera associe
la proprit Nom de notre classe de modle, reprsente ici par la variable proprit Model. Ensuite nous rajoutons une balise de
type input submit pour valider notre formulaire.
Enfin, nous ajoutons une balise <span> qui va contenir un message. Nous allons voir plus tard comment positionner ce
message.
Nous avons donc pu constater que la vue possdait une proprit Model qui tait du type de notre classe Personne. De plus, la
compltion automatique est l pour nous aider :
Comment la vue obtient-elle le modle adquat ?

En fait, cest tout simple. Le model est pass en paramtre la vue lorsquon renvoi le rsultat de laction du contrleur. Pour
linstant, notre action retourne :
Code : C#
{
return View();
}
www.siteduzero.com
29/63
C'est--dire la vue par dfaut, sans modle. Nous pouvons utiliser une surcharge de cette mthode pour lui passer le modle qui
nous intresse. En loccurrence, nous allons renvoyer un objet vide car nous navons aucun modle retourner dans la mesure
o cest la premire fois que nous affichons la page :
Code : C#
{
return View(new Personne());
}
Dmarrons notre application web en appuyant sur F5. Comme pour ASP.NET WebForms, un serveur web de dveloppement
dmarre pour hberger notre application ainsi que notre navigateur par dfaut. Le navigateur essaie dafficher la page qui se
trouve lemplacement : http://localhost:49203/, sachant que le port choisi par Visual Web Developper Express chez moi est le
49203. Le navigateur nous affiche une page derreur indiquant que la page est introuvable :
En effet, nous navons pas indiqu la route qui correspond une action de notre contrleur. Rappelez-vous, nous devons taper
lurl suivante : http://localhost:49203/Bonjour/Index pour pouvoir appeler la mthode Index du contrleur BonjourController.
Nous obtenons la page suivante qui correspond la vue que nous avons cr :
www.siteduzero.com
30/63
Si je saisi mon nom et que je clique sur le bouton, ma vue se raffiche, par contre la zone de texte est vide. Pour pouvoir la remplir,
il faut faire plusieurs choses.
La premire est dexcuter une nouvelle action de notre contrleur pour rpondre au click. Pour cela, nous allons crer une action
qui sera appele lors de la soumission du formulaire, c'est--dire lorsque lon poste la page. La seconde chose faire est de
rcuprer la valeur saisie dans la zone de texte et la troisime sera de construire notre modle avec cette valeur. Cela donne :
Code : C#
public class BonjourController : Controller
{
//
// GET: /Bonjour/
{
return View(new Personne());
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Index(Personne personne)
{
string prenom = Request.Form["NomPersonne"];
return View("Index", new Personne { Nom = prenom });
Ici, nous avons rajout une surcharge de la mthode Index, prenant une personne en paramtre (que nous nutiliserons pas ici).
Cette mthode est dcore de lattribut AcceptVerbs contenant la mthode POST. Cest grce cela que nous indiquons
ASP.NET MVC dexcuter cette mthode lors de la soumission du formulaire. Ensuite, nous rcuprons la valeur saisie dans la
zone de texte grce lobjet Request.Form en lui passant en paramtre le nom de la zone de texte ; rappelez-vous, cela
correspond ce que nous avons mis dans la vue :
Code : HTML
<% =Html.TextBox("NomPersonne", Model.Nom) %>
Une fois ce prnom rcupr, nous pouvons le passer dans notre modle. Ce qui fait que si nous r-excutons notre application
web en appuyant sur F5, et que nous saisissons un nom et que nous soumettons le formulaire, nous pouvons voir que la zone
de texte est remplie une fois que la page est raffiche :
www.siteduzero.com
31/63
Notre modle est donc bien pris en compte.

Cest bien, mais nest-ce pas un peu compliqu ? Avec ASP.NET WebForms il ny avait rien faire, tout tait pris en
charge par le framework. Je ne vois pas trop lintrt dASP.NET MVC.
Le premier intrt est vraiment la sparation des intentions en diffrentes couches, le modle, la vue et le contrleur. La vue ne
soccupe que dafficher des donnes, c'est--dire quelle ne doit jamais aller chercher des informations, ni faire de rgles mtiers.
Juste de la prsentation. Aller chercher le modle, excuter les rgles mtiers, a cest le rle du contrleur. Cela veut dire quil
faut un moyen pour passer des informations du contrleur la vue.
Nous avons vu que le contrleur fournissait dj un accs au modle, cest dj a. Mais nous avons besoin de plus. Cest le
rle du dictionnaire ViewData . Cest une proprit du contrleur qui est accessible depuis la vue. On peut mettre des
informations accessibles via une cl, que lon peut rcuprer dans la vue pour les mettre en forme.
Par exemple, pour rajouter un petit message de bienvenue, nous pouvons utiliser une proprit de ce dictionnaire,
MessageBienvenue , o je mets un message accompagn du prnom rcupr :
Code : C#
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Index(Personne personne)
{
string prenom = Request.Form["NomPersonne"];
ViewData["MessageBienvenue"] = "Bienvenue " + prenom;

return View("Index", new Personne { Nom = prenom });
Pour rcuprer ce message depuis la vue, rien de plus simple. Il suffit daccder cette proprit, avec par exemple :
Code : HTML
<span style="color:red"><%=ViewData["MessageBienvenue"]%></span>
Nous constatons quici jaffiche le message lintrieur dune balise <span>. Relanons notre application web et cette fois-ci,
lorsque nous soumettons le formulaire, nous pouvons constater lapparition du message tant attendu :
www.siteduzero.com
32/63
Et voil, a dchire non ?

Nous en avons fini avec ce premier aperu dASP.NET MVC. ASP.NET MVC fourni un cadre structur permettant la ralisation
dapplications web. La sparation stricte des intentions ds la cration de lapplication permet dviter de se retrouver par
mgarde avec du code spaghetti et facilite les oprations de maintenance du code. Cette sparation force le dveloppeur
correctement architecturer son application et lincite ne pas faire nimporte quoi. De plus, cela lui permet de faire des tests
automatiques de ses contrleurs.
Vous avez pu constater quASP.NET WebForms et ASP.NET MVC permettaient tous les deux de raliser des applications web.
Chacun a une philosophie diffrente et nous avons commenc voir quelles en taient les subtilits. A vous de choisir celui qui
vous convient le mieux.
Crer une application client riche avec Silverlight

Nous avons vu les applications clientes lourdes, comme les applications console ou les applications WPF. Nous avons
galement vu les applications web, avec ASP. NET WebForms ou ASP.NET MVC. Il existe quelque chose entre les deux, ce sont
les applications dites client riche . Ce sont des applications qui ressemblent des applications lourdes, mais qui sexcutent
lintrieur dun navigateur internet plutt que directement au niveau du systme dexploitation.
Vous connaissez surement le trs clbre flash , trs populaire grce la multitude de jeux disponibles sur internet. Microsoft
possde galement des bibliothques permettant de raliser des applications clients riches : Silverlight.
Une application cliente riche sexcute donc directement dans un navigateur internet, comme internet explorer, firefox ou chrome.
Ces applications sexcutent dans un plugin du navigateur. Pour excuter des applications flash ou des applications Silverlight,
le navigateur devra possder le plugin adquat. Du fait quelles sexcutent dans un navigateur, ces applications ont quelques
restrictions. Elles ne peuvent par dfaut pas accder au contenu du disque dur de lutilisateur, ce qui est finalement plutt pas
mal pour une application disponible directement sur internet. Elles sexcutent uniquement dans la zone mmoire du navigateur,
une espce de bac sable dont on ne peut pas schapper et o il est impossible daccder aux ressources directes de
lordinateur sur lequel sexcute lapplication, au contraire des applications WPF par exemple.
Ces applications clientes riches ressemblent normment aux applications clientes lourdes avec quelques restrictions. Silverlight
est donc une espce de WPF allg qui ne garde que lessentiel de lessentiel. Nous serons donc capables de raliser des
applications sexcutant dans notre navigateur grce au C# et au XAML.
Pour commencer, nous devons dmarrer Visual Web Developper Express et choisir un modle de projet Application Silverlight
, que nous nommons MonApplicationSilverlight :
www.siteduzero.com
33/63
Lassistant souvre et nous propose dhberger notre application Silverlight dans un site web ASP.NET :
Gardons ces paramtres et cliquons sur OK. Visual Web Developper Express gnre alors notre projet. En fait, il cre 2 projets :
Un projet Silverlight, qui sappelle MonApplicationSilverlight
Un projet ASP.NET qui sappelle MonApplicationSilverlight.Web
www.siteduzero.com
34/63
Le projet ASP.NET nest pas rellement obligatoire, il contient juste une page ASPX et une page HTML qui hbergent chacune
lapplication Silverlight. Cest juste le point dentre de notre application Silverlight.
Tout le cur de lapplication se trouve dans le projet Silverlight. On y reconnait dailleurs quelques fichiers et notamment le
fichier app.xaml et le fichier MainPage.xaml, comme pour une application WPF ( ceci prs que le fichier gnr lors de la cration
dune application WPF sappelle MainWindow).
Tout comme WPF, on utilise du XAML et du C# pour raliser notre application. Si vous navez pas tout fait compris linitiation
vue dans le chapitre sur les applications lourdes, nhsitez pas revenir y jeter un il.
Visual Web Developper Express nous ouvre le fichier MainPage.xaml avec les deux parties de lcran, en haut le designer et en
bas le code XAML. Profitons-en pour manipuler directement le XAML car cest un langage trs puissant et savoir le manipuler
sans passer par le designer est un atout non ngligeable.
Rajoutons alors un contrle TextBlock (qui est globalement lquivalent du Label) pour afficher un petit message :
Code : XML
<TextBlock Text="Veuillez saisir votre nom" />
On constate que lauto-compltion nous aide pour crire cette balise. Elle propose dans un premier temps de complter le nom de
la balise (TextBlock) et une fois quelle la identifi, elle nous propose ses proprits, comme la proprit Text.
Ajoutons galement un TextBox pour avoir une zone de texte modifiable, identifi par un nom. En Silverlight, pour donner un
nom un contrle on utilise lattribut x :Name. Profitons-en galement pour lui donner une largeur et une hauteur :
Code : XML
<TextBox x:Name="nom" Width="200" Height="30"/>
Le designer nous affiche le contenu de notre page telle quelle sera rendue :
www.siteduzero.com
35/63
Un truc en haut, un truc centr au milieu pas vraiment ce quoi on sattendait.

Si vous vous rappelez bien, lorsque nous avions utilis le designer pour placer nos contrles, cest lui qui avait gr tout a. Il
avait positionn des marges entre les contrles et des alignements. Il existe plusieurs faons de grer lalignement et nous allons
en voir ici une autre grce au contrle StackPanel. Comme son nom le suggre, cest un panneau qui permet dempiler tous nos
contrles. Il les restitue les uns sous les autres. Encapsulons nos deux contrles dans un StackPanel :
Code : XML
<StackPanel>
<TextBox x:Name="nom" Width="200" Height="30"
HorizontalAlignment="Left"/>
</StackPanel>
Vous remarquez que jen ai profit pour rajouter la proprit HorizontalAlignment Left qui permet daligner le contrle gauche.
Ce qui donne :
Nous pouvons mme empiler les StackPanel, sachant quil a une proprit permettant de prciser le type dalignement que lon
souhaite. Ce qui permet, avec le code suivant :
www.siteduzero.com
36/63
Code : XML
<Grid x:Name="LayoutRoot" Background="White">
<StackPanel>
<StackPanel Orientation="Horizontal">
HorizontalAlignment="Left"/>
</StackPanel>
<Button Content="Cliquez-moi" Width="100" />
</StackPanel>
</Grid>
d'avoir :
Pas trop mal, mais les contrles sont un peu serrs. Il manque des espacements entre eux. Cest le rle de la proprit Margin :
Code : XML
<Grid x:Name="LayoutRoot" Background="White">
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Veuillez saisir votre nom" Margin="10"
/>
HorizontalAlignment="Left" Margin="10 0 0 0"/>
</StackPanel>
<Button Content="Cliquez-moi" Width="100" Margin="20" />
</StackPanel>
</Grid>
Et nous avons :
Arrtons-nous l avec le positionnement. Vous vous rendrez compte que celui-ci est trs puissant et permet de faire beaucoup de
choses.
Finissons notre petit exemple, il faut dsormais rajouter un vnement lors du clic sur le bouton et un TextBlock pour indiquer le
rsultat. Commenons taper la proprit Click du bouton, lauto-compltion nous propose dajouter un nouveau gestionnaire
dvnement :
www.siteduzero.com
37/63
Validez avec la touche entre, il complte avec un nom de mthode :

Code : XML
<Button Content="Cliquez-moi" Width="100" Margin="20"
Click="Button_Click" />
et il gnre mme la mthode adquate dans le code behind :

Code : C#
private void Button_Click(object sender, RoutedEventArgs e)
{
}
Il ne reste plus qu rajouter un TextBlock de rsultat :

Code : XML
<TextBlock x:Name="resultat" Foreground="Red" />
Et modifier sa proprit dans lvnement :

Code : C#
private void Button_Click(object sender, RoutedEventArgs e)
{
resultat.Text = "Bonjour " + nom.Text;
}
Nous pouvons dsormais dmarrer notre application en appuyant sur F5. Lapplication ASP.NET qui hberge notre application
Silverlight dmarre. Il y a donc le serveur web de dveloppement qui dmarre sur son port ainsi que le navigateur par dfaut. On
obtient une page web qui possde ce rendu :
www.siteduzero.com
38/63
Si on renseigne notre nom et que lon clique, on peut constater laffichage du message rsultat :
Et ceci, sans rechargement de la page. Ce nest donc pas une application qui est transforme en HTML, mais bien une
application excute par le plugin du navigateur. Dailleurs, si lon regarde la source de la page, nous avons notamment :
Code : HTML
<object data="data:application/x-silverlight-2,"
type="application/x-silverlight-2" width="100%" height="100%">
<param name="source"
value="ClientBin/MonApplicationSilverlight.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.50826.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?
LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376"
alt="Tlcharger Microsoft Silverlight" style="border-style:none"/>
</a>
</object>
La balise <object> est justement ce qui permet dindiquer au navigateur que nous avons besoin de lintervention dun plugin.
Il possde notamment un paramtre source lui indiquant le chemin de lapplication excuter. Cest un fichier qui possde
lextension .xap et qui est le rsultat de la compilation de notre application Silverlight. Ce fichier est en fait un fichier compress
qui possde toutes les assemblys dont notre application a besoin.
www.siteduzero.com
39/63
Vous aurez galement remarqu que dans notre application, le bouton est centr sur la page. Et ceci, mme si on redimensionne le
navigateur. Cest une des forces du systme de positionnement du XAML.
Voil pour ce petit aperu de Silverlight. Nous pouvons raliser des applications client riches, quasiment aussi volues que des
applications WPF. Elles fonctionnent directement dans le navigateur grce un plugin ddi. A noter quil est galement
possible dinteragir entre une application Sliverlight hberge dans une page et le contenu de la page HTML ainsi que du
javascript.
Le graphisme et les jeux avec XNA

Et oui, il est aussi possible de raliser des jeux avec le C#. Mme si tout ce quon a vu auparavant permet la ralisation
dapplications de gestions, Microsoft dispose aussi de tout ce quil faut pour raliser des jeux, grce XNA.
XNA est un ensemble de bibliothques permettant de crer des applications graphiques mais cest galement un outil permettant
dintgrer des contenus facilement dans des jeux (comme des images ou des musiques). Avec XNA, il est possible de faire des
jeux qui fonctionnent sous Windows (ce que nous allons voir ici) mais galement sous Xbox ou sur les tlphones Windows.
Voyons rapidement comment fonctionne XNA.
Pour utiliser ce framework, il faut possder Visual C# Express, ca tombe bien, nous lavons dj. A cela, il faut galement rajouter
le Microsoft XNA Game Studio 4.0 que nous pouvons tlcharger cet emplacement. Linstallation ne pose pas de problmes.
Dmarrez prsent Visual C# Express, nous pouvons constater quil y a des nouveaux modles de projets que nous pouvons
crer, comme notamment un projet de type Windows Game (4.0). Choisissons celui-l et appelons le MonApplicationXNA.
Fidle son habitude, Visual C# Express nous gnre plein de choses et notamment deux projets. Le premier
(MonApplicationXNA) est le jeu en lui-mme tandis que le second (MonApplicationXNAContent) est le projet permettant de
grer le contenu du jeu.
Si nous ouvrons le code du fichier program.cs, nous pouvons constater quil possde une mthode Main() qui va servir de point
dentre notre application. Nous pouvons voir quil instancie une classe Game1 et quil appelle sa mthode Run() :
Code : C#
static void Main(string[] args)
{
using (Game1 game = new Game1())
{
game.Run();
www.siteduzero.com

}
40/63
Allons donc voir ce quil se passe dans cette classe Game1.

La premire chose voir est quelle drive de la classe Game qui fait partie du framework de Microsoft. Nous pouvons voir
galement un constructeur qui instancie un objet de type GraphicsDeviceManager. Cest cet objet qui permet de grer le
graphisme. Nous voyons ensuite plusieurs mthodes, comme la mthode Initialize(), la mthode LoadContent() et la mthode
UnloadContent(). Ces mthodes servent respectivement initialiser les variables , charger le contenu et dcharger le contenu.
Les deux autres mthodes restantes sont les plus importantes, il sagit des mthodes Update() et Draw().
La mthode Draw(), comme son nom lindique, permet de raliser toutes les oprations daffichages (comme laffichage des
images ou du texte). La mthode Update() est lendroit o on ralise tous les calculs qui doivent tre fait en amont avant les
oprations daffichage. Cest lendroit propice o lon va faire bouger les images ou bien o on va tester si lutilisateur a appuy
sur des touches, grer la logique du jeu, etc
Ces mthodes sont appeles en boucle rgulirement de manire ce que la mthode Draw puisse afficher 60 images par
secondes, cest ce quon appelle le frame rate.
Dmarrons lapplication qui a t gnre, on voit une fentre peinte en bleu qui saffiche :
Ce bleu vient de la mthode Draw o est appele la mthode :

Code : C#
GraphicsDevice.Clear(Color.CornflowerBlue);
Cela permet de remplir lcran avec la couleur CornFlowerBlue.

Nous allons dsormais crer un sprite. Un sprite est un lment graphique dun jeu vido qui peut se dplacer sur lcran. En
www.siteduzero.com
41/63
gnral, il est form de plusieurs images afin de pouvoir grer un mouvement et est dessin sur un fond transparent.
Ici, nous allons juste afficher un sprite en forme de balle compos dune seule image.
Pour avoir une balle sur fond transparent, je vais utiliser Paint.Net o je cr une image de 50x50, jefface le fond blanc et je
dessine une balle rouge lintrieur. A noter que le format doit tre png pour grer la transparence.
Vous pouvez rcuprer cette image ci-dessous :
Renommez-l en balle.png. Maintenant, il faut lajouter au pipeline de gestion de contenu. Pour cela, faites un clic droit sur le
projet MonApplicationXNAContent et choisissez Ajouter , Element existant et allez choisir le fichier reprsentant notre
balle. Ici, cest Visual C# Express qui travaille pour nous. Lorsque nous compilerons lapplication, il va transformer le fichier PNG
en fichier exploitable par lapplication. Nous navons pas besoin ici de savoir exactement comment cela fonctionne.
Retour dans le code de notre application, nous allons devoir crer une variable de type Texture2D, cest cette variable qui va
nous permettre de charger ce sprite :
Code : C#
private Texture2D balle;
On fait a en toute logique dans la mthode LoadContent, grce la mthode Content.Load :

Code : C#
protected override void LoadContent()
{
// Crer un SpriteBatch, qui peut tre utilis pour dessiner des
textures.
spriteBatch = new SpriteBatch(GraphicsDevice);
}
balle = Content.Load<Texture2D>("balle");
A noter quil faut lui passer en paramtre le nom du fichier ajout dans le projet Content. Puis nous affichons ce sprite dans la
mthode Draw() :
Code : C#
protected override void Draw(GameTime gameTime)
{
spriteBatch.Begin();
spriteBatch.Draw(balle, emplacement, Color.White);
spriteBatch.End();
}
base.Draw(gameTime);
Pour ce faire, on utilise lobjet spriteBatch qui a t initialis dans la mthode LoadContent. On commence par appeler la mthode
Begin pour indiquer que lon va commencer dessiner, puis on appelle la mthode Draw pour afficher la balle et enfin on appelle
la mthode End pour indiquer quon a fini de dessiner.
La mthode Draw de lobjet spriteBatch prend en paramtre lobjet Texture2D afficher, ici notre balle ainsi que lemplacement o
www.siteduzero.com
42/63
lon souhaite lafficher. Enfin, elle prend une couleur pour teinter le sprite, ici blanc pour ne rien teinter.
Lemplacement est un objet Rectangle permettant dindiquer la position (x et y) ainsi que la largeur du sprite. Nous souhaitons
centrer la balle, cela peut se faire dans la mthode Initialize :
Code : C#
protected override void Initialize()
{
base.Initialize();
emplacement = new Rectangle(GraphicsDevice.Viewport.Width / 2 25, GraphicsDevice.Viewport.Height / 2 - 25, 50, 50);
}
Vous naurez bien sr pas oubli de rajouter la dclaration de la variable emplacement en membre priv de la classe
La proprit GraphicsDevice.ViewPort permet dobtenir la largueur et la hauteur de la fentre de notre jeu.
Nous obtenons :
Que cest b
Il est temps de faire bouger notre balle grce au clavier. Toute cette logique doit tre faite dans la mthode Update(). Il sagira de
faire varier les valeurs du rectangle en fonction des diffrents appuis sur les touches.
Crons donc deux variables x et y permettant de stocker la position de la balle :
Code : C#
private double x;
private double y;
www.siteduzero.com
43/63
puis initialisons les avec les bonnes valeurs :

Code : C#
{
base.Initialize();
x = GraphicsDevice.Viewport.Width / 2 - 25;
y = GraphicsDevice.Viewport.Height / 2 - 25;
emplacement = new Rectangle((int)x, (int)y, 50, 50);
Dans la mthode Update(), il ne reste qu lire le clavier et modifier les valeurs de x et de y :

Code : C#
protected override void Update(GameTime gameTime)
{
// Permet au jeu de se fermer
if (GamePad.GetState(PlayerIndex.One).Buttons.Back ==
ButtonState.Pressed)
this.Exit();
int vitesse = 2;
KeyboardState etatClavier = Keyboard.GetState();
if (etatClavier.IsKeyDown(Keys.Up))
{
y -= vitesse;
}
if (etatClavier.IsKeyDown(Keys.Down))
{
y += vitesse;
}
if (etatClavier.IsKeyDown(Keys.Left))
{
x -= vitesse;
}
if (etatClavier.IsKeyDown(Keys.Right))
{
x += vitesse;
}
emplacement = new Rectangle((int)x, (int)y, 50, 50);
}
base.Update(gameTime);
Cela se fait en appelant la mthode Keyboard.GetState() qui permet de rcuprer ltat du clavier. Ensuite, en fonction de ltat
des touches, on change les valeurs de x et de y. Vous aurez compris que lnumration Keys contient les diffrentes touches de
notre clavier et notamment le pav directionnel avec la flche vers le haut (Keys.Up), la flche vers le bas (Keys.Down), la flche
vers la droite (Keys.Right) et la flche vers la gauche (Keys.Left).
Vous pouvez tester, notre balle se dplace :
www.siteduzero.com
44/63
Dans lidal, il faudrait grer les situations limites car vous vous rendrez compte quil est possible de faire sortir la balle de
lcran Pas mal pour un dbut, non ?
Nous en avons termin avec ce petit aperu de XNA. Vous avez pu voir quil tait plutt facile dafficher des sprites lcran.
XNA est galement utilisable pour dvelopper des jeux sur Xbox et possde de la mme faon des lments pour lire ltat des
manettes, pour grer le rseau, etc.
Nous pouvons galement lutiliser sur les smartphones possdant le systme dexploitation Windows Phone 7.
Crer une application mobile avec Windows Phone 7

Puisque nous parlons de smartphones, il faut savoir que le C# nous permet galement de dvelopper des applications pour
tlphones mobiles quips du systme dexploitation Windows Phone. Cest un point trs important car il est possible de
mutualiser beaucoup de choses que nous avons apprises pour les transposer dans le monde en plein essor des smartphones.
Pour cela, il faut commencer par installer Visual Studio 2010 Express for Windows Phone que lon peut trouver cet
emplacement.
Linstallation est un peu longue et peut, si besoin, demander dappliquer le service pack 1. Il suffit de se laisser guider.
En change, nous obtenons des nouveaux modles de cration de projets, dont notamment deux qui nous intressent
particulirement :
Application Windows Phone
Windows Phone Game
Ce qui est intressant avec les applications Windows Phone cest que nous rutilisons le savoir que nous avons pu acqurir
dans les autres types dapplications C#, car pour raliser le premier type dapplication, nous allons utiliser Silverlight et pour
raliser le deuxime type dapplication, nous utiliserons XNA.
Le premier type permet de raliser des applications de gestions et le deuxime des jeux. Il nest pas possible dutiliser XNA avec
une application Silverlight ou inversement, une fois quon a choisi son type dapplication, cest pour la vie (de lapplication
).
Les smartphones sont des terminaux qui ont plein de moyen de communication volus. On utilise notamment les doigts pour
manipuler le tlphone et mme potentiellement plusieurs. Ils possdent des GPS pour nous localiser, des acclromtres pour
www.siteduzero.com
45/63
dtecter leurs positions dans lespace et leurs mouvements, etc. Ce sont autant de priphriques dont nous tirerons parti dans
nos applications pour offrir un maximum dexprience utilisateur.
Je ne vous prsenterai pas ici comment les utiliser car cela mriterait un livre entier. Je ne vous prsenterai pas non plus
brivement les diffrents modes de dveloppement car nous avons dj vu un aperu de Silverlight et de XNA.
Pour raliser une application Silverlight pour Windows Phone, il faudra utiliser le modle Application Windows Phone :
Vous pouvez voir que le contenu du projet ressemble normment une application Silverlight. Cest cependant une version de
Silverlight pour Windows Phone et pour linstant il manque encore des choses par rapport au Silverlight complet. Une
consquence de cela est que les bibliothques, contrles ou autres qui ont t dveloppes pour Silverlight ne fonctionneront
pas forcment avec Silverlight pour Windows Phone. Il nest donc pas forcment immdiat de pouvoir migrer une application
Silverlight sur Windows Phone, surtout que celle-ci doit rpondre un look particulier et une interface adapte au smartphone.
Microsoft conseille fortement aux dveloppeurs de se rapprocher du look quils ont choisi, savoir le look Metro .
Vous me direz, comment dvelopper sur un smartphone ? On ne va pas installer un Visual Studio Express sur notre tlphone ...
Et bien cest facile, Microsoft a tout prvu en intgrant un mulateur lIDE. Lapplication peut donc sexcuter comme si elle
sexcutait sur un tlphone. Il est cependant limit, par exemple pas de GPS ni dacclromtre dans cet mulateur. Mais que a
ne vous effraie pas, il est possible de les simuler ou de les bouchonner
Lmulateur rpond un bon nombre de besoin de dveloppement mais rien ne remplace le test final sur un vrai tlphone et
pour cela cest galement trs simple grce lIDE qui s'occupe de tout le dploiement.
crivons rapidement un petit programme en Silverlight pour Windows Phone afin d'illustrer cela. En fait, je ne vais pas faire
grand-chose, juste modifier lgrement le fichier MainPage.xaml gnr pour changer la proprit Text du TextBlock MON
APPLICATION en Bienvenue sur Windows Phone .
Dans les dclarations en haut du fichier, je vais changer :
Code : XML
SupportedOrientations="Portrait"
en
www.siteduzero.com
46/63
Code : XML
SupportedOrientations="PortraitOrLandscape"
Enfin, je vais aller changer la ligne suivante dans le App.xaml.cs :

Code : C#
Application.Current.Host.Settings.EnableFrameRateCounter = true;
en
Code : C#
Application.Current.Host.Settings.EnableFrameRateCounter = false;
(ce dernier point permet de dsactiver les informations de dbogage de nombre de frames l'cran)
Et puis je vais dmarrer lapplication en appuyant sur F5. Lmulateur se lance et se connecte notre application. Nous pouvons
voir notre page daccueil :
www.siteduzero.com
47/63
Pas mal non ?

Nous avons galement modifi la proprit SupportedOrientations. Vous lavez peut-tre compris, nous avons indiqu que notre
application allait grer la position du tlphone en mode portrait et en mode paysage, c'est--dire pivot de 90, alors quau
dpart notre application ne supportait que le mode portrait.
Pour le constater, nous pouvons faire pivoter lmulateur en cliquant dans la barre en haut droite :
www.siteduzero.com
48/63
Et hop, notre application sest automatiquement tourne. Ici, le rendu sest automatiquement adapt :
Notez quil est possible de sabonner un vnement lev lors dun changement dorientation de notre application nous
permettant par exemple de rorganiser notre rendu.
Je marrte l pour cet aperu de Silverlight pour Windows Phone mais sachez galement quil existe des contrles spcifiques
ddis la gestion de lcran daccueil des applications (le contrle panorama) ainsi qu laffichage dinformations sur plusieurs
pages (le contrle pivot) que lon peut chacun bouger avec le doigt. A ce propos, il existe galement des bibliothques
permettant de grer les gestes raliss avec les doigts.
Passons prsent XNA pour Windows Phone.
Il suffit de choisir le modle de projet Windows Phone Game :
www.siteduzero.com
49/63
LIDE nous gnre les deux projets classiques dune application XNA. Remarquons que dans le fichier Game1.cs, il nous a
rajout une instruction pour fixer le taux de rafraichissement du tlphone qui est de 30 images par seconde :
Code : C#
TargetElapsedTime = TimeSpan.FromTicks(333333);
A noter que nous avions vu prcdemment quil tait 60 images par secondes par dfaut. Ici, ce changement est l afin de
rpondre au mieux aux caractristiques du tlphone.
Cette fois-ci, plutt que dafficher une balle, nous allons afficher du texte.
La premire chose faire est de rajouter une police de sprite, que lon appelle galement font . Cela se fait en cliquant droit sur
le projet de contenu et en ajoutant un nouvel lment :
www.siteduzero.com
50/63
Choisissez Police Sprite et donnez-lui un petit nom, par exemple MaFonte (conservez lextension .spritefont).
Un fichier XML de configuration de la fonte souvre et nous permet de changer ventuellement ses caractristiques, comme la
police, la taille, etc. Changeons lui juste sa taille avec :
Code : XML
<Size>25</Size>
Nous avons ensuite besoin de rajouter une variable de type SpriteFont :

Code : C#
private SpriteFont maFonte;
qui sera charge dans la mthode LoadContent avec :

Code : C#
protected override void LoadContent()
{
spriteBatch = new SpriteBatch(GraphicsDevice);
}
maFonte = Content.Load<SpriteFont>("MaFonte");
Notons quon utilise le nom du fichier de police comme paramtre de la mthode Content.Load permettant de charger la fonte.
Profitons-en pour rajouter une variable de type Vector2 qui est un vecteur deux dimensions pour stocker la position o nous
www.siteduzero.com
51/63
allons afficher notre texte :

Code : C#
private Vector2 position;
Pour cet exemple, affichons lheure. Nous allons galement rafraichir la position du texte toutes les deux secondes pour faire un
effet sympathique, pour cela nous allons comparer avec la variable gameTime passe en paramtre de la mthode Update qui
fournit des informations sur le temps total coul depuis le dbut du jeu ou depuis le dernier passage dans la mthode Update.
Nous avons besoin de plusieurs variables :
Code : C#
private
private
private
private
string date;
TimeSpan dernierCalcul;
Vector2 centre;
Random random;
La variable random sera initialise dans la mthode Initialize :

Code : C#
{
random = new Random();
base.Initialize();
}
Ensuite la mthode Update calculera une nouvelle position alatoire uniquement toutes les deux secondes :
Code : C#
protected override void Update(GameTime gameTime)
{
// Allows the game to exit
if (GamePad.GetState(PlayerIndex.One).Buttons.Back ==
ButtonState.Pressed)
this.Exit();
date = DateTime.Now.ToLongTimeString();
if (gameTime.TotalGameTime - dernierCalcul >
TimeSpan.FromSeconds(2))
{
dernierCalcul = gameTime.TotalGameTime;
centre = maFonte.MeasureString(date) / 2;
int x = random.Next((int)centre.X,
GraphicsDevice.Viewport.Width - (int)centre.X);
int y = random.Next((int)centre.Y,
GraphicsDevice.Viewport.Height - (int)centre.Y);
}
}
position = new Vector2(x, y);
base.Update(gameTime);
www.siteduzero.com
52/63
Le code parle de lui-mme. Le seul truc un peu spcial vient du calcul du centre du texte, obtenu via la mthode MeasureString.
Ensuite, il faudra afficher la chaine dans la mthode Draw() :
Code : C#
protected override void Draw(GameTime gameTime)
{
spriteBatch.Begin();
spriteBatch.DrawString(maFonte, date, position, Color.Red, 0,
centre, 1, SpriteEffects.None, 0);
spriteBatch.End();
}
base.Draw(gameTime);
Nous utilisons pour cela la mthode DrawString de lobjet SpriteBatch.

Reste dmarrer notre application en appuyant sur F5. Le principe est le mme, nous disposons dun mulateur qui permet de
simuler un tlphone simplifi (sans GPS, sans acclromtre, etc.). Ce qui donne :
XNA possde tout ce quil faut pour grer la gestuelle en natif. Il devient alors trs facile de raliser des jeux trs sympas.
Voil pour cet aperu rapide du dveloppement dapplication pour smartphones quips de Windows Phone. Ce qui est trs
intressant cest quun dveloppeur .NET qui a dj des comptences en C#, Silverlight ou XNA sera trs rapidement capable de
raliser des applications pour Windows Phone. Il aura juste besoin de se familiariser aux diverses mthodes permettant de grer
les divers capteurs du tlphone. Et tout a grce notre langage prfr
.
Crer un service web avec WCF

Avec le C# il est galement trs facile de crer des services web. Un service web permet en gnral daccder des
fonctionnalits depuis nimporte o, travers internet. Citons par exemple les services web dAmazon qui nous permettent de
rcuprer des informations sur des livres, ou encore des services web qui permettent dobtenir la mto du jour. Bref, cest un
moyen de communication entre applications htrognes potentiellement situes des emplacements physiques trs loigns.
En imaginant que nous ayons galement besoin dexposer des mthodes lextrieur, pour quun fournisseur vienne consulter
ltat de nos commandes ou quun client puisse suivre lavance de la sienne , nous allons devoir crer un service web.
Le framework .NET dispose de tout un framework pour cela qui sappelle WCF : Windows Communication Foundation.
www.siteduzero.com
53/63
Un service web est une espce dapplication web qui rpond des requtes permettant dappeler une mthode avec des
paramtres et de recevoir en rponse le retour de la mthode. Lintrt dun service web est quil est indpendant de la
technologie. Mme si on crit un service web avec du C#, il doit tre appelable par du java ou du PHP.
Mais comment appeler un service web ? Quelle adresse ? Comment connait-on le nom des mthodes appeler ? Comment
indiquer les paramtres et les valeurs que lon souhaite passer ?
Et oui, il faut une syntaxe dfinie, sinon on peut faire ce que lon veut. Cest l quinterviennent les organismes de
standardisation. Ils ont dfinies plusieurs normes permettant de dcrire le format des changes. Cest le cas par exemple du
protocole SOAP qui est bas sur du XML. Il est associ au WSDL qui permet de dcrire le service web.
Nous avons notre disposition galement les services web de type REST qui exposent les fonctionnalits comme des URL.
Pour raliser un petit service web, nous allons avoir besoin de Visual Web Developper Express ainsi que du projet de type
Application du service WCF :
Visual Web Developper Express nous gnre le projet. Il sagit bien dune application web possdant son fichier de
configuration web.config.
Si nous dmarrons notre service web en appuyant sur F5, nous pouvons voir que le serveur web de dveloppement est dmarr.
Par contre, ce nest pas le navigateur par dfaut qui souvre mais une application de test qui sappelle WcfTestClient, disponible
avec le framework.NET.
Que cela ne nous empche pas douvrir notre navigateur en local sur le bon port et de cliquer sur le lien Service1.svc, il nous
affiche un message permettant de constater que notre service web est lcoute :
www.siteduzero.com
54/63
Remarquons que si lon clique sur le lien propos http://localhost:49172/Service1.svc?wsdl, il nous affiche le WSDL de notre
service web, c'est--dire les informations de descriptions de celui-ci :
www.siteduzero.com
55/63
Nous nallons pas dtailler son contenu mais sachez quil possde tout ce quil faut pour dcrire le service web, ses mthodes et
ses paramtres. En fait, lapplication WcfTestClient qui a dmarr lorsque nous avons appuy sur F5 se sert de ce WSDL pour
lire le contenu du service web :
www.siteduzero.com
Nous pouvons dailleurs voir que ce service web possde deux mthodes, GetData et GetDataUsingDataContract(). Do
viennent ces mthodes ?
Vous vous en doutez, du fichier qui a t gnr par Visual Web Developper Express. Il contient le code suivant :
Code : C#
public class Service1 : IService1
{
public string GetData(int value)
{
return string.Format("You entered: {0}", value);
}
public CompositeType GetDataUsingDataContract(CompositeType
composite)
{
[code abrg]
}
}
Ce qu'il est important de constater cest que la classe Service1 implmente linterface IService1, qui contient :
Code : C#
[ServiceContract]
public interface IService1
{
[OperationContract]
string GetData(int value);
[OperationContract]
www.siteduzero.com
56/63

}
57/63
CompositeType GetDataUsingDataContract(CompositeType composite);
Cest grce aux attributs ServiceContract et OperationContract que lapplication sait ce quelle doit exposer en tant que service
web.
Nous allons donc crer notre service web nous. Ajoutez un nouvel lment au projet de type Service WCF que nous appelons
ServiceBonjour :
Remarquons que lextension du fichier est .svc. LIDE nous a gnr 3 fichiers. Le premier est linterface IServiceBonjour, le
second est le fichier ServiceBonjour.svc et le troisime son code behind ServiceBonjour.svc.cs. Ici, le fichier ServiceBonjour.svc
ne nous intresse pas, il permet dindiquer quelle classe est associe au service web. Nous gardons la configuration par dfaut.
Il ne reste qu modifier le code gnr pour avoir dans linterface :
Code : C#
[ServiceContract]
public interface IServiceBonjour
{
[OperationContract]
string DireBonjour(string qui);
}
Bien sr, le code behind devra tre cohrent vu que la classe ServiceBonjour implmente linterface :
Code : C#
public class ServiceBonjour : IServiceBonjour
{
public string DireBonjour(string qui)
{
www.siteduzero.com
58/63
return "Bonjour " + qui + " depuis le service web";
Il ne reste qu supprimer les fichiers Service1 qui ne nous sont plus utile. Dmarrons le projet en appuyant sur F5. Le client de
test de services WCF souvre et charge automatiquement les informations de descriptions de notre service web. Nous pouvons
voir notre service web ainsi que sa mthode. Si nous double-cliquons sur la mthode DireBonjour, nous pouvons voir que loutil
nous propose de saisir une valeur pour la variable qui . Saisissons un prnom et cliquons sur Appeler. Loutil invoque notre
service web et nous retourne le rsultat :
Et voil
. Nous avons invoqu notre service web sans trop de soucis
Cet outil WCF cest bien, mais il nous cache un peu tout. Nous allons appeler le service web avec du C# dsormais.
Premire chose faire, il ne faut pas quitter pas Visual Web Developper Express. En effet, le serveur web de dveloppement est
dmarr et hberge notre service web. Si jamais il nest pas dmarr, il va falloir le faire. Nous en avons besoin pour appeler notre
service web.
Dmarrez ensuite un autre Visual C# Express et crez une application cliente lourde de votre choix (console ou WPF). Je vais
crer ici une application console car cela sera plus simple.
Ici, par dfaut nous avons cr un service web SOAP. Lintrt cest que les applications C# peuvent trs facilement appeler ce
service web en nous mchant tout le travail. Pour cela, il faut faire ce quon appelle une rfrence de service.
Faites un clic droit sur les rfrences et choisissez dajouter une rfrence de service :
www.siteduzero.com
59/63
Saisissez ladresse de notre service web http://localhost:49172/ServiceBonjour.svc et cliquez sur aller :
Visual C# Express dcouvre alors le service web ainsi que les mthodes qui le composent. Profitions-en pour indiquer un espace
de nom cohrent, par exemple BonjourWebService .
En fait, la fermeture de cette boite de dialogue, Visual C# Express va gnrer ce quon appelle un proxy. Il sagit dune classe
qui permet de faire lintermdiaire entre notre application et le service web. Il y a galement des classes qui correspondent aux
objets manipuls par le service web et dautres qui encapsulent toute la logique dappel du service web. Pour nous, cest
transparent, cest comme si nous faisions une rfrence classique au service. Toute la logique est masque.
Vous retrouverez ces classes gnres dans le fichier situe sous la rfrence service :
www.siteduzero.com
60/63
Notez quil aura fallu au passage appuyer sur le bouton permettant dafficher tous les fichiers dans la solution.
Ouvrons le fichier de configuration. Nous pouvons voir que des choses ont t gnres dedans, cest ce quon appelle lABC
de la communication.
A pour adresse : on peut voir que lurl du service web est indique dans le fichier de configuration :
Code : XML
<endpoint address="http://localhost:49172/ServiceBonjour.svc"
binding="basicHttpBinding"
bindingConfiguration="BasicHttpBinding_IServiceBonjour"
contract="BonjourWebService.IServiceBonjour"
name="BasicHttpBinding_IServiceBonjour" />
B pour binding : il sagit de la faon dont on va accder aux donnes, ici le basicHttpBinding indique que cest du SOAP.
C pour contrat : prcise quel contrat le service web respecte.
Il ne reste plus qu invoquer le service web, pour cela on pourra crire :
Code : C#
BonjourWebService.ServiceBonjourClient client = new
BonjourWebService.ServiceBonjourClient();
string reponse = client.DireBonjour("Nicolas");
Console.WriteLine(reponse);
Trs simple non ?

Aprs excution nous obtenons :
Code : Console
Bonjour Nicolas depuis le service web
Droutant de simplicit. Cest tellement simple et Visual C# Express a tellement fait notre place quon ne sait plus ce quil se
passe. Y a-t-il vraiment eu un appel de service web ?
www.siteduzero.com
61/63
Pour le vrifier, installons un analyseur de requtes internet, fiddler, que lon peut tlcharger gratuitement ici. Il vaut mieux parler
un peu langlais pour utiliser ce logiciel. Si ce nest pas le cas, ce nest pas trop grave, regardez juste le rsultat sans le
reproduire chez vous.
Fiddler capture toutes les requtes qui vont sur internet, par contre il ignore les requtes locales. Pour le feinter, nous allons
rajouter un point aprs localhost dans le fichier de configuration :
Code : XML
<endpoint address="http://localhost.:49172/ServiceBonjour.svc"
binding="basicHttpBinding"
bindingConfiguration="BasicHttpBinding_IServiceBonjour"
contract="BonjourWebService.IServiceBonjour"
name="BasicHttpBinding_IServiceBonjour" />
Et dmarrons notre application de test.

Nous pouvons voir que Fiddler capte bien lappel du service web. Si nous cliquons sur la requte intercepte, nous pouvons
voir droite le message envoy pour invoquer le service web ainsi que le message de retour :
Ce qui donne en XML pour le message dappel :

Code : XML
<s:Envelope
xmlns:s="http://schemas.xmlsoap.org/soap/envelope/"><s:Body><DireBonjour
xmlns="http://tempuri.org/"><qui>Nicolas</qui></DireBonjour></s:Body></s:Envelope>
Et pour le message de retour :

Code : XML
<s:Envelope
xmlns:s="http://schemas.xmlsoap.org/soap/envelope/"><s:Body><DireBonjourResponse
xmlns="http://tempuri.org/"><DireBonjourResult>Bonjour Nicolas depuis le service
web</DireBonjourResult></DireBonjourResponse></s:Body></s:Envelope>
www.siteduzero.com
62/63
Cest notre proxy qui a fait tout a notre place. Il a transform notre appel C# en message XML (on appelle cette action la
srialisation). Ce XML est transmis au service web qui linterprte et le retransforme en C# (on appelle cette action la
dsrialisation). Le service web traite lappel de la mthode avec ses paramtres et renvoi la rponse sous forme srialise. Puis
notre programme C# dsrialise la rponse pour nous permettre dafficher la chaine de caractre rsultat.
Nous en avons termin avec cette introduction aux services web. Trs la mode, ils garantissent la communication entre des
environnements de toutes sortes pouvant tre situs divers endroits, grce internet. Ils amliorent linteroprabilit entre les
diffrentes applications. Nous avons vu comment crer et consommer rapidement un service web SOAP. Pour le transformer en
REST par exemple, il faut changer essentiellement de la configuration. Le code mtier ne change pas. WCF cest en ralit
beaucoup plus que les services web. Il nous simplifie normment la tche et est une brique importante du framework .NET
permettant la communication entre les diffrentes couches applicatives.
Allez, je marrte l pour ce petit aperu de ce que lon peut raliser avec le C# et le framework .NET. Nous avons dmarr avec
les applications clients lourds que lon peut raliser grce WPF. Puis nous avons continu avec les applications web utilisant
ASP.NET WebForms ou ASP.NET MVC. Le mix de tout a, ce sont les applications clients riches que lon peut raliser avec
Silverlight. Le dveloppement de jeux nest pas en reste non plus, car Microsoft propose tout un framework pour raliser des
jeux, XNA, utilisable pour le dveloppement de jeux sous Windows ou sous Xbox et Kinect. Il est possible de rajouter des
briques XNA, notamment tout ce qui est 3D avec DirectX que nous navons pas vu ici. Nous avons par contre vu comment
raliser des applications pour smartphones quips de Windows Phone grce Silverlight pour Windows Phone et XNA. Puis
nous avons termin en prsentant la communication via services web en utilisant WCF.
Nous navons pas tout vu, tellement il y a de choses que lon peut faire avec le C#. Citons encore la gestion des workflow avec
WF (Windows Workflow Foundation) ou le dveloppement sur le cloud avec Windows Azure. Il y a galement dautres lments
que lon peut faire avec les applications Windows, comme des services Windows, ...
Jespre que cette petite prsentation vous a permis de voir les possibilits qui vous sont offertes grce ce fantastique langage
et vous a donn envie den savoir plus sur les diffrentes technologies associes.
Partager
www.siteduzero.com

Les Differents Types D Applications Pouvant Etre Developpees Avec Le C

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Les Differents Types D Applications Pouvant Etre Developpees Avec Le C

Transféré par

Droits d'auteur :

Formats disponibles

Les diffrents types

Licence Creative Commons 4 2.0

Crer une application client riche avec Silverlight ..........................................................................................................

Les diffrents types d'applications pouvant tre

Crer une application Windows avec WPF

Crer une application Windows avec WPF

Les diffrents types d'applications pouvant tre dveloppes avec le C#

Les diffrents types d'applications pouvant tre dveloppes avec le C#

Positionnons un bouton par exemple grce au glisser-dplacer. Nous obtenons :

Les diffrents types d'applications pouvant tre dveloppes avec le C#

Nous pouvons voir trois choses :

Les diffrents types d'applications pouvant tre dveloppes avec le C#

Les diffrents types d'applications pouvant tre dveloppes avec le C#

Les diffrents types d'applications pouvant tre dveloppes avec le C#

Superbe !! Notre premire application WPF fonctionnelle

private void OnClickBouton(object sender, RoutedEventArgs e)

Les diffrents types d'applications pouvant tre dveloppes avec le C#

Les diffrents types d'applications pouvant tre dveloppes avec le C#

C'est--dire modifier Content de cette faon :

Plutt pratique non ?

Les diffrents types d'applications pouvant tre dveloppes avec le C#

Crer une application web avec ASP.NET

Les diffrents types d'applications pouvant tre dveloppes avec le C#

Les diffrents types d'applications pouvant tre dveloppes avec le C#

Les diffrents types d'applications pouvant tre dveloppes avec le C#

Les diffrents types d'applications pouvant tre dveloppes avec le C#

Les diffrents types d'applications pouvant tre dveloppes avec le C#

explicite, par exemple Cliquez-moi :

Les diffrents types d'applications pouvant tre dveloppes avec le C#

Les diffrents types d'applications pouvant tre dveloppes avec le C#

Il y a plusieurs choses constater ici.

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

Les diffrents types d'applications pouvant tre dveloppes avec le C#

<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwKEx

Les diffrents types d'applications pouvant tre dveloppes avec le C#

Un assistant apparait pour nous aider au paramtrage de notre projet :

Les diffrents types d'applications pouvant tre dveloppes avec le C#

Les diffrents types d'applications pouvant tre dveloppes avec le C#

Nommez ce contrleur BonjourController et choisissez pour modle un contrleur vide :

Les diffrents types d'applications pouvant tre dveloppes avec le C#

Visual Web Developper Express nous gnre la classe suivante :

public ActionResult Index()

Les diffrents types d'applications pouvant tre dveloppes avec le C#

Les diffrents types d'applications pouvant tre dveloppes avec le C#

Les diffrents types d'applications pouvant tre dveloppes avec le C#

Les diffrents types d'applications pouvant tre dveloppes avec le C#

Comment la vue obtient-elle le modle adquat ?

Les diffrents types d'applications pouvant tre dveloppes avec le C#

Les diffrents types d'applications pouvant tre dveloppes avec le C#

return View("Index", new Personne { Nom = prenom });

Les diffrents types d'applications pouvant tre dveloppes avec le C#

Notre modle est donc bien pris en compte.

ViewData["MessageBienvenue"] = "Bienvenue " + prenom;

Les diffrents types d'applications pouvant tre dveloppes avec le C#

Et voil, a dchire non ?

Crer une application client riche avec Silverlight

Les diffrents types d'applications pouvant tre dveloppes avec le C#

Les diffrents types d'applications pouvant tre dveloppes avec le C#

Les diffrents types d'applications pouvant tre dveloppes avec le C#

Un truc en haut, un truc centr au milieu pas vraiment ce quoi on sattendait.

Les diffrents types d'applications pouvant tre dveloppes avec le C#

Les diffrents types d'applications pouvant tre dveloppes avec le C#

Validez avec la touche entre, il complte avec un nom de mthode :

<input type="hidden" name="EVENTVALIDATION" id="EVENTVALIDATION" value="/wEWAwKEx