Créez des applications Silverlight 3 David Rousset Relations Techniques avec les développeurs Microsoft France

Présentation au sujet: "Créez des applications Silverlight 3 David Rousset Relations Techniques avec les développeurs Microsoft France"— Transcription de la présentation:

1 Créez des applications Silverlight 3 David Rousset Relations Techniques avec les développeurs Microsoft France davrous@microsoft.comdavrous@microsoft.com / http://blogs.msdn.com/davroushttp://blogs.msdn.com/davrous

2 Agenda Présentation générale Intérêts, démo en action, outillages & types de contrôles disponibles Les bases d’une application Silverlight Structure, hébergement, XAML, contrôles de base & gestion évènementielle Quelques notions plus graphiques Gestion de contenu vidéos, téléchargements asynchrones Styles & templating DataBinding & Binding entre éléments Transformations dont pseudo 3D Utilisation de Blend 3 Modification du visuel Mise en place d’animations classiques puis naturelles

3 Agenda Notions plus avancées Appels de services WCF SandBoxing – OpenFileDialog / SaveFileDialog Pixel Shaders Out of Browser Accélération matérielle GPU Scénarios métiers orientés données Introduction à.NET RIA Services

4 Quelques notions plus graphiques Gestion de contenu vidéos, téléchargements asynchrones Styles & templating DataBinding & Binding entre éléments Transformations dont pseudo 3D

5 Contenus multimédias Silverlight peut lire la plupart des formats : WMV, VC1 WMA MP3 H264 … Silverlight apporte son propre jeu de codecs Permet de lire des vidéos HD jusqu’à 1080p Permet de faire de l’incrustation d’images, du chapitrage ASP.NET 3.5 permet de créer son propre lecteur multimédia en quelques clics ( qui crée un lecteur multimédia skinnable gérant les chapitres) Microsoft Media Encoder permet de créer automatiquement des vignettes ainsi que des « marqueurs » pour « chapitrer » une vidéo

6 Smooth Streaming Streaming adaptif en fonction De la bande passante Des capacités de la machine Fonctionne à travers de simples URL HTTP Caching classique HTTP extrêmement simple Nécessite IIS 7.0/Windows 2008 pour la diffusion du flux Création des 7 flux (résolutions et débits différents) grâce à Expression Media Encoder Démo : http://www.iis.net/media/experiencesmoothstreaminghttp://www.iis.net/media/experiencesmoothstreaming Exemples récents : Roland Garros en 720p avec contrôle du direct et le Tour de France 2009

7 Integration de Media Utilisé pour jouer de la musique ou de la vidéo

8 Integration de Media Utilisé pour utiliser une video en tant que Brush

9 WebClient Alléger le chargement d’une application Silverlight en téléchargeant les contenus volumineux à la demande, en fonction des besoins de l’application (Vidéos, Images, ZIP, etc…) Toutes les requêtes sont asynchrones: DownloadStringAsync : téléchargement de texte (resource XML par ex) OpenReadAsync : téléchargement (média, zip,…) DownloadStringCompleted : fin du téléchargement de texte OpenReadCompleted : fin du téléchargement DownloadProgressChanged : permet d’afficher la progression du téléchargement e.Result : contient les données téléchargées

10 Lab – Etape 2 Chargeons puis jouons de la vidéo -= WebClient et MediaElement =-

11 Styles Le but des styles est de personnaliser un contrôle Les styles sont placés dans les ressources de l’application Utilisation et buts similaire à CSS / HTML

12 Templating Modification de l’aspect d’un contrôle tout en conservant sa logique (propriétés, événements, etc…) : Modification de la façon dont le contrôle est créé Exemple A gauche un slider, à droite un contrôle beaucoup plus riche visuellement. Fonctionnellement pour le développeur, ils sont identiques Templating

13 DataBinding Connexion entre l’interface utilisateur et un objet ou une source de données L’objet de l’interface utilisateur est appelé la cible, le fournisseur de données est appelé la source La source doit implémenter INotifyPropertyChanged 3 modes de Binding : OneTime : la cible est mise à jour lors de la création du binding OneWay : idem que OneTime, de plus une modification sur la source met à jour la cible TwoWay : idem, que OneWay, de plus une modification sur la cible met à jour la source

14 DataBinding Au niveau de la cible précision de la propriété de la source à laquelle se lier, et le mode à utiliser Précision d’un DataContext pour indiquer à quel source ce lier Le DataContext est hérité Plutôt que de spécifier un DataContext pour chaque contrôle que l’on veut lier, il est préférable de spécifier le DataContext sur le conteneur (Grid, Canvas, etc…), les contrôles enfants en hériteront automatiquement. private Client client = new Client(); client.Nom = "Fred"; txtNom.DataContext = client; private Client client = new Client(); client.Nom = "Fred"; txtNom.DataContext = client;

15 Lab – Etape 3 Analyses des styles d’une application Navigation Application & changement du style Utilisation du DataBinding et du templating pour afficher une image dans la combobox

16 Binding suite… Binding entre éléments  Modifier la propriété d’un élément modifie automatiquement la propriété d’un autre élément.

17 Binding suite… Validation des données  ValidatesOnExceptions : Effectue la validation sur la source de données  NotifyOnValidationError : Remonte l'erreur au contrôle, qui peut ensuite la gérer comme il le souhaite

18 Transformations Utilisées pour appliquer des changements aux objets

19 Render Transform Possibilité de transformer des groupes d’objets <RotateTransform Angle="-45" CenterX="50" CenterY="50"/> <Ellipse Canvas.Top="25" Canvas.Left="25" Width="10" Height="10" Fill="Black" /> <Ellipse Canvas.Top="25" Canvas.Left="65" Width="10" Height="10" Fill="Black" /> <Line X1="25" Y1="75" X2="75" Y2="75" Stroke="Black" /> <RotateTransform Angle="-45" CenterX="50" CenterY="50"/> <Ellipse Canvas.Top="25" Canvas.Left="25" Width="10" Height="10" Fill="Black" /> <Ellipse Canvas.Top="25" Canvas.Left="65" Width="10" Height="10" Fill="Black" /> <Line X1="25" Y1="75" X2="75" Y2="75" Stroke="Black" />

20 Types de transformations Rotation Redimensionnement Distortion Translation Combinaison

21 Application de plusieurs transformations <Ellipse Canvas.Top="25" Canvas.Left="25" Width="10" Height="10" Fill="Black" /> <Ellipse Canvas.Top="25" Canvas.Left="65" Width="10" Height="10" Fill="Black" /> <Ellipse Canvas.Top="25" Canvas.Left="25" Width="10" Height="10" Fill="Black" /> <Ellipse Canvas.Top="25" Canvas.Left="65" Width="10" Height="10" Fill="Black" />

22 Perspective 3D Simulation de rotation d’éléments 2D dans un environnement 3D Ce n’est pas de la vraie 3D Utilisation de la propriété “Projection”

23 Lab – Etape 4 Transformations 3D Binding entre éléments

24 © 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.