Présentation de Silverlight 3 Beta par Frédéric Queudret lors des MS Days organisés par l'EPITA les 10 & 11 juin 2009. La présentation contient l'historique de Silverlight et son architecture ainsi que les nouveautés de Silverlight 3.

1. Silverlight 3 BêtaPrésentation EPITA 10/11 juin 2009 Frédéric Queudret – CEO/CTO MPOWARE http://www.mpoware.com http://blogs.codes-sources.com/mpoware/

2. Mpoware Société d’édition de logiciels et prestation de services Partenaire Microsoft & de l’Agile Training Center http://msdn.microsoft.com/fr-fr/architecture/default.aspx Experts & Architectes .NET Frédéric QUEUDRET – SCIA ’96 Fondateur de la société Mpoware Ex-Architecte du Microsoft Technology Center & MVP Client App Dev LinkedIn: http://www.linkedin.com/profile?viewProfile=&key=1794819&trk=tab_pro Articles Programmez.com 2009 Le développeur Agile / Dossier Méthodologies La sécurité appliquée à .Net / Dossier Hacking, sécuriser votre code Développer un gadget Skype pour Sideshow / Dossier Coding4Fun Blog de Laurent Trébulle: http://blogs.ionis-group.com/epita/laurenttrebulle/2008/05/des_epiteens_qui_bougent_frede.html

3. [11/06: 10h00 – 12h30] Agenda Présentation Historique Architecture Les principes de Silverlight Nouveautés de Silverlight 3.0 Comparatif avec Flash, Moonlight Beaucoup de démonstrations!!!

4. Silverlight: Présentation Plug-in cross-browsers & cross platform Windows, MacOS X, Linux via Moonlight* IE, Firefox, Safari, Konqueror* Pour une nouvelle génération d’applications Rich Internet Applications – RIA Nouvelles expériences Media (Vidéo…) Avec les mêmes principes que .NET XAML (« à la » WPF) pour une séparation du Design et du Développement Base Class Library (« à la » .NET Framework BCL en plus light) Langages de développement .NET (C#, VB.NET, …) Sandboxing garantit la sécurité (« à la » Code Access Security) Outillage intégré (Visual Studio, Blend…) Interaction avec Javascript et DOM

6. Jeu (SL2): http://www.joerassic.ch/

7. e-Commerce (SL2): http://www.lejardindelydie.com/

8. Publicité (SL2): http://streaming.live.com/

9. Accès aux ressources locales (SL3): http://smjenkins.members.winisp.net/slidentity/default.htmlDémos de Silverlight

10. AOL Mail RIA http://beta.aol.com/projects.php?project=webmailria&loc=0

11. K2 blackpoint http://www.k2.com/en/displaycontent.aspx?id=973

12. Historique [20/11/2008] - D'après Guthrie, le plugin Silverlight 2 a été téléchargé et installé sur plus de 100 millions de machines au cours des 4 dernières semaines, et plus d'un ordinateur sur 4 connecté à l'Internet dispose désormais d'une version de Silverlight… MIX 2009 2007 - 2009 2006 - 2008 Source: http://www.generation-nt.com/silverlight-3-haute-definition-3d-flash-actualite-190551.html

13. Architecture de Silverlight

14. Poster Silverlight 2 Poster DeepZoom: http://joestegman.members.winisp.net/DeepZoom/

15. Où se place Silverlight ? Client Layer (Browser ou Mode Out-of-browser) HTML Ajax Silverlight Integration Layer Business Logic Layer Presentation Layer PHP ASP.NET SharePoint @ Database Layer Service Layer SOAP, JSON, REST, … .NET RIA Services Silverlight Blueprint for SharePoint: http://msdn.microsoft.com/en-us/sharepoint/cc303301.aspx

16. Navigateurs supportés par Silverlight Silverlight: Supported Operating Systems and Browsers Silverlight - based applications are c ross - platform and run in most modern Web browsers. The following table shows the compatible operating systems and browsers. Compatible Operating Systems and Browsers Windows Internet Internet Firefox 1.5, Operating System Safari Explorer 7 Explorer 6 2, 3 Windows Vista Yes - Yes - Windows Server 2008 Windows 7 (beta) Windows XP SP2 Yes Yes Yes - Windows 2000 SP4 + all post - SP4 - Yes - - hotfixes, updates, and security updates Windows Server 2003 (excluding IA - 64) Yes Yes Yes - Mac OS 10.4.8+ (Intel - based) - - Yes Yes Linux, FreeBSD or SolarisOS Various browsers. For details, see Novell. Minimal Requirements Components Requirement X86 or x64 500 - megahertz (MHz) or higher processor with Personal Computer running Windows 128 - megabytes (MB) of RAM Intel Core Duo 1.83 - gigahertz (GHz) or higher processor with 128 - MB of RAM Mac OS 10.4.8+ (Intel - based)

18. Code-behind

19. Contrôles

20. Isolated Storage

21. …

22. Les samples du SDK Browser: http://go.microsoft.com/fwlink/?LinkId=139798Exemple d’un projet Silverlight

23. Développer pour Silverlight 3 Plugin Silverlight 3 pour les développeurs http://go.microsoft.com/fwlink/?linkid=143433 Le SDK de Silverlight 3 Bêta 1 La documentation du framework Silverlight 3 Expression Blend 3 preview http://www.microsoft.com/expression/try-it/blendpreview.aspx Package complet : Silverlight 3 Tools for Visual Studio 2008 SP1 Visual Studio 2008 SP1 Attention aux développements Silverlight 2 http://www.jeff.wilcox.name/2009/03/sxs-sl2-sl3-building/ http://wildermuth.com/2009/04/06/Running_Silverlight_2_and_3_On_Same_Machine_-_Redux!

24. Test.htm

25. XAP (prononcer ZAP) Fichier de déploiement d’un application Silverlight Format ZIP Généré par l’outil Chiron.exe Compressé Pour de meilleures performances Ce fichier contient tous les éléments nécessaires à l’application Pour utiliser les fichiers XAP, il faut rajouter un type mime à IIS (ou autre serveur Web) Xap: application/x-silverlight-app En standard dans Windows Server 2008 Contenu: Les assemblies compilées Le fichier AppManifest.xaml Les fichiers ressources (images, …) Etapes de chargement: http://community.irritatedvowel.com/blogs/pete_browns_blog/archive/2008/03/05/Xap_2100_-App_2100_-Pow_2100_-Packaging-and-Application-Startup-in-Silverlight-2-Beta-1-_2D00_-Part-2.aspx

26. XAML XAML est un langage déclaratif à base de tags Utilisé pour définir l’interface d’une application Silverlight MainPage.xaml dans un nouveau projet Visual Studio Un layoutGrid par défaut nommé LayoutRoot Équivalent à: <Rectangle Fill="Red" Width="150" Height="100"/> Rectangle newRect = new Rectangle(); newRect.Width = 150; newRect.Height = 100; newRect.Fill = new SolidColorBrush(Colors.Red); LayoutRoot.Children.Add(newRect);

27. Layout Disposition des éléments graphiques de l’IHM Plusieurs possibilités Grid StackPanel Canvas DockPanel WrapPanel …

28. Contrôles Silverlight 3 étend le nombre de contrôles natifs Voir Silverlight Toolkit Template d’affichage par défaut Customiser le look d’une application sans altérer son comportement Styling (Styles)Changementsvisuelslégerssur un élément (Fonte, Couleur de fond, etc) Skinning (Control Templates)Remplacer tout l’arbrevisuel d’un Elément

29. Contrôles et Thèmes Visuels

30. Contrôles nommés Visual Studio définit systématiquement des attributs x:Name pour tous les éléments Les contrôles nommés peuvent être référencés par code avec support Intellisense complet

31. Le code Support des langages .NET (C# ou Visual Basic) Fichiers code-behind avec extension du langage Exemple: MainPage.xaml.cs Utilisé pour coder la logique applicative Modèle de programmation événementiel

32. Event handlers Les Event handlers connectent les actions aux contrôles Déclarésdans le XAML oubien au runtime dans le code-behind en C# au Page_Loaded

33. Databinding Le Databinding renforce la séparation entre la présentation des données et le code-behind « applicatif » Avec tout objet implémentant IEnumerable Arrays, Lists, Collections DataTemplates contrôlent la présentation Binding uni- ou bi-directionnel

34. LINQ Language INtegratedQuery apporte des capacités de requêtage natives à .NET Requêter, projeter et filtrer des données issues de multiples sources Mixé avec le code C#, VB, etc Silverlight comprend System.LINQ et System.LINQ.Expression

35. Intégration HTML Silverlight permet la manipulation du DOM HTML et l’intégration JavaScript Propose des « managedwrappers » pour le DOM et les éléments JS Silverlight peut invoquer JS, JS peut invoquer du code managé

36. Accès aux fichiers locaux Silverlight peut prompter pour accéder à des fichiers locaux Pas besoin d’upload vers le serveur Contraintes de sécurité Fichiers ouverts en mode read-only seulement Accès en écriture dans le Isolated storage

37. Open File Dialog

38. Large choix d'options réseau Silverlight étend le networking HTTP, WS*/SOAP, REST, RSS, JSON System.Net.Sockets pour les protocoles non-HTTP tels que les serveurs de « chat » Silverlight 3 apporte l’encodage binaire (customBinding) Transport de l’identité utilisateur (HTTPS) Simplification du mode Duplex REST in Windows Communication Foundation (WCF) http://msdn.microsoft.com/en-us/netframework/cc950529.aspx What's new with web services in Silverlight 3 Beta: http://blogs.msdn.com/silverlightws/archive/2009/03/20/what-s-new-with-web-services-in-silverlight-3-beta.aspx

39. Deep Zoom Permet de zoomersur des images de grandes dimensions Chargementoptimisé des parties visibles De basserésolutionvers haute résolution

40. Deep Zoom Deep Zoom Composer découpe les images en parties de 256 x 256 Puisgénèreunepyramided’images de différentesrésolutions Affichage via le contrôleMultiScaleImage

41. Creating a Silverlight-Enabled WCF Service http://reddevnews.com/articles/2009/05/20/creating-a-silverlight-enabled-wcf-service.aspx Exemple d’appel à un web service

42. Cross-Domain Policy Files Silverlight supporte les requêtes « cross-domain »: Silverlight policy: clientaccesspolicy.xml Adobe Flash policy: crossdomain.xml Déjà utilisés par: etc… Tous les sites publics, qui fonctionnent avec Flash, fonctionnent avec Silverlight Clientaccesspoilicy.xml vs. Crossdomain.xml http://community.dynamics.com/blogs/cesardalatorre/comments/9579.aspx

43. Cross Domain Policy Flow

44. Sécurité Silverlight Applications « Sandboxées » Pas d’élévation de privilèges ni de prompts de sécurité (ActiveX) — juste un clic sur URL Applications incapables de réaliser des actions malicieuses Interactions locales limitées « Safeisolatedstorage » Contrôle de file upload client Supporte les requêtes « Cross domain »

45. Quels bénéfices avec Silverlight ? ZeroDeployment Cross Browser & Cross platform Write once, Test once Limite : Interactions avec le browser Tirer parti de la puissance du client Basé sur un moteur vectoriel graphique 2D La meilleure résolution pour mon application ? Architectures multi-tiers et orientées services Mêmes outils, mêmes langages Mêmes développeurs !

46. http://silverlight.net/samples/sl3/toolkitcontrolsamples/run/default.html Les nouvelles fonctionnalités de Silverlight 3.0

47. + de 60 contrôles Contrôles: Calendar, ChildWindow, DatePicker, DockPanel, Expander, GridSplitter, TabControl, TreeView, ViewBox, WrapPanel, … Données: DataForm, DataPager, Validation, DataGrid, … Charting: Area / Bar / Bubble / Column / Line / Pie / ScatterSeries, … Input: AutoCompleteBox, ButtonSpinner, DomainUpDown, NumericUpDown, TimePicker, UpDownBase, … Layout: Accordion, TransitioningContentControl, … Navigation Theming: ImplicitStyleManager, + thèmes, … (Thème dynamique) Sans compter tous les composants tiers (VisiFire, ComponentArt, DevExpress, Infragistics, …) Démonstration http://silverlight.net/samples/sl3/toolkitcontrolsamples/run/default.html

48. SaveFileDialog Permet de sauver du contenu sur le disque local Récupération d’un Stream pour écriture L’enregistrement ne peut se faire que sur action utilisateur privatevoidsaveButton_Click(objectsender, RoutedEventArgs e) { SaveFileDialogdialog = new SaveFileDialog(); dialog.Filter = "Text files (*.txt)|*.txt|All Files (*.*)|*.*"; dialog.FilterIndex = 1; bool? ret = dialog.ShowDialog(); if (ret == true) { using (Stream fs = (Stream)dialog.OpenFile()) { byte[] content = Encoding.Unicode.GetBytes("Hello World"); fs.Write(content, 0, content.Length); fs.Close(); } } }

49. Local Messaging Communication locale entre plusieurs applications Silverlight Depuis la même instance du navigateur ou autre instance La communication se fait à l’aide de named pipes et de sharedmemory Classes pour les connexions locales: LocalMessageSender (méthode SendAsync) LocalMessageReceiver (événement MessageReceived) Démonstrations BoucingBalls Source: http://blogs.msdn.com/jstegman/archive/2009/03/23/local-messaging-samples.aspx

50. Bitmap/Pixel APIs WriteableBitmap pour générer dynamiquement des images http://www.interact-sw.co.uk/slapps/mandelbrot/ Exemple de code: http://community.irritatedvowel.com/blogs/pete_browns_blog/archive/2009/03/18/Silverlight-3-_1320_-The-Bitmap-API-_2F00_-WriteableBitmap.aspx Pixel Shading pour les effets graphiques DropShadow, Blur, … Démonstration Chroma Key Pixel ShaderSample: http://joestegman.members.winisp.net/Mix09/MoreEffects/

51. Des animations plus naturelles Animations de type « élastique », « balle rebondissante »… Exemples http://www.silverlightshow.net/items/Animation-Easing-in-Silverlight-3.aspx Plus d’infos dans la documentation : http://msdn.microsoft.com/en-us/library/cc189019(VS.96).aspx section “EasingFunctions”

52. HD & Support du RAW Audio/Video Support Audio & Vidéo Haute Qualité H.264/AAC, VC-1/WMA (.M4A) Smooth Streaming, Full HD (720p+) playback Support pour d’autres CODECs via Raw AV Pipeline Support DRM Vidéo en ligne: Roland Garros 2009 en HD: http://roland-garros.france2.fr/?page=videos&type=direct http://silverlight.fr.msn.com/cinema/age-de-glace-3/bande-annonce.aspx http://www.innoveware.com/quakelight.html

53. L’accélération matérielle via le GPU L’activation de l’accélération matérielle se fait grâce au paramètre EnableGPUAcceleration Utile pour les vidéos, les opérations graphiques couteuses, … Fonctionnement: Via DirectX sur PC OpenGLsur MAC QuakeLight: http://www.innoveware.com/ql3/QuakeLight.html Un outil pour mesurer la performance: Xperf http://blogs.msdn.com/seema/archive/2008/10/08/xperf-a-cpu-sampler-for-silverlight.aspx Exemple Sans l’accélération matérielle activée: http://www.andybeaulieu.com/silverlight/3.0/scrollmonster/DisabledGPUAcceleration.html Avec l’accélération matérielle activée: http://www.andybeaulieu.com/silverlight/3.0/scrollmonster/EnabledGPUAcceleration.html

54. Perspective 3D Possibilité de projeter des objects 2D dans un espace 3D Exemple en XAML: <Button Content="Button"> <Button.Projection> <PlaneProjectionRotationY="-40" /> </Button.Projection> </Button> Démonstration: http://blogs.msdn.com/jstegman/archive/2009/03/22/perspective-3d-sample.aspx Documentation: http://msdn.microsoft.com/en-us/library/dd470131(VS.96).aspx

55. Mode déconnecté Out of browser Intégration au menu Démarrer & Bureau Sandbox et stockage local isolé Installation transparente Auto-update Détection de la perte de connexion Démonstration: http://joestegman.members.winisp.net/Mix09/LocalChess/

56. Applications Orientées Données DeepLinking & Search Engine Optimization BindingElement à Element Template de projet VS Silverlight Navigation Application Navigation Framework Frame & Page NavigationService NavigationContext Uri Routing

57. .NET RIA Services (Preview) Réduire la complexité de développement des applications RIA n-Tiers (notamment les application LoB) Framework Outils Services Bénéfices Support end-to-end des applications orientées données Unification des composantes clients et serveurs Productivité accrue Intégration avec les classes « DomainService » et « DomainContext » Récupération des données, mise à jour, … Logique de liaison aux données Documentation http://download.microsoft.com/download/F/B/8/FB8CA635-296B-487F-965C-8148F08B5319/riaservicesoverviewpreview.pdf http://code.msdn.microsoft.com/RIAServices

58. Silverlight et Windows Azure Windows Azure Plateforme de type « Cloud Computing » de Microsoft Eq Amazon EC2, Google AppEngine Enregistrer le type MIME dans la fabrique Exemples Avec stockage de vidéos: http://blogs.msdn.com/jnak/archive/2008/11/05/silverlight-mediaelement-playing-a-video-stored-in-windows-azure-blob-storage.aspx SilverLining: http://azurecoding.net/blogs/icbtw/archive/2008/11/08/silver-lining-for-windows-azure-silverlight-2-sample-hosted-in-azure.aspx http://www.tekigo.com/Downloads/TEKIGO%20-%20Windows%20Azure%20-%20Présentation%20Technologique.pdf

59. Et encore… Silverlight pour Mobile http://silverlight.net/learn/mobile.aspx Windows Mobile 7 Silverlight sur Linux = Moonlight Projet OpenSource Initié par Miguel de Icaza http://www.mono-project.com/Moonlight

60. Silverlight vs. Flash (1/2)

61. Silverlight vs. Flash (2/2)

62. Blend 3 Beta: Outilspour Designers et Développeurs Visual Studio 2008 Expression Blend Expression Design Designers Look, identité visuelle, marque,et connection émotionnelle Développeurs Fonctions, déploiement, données,sécurité, intégrité XAML Fichiers Projet VS

63. Blend 3 SketchFlow Télécharger la preview: http://www.microsoft.com/downloads/details.aspx?FamilyID=A04AA0AE-87BE-4201-A65E-E792859122FC&displaylang=en

64. Silverlight 3 et Visual Studio 2010 Multi-targeting (SL2 ou SL 3) Install Visual Studio 2010 Beta 1 Install Silverlight 2 SDK Install Silverlight 3 Beta SDK Install Silverlight 3 Beta Developer Runtime Pas (encore) de support des .NET RIA Services Designer Silverlight

65. First Look @ Silverlight 3 Introduction téléchargeable en PDF: http://download.microsoft.com/download/3/0/5/3055A230-B06F-4A58-AC93-B7CFD2184A70/FirstLookSL3Moroney.pdf

66. Références Blog de David Rousset http://blogs.msdn.com/davrous Blog de Joe Stegman http://blogs.msdn.com/jstegman Blog de Tim Heuer http://timheuer.com/blog/ Blog de Brad Abrams http://blogs.msdn.com/brada Le site Officiel http://silverlight.net/ Référence MSDN http://msdn.microsoft.com/en-us/library/cc838158(vs.96).aspx Silverlight Toolkit http://www.codeplex.com/Silverlight

67. Merci!