Bien débuter en Silverlight et maîtriser ses outils

Lors de la note d’ouverture du premier jour du MIX 09 Steve Guthrie a annoncé Silverlight par  les chiffres : trois versions en 18 mois, Plus de 350 millions d’installations, Plus de 300 000 développeurs et designers, Plus de 200 partenaires dans 30 pays et Plus de 200 sites et produits Microsoft.

Silverlight gagne du terrain dans le domaine de la création d’applications internet riches et devient une technologie incontournable. Sa simplicité et son intég

ration avec la plateforme Microsoft .Net représentent les principales raisons de son adoption par une large base de développeurs à traves le monde. De plus les outils ne font pas défaut avec des environnements adaptés aux besoins spécifiques des développeurs et des designers et des mécanismes de collaboration fluides.

 

Un extrait de cet article a été publié dans « PROgrammez, le magazine des développeurs » dans son numéro de Juin 2009 sous le titre: Bien débuter en Silverlight (Version PDF).

Les sources de l’article publié sont disponibles à travers ce lien.

 

Silverlight 2.0 partage la technologie de WPF en se basant sur le langage XAML « Extensive Application Markup Language ». Le langage XAML est un langage XML qui peut être utilisés pour spécifier de manière déclarative l’interface utilisateur d’une application Silverlight ou WPF. XAML peut également servir plus largement pour représenter des objets .NET.

De plus Silverlight reprend le modèle ASP.Net en intégrant les fichiers de classe « Code-behind » pour gérer la séparation du code et la présentation. Ces fichiers peuvent être écrits en plusieurs langages  dont C#, VB.NET, Python et Ruby.

Si vous êtes développeur .Net vous savez déjà  la plupart de ce dont vous avez besoin pour démarrer le développement Silverlight puisqu’il est basé sur les technologies .NET et Web.

Préparez l’environnement de développement

Pour bien démarrer l’apprentissage de Silverlight et la création d’applications riches il faut installer les outils suivants :

  1. Visual Studio 2008 SP1 ou Visual Web Developer Express with SP1 (gratuite).

  2. Silverlight Tools for Visual Studio 2008 SP1 : c’est une extension pour  Visual Studio 2008 SP1 ou Visual Web Developer Express with SP1 qui va mettre à jour Visual Studio, Ajouter le support des projets Silverlight, les runtime de développement, et le SDK.

  3. Microsoft Expression Blend 2. Et son Service Pack 2 : Un nouvel environnement de développement oriénté designers qui permet des créer des interfaces graphiques pour les applications silverlight 2.

  4. Deep Zoom Composer : Un outil permettant de preparer vos images pour être utilisées avec la fonctionnalité Deep Zoom de Silverlight 2.

  5. Silverlight Toolkit : Un projet open source Microsoft project contenant des contrôles et des composants Silverlight pour créer des applications.

Choisissez Votre Outil

La création d’applications internet riches nécessitent plusieurs compétences et font collaborer différent acteurs dont les principaux sont le développeur et le designer. C’est dans cet esprit que Microsoft propose deux outils complémentaires et orientés rôle pour la création d’applications Silverlight.

Le premier outil est Visual Studio 2008 qui est orienté développeurs. Visual Studio vous permettra de créer des projets Silverlight, d’éditer le code XAML avec le support  IntelliSense, de pré visualiser le rendu de votre application, et de bien sûr écrire et déboguer le code behind en votre langage préféré. Visual studio n’a pas d’éditeurs visuels pour les styles, les modèles et des animations.

Le second outil est Expression Blend qui est plus orienté designers. Blend permet de créer des projets Silverlight identiques à ceux créés avec Visual Studio. Mais avec Blend, on peut accéder à l’expressivité complète du langage XAML : mise en page, graphiques, contrôles, modèles, styles, animations, liaison de données et 3D. Blend est l’endroit où les designers, et les développeurs se réunissent. Les Designers y feront la création de visuels, de styles, de modèles et d’animations, ainsi que de nombreuses autres tâches liées à l’apparence d’une application. Les développeurs pourront bénéficier des facilités de création d’interfaces utilisateur, mais devront probablement l’associer avec Visual Studio  pour le débogage et édition de code.

Selon votre profil vous pourrez choisir Visual Studio ou Blend, ou une combinaison des deux, tout en gardant la même base de code et le même format de projet.

Créez votre premier projet Silverlight

Nous allons utiliser Visual Studio pour Créer notre première application et commencer à explorer Silverlight :

Par défaut, un projet d’application Silverlight nouvellement créé contient un fichier Page.xaml et App.xaml, ainsi que les fichiers de classe code-behind (qui peuvent être écrits en VB, c#, Ruby ou Python) qui leur sont associés :

Le fichier App.xaml est généralement utilisé pour déclarer des ressources, comme les pinceaux (Brush) et les styles qui sont partagées entre les composantes de l’application.  La classe code-behind du fichier App.xaml peut être utilisée pour gérer les événements de niveau application - comme Application_Startup, Application_Exit et Application_UnhandledException.

Après compilation le projet est transformé en fichiers « .xap » associés à des assemblies .Net standard. Les fichiers « .xap » utilisent l’algorithme de compression zip standard pour réduire la taille de téléchargement de client.

Pour héberger et exécuter une application Silverlight 2, vous pouvez ajouter une balise <object> dans toute page de HTML standard qui pointe vers le fichier .xap.  Ce ficheir sera alors automatiquement téléchargé et instancié par le plugin Silverlight du navigateur :

<div id="silverlightControlHost2">
    <object data="data:application/x-silverlight-2,"
            type="application/x-silverlight-2"
            width="100%" height="100%">
        <param name="source" value="ClientBin/Programmez.Silverlight.Intro.xap"/>
    </object>
</div>

Ajoutez des contrôles utilisateur avec Blend

Vous pouvez charger le projet créé avec Visual studio avec Expression Blend :

Silverlight offre trois possibilités pour l’agencement des éléments d’interface :

  • Le Canvas : Permet le positionnement explicite des contrôles en utilisant des coordonnées.

  • Le StackPanel : Permet le positionnement horizontal ou vertical d’un groupe de contrôles.

  • Grid : Similaire aux tables Html. Permet le positionnement en multi lignes et multi colonnes.