[Silverlight] Les nouveautés de Silverlight 3 et Blend 3
| 
| A l’occasion du MIX 09 à Las Vegas, Microsoft à mis en ligne le 18 Mars 2009 la nouvelle version en bêta de Silverlight. Cette nouvelle version de Silverlight n’est pas un renouveau comme le passage de Silverlight 1 (code JavaScript) à Silverlight 2 (Code behind) mais un ajout de composants & fonctionnalités. Actuellement la version est la Bêta 1 et le produit n’est pas sous licence Go-Live ce qui ne vous permet pas de distribuer d’applications. |
Avant de commencer ce tutorial il vous faut vous munir des différents SDK, Framework ou logiciel pour Silverlight 3.
A noter que l’installation des tools Silverlight 3 pour Visual Studio vous désinstallera les outils pour Silverlight 2.
· Le plug in pour le navigateur (noter que le plug in est plus léger que SL2 malgré les nouveautés)
· Les tools pour visual studio
· Blend 3 preview
· Le .NET RIA Services
· La mise à jour du Silverlight Toolkit
· Le SDK Silverlight en CHM
La première chose que l’on remarque est l’ajout de contrôle à notre Toolbox. Microsoft nous met à disposition plusieurs petits nouveaux, la plupart étant des contrôles du Silverlight Toolkit.
Voici les principaux contrôles que j’ai décidé de présenter :
| · Gestion d’erreurs · SaveFileDialog · ListBox multiselection · DataGrid · ToggleButton · DockPanel et WrapPanel · Label · ViewBow · AutoCompleteBox · TreeView · Expander · DataForm · DataPager · Frame et Page · Accordion · ChildWindow · … | 
|
Gestion d’erreurs
Nous souhaitons créer un formulaire pouvant se binder à classe Product pour enregistrer un nouveau produit.
Nous allons vérifier que chaque champ correspond à ce qu’on attend.
La classe de base :
public class Product
{
private string nomProduit;
public string NomProduit
{
get { return nomProduit; }
set
{
if(String.IsNullOrEmpty(value))
throw new Exception("Nom de produit vide");
nomProduit = value;
}
}
}
Puis le code de notre IHM :
<StackPanel>
<TextBox Margin="10" VerticalAlignment="Center" Width="200"
Text="{Binding NomProduit,
Mode=TwoWay,
ValidatesOnExceptions=True}" />
<Button Height="74" Margin="223,0,231,0" Content="Button"/>
</StackPanel>
Et le code-behind :
public MainControl()
{
// Required to initialize variables
InitializeComponent();
Product monProduct = new Product();
monProduct.NomProduit = "Test";
LayoutRoot.DataContext = monProduct;
}
Ce qui nous permet d’avoir un message d’alerte dès que la textbox est vide :
Il existe également le composant ErrorSummary qui vous permet de regrouper toutes les erreurs. Pour cela rajouter la balise NotifyOnValidationError=true
<Grid x:Name="LayoutRoot" Background="White">
<StackPanel>
<TextBox Margin="10" VerticalAlignment="Center" Width="200"
Text="{Binding NomProduit,Mode=TwoWay,ValidatesOnExceptions=True, NotifyOnValidationError=true}" />
<Button Height="74" Margin="223,0,231,0" Content="Button"/>
</StackPanel>
<dataControls:ErrorSummary VerticalAlignment="Top" Width="205" Height="124" HorizontalAlignment="Left" Margin="8,8,0,0" ></dataControls:ErrorSummary>
</Grid>
SaveFileDialog
Le SaveFileDialog manquait à Silverlight 2, Ce composant vous permet d’ouvrir une boite de dialogue vous invitant à sauvegarder un fichier :
private void Button_Click(object sender, RoutedEventArgs e)
{
SaveFileDialog sf = new SaveFileDialog();
sf.DefaultExt = "txt";
sf.Filter = "Text files (*.txt)|*.txt";
if (sf.ShowDialog().Value)
{
Stream stream = sf.OpenFile();
StreamWriter textWriter = new StreamWriter(stream);
textWriter.WriteLine("Hello Word");
textWriter.Close();
stream.Close();
}
}
ListBox multiselection
De base dans Silverlight 2 la listbox ne supporte pas de multi sélection.
<ListBox SelectionMode="Multiple">
<TextBlock>test</TextBlock>
<TextBlock>test</TextBlock>
<TextBlock>test</TextBlock>
<TextBlock>test</TextBlock>
</ListBox>
DataGrid
Le DataGrid existe sous Silverlight 2 grâce au Toolkit de Microsoft. Il est désormais intégré de base dans Silverlight 3.
<data:DataGrid AutoGenerateColumns="False" HeadersVisibility="All" x:Name="dtg" ColumnWidth="85" RowHeight="30"CanUserResizeColumns="True"
Width="Auto" Height="Auto" BorderBrush="{x:Null}" VerticalGridLinesBrush="{x:Null}" RenderTransformOrigin="0,-0.002" Background="{x:Null}" IsEnabled="True" Visibility="Visible" Margin="0,21,0,8">
<data:DataGrid.Columns>
<data:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ComboBox Height="20" Width="70"/>
</DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>
<data:DataGridTextColumn Header="Name" Binding="{Binding Path=Nom}" Width="Auto" />
</data:DataGrid.Columns>
</data:DataGrid>
ToggleButton
Le ToggleButton est un bouton pouvant rester enfoncé après clic :
<ToggleButton Content="Mon bouton"></ToggleButton>
DockPanel et WrapPanel
Ces deux panels sont disponibles depuis .NET 3.0 dans le WPF. Le WrapPanel est un StackPanel qui revient automatiquement à la ligne lorsqu’on dépasse la taille allouée :
<controls:WrapPanel Background="Blue" Height="100" Width="100">
<TextBlock>test</TextBlock>
<TextBlock>test</TextBlock>
<TextBlock>test</TextBlock>
<TextBlock>test</TextBlock>
<TextBlock>test</TextBlock>
</controls:WrapPanel>
Le DockPanel vous permet de séparer en plusieurs parties votre IHM (gauche, droite, haut, bas) :
<controls:DockPanel Height="100" Width="100" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" LastChildFill="False" Margin="0,0,31,23" Grid.Row="0">
<Button controls:DockPanel.Dock="Left">Gauche</Button>
<TextBlock>Le reste</TextBlock>
</controls:DockPanel>
Label
Le label on ne vous le présente plus, il vous permet de contenir du texte comme un Texblock mais ne gère pas la multi police, les sauts de lignes etc…
<controls:Label Content="Test"></controls:Label>
ViewBox
La viewbox (disponible en WPF) permet d’automatiquement redimensionner son contenu.
<controls:Viewbox Height="56" HorizontalAlignment="Left" Margin="173,103,0,0" VerticalAlignment="Top" Width="61" Content="Viewbox" Stretch="Fill">
<Image Height="Auto" Width="Auto" Source="adUsers.png" Stretch="Fill"/>
</controls:Viewbox>
AutoCompleteBox
L’AutoCompleteBox est une textbox à laquelle une collection vient se binder pour afficher des propositions de saisie.
<UserControl.Resources>
<SilverlightApplication1:Dico x:Key="Dico"/>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<input:AutoCompleteBox
IsTextCompletionEnabled="False"
Grid.Row="0" Margin="190,26,184,0"
ItemsSource="{StaticResource Dico}
Height="28" VerticalAlignment="Top"
d:LayoutOverrides="GridBox"
/>
</Grid>
Et la classe:
public class Dico : ObservableCollection<string>
{
public Dico()
{
Add("Test");
Add("Toto");
}
}
TreeView
Contrôle représentant un arbre de données.
<controls:TreeView>
<controls:TreeView.Items>
<controls:TreeViewItem Header="Test">
<controls:TreeViewItem Header="Test2"/>
</controls:TreeViewItem>
</controls:TreeView.Items>
</controls:TreeView>
Expander
L’expander est un HeaderedContentControl. De base il ne possède pas d’effets fade in/out mais il existe des styles sur le site du Silverlight Toolkit.
<controls:Expander Margin="75,66,301,234" Header="Expander" IsExpanded="True">
<Button Height="81" Width="166" Content="Button"/>
</controls:Expander>
DataForm
Le composant DataForm vous permet de générer un formulaire par rapport à une instance afin de pouvoir la modifer.
Pour cela, ajouter les références :
· System.ComponentModel
· System.ComponentModel.DataAnnotations
· System.Windows.Controls.Data.DataForm
Le code XAML :
<UserControl.Resources>
<SilverlightApplication1:Person Lastname="Jul" Age="18" Comments="Helloword" x:Key="Julien"/>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<dataControls:DataForm CurrentItem="{StaticResource Julien}"/>
</Grid>
Le code de la classe :
public class Person
{
private string lastname;
private string age;
private string comments;
public string Lastname
{
get { return lastname; }
set { lastname = value; }
}
public string Age
{
get { return age; }
set { age = value; }
}
public string Comments
{
get { return comments; }
set { comments = value; }
}
}
A noter qu’il est possible de choisir les propriétés bindable ou non, rajouter des regularExpressions et divers validateurs.
DataPager
Le contrôle DataPager ajoute un champ vous permettant de scinder en plusieurs pages vos datagrid, listview et autres conteneurs.
Code XAML :
<Grid x:Name="LayoutRoot" Background="White">
<ListBox ItemsSource="{Binding}" Grid.Row="2" Grid.Column="1" Margin="5">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Lastname}"/>
<TextBlock Text=" - " />
<TextBlock Text="{Binding Age}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<dataControls:DataPager Source="{Binding}">
</dataControls:DataPager>
</Grid>
Code Behind :
public MainControl()
{
// Required to initialize variables
InitializeComponent();
PagedCollectionView pcv = new PagedCollectionView(new ListPerson());
pcv.PageSize = 6;
DataContext = pcv;
}
Frame et Page
Silverlight 3 inclut le système de navigation par page comme le fait déjà son grand frère WPF.
<navigation:Frame Source="/Page2.xaml" x:Name="myFrame" Width="200" Height="120" />
Pour plus d’informations sur le système de page, référez-vous à celui de WPF.
Accordion
Les accordions séparent en plusieurs parties votre écran et s’ouvre sur le clic de l’utilisateur :
<layoutToolkit:AccordionItem Content="item 1" Header="A" />
<layoutToolkit:AccordionItem Content="item 2" Header="B – long header" />
<System:String>regular string item 3</System:String>
</layoutToolkit:Accordion>
ChildWindow
Jusqu’à présent pour faire des fenêtres modales il fallait créer un rectangle opaque qui couvre toute la surface de notre fenêtre puis dessiner un rectangle représentant une fenêtre fille.
Le composant ChildWindow vous simplifie cette tâche pour créer des fenêtres modales et déplaçable.
<Controls:ChildWindow Width="200" Height="200" Title="Modal">
<TextBlock Text="Hello"></TextBlock>
</Controls:ChildWindow>
Graphismes
Héritage de style
WPF permet de créer des styles héritant d’autres styles. Silverlight 2 qui était privé de cette fonctionnalité l’intègre dans la version 3.
Par exemple je crée un style de base afin d’avoir un background rouge puis je crée un autre style me permettant d’avoir la police taille 12 :
<StackPanel x:Name="LayoutRoot" Background="White">
<StackPanel.Resources>
<Style TargetType="Control" x:Key="myFirstStyle">
<Setter Property="Background" Value="Red"></Setter>
</Style>
<Style TargetType="Control" x:Key="mySecondStyle" BasedOn="{StaticResource myFirstStyle}">
<Setter Property="FontSize" Value="24" />
</Style>
</StackPanel.Resources>
<Button Style="{StaticResource myFirstStyle}" Width="200" Height="50" Content="Mon bouton 1"/>
<Button Style="{StaticResource mySecondStyle}" Width="200" Height="50" Content="Mon bouton 2"/>
</StackPanel>
« Easing animations »
Les animations voient apparaître une nouvelle DependencyProperty appelée EasingFunction qui contient une méthode Ease :
double Ease(double normalizedTime);
Le easing correspond à la vitesse à laquelle l'effet est appliqué, de base il est linéaire (même cadence du début jusqu’à la fin) mais vous pouvez lui affecter d’autres effets pour affiner votre animation.
L’API Pixel Shader
Il est possible de faire des effets au même titre que WPF dans vos applications Silverlight 3 grâce à la propriété Effect des UIElements.
De base il existe l’effet BlurEffect et DropShadowEffect.
<Button Height="142" Margin="142,87,190,0" VerticalAlignment="Top" Content="Button">
<Button.Effect>
<BlurEffect Radius="8"/>
</Button.Effect>
</Button>
<Button Height="101" Margin="142,0,190,124" VerticalAlignment="Bottom" Content="Button">
<Button.Effect>
<DropShadowEffect Direction="312" ShadowDepth="9"/>
</Button.Effect>
</Button>
Les projections (3D)
Il est désormais possible de créer des effets 3D en Silverlight 3 grâce aux projections.
Contrairement à WPF qui possède son propre moteur 3D avec tous les composants nécessaire, Silverlight lui est doté d’une seule classe abstraite nommée Projection qui va nous permettre de faire des effets 3D.
Application offline
Silverlight 3 permet de développer des applications qui sont en dehors du navigateur.
Vous pouvez désormais avoir une application riche sur le web et en client lourd sur votre machine. De plus le launcher gère automatiquement les updates à chaque ouverture.
· Création d’un projet Silverlight dans blend 3 ou Visual Studio 2008
· Création d’un fichier Manifest sous Visual Studio 2008 (Clic droit sur l’assembly, propriétés) et installation
Puis aller modifier ce fichier pour obtenir ça :
<Deployment xmlns="http://schemas.microsoft.com/client/2007/deployment"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Deployment.Parts>
</Deployment.Parts>
<Deployment.ApplicationIdentity>
<ApplicationIdentity
ShortName="SilverlightApplication3"
Title="SilverlightApplication3">
<ApplicationIdentity.Blurb>SilverlightApplication3
</ApplicationIdentity.Blurb>
</ApplicationIdentity>
</Deployment.ApplicationIdentity>
</Deployment>
A noter qu’il est possible de paramétrer l’icône de l’application dans ce fichier manifest.
Vous pouvez maintenant exécuter votre projet et faire un clic droit dans le navigateur pour installer votre programme :
Vous avez la possibilité de l’installer dans le menu démarrer ou sur le bureau :
Puis votre application s’exécute.
Voici le raccourci sur le bureau que va créer cette action :
"C:\Program Files\Microsoft Silverlight\3.0.40307.0\sllauncher.exe" localhost.2
Vous souhaitez la désinstaller ? C’est très simple, il vous suffit de refaire un clic droit sur votre application web :
· Et niveau code-behind ?
Il est possible côté code-behind de savoir si vous êtes ou non dans un navigateur. Il est également possible de lancer l’installation sur le clic d’un bouton :
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
if (App.Current.RunningOffline)
{
//Offline
}
else
{
//Dans le navigateur
}
}
private void Button_Click(object sender, RoutedEventArgs e)
{
bool allowed = App.Current.Detach();
if (allowed)
{
//L’installation c’est bien lancée
}
}
private void Button_Click_1(object sender, RoutedEventArgs e)
{
if (NetworkInterface.GetIsNetworkAvailable())
{
//Utilisation d’un web service
}
{
//Utilisation de l’isolatedStorage
}
}
Un format HD pour la vidéo
Grâce à Expression Encoder, il vous sera possible d’insérer des médias de type H.264(HD) dans vos applications Silverlight ainsi que la technologie Smooth HD qui permet d’envoyer un flux vidéo suivant la bande passante du client.
Amélioration du Binding
Les développeurs Silverlight 2/WPF se sont peut être rendu compte que le binding entre éléments n’était pas disponible. Cette fonctionnalité indispensable est incorporée dans Silverlight 3.
<Button x:Name="button" Height="142" Margin="142,87,190,0" VerticalAlignment="Top" Content="Button"/>
<Slider Height="33" Margin="110,0,132,159" VerticalAlignment="Bottom" Value="{Binding ElementName=button, Mode=TwoWay, Path=Opacity, UpdateSourceTrigger=Default}" Maximum="1"/>
L’API LocalConnection
L’API LocalConnection vous permet de communiquer de façon asynchrone avec d’autres éléments le tout basé sur l’HTML Bridge.
Il vous est possible de faire communiquer deux applications silverlight sur la même page.
La mise en œuvre est simple, d’un côté l’envoi d’un signal de la première application :
LocalMessageSender msgSender = new LocalMessageSender("Header");
msgSender.SendAsync("message test");
et côté receveur :
public MainControl()
{
// Required to initialize variables
InitializeComponent();
LocalMessageReceiver receiver = new LocalMessageReceiver("Header");
receiver.MessageReceived += new EventHandler<MessageReceivedEventArgs>(receiver_MessageReceived);
receiver.Listen();
}
private void receiver_MessageReceived(object sender, MessageReceivedEventArgs e)
{
//e.Message = message test
}
Utilitaire pour Web Service
Niveau Web Service, Silverlight 3 supporte la sérialisation xml binaire pour pouvoir communiquer avec WCF.
Un nouvel outil à vu le jour, il s’appelle slsvcutil.exe et il est utilisé lors de l’ajout de service référence pour générer vos proxys.
slsvcutil.exe http://myservice.com/myendpoint.svc?WSDL
Les Merged ResourceDictionaries
Les resourceDictionnaries vous permettent de stocker vos styles et templates d’application en application. Cependant vous êtes souvent amené à en avoir plusieurs (un pour les dégradés, un autre pour les templates de boutons etc…). Le Merged ResourceDictionnary vous permet de granuraliser vos différents dictionnaires :
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/dico1.xaml" />
<ResourceDictionary Source="/dico2.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
Le cache
Il est possible de mettre en cache certains assemblies pour éviter de les télécharger à chaque ouverture de votre application Silverlight.
Par défaut cela n’est pas actif, pour cela rendez-vous dans le fichier Manifest :
<Deployment.ExternalParts>
<ExtensionPart Source="http://go.microsoft.com/fwlink/?LinkID=XXXXXX" />
</Deployment.ExternalParts>
Autres
Il existe de nombreuses autres fonctionnalités implémentées dans Silverlight 3 comme :
· Le support du multi-touch
· Le smooth streaming
· Le Bitmap caching
· Les thèmes pour vos applications
· …
Je vous invite à lire ce lien pour de plus amples informations : http://silverlight.net/getstarted/silverlight3/default.aspx
Tout d’abord vous remarquerez que l’installeur a été légèrement amélioré ainsi que les animations de transitions dans le premier menu de blend.
L’interface globale a peu changé et reste dans le même esprit que le précédent.
La fonctionnalité la plus appréciée sera l’IntelliSense dans blend !
Il est possible en survolant vos conteneurs de les sectionner grâce à un clique :
De même, pas besoin d’un double clic sur votre conteneur pour insérer quelque chose dedans, le survole de la souris suffit.
La manipulation de gradient brush se fait plus facilement avec le nouvel outil (meilleure intégration avec la souris) :
La gestion des projections sur les UIElements :
La possibilité d’importer des fichiers adobe :
Blend 3 supporte également les projets sur TFS.
Il gère mieux l’ajout/suppression de données telles que les ObjectDataSource.
Il est possible de faire un drag ‘n’ drop de votre DataSource sur une DataGrid :
Vous pouvez rajouter un SampleDataSource qui vous générera une classe et des données de test.
Lors de la création d’une storyboard, vous pouvez modifier votre animation grâce au l’Easing :
La suite prochainement !