Musashi

Vous l'avez surement appris, Silverlight 2.0 vient de sortir suite à l'annonce du MIX 2008. Vous pouvez télécharger tout ce qui vous est nécessaire au développement d'une application Silverlight 2.0 à ces différents liens:

• Silverlight 2.0 SDK
• Le runtime pour Windows ou Mac
• Les templates et autres outils pour Visual Studio 2008 (Team system of course)
• Blend 2.5

Je ne parlerais pas de Blend dans ce post (c'est un outil pour graphiste ça ! pas pour développeur :o) )

Nous allons donc voir :

• Une vue d'ensemble de Silverlight 2.0 avec VS 2008,
• Le hosting en deux mots (vraiment deux mots),
• développement d'une première application.

Vue d'ensemle de Silverlight avec Visual Studio 2008

Donc voici comment se présente Silverlight 2.0 lorsque l'on souhaite créer un nouveau projet dans Visual Studio 2008:

Deux possibilités s'offre à vous, soit créer une Application Silverlight , soit créer une Dll Silverlight. Ce sont les mêmes type de projet qui étaient à votre disposition avec la version 1.1 Alpha (mais oublions la voyons !!!!).

Lorsque vous créez une application, un assistant démarre vous proposant :

Comme beaucoup le savent silverlight est un plugin. Il doit donc être hébergé par une application Web (HTML ou ASP.NET) .

Ainsi cette écran vous propose soit de créer un projet Silverlight et son hôte Web en même temps (avec la possibilité de choisir Web Site ou Web application project) , soit de créer uniquement le projet Silverlight à héberger soit même à la main (c'est le cas ou vous avez déjà un site Web qui l'hébergera par exemple).

Dans le premier cas vous obtiendrez cela :

Donc un site Web et l'application Silverlight.

Dans le second , seulement le projet Silverlight :

Bon bref, voilà trois impression d'écran qui n'impressionne pas et que vous retrouverez dans tous les tutoriels mais ma joie m'obligeait de vous les présenter !

Première chose qui frappe dans le projet Silverlight , sa ressemblance avec un projet WPF !

Le hosting de Silverlight au sein de votre application ASP.NET

Mais quoi de neuf au niveau du hosting ? Ceux qui comme moi ont développé avec la version 1.0 (celle qui nous obligeait à nous torturer le Javascript) seront heureux d'apprendre que des contrôles ASP.NET existe pour héberger Silverlight dans votre DIV. Voici l'exemple que j'ai utilisé (fournit par MS):

<asp:Silverlight BorderWidth="2" BorderColor="AliceBlue" ID="Xaml1" runat="server" Source="~/ClientBin/SilverlightApplication1.xap" Version="2.0" Width="100%" Height="100%" BackColor="Black" />

L'application Silverlight quand à elle, présente deux fichiers

• App.xaml : qui correspond à une instance d'Application en fait
• Page.xaml : qui correspond  au contenu exposé par le plugin.

Mais passons aux choses sérieuses, faisons, ce que tous le monde attends : du Windows dans du Web via l'utilisation de contrôles utilisateurs RICHE !

Les contrôles et la construction d'une page

Ce n'est plus un Canvas qui nous accueil mais un UserControl qui constitue le body de notre page

<UserControl x:Class="SilverlightApplication1.Page"
    xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:SilverlightApplication1"
    Loaded="UserControl_Loaded"
    Width="1024" Height="780">
</UserControl

Ensuite , on se fait plaisir en ouvrant la toolbox (et on craint de ne voir que des canvas et autre ellipse ...) Mais non c'est la magnifique fenêtre suivante qui nous ouvre grand les bras:

Donc, non seulement la fenêtre est pleine de contrôles, mais surtout l'essentiel est là pour démarrer une application riche ce que nous allons faire !

Allez je vous propose de partir sur un truc simple, un player Vidéo :o) ah non ça c'était le seul truc que l'on pouvais montrer avec la version 1.0 ..... Donc plutôt une modeste application avec trois zones de saisie et un bouton. Cette dernière instanciera un User (Nom prénom et age) et  nous affichera son contenu dans les zones. voilà donc le résultat que nous attendons.

Tout d'abord nous créons une Classe User utltra simple :

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes; 

namespace SilverlightApplication2
{
    public class User
    {
        public string Nom { get; set; }
        public string Prenom { get; set; }
        public int Age { get; set; }
    }
}

puis, nous créons l'interface utilisateur : Pour cela nous avons besoin de trois zones de saisies, un bouton, et un textblock

 <Grid x:Name="LayoutRoot" Background="White">
        <StackPanel >
            <TextBox x:Name="txtNom" Margin="3" BorderThickness="2" BorderBrush="DarkViolet"/>
            <TextBox x:Name="txtPrenom" Margin="3" BorderThickness="2" BorderBrush="DarkViolet"/>
            <TextBox x:Name="txtAge"Margin="3" BorderThickness="2" BorderBrush="DarkViolet"/>
            <Button Content="Save" Width="150" Height="30" HorizontalAlignment="Left" Margin="3" Click="Button_Click"/>
            <TextBlock x:Name="txtResultat" />
        </StackPanel>
    </Grid>

Première chose qui nous apparait :

• Nous avons des contrôles de Layout (StackPanel, Grid, Canvas) ce qui nous facilite grandement le positionnement des objets dans nos surfaces.
• Puis nous réalisons un positionnement relatif à l'aide de la propriété Margin

Regardons désomais le binding et notamment comment instancier un objet en XAML. Pour cela plusieurs étapes :

• 1 - référencer votre namespace, nommé local dans notre contexte:

<UserControl x:Class="SilverlightApplication2.Page"
    xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="clr-namespace:SilverlightApplication2"
    Width="400" Height="300">

• 2 - Créer votre resource qui instancie votre user

    <UserControl.Resources>
        <local:User x:Key="my" Nom="Musashi" Prenom="Myamoto" Age="32" />
    </UserControl.Resources>

• 3 - Réaliser le dataBinding
• Ajouter votre user "my" au dataContext( l'équivalent d'une DataSource) de votre StackPanel
• Ajouter le binding sur chacune des zones de saisie

 <StackPanel DataContext="{StaticResource my}">
            <TextBox x:Name="txtNom" Text="{Binding Nom}" Margin="3" BorderThickness="2"/>
            <TextBox x:Name="txtPrenom" Text="{Binding Prenom}" Margin="3" BorderThickness="2"/>
            <TextBox x:Name="txtAge" Text="{Binding Age}" Margin="3" BorderThickness="2"/>
            <Button Content="Save" Width="150" Height="30" HorizontalAlignment="Left" Margin="3" Click="Button_Click"/>
            <TextBlock x:Name="txtResultat" />
        </StackPanel>

Enfin la gestion des évènements, lorsque je clique sur le bouton, j'affiche un message dans le textBlock:

• 1  - Evènement levé lors du click sur le bouton : "Button_Click"

<Button Content="Save" Width="150" Height="30" HorizontalAlignment="Left" Margin="3" Click="Button_Click"/>

• 2 - Réaction à l'évènement

private void Button_Click(object sender, RoutedEventArgs e)
{
    txtResultat.Text = "Save successfull";
}

Une fois réalisé cela, on relit son code et l'on se dit : il est un peu répétitif  le code de mes textBox et surtout elles ont toutes le même Style, donc vous finaliserez votre sample avec l'ajout d'un style qui permet automatiquement de postionner les bordures et le margin de l'ensemble de nos zones de saisies.

<Style TargetType="TextBox" x:Key="myTextBoxStyle">
            <Setter Property="Margin" Value="3" />
            <Setter Property="BorderThickness" Value="2"/>
            <Setter Property="BorderBrush" Value="DarkViolet"/>
</Style>

Modification et code de l'ensemble de la fenêtre pour intégrer le style mis en ressource:

<UserControl x:Class="SilverlightApplication2.Page"
    xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="clr-namespace:SilverlightApplication2"
    Width="400" Height="300">
    <UserControl.Resources>
        <local:User x:Key="my" Nom="Musashi" Prenom="Myamoto" Age="32" />
        <Style TargetType="TextBox" x:Key="myTextBoxStyle">
            <Setter Property="Margin" Value="3" />
            <Setter Property="BorderThickness" Value="2"/>
            <Setter Property="BorderBrush" Value="DarkViolet"/>
        </Style>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <StackPanel DataContext="{StaticResource my}">
            <TextBox x:Name="txtNom" Text="{Binding Nom}" Style="{StaticResource myTextBoxStyle}"/>
            <TextBox x:Name="txtPrenom" Text="{Binding Prenom}" Style="{StaticResource myTextBoxStyle}"/>
            <TextBox x:Name="txtAge" Text="{Binding Age}" Style="{StaticResource myTextBoxStyle}"/>
            <Button Content="Save" Width="150" Height="30" HorizontalAlignment="Left" Margin="3" Click="Button_Click"/>
            <TextBlock x:Name="txtResultat" />
        </StackPanel>
    </Grid>
</UserControl>

Et là seulement tout est terminé !

Bon eh bien, je sais pas pour vous,  mais moi après ça j'ai eu un trop plein d'émotion et j'ai appelé tous mes collègues.

En conclusion : mon premier sentiment

Silverlight 2.0 est relativement stable, son utilisation est vraiment très très proche de celle de WPF ce qui permet de capitaliser sur ses acquis (et ça je dis un grand bravo !).

Bien sur , il manque des choses et l'on rencontre des problèmes (un intellisense capricieux, des erreurs ,dans les resources notamment)  mais mon premier sentiment après 3h d'utilisation et une bonne stabilité et un fonctionnel (contrôles, binding, template, style ...) présent et opérationnel.

Allez je vous fait bientôt un autre Post sur le développement d'une petite application de gestion qui met en jeu des choses plus avancées notamment au niveau du Databinding...

Musashi.