Alors que Silverlight 1.0 est en release et que sort Silverlight 1.1 en version Alpha cet article vous propose de faire un tour par la pratique de l’offre RIA de Microsoft.
Introduction
Les applications riches diffusées par l’intermédiaire d’un navigateur sont de plus en plus courantes. On les reconnaît le plus souvent car elles présentent des interfaces très évoluées. Elles regorgent de multimédias, d’animations de look and Feel sexy. Je vous propose, dans cet article, de faire un tour d’horizon des technologies Web avancées proposées par Microsoft. Au programme nous aurons bien sûr ASP.NET AJAX mais surtout Silverlight 1.0 et 1.1 en passant par les applications XBAP.
XAML : un langage descriptif au centre des RIA de Microsoft
Au centre de l’offre RIA de Microsoft se trouve un nouveau langage de développement : le XAML.
Cet acronyme signifiant eXtensible Application Marckup Language défini un langage descriptif basé sur des tags qui s’écrit comme du XML.
L’exemple XAML ci-dessous présente un rectangle (instancie un objet Rectangle) dont le contenu est un dégradé du blanc au Vert
<Rectangle Width="150" Height="75">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="LightGreen" Offset="0.40"/>
<GradientStop Color="Green" Offset="0.70"/>
<GradientStop Color="DarkGreen" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
Le résultat à l’exécution est le suivant :
Le premier élément important est de comprendre que xaml est un langage ainsi lorsqu’on écrit :
<Rectangle x:Name="RectangleLayout" Width="150" Height="75"/>
On instancie la classe Rectangle pour créer un objet représenté par la variable RectangleLayout. Le code suivant écrit en C# a exactement le même résultat :
Rectangle rectLayout = new Rectangle();
rectLayout.Width = 150;
rectLayout.Height = 75;
mainLayout.Children.Add(rectLayout);
La gestion des médias :
Xaml est profondément orienté multimédia, Le MediaElement nous permet de visionner et manipuler des Vidéos comme le montre l’exemple suivant :
<MediaElement x:Name="video" Source="halo3_trailer.wmv" />
Les formats acceptés sont:
- Windows media video (wmv),
- Windows media audio (wma),
- Et certains types de mp3.
La gestion de vidéo est très simple en WPF et Silverlight ; c’est la raison pour laquelle beaucoup d’exemple sont présentés. Nous n’échapperons pas à la règle et vous retrouverez la création d’un Player vidéo en silverlight plus loin dans cet article.
Gestion des transformations :
Les transformations ont pour objectif de modifier le comportement d’un objet. Il en existe cinq en Xaml présenté ci-dessous :
Type de transformation
Description
Exemple
TranslateTransform
C’est le déplacement d’un objet d’une position à une autre.
ScaleTransform
C’est le grossissement, rétrécissement d’un objet.
RotateTransform
C’est une rotation d’un objet.
SkewTransform
C’est une transformation qui met en oblique un objet.
MatrixTransform
Chaque élément 2D peut être représenté par une matrice. Nous pouvons alors créer nous même des transformations en les appliquant directement sur la matrice de l’objet.
L’exemple de code suivant met en œuvre les quatre premières transformations en s‘appuyant sur un rectangle.
Avant toute transformation, le rectangle blanc avec un cadre noire d’une longueur de 150 pixels sur 75, est positionné sur le coin gauche de l’écran.
<Rectangle x:Name="rectLayout" Width="150" Height="75" Canvas.Top="5" Canvas.Left="5" Stroke="Black" StrokeThickness="3">
Ensuite nous lui appliquons des transformations : une translation, une rotation pour le faire tourner d’un angle de 20°, un agrandissement de 2 et enfin un Skew de 2. Le résultat est le suivant :
<Rectangle.RenderTransform>
<TransformGroup>
<TranslateTransform X="100"/>
<RotateTransform Angle="20"/>
<ScaleTransform ScaleX="2"/>
<SkewTransform AngleX="5"/>
</TransformGroup>
</Rectangle.RenderTransform>
La gestion des animations :
XAML nous fournit un support d’animation autrement dit un modèle objet (n’oublions pas qu’écrire du XAML c’est coder !) destiné à animer et interagir dynamiquement avec les objets instanciés. Par exemple en faire tourner en boucle notre rectangle. Le « Storyboard » permet de définir, créer et paramétrer une animation. Pour cela nous avons besoin d’un déclencheur appelé « trigger » qui lancera l’animation. Dans l’exemple ci-dessous nous animons la propriété « Opacity » du rectangle créé précédemment.
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="rectLayout"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
Maintenant que nous avons compris ce qu’est XAML et ce qu’il met, en partie, à notre disposition, je vous propose d’étudier les technologies qui en tirent parti, à commencer par WPF.
Windows Presentation Foundation
Met en quoi WPF peut – il être RIA ? En fait, il est possible de réaliser des applications WPF hébergées par internet explorer (et uniquement internet explorer). Ces projets portent le nom d’ XBAP pour Xaml Browser Application. Je vous propose dans cette partie de voir comment cette technologie nous permet de profiter de la puissance de WPF et de la souplesse d’internet.
Les Xaml Application Browser
Les XBAP sont donc des applications WPF hébergées par un Browser. Aujourd’hui, seul internet explorer permet de les exécuter. Il nécessite aussi l’installation du Framework 3.0 minimum sur le poste de travail pour être exécuter. Une fois ces prérequis pris, nous avons à notre disposition toute la puissance de WPF : Moteur de databinding performant, du multimédia, des contrôles utilisateurs riches et nombreux et même de la 3D !
Je vous propose de regarder en détail de quoi est constituée une application xbap à travers une application 3D.
Création d’une application xbap
Pour créer une application XBAP il suffit de choisir le modèle de projet approprié dans la fenêtre de création de projet. Ce modèle se nomme « WPF Browser Application ».
Une fois cette étape passée, on se trouve face à une application WPF classique à quelques détails près. L’unité de code base n’est plus une fenêtre window mais une Page comme montré ci-dessous
<Page x:Class="WpfBrowserApplication1.Page1"
Le déploiement d’une application xbap
Le déploiement d’une application Xbap utilise la technologie ClickOnce. Notre application sera donc hébergée par un site Web et accessible via une URL qui pointera vers le fichier d’extension .xbap produit de la compilation.
Ici un imprime écran de la publication de notre application xbap vers un site web par Click Once
La 3D sur le Web par l’exemple
Un des avantages de l’utilisation des applications Xbap est que toute la puissance de WPF est accessible à savoir, le moteur de binding mais aussi la 3D. Je ne m’étendrais pas sur la création 3D dans cet article.
Afin de l’illustrer, je vous propose de créer une pyramide en trois dimensions que nous ferons tourner à l’aide d’un « slider ». Le résultat est le suivant :
La première étape est la création de la géométrie de l’objet, de sa couleur et le positionnement d’une caméra.
<Viewport3D.Camera>
<PerspectiveCamera
UpDirection="0,1,0"
LookDirection="1,-1,-4"
Position="-1,2,4"
FieldOfView="45"
/>
La géométrie de la pyramide :
<MeshGeometry3D
Positions="0 1 0, -0.5 0 0.5, 0.5 0 0.5,
0 1 0, 0.5 0 -0.5, -0.5 0 -0.5,
0 1 0, -0.5 0 -0.5, -0.5 0 0.5,
0 1 0, 0.5 0 0.5, 0.5 0 -0.5"
TriangleIndices="0 1 2, 3 4 5, 6 7 8, 9 10 11"
/>
Enfin, regardons l’interactivité en donnant la possibilité à l’utilisateur de notre application RIA de faire tourner la pyramide. Pour cela nous créons un « slider » nommé « sliderRotate ».
<Slider Grid.Row="1" x:Name="sliderRotate" Minimum="0" Maximum="360" Margin="134,0,126,0" />
Puis, nous lions par databinding la valeur du slider à la transformation de rotation de notre pyramide. Le code suivant illustre cela.
<GeometryModel3D.Transform>
<RotateTransform3D>
<RotateTransform3D.Rotation>
<AxisAngleRotation3D Angle="{Binding ElementName=sliderRotate, Path=Value}" Axis="0 1 0" />
</RotateTransform3D.Rotation>
</RotateTransform3D>
</GeometryModel3D.Transform>
Ainsi nous avons une application Web mettant en jeu WPF, de la 3D mais aussi des mécanismes avancés et performants comme le Databinding.
Regardons désormais comment développer des applications Web multi browser.
Silverlight
Silverlight est une technologie multi plateforme, multi navigateur permettant de développer des applications riches orientées multimédia. Basé sur XAML, il se décline aujourd’hui en deux versions, la version Silverlight 1.0 en release et la version 1.1 en Alpha.
Il existe, bien entendu, des éléments communs aux deux versions. Elles sont toutes les deux basées sur XAML pour définir l’interface visuelle. Elles sont hébergées par plusieurs navigateurs à savoir : Internet Explorer, Firefox, Safari et récemment le support de linux (via le projet moonlight). Elles nécessitent l’installation d’un plug-in comme expliqué dans l’article précédent.
Silverlight et son contexte d’exécution
Silverlight s’exécute via un browser sur le poste de travail client, ce n’est donc pas une application serveur comme ceux développés en ASP.NET.
Toute application Silverlight est embarquée dans une page Web hôte qui affiche une zone (un <DIV>) correspondant au plugin Silverlight dans lequel l’application s’exécutera. L’architecture fournit par Microsoft est la suivante :
Ainsi, nous aurons la possibilité de créer du contenu Web (HTML) autour de Silverlight et nous pourrons même les faire interagir.
La création d’application Silverlight
Comment créer une application silverlight ? Nous ne revenons pas sur les outils mais il y a évidemment, plusieurs possibilités selon votre rôle, designer, développeur et selon la version. Pour le développeur l’outil roi est bien sur Visual Studio. La version 2005 pour Silvelight 1.0 et la version 2008 beta 2 pour Silverlight 1.1.
Dans le cas de Silverlight 1.0, la création d’un projet Silverlight passe par le nœud « Silverlight » de la fenêtre de création de projet et le choix du modèle de projet « Silverlight JavaScript Application » comme présenté ci-dessous :
Dans le cas de Silverlight 1.1 Alpha, la création d’un projet Silverlight passe par le nœud « Silverlight » de la fenêtre de création de projet et le choix du modèle de projet « Silverlight Project » comme présenté ci-dessous :
Le déploiement d’application Silverlight
Pour comprendre comment déployer une application Silverlight, il faut d’abord comprendre de quoi elle est composée lors de sa compilation.
La compilation d’une application Silverlight produit une dll qui représente le code nécessaire à l’exécution de l’application (quelque soit la version aujourd’hui). Une application Silverlight se compose donc d’une page HTML, de fichiers JavaScript, utilisés pour l’interaction entre la page Web et le plugin, et des fichiers XAML.
Le déploiement se fera donc sur un site Web (dont l’URL pointera sur la page HTML hébergeant notre application) qui contiendra un répertoire contenant la dll compilée, ainsi que les fichiers HTML, JavaScript et XAML nécessaires à la bonne exécution du site Web.
Maintenant que nous avons vu comment créer et déployer une application Silverlight je vous propose de créer un player vidéo qui nous permettra de mettre en évidence les caractéristiques de chacune des versions 1.0 et 1.1.
Notre Player Vidéo possédera le visuel suivant :
L’objectif est donc d’afficher une vidéo qui sera pilotée par trois Bouton :
- Play : lancer la vidéo
- Stop : Arrêter la vidéo
- Pause : met en pause la vidéo (relancé par Play)
Les éléments globaux utilisés pour réaliser le Player :
- Un mediaElement pour créer la vidéo
- Des rectangles pour créer les boutons.
La particularité du MediaElement utilisé est que ce dernier est « Clipé » à savoir son rendu visuel est redéfini par une geometry particulière. Ici j’ai choisi un rectangle en paramétrant les Radius de sorte à avoir les bords arrondis.
<MediaElement AutoPlay="False" x:Name="Video" Source="Halo3_trailer.wmv" Width="480" Height="270" >
<MediaElement.Clip>
<RectangleGeometry
Rect="0,0,480,270"
RadiusX="10"
RadiusY="10" />
</MediaElement.Clip>
</MediaElement>
Etude du développement du Bewise.Player avec la version 1.0
Silverlight 1.0
Silverlight 1.0 possède les caractéristiques suivantes :
- Support du XAML (et donc des animations etc…)
- Support du JavaScript
Un seul modèle de projet est disponible : « Silverlight JavaScript Application » par défaut ; ce dernier créer des fichiers détaillés ci-dessous:
Nom du fichier
Contenu du fichier
Scene.Xaml
Fichier Xaml contenant le visuel de notre application Silverlight
Scene.Xaml.js
Fichier Javascript contenant le code des interactions entre les utilisateurs et l’application
Default.html
Page Web hébergeant l’application
Default.html.js
Initialisation et paramétrage du plugin Silverlight
Silverlight.js
Fichier de création du plugin Silverlight
L’interactivité entre l’utilisateur est l’application est entièrement basée sur Javascript et sera coder dans le fichier Scene.Xaml.js. Détaillons maintenant le fichier Scenen.xaml du Player
Le fichier XAML du player
Outre la création du MediaElement que nous avons vu, regardons comment créer les boutons qui pilotent notre Player.
Ces derniers se composent de Rectangle et d’un texte. Le tout, affiché dans un canvas comme le montre le code suivant :
<Canvas Width="100" Height="30" Background="White" MouseLeftButtonUp="DoPlay" Canvas.Top="280" Canvas.Left="5" >
<Rectangle Fill="Black"
Stroke="Chocolate"
StrokeThickness="3"
RadiusX="5"
RadiusY="5"
Width="100"
Height="30"
Canvas.ZIndex="-1"/>
<Rectangle Fill="White"
Opacity="0.4"
RadiusX="10"
RadiusY="10"
Width="100"
Height="5"
Canvas.Top="1" />
<TextBlock Text="Play" Canvas.Top="5" Canvas.Left="35" Canvas.ZIndex="1" Foreground="White" />
</Canvas>
Ce qui est intéressant c’est la manière dont les utilisateurs vont pouvoir déclencher des actions ici sur les boutons, l’évènement MouseLeftButtonUp, sera levé et il appelera la méthode JavaScript « DoPlay ».
Javascript
Comme nous l’avons dit, cette version est entièrement basée sur le JavaScript pour toute interaction entre l’utilisateur et l’application. Ainsi, le script du bouton Play de notre Player réagissant au click de l’utilisateur, est le suivant :
function DoPlay(sender, eventArgs)
{
var theHost = document.getElementById("SilverlightControl");
var theMedia = theHost.content.findName("Video");
theMedia.Play();
}
La première chose réalisée par ce script est la récupération du contrôle à partir duquel nous récupérons l’objet MediaElement référencé par son nom « Video » et sur lequel nous appelons la méthode Play.
Silverlight 1.1
Silverlight 1.1 possède les caractéristiques suivantes :
- Support du XAML (et donc des animations etc…)
- Support du code behind (C#, VB.NET aujourd’hui)
Il reste des limitations aujourd’hui à cette version comme la faible liste de contrôle disponible, le non support du databinding. Néanmoins nous en sommes à la version Alpha et Microsoft a annoncée le support de ces points techniques dans les versions à venir.
Deux modèles de projet sont disponibles : « Silverlight Project » et « Silverlight Class Library ».
Les projets « Silverlight Project » créent par défaut le contenu suivant :
Nom du fichier
Contenu du fichier
Page.xaml
Fichier Xaml contenant le visuel de notre application Silverlight
Page.xaml.cs
Fichier contenant le code behind pour l’interaction utilisateurs
TestPage.html
Page web hébergeant l’application
TestPage.html.js
Initialisation et paramétrage du plugin Silverlight
Silverlight.js
Fichier de création du plugin Silverlight
L’interactivité entre l’utilisateur et l’application peut être basée sur du Javascript, mais ce sera surtout le code behind qui lui sera préféré pour la souplesse et le nombre de fonctionnalités plus importantes qu’il apporte.
Le fichier XAML du player
Le projet de Player en version 1.1 contient 2 projets. Le fichier de projet et une librairie Silverlight. Nous avons en effet externalisé les boutons en créant un contrôle utilisateur leurs correspondants. Ainsi le fichier xaml du player est allégé et fait uniquement référence à notre dll puis aux contrôles.
xmlns:control="clr-namespace:SilverlightControlProgrammez; assembly=ClientBin/SilverlightControlProgrammez.dll"
<control:ucButton Text="Play" Canvas.Top="280" Canvas.Left="5" Click="Play_Click" />
Code behind
Comme nous l’avons dit, la version Silverlight 1.1 est basée sur du code behind pour toute interaction entre l’utilisateur et l’application. Ainsi le click du bouton « Play_Click » de notre Player est le suivant :
public void Play_Click(object sender, EventArgs e)
{
video = this.FindName("Video") as MediaElement;
if (video == null)
throw new ArgumentException("Video is not found");
video.Play();
}
La première chose réalisée est la récupération du contrôle MediaElement dans la variable « Video » sur lequel nous appelons la méthode Play.
Web 2.0 et ASP.NET AJAX
Dans cette partie, nous allons vous présenter le Framework AJAX de Microsoft. Nous n’entrerons pas dans le détail et je vous renvoie vers le N°99 de Programmez ! Pour le très bon dossier Web 2.0 incluant AJAX.
ASP.NET AJAX est une couche supplémentaire à ASP.NET, on parle d’extension AJAX pour ASP.NET. Cette technologie s’appuie donc sur les outils actuels de la gamme Visual studio. ASP.NET AJAX est composé de 3 modules principaux :
- Des extensions serveurs : elles vont prendre en charge les fonctionnalités AJAX dans les pages ASPX côté serveur
- Des contrôles qui encapsulent des comportements AJAX pour dynamiser une page, on parle des contrôles AJAX Toolkit
- Microsoft AJAX Library : Une bibliothèque de scripts JavaScript pour prendre en charge AJAX côté client (manipulation de XMLHttpRequest, JSON, DOM, etc.)
L’objectif d’AJAX est d’ajouter du dynamisme dans les pages. Contrairement à Silverlight les applications ASP.NET AJAX sont des applications serveurs plus que cliente.
D’un point de vue du code je dirais que deux contrôles sont essentiels à connaitre de tout développeur ASP.NET :
- L’update panel : panel permettant d’ajaxifié votre application avec peu d’effort
- L’update progress : permet de notifier un traitement ajax en cours.
Les deux exemples de code suivant vous montre comment utilisé ces contrôles :
L’update panel
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
[...]
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True">
[...]
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
L’update progress
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<img src="loader-square.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
CONCLUSION
L’offre RIA de Microsoft est très étoffée. Elle est surtout centré sur le XAML avec les applications WPF /XBAP mais aussi Silverlight 1.0 et 1.1. L’es investissements et les annonces faites autour de Silverlight 1.1 conforte d’ailleurs l’engouement pour cet technologie ainsi nous voyons le support Linux par moonlight, l’apparition de contrôles utilisateurs évolués produit par des sociétés comme GOA. Nous sommes donc tous dans l’attente de voir les prochaines versions de Silverlight 1.1. Néanmoins ASP.NET n’est pas en reste et l’approche à 3 niveaux d’ASP.NET AJAX. Une chose est sur les RIA ont de beaux jours devant eux.