Ma première application Silverlight

2009-08-29T01:41:00.001-07:00

Outils nécessaires :

Pour pouvoir développer des applications silverlight, vous devez disposer d'une panoplie d'outils proposés par Microsoft. Ces outils sont les suivants :

Si vous avez une version Visuel studio ou visuel web développer déjà installé donc télécharger directement le SDK de silverlight à partir de cet emplacement cliquer ici, sinon télécharger directement le package WebPlatforme qui contient tous les outils nécessaires pour le développement web à partir d'ici.
Microsoft Expression Blend 3 + SketchFlow (version d'essai) à partir d'ici.
Le toolkit silverlight à partir d'ici.
Le .Net RIA Services à partir d'ici.

Installation des outils :

L'installation doit commencer, soit par le SDK silverlight si vous avez déjà installé Visuel Studio(ou Visuel Web Developper), ou par le package WebPlatforme. Dans le cas ou l'installation se passe correctement, si vous lancez visuel studio, et vous créez un nouveaux projet, vous devez trouver que des nouvelles templates ont été ajouté à la palette des projets, c'est les templates des projets silverlight.

Figure 1: les templates silverlight

Apres avoir installé le SDK, passant à l'installation de toolkit silverlight. A la fin de l'installation on aura une boite à outils bien garnie.

Figure 2: boite à outils silverlight.

Installons maintenant le .Net RIA services, sur lequel je vais revenir en détails dans les prochains tutoriels.

Avec les outils qu'on installé, on pourra commencer à développer des applications silverlight, mais il reste un outil très important c'est le Microsoft Expression Blend, qui permet de manipuler beaucoup plus facilement le code XAML(plus de détails sur ce lien), par rapport à visuel studio.

Figure 3: fenêtre principale de blend

Ma première application en silverlight

Dans c'est qui s'en suit, on va créer notre première application silverlight. Je ne vous cache pas, je n'aime pas beaucoup le truc qui est appelé HelloWorld, donc je vais opter pour quelques chose beaucoup plus sympa, une petite calculatrice qui effectue les 4 opérations arithmétique de base.

Lancer visuel studio.
Créer un nouveau projet.
Dans la zone à gauche de la fenêtre qui s'affiche sélectionné, VisuelC#, puis Silverlight.

Pointer sur la template Silverlight Application.

Taper le nom de projet, puis choisir un emplacement pour la sauvegarde.

Figure 4:templates silverlight

Appuyer sur Ok.

Dans visuel studio, ouvrir l'explorateur de solution (si il n'est pas affiché aller sur le menu View->Solution Explorer).

Figure 5: explorateur de solution

On remarque bien que VS (Visuel Studio) nous a créé deux projets, le premier c'est un projet silverlight, c'est celui qu'on a créé tout à l'heure, et les deuxième est un projet ASP.NET(SilverlightApplication1.Web), ce dernier va servir comme conteneur coté serveur de notre application silverlight (je vais revenir sur ces notions en détails dans les prochains tutoriels).

Dans l'explorateur de solution, dans le projet SilverlightApplication1, double-cliquez sur MainPage.xaml, un nouvel onglet s'ouvre dans VS, affichant le contenu de fichier.

Figure 6:forme de fichier xaml

A partir de la boite à outils faites glisser un bouton, sur le fichier xaml à l'intérieur de la balise Grid, VS génère le code suivant :

Spécifier la hauteur, la largeur et le texte de notre bouton, pour avoir le code XAML suivant :

en saisissant dans la balise button, vous avez du remarqué que VS nous propose une liste de choix, et cela puisque VS supporte la fonctionnalité Intellisence pour XAML.

Exécuter la solution (F5), une fenêtre s'affichant, en vous proposant d'activer le mode débogage, appuyer sur OK. Voici le résultat :

Un bouton qui s'affiche au milieu de la page pas grand-chose, n'est ce pas.

Revenant à notre code XAML, et procédant aux étapes suivantes :

Modifier l'arrière plan de la Grid principale.
Ajouter une nouvel grid.
décomposer le Grid qu'on vient d'ajouter en 4 lignes et 2 colonnes.
Ajuster l'alignement à l'intérieure de la grille.
A partir de la boite d'outils, Faites glisser 4 TextBlock(le composant TextBlock sert à afficher un bout de texte), avec le contenus « opérande 1 :» , «opérande 2», «opération», «Résulatat» respectivement.
A la fin de ces étapes on aura le code XAML suivant.

<UserControl x:Class="SilverlightApplication1.MainPage"

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

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
<Grid x:Name="LayoutRoot" Background="Gray">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Button Width="100" Height="30" Content="Valider" HorizontalAlignment="Right" Margin="0"

VerticalAlignment="Center" Grid.Row="4" d:LayoutOverrides="Width, Height" Grid.Column="1"/>

</Grid>

</UserControl>

Exécuter l'application, le résultat sera le suivant :

Passant maintenant à la deuxième phase :

Faites glisser un control TextBox pour saisir la valeur de premier opérande, nommer-le «Operande1 ».
Faites glisser un control TextBox pour saisir la valeur de deuxième opérande, nommer-le « Operande2».
Faites glisser un TextBlock pour afficher le résultat de calcule, nommer-le, nommer-le «Resultat».

Faites glisser aussi un ComboBox(un control qui affiche une liste déroulante qui sert à choisir une option parmi plusieurs). Ajouter 4 options( chaque options est représenté par la balise
ComboBoxItem ) avec les symboles d'opérations '+','-','*','/'.

Voici le code XAML :

<UserControl x:Class="SilverlightApplication1.MainPage"

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

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

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

<Grid Height="200" Margin="0" VerticalAlignment="Center" HorizontalAlignment="Center"

ShowGridLines="True" Width="400">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Button Width="100" Height="30" Content="Valider" HorizontalAlignment="Right" Margin="0"

VerticalAlignment="Center" Grid.Row="4" d:LayoutOverrides="Width, Height" Grid.Column="1"/>

</ComboBox>

</Grid>

</UserControl>

Maintenant, on passera au codage de la partie fonctionnelle de notre petite application. Vous avez certainement remarqué que pour chaque fichier XAML, VS crée un fichier qui porte le même nom, mais avec l'extension XAML.CS, c'est le fichier de code C# associé au fichier XAML.

Dans le fichier MainPage.xaml, pointer sur la balise <button>, taper « click », Intellisence vous propose de créer un nouveau handler qui sera exécuté lors de clique sur le bouton, cliquer dessus.

Allez sur le fichier de code MainPage.xaml.cs, ce dernier contient la définition de la classe associé à notre page XAML. La classe comporte un constructeur, et le handler qu'on vient de créer. A l'intérieur de handler, on va coder notre logique métier, qui consiste tout simplement à récupérer les valeurs des 2 opérande, puis effectuer l'opération sélectionnée.

public
partial
class
MainPage : UserControl

{
public MainPage()

{

InitializeComponent();

}

private
void Button_Click(object sender, RoutedEventArgs e)

{

double oprd1 = double.Parse(Operande1.Text);

double oprd2 = double.Parse(Operande2.Text);

double res=0;

switch (Operations.SelectedIndex)

{

case 0: res = oprd1 + oprd2;

break;

case 1: res = oprd1 - oprd2;

break;

case 2: res = oprd1 * oprd2;

break;

case 3: res = oprd1 / oprd2;
break;

}

Resultat.Text = res.ToString();

}

Notre application est parfaitement fonctionnelle, mais il reste un aspect très important, c'est la gestion des erreurs. A ce stade si vous tapez un nombre invalide, ou vous effectuez une division par zéro, l'exécution s'interrompt, et une exception est levée. Pour remédier à ça, on va ajouter un panel qui sert à afficher les erreurs :

Ouvrir le fichier XAML, ajouter un control border en fin de fichier, puis à l'intérieur de la balise border ajouter un TextBlock pour afficher le message d'erreur.

</Border>

Revenant au fichier de code et le modifier de la façon suivante :

Maintenant, si vous tapez un nombre de format incorrect, un message d'erreur sera affiché en bas de page.

En fin une petite touche de beauté.

Voici le XAML final :

<UserControl x:Class="SilverlightApplication1.MainPage"

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

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

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

</Border>

<Border.Background>

</LinearGradientBrush>

</Border.Background>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Button Width="100" Height="30" Content="Valider" HorizontalAlignment="Right" Margin="0"

VerticalAlignment="Center" Grid.Row="4" d:LayoutOverrides="Width, Height" Grid.Column="1" Click="Button_Click"/>

</ComboBox>

</Grid>

</Border>

</Grid>

</UserControl>

Dans les prochains tutoriaux, on va entamer la série des tutoriels, qui vise à construire un site web complet (je l'ai appelé GoldAffaires) avec la technologie silverlight.

Télécharger la source de projet à partir d'ici.

La série de tutoriels silverlight :

2009-08-25T00:49:00.000-07:00

La première fois ou j’ai vu la dernière technologie de Microsoft pour la création de contenu web riche baptisée silverlight. J’étais vraiment impressionné par les possibilités qu’elle offre. Imaginez la convivialité et la souplesse des interfaces flash alliée à la puissance et la robustesse de Framework dotnet, sans pour autant négligé les outres aspects comme l’exécution offline (une application silverlight peut continuer s’exécuter sur le navigateur client même en case de rupture de connexion).

Si vous voulez avoir une idée plus clair sur ce que silverlight, je vous invite à visiter la gallary de site de la communauté silverlight http://silverlight.net/Showcase/.

Depuis quelque mois je me suis lancé dans le développement silverlight. Le début n’était pas évident, Vous savez puisque la technologie est assez récente. C’est difficile de trouver une documentation complète sur les différents aspects de la technologie, surtout en français.

C’est pour cette raison, que j’ai décidé d’élaborer une série de tutoriel qui touchera les différentes composantes de la technlogie silverlight. La série est inespéré principalement de coach ASP.NET, d’ailleurs on va utiliser la base de donné incluse dans le coach ASP.NET aux cour des tutoriels pour réaliser pas à pas, un site web complet en silverlight appelé GoldAffaires.

J’espère que ce blog va représenter un espace d’échange, de discussion, et d’amitié avec ceux qui s’intéresse aux developpement (surtout silverlight). Donc bien sur, n’importe qu’elle critique, correction, ou commentaire sera la bienvenue.

Sans trop parler passant maintenant aux choses sérieuses ...let’s go.

hamiche mahmoud zone

Ma première application Silverlight

La série de tutoriels silverlight :

ma première application Silverlight