créez des applications silverlight 3 david rousset relations techniques avec les développeurs...
TRANSCRIPT
Créez des applications Silverlight 3
David RoussetRelations Techniques avec les développeurs
Microsoft France
[email protected] / http://blogs.msdn.com/davrous
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
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
Quelques notions plus graphiquesGestion de contenu vidéos, téléchargements
asynchronesStyles & templating
DataBinding & Binding entre élémentsTransformations dont pseudo 3D
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 (<asp:MediaPlayer> 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
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/experiencesmoothstreaming • Exemples récents : Roland Garros en 720p avec contrôle du
direct et le Tour de France 2009
Integration de Media• <MediaElement />• Utilisé pour jouer de la musique ou de la vidéo
<Canvas> <MediaElement Source="/halo.wmv" /> </Canvas>
<Canvas> <MediaElement Source="/halo.wmv" /> </Canvas>
Integration de Media• <VideoBrush />• Utilisé pour utiliser une video en tant que Brush
<MediaElement x:Name="Vid" Width ="640" Height="480" Source="/Halo.wmv" Opacity="0"></MediaElement>
<Path Stroke="#FF000000" Data="M10,43 C10,(…),10,43
10,43 z"> <Path.Fill> <VideoBrush SourceName="Vid"></VideoBrush> </Path.Fill></Path>
<MediaElement x:Name="Vid" Width ="640" Height="480" Source="/Halo.wmv" Opacity="0"></MediaElement>
<Path Stroke="#FF000000" Data="M10,43 C10,(…),10,43
10,43 z"> <Path.Fill> <VideoBrush SourceName="Vid"></VideoBrush> </Path.Fill></Path>
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
Lab – Etape 2Chargeons puis jouons de la vidéo-= WebClient et MediaElement =-
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
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
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
DataBinding• Au niveau de la cible précision de la propriété de la
source à laquelle se lier, et le mode à utiliser
<TextBlock x:Name="txtNom" Grid.Row="0" Text="{Binding Nom, Mode=OneWay}" />
• 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;
Lab – Etape 3Analyses des styles d’une application
Navigation Application & changement du styleUtilisation du DataBinding et du templatingpour afficher une image dans la combobox
Binding suite…
Binding entre éléments- Modifier la propriété d’un élément modifie
automatiquement la propriété d’un autre élément.
<Slider Width="400" Minimum="0" Maximum="400" Value="200" x:Name="slider“ /><Rectangle Height="100" Fill="Blue" Width="{Binding Path=Value, ElementName=slider, Mode=TwoWay}" />
Binding suite…
Validation des données
<TextBox BindingValidationError="TextBox_BindingValidationError" Text="{Binding MonEntier, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" />
- 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
Transformations• Utilisées pour appliquer des changements aux objets
<Rectangle Width="200" Height="100" Fill="Black"> <Rectangle.RenderTransform> <RotateTransform CenterX="25" CenterY="100" Angle="45" /> </Rectangle.RenderTransform></Rectangle>
<Rectangle Width="200" Height="100" Fill="Black"> <Rectangle.RenderTransform> <RotateTransform CenterX="25" CenterY="100" Angle="45" /> </Rectangle.RenderTransform></Rectangle>
Render Transform• Possibilité de transformer des groupes d’objets
<Canvas> <Canvas.RenderTransform> <RotateTransform Angle="-45" CenterX="50" CenterY="50"/> </Canvas.RenderTransform> <Ellipse Width="100" Height="100" Fill="Yellow" /> <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" /></Canvas>
<Canvas> <Canvas.RenderTransform> <RotateTransform Angle="-45" CenterX="50" CenterY="50"/> </Canvas.RenderTransform> <Ellipse Width="100" Height="100" Fill="Yellow" /> <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" /></Canvas>
Types de transformations• <RotateTransform />• Rotation
• <ScaleTransform />• Redimensionnement
• <SkewTransform />• Distortion
• <TranslateTransform />• Translation
• <MatrixTransform />• Combinaison
Application de plusieurs transformations• <TransformGroup />
<Canvas> <Canvas.RenderTransform> <TransformGroup> <RotateTransform Angle="-45" CenterX="50" CenterY="50"/> <ScaleTransform ScaleX="1.5" ScaleY="2" /> </TransformGroup> </Canvas.RenderTransform> <Ellipse Width="100" Height="100" Fill="Yellow" /> <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" /></Canvas>
<Canvas> <Canvas.RenderTransform> <TransformGroup> <RotateTransform Angle="-45" CenterX="50" CenterY="50"/> <ScaleTransform ScaleX="1.5" ScaleY="2" /> </TransformGroup> </Canvas.RenderTransform> <Ellipse Width="100" Height="100" Fill="Yellow" /> <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" /></Canvas>
Perspective 3D Simulation de rotation d’éléments 2D dans un environnement 3DCe n’est pas de la vraie 3DUtilisation de la propriété “Projection”
<Image Name="img" Source="DSC01297.JPG" Height="298" Width="298" ><Image.Projection>
<PlaneProjection RotationZ="0" RotationY="70" RotationX="10"/>
</Image.Projection></Image>
Lab – Etape 4Transformations 3D
Binding entre éléments
© 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.