Lundi 25 juin 2007
1
25
/06
/2007
07:34
Ces derniers mois ont été très riches en nouveautés du côté de chez Microsoft, en particulier dans le domaine des applications Internet riches (ou RIA, pour Rich Internet Application).
Eh oui, la solution Flex d'Adobe a désormais un concurrent au gros potentiel nommé Silverlight (nom de code WPF/E où E signifie Everywhere).
Par analogie avec la technologie Flash qui s'appuie sur le Framework Flex, Silverlight est le plug-in qui permet de fournir des applications web riches basées sur Windows Presentation Foundation, l'un des quatre piliers qui constituent la
version 3.0 du Framework .NET (l'équation à connaître par coeur : .NET 3.0 = WWF + WCF + WPF + WC, avec WC = Windows CardSpace pour lever la moindre ambiguïté ;-).
Silverlight exploite donc les capacités du Framework .NET, mais aussi celles du Framework ATLAS dédié au concept AJAX (Asynchronous Javascript
And XML), afin de créer des applications en ligne riches, interactives et munies d'une epxérience utilisateur futuriste.
Construire une application Silverlight
L'un de points fort des outils proposés pour réaliser des applications WPF est la prise en compte des différents profils suceptibles d'intervenir sur un tel projet. De son côté, le designer
est passionné de graphisme alors que le développeur est un féru de code. C'est parfait, Microsoft fournit justement deux outils qui répondent à ces besoins : Microsoft Expression Design pour le designer et Visual Studio 2005 pour le développeur.
Expression Design permet de travailler sur du dessin bitmap et vectoriel. Au fur et à mesure que le designer manipule son graphisme, Expression Design construit un fichier contenant du code XAML,
un langage déclaratif basé sur XML qui définit l'interface utilisateur. Ce fichier peut être lu par Visual Studio 2005 et être modifié par le développeur. Voici un minuscule exemple de code XAML
qui permet d'obtenir un bouton de 100 pixels de largeur, de 50 pixels de hauteur, de couleur bleu ciel et qui contient le texte "Click me!".
<Button Width="100" Height="50" Background="SkyBlue">
Click me !
</Button>
A présent, je vous laisse découvrir plusieurs exemples sur le site officiel de Silverlight.
Les applications XAML pour navigateurs
Sous Windows, nous avons l'habitude de lancer ces fameux fichiers exécutables (.exe) qui sont destinés à s'ouvrir dans une application Windows. Par
analogie, les RIA Microsoft, c'est aussi des applications XAML spécifiquement prévues pour s'exécuter dans un navigateur Internet Explorer. Ce type d'application porte le nom de
XAML Browser Application que vous retrouverez souvent sous les initiales XBAP.
Il existe un aspect liant applications XBAP et applications WPF classiques (standalone application en anglais) qui peut être très intéressant : la possibilité de
réutiliser du code. En effet, écrivons par exemple un petit morceau de code XAML permettant d'obtenir un bouton un peu plus sympa que le bouton du paragraphe précédent :
<Page x:Class="XAMLBrowserApplication1.Page1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Page1"
>
<Grid>
<Button x:Name="Hello_But" Content="Click me ! Click me !" Visibility="Visible"
Height="80" FontFamily="French Script MT" FontSize="36" Width="230">
<Button.Background>
<LinearGradientBrush StartPoint="0.2, 0" EndPoint="0.5, 1">
<GradientStop Color="#66FFFF44" Offset="0"/>
<GradientStop Color="#FFCA8C31" Offset="0.9"/>
</LinearGradientBrush>
</Button.Background>
<Button.RenderTransform>
<RotateTransform Angle="-12" CenterX="60" CenterY="40" />
</Button.RenderTransform>
</Button>
</Grid>
</Page>
Remarque : la valeur de l'attribut Color de l'élément GradientStop précise une couleur selon 4 composantes et non 3 comme c'est souvent le cas. Il
n'y a pas de surprise pour les trois dernières composantes (FFFF44 pour le premier élément GradientStop) qui représentent respectivement les couleurs rouge, vert et bleu. Les deux premiers chiffres (66) représentent une composante qui définit l'opacité de la couleur et que l'on nomme composante alpha.
Le code précédent correspond à une application XBAP. Voici ce que nous obtenons pour la version WPF classique :
<Window x:Class="MyWPFButton.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MyWPFButton" Height="300" Width="300"
>
<Grid>
<Button x:Name="Hello_But" Content="Click me ! Click me !" Visibility="Visible"
Height="80" FontFamily="French Script MT" FontSize="36" Width="230">
<Button.Background>
<LinearGradientBrush StartPoint="0.2, 0" EndPoint="0.5, 1">
<GradientStop Color="#66FFFF44" Offset="0"/>
<GradientStop Color="#FFCA8C31" Offset="0.9"/>
</LinearGradientBrush>
</Button.Background>
<Button.RenderTransform>
<RotateTransform Angle="-12" CenterX="60" CenterY="40" />
</Button.RenderTransform>
</Button>
</Grid>
</Window>
Comme on peut le constater, la seule différence figure dans l'en-tête du code. Dans le premier cas, l'élément <Page> désigne une page Web alors que
dans le second, l'élément <Window> désigne la fenêtre d'une application Windows.
Voici les éléments à installer sur votre machine si vous voulez vous amuser avec cette nouvelle génération d'applications :
- Le .NET Framework 3.0.
- Une édition Express de Visual Studio 2005.
- L'extension WPF / WCF pour les éditions Express de
Visual Studio 2005.
Des sites incontournables pour en savoir plus sur WPF
- WPF sur MSDN 2
- Silverlight sur MSDN 2
- WindowsClient .NET
