Frédéric Queudret – CEO/CTOMPOWAREhttp://www.mpoware.com http://blogs.codes-sources.com/mpoware/

Silverlight 3 BêtaPrésentation EPITA 10/11 juin 2009

MpowareSociété d’édition de logiciels et prestation de services

Partenaire Microsoft & de l’Agile Training Centerhttp://msdn.microsoft.com/fr-fr/architecture/default.aspx

Experts & Architectes .NETFrédéric QUEUDRET – SCIA ’96

Fondateur de la société MpowareEx-Architecte du Microsoft Technology Center & MVP Client App DevLinkedIn: http://www.linkedin.com/profile?viewProfile=&key=1794819&trk=tab_pro Articles Programmez.com 2009

Le développeur Agile / Dossier MéthodologiesLa sécurité appliquée à .Net / Dossier Hacking, sécuriser votre codeDé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

[11/06: 10h00 – 12h30] Agenda

Présentation HistoriqueArchitectureLes principes de SilverlightNouveautés de Silverlight 3.0Comparatif avec Flash, Moonlight

Beaucoup de démonstrations!!!

Silverlight: PrésentationPlug-in cross-browsers & cross platform

Windows, MacOS X, Linux via Moonlight*IE, Firefox, Safari, Konqueror*

Pour une nouvelle génération d’applicationsRich Internet Applications – RIANouvelles expériences Media (Vidéo…)

Avec les mêmes principes que .NETXAML (« à la » WPF) pour une séparation du Design et du DéveloppementBase 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

DÉMOS DE SILVERLIGHT

Exemples d’applications en ligne …

SEAT Brochure commerciale en ligne (SL2): http://www.seat.co.uk/exeo/pagelife/ Jeu (SL2): http://www.joerassic.ch/ e-Commerce (SL2): http://www.lejardindelydie.com/ Publicité (SL2): http://streaming.live.com/ Accès aux ressources locales (SL3): http://smjenkins.members.winisp.net/slidentity/default.html

AOL Mail RIA

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

K2 blackpoint

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

Historique

JOLT – WPF/e

Silverlight 1.0

Silverlight 2

Silverlight 3 Beta

2006 - 2008

2007 - 2009

MIX 2009

[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…

Source: http://www.generation-nt.com/silverlight-3-haute-definition-3d-flash-actualite-190551.html

Architecture de Silverlight

Poster Silverlight 2

Poster DeepZoom: http://joestegman.members.winisp.net/DeepZoom/

Où se place Silverlight ?

@Database

Layer

Integration Layer

Business Logic Layer

Presentation Layer

PHP

ASP.NET

SharePoint

Service Layer

SOAP, JSON, REST, …

.NET RIA Services

Client Layer

(Browser ou

Mode Out-of-

browser)

HTML

Ajax

Silverlight

Silverlight Blueprint for SharePoint: http://msdn.microsoft.com/en-us/sharepoint/cc303301.aspx

Navigateurs supportés par SilverlightSilverlight: 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

Operating System Windows Internet Explorer 7

Internet Explorer 6

Firefox 1.5, 2, 3

Safari

Windows Vista

Yes - Yes - Windows Server 2008

Windows 7 (beta)

Windows XP SP2 Yes Yes Yes -

Windows 2000 SP4 + all post - SP4 hotfixes, updates, and security updates

- Yes - -

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

Personal Computer running Windows X86 or x64 500 - megahertz (MHz) or higher processor with

128 - megabytes (MB) of RAM

Mac OS 10.4.8+ (Intel - based)

Intel Core Duo 1.83 - gigahertz (GHz) or higher processor with 128 - MB of RAM

EXEMPLE D’UN PROJET SILVERLIGHT

XAML Code-behind Contrôles Isolated Storage … Les samples du SDK Browser: http://go.microsoft.com/fwlink/?LinkId=139798

Développer pour Silverlight 3Plugin Silverlight 3 pour les développeurs

http://go.microsoft.com/fwlink/?linkid=143433Le SDK de Silverlight 3 Bêta 1La documentation du framework Silverlight 3Expression Blend 3 preview

http://www.microsoft.com/expression/try-it/blendpreview.aspx Package complet : Silverlight 3 Tools for Visual Studio 2008 SP1Visual Studio 2008 SP1

Attention aux développements Silverlight 2http://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!

Test.htm

XAP (prononcer ZAP)Fichier de déploiement d’un application Silverlight

Format ZIPGénéré par l’outil Chiron.exe

CompresséPour de meilleures performances

Ce fichier contient tous les éléments nécessaires à l’applicationPour utiliser les fichiers XAP, il faut rajouter un type mime à IIS (ou autre serveur Web)

Xap: application/x-silverlight-appEn standard dans Windows Server 2008

Contenu:Les assemblies compiléesLe fichier AppManifest.xamlLes 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

XAML

XAML est un langage déclaratif à base de tagsUtilisé pour définir l’interface d’une application SilverlightMainPage.xaml dans un nouveau projet Visual Studio

Un layout Grid 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);

Layout

Disposition des éléments graphiques de l’IHMPlusieurs possibilités

GridStackPanelCanvasDockPanelWrapPanel…

Contrôles

Silverlight 3 étend le nombre de contrôles natifsVoir Silverlight Toolkit

Template d’affichage par défautCustomiser le look d’une application sans altérer son comportement

Styling (Styles)Changements visuels légers sur un élément (Fonte, Couleur de fond, etc)

Skinning (Control Templates)Remplacer tout l’arbre visuel d’un Elément

Contrôles et Thèmes Visuels

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

Le code

Support des langages .NET (C# ou Visual Basic)Fichiers code-behind avec extension du langage

Exemple: MainPage.xaml.csUtilisé pour coder la logique applicativeModèle de programmation événementiel

Event handlersLes Event handlers connectent les actions aux contrôles

Déclarés dans le XAML ou bien au runtime dans le code-behind en C# au Page_Loaded

DatabindingLe Databinding renforce la séparation entre la présentation des données et le code-behind « applicatif »

Avec tout objet implémentant IEnumerableArrays, Lists, Collections

DataTemplates contrôlent la présentationBinding uni- ou bi-directionnel

LINQ

Language INtegrated Query apporte des capacités de requêtage natives à .NET

Requêter, projeter et filtrer des données issues de multiples sourcesMixé avec le code C#, VB, etc

Silverlight comprend System.LINQ et System.LINQ.Expression

Intégration HTMLSilverlight permet la manipulation du DOM HTML et l’intégration JavaScript

Propose des « managed wrappers » pour le DOM et les éléments JSSilverlight peut invoquer JS, JS peut invoquer du code managé

Accès aux fichiers locaux

Silverlight peut prompter pour accéder à des fichiers locaux

Pas besoin d’upload vers le serveurContraintes de sécurité

Fichiers ouverts en mode read-only seulementAccès en écriture dans le Isolated storage

Open File Dialog

Large choix d'options réseauSilverlight étend le networking

HTTP, WS*/SOAP, REST, RSS, JSONSystem.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

Deep Zoom

Permet de zoomer sur des images de grandes dimensionsChargement optimisé des parties visibles

De basse résolution vers haute résolution

Deep Zoom

Deep Zoom Composer découpe les images en parties de 256 x 256 Puis génère une pyramide d’images de différentes résolutionsAffichage via le contrôle MultiScaleImage

EXEMPLE D’APPEL À UN WEB SERVICE

Creating a Silverlight-Enabled WCF Servicehttp://reddevnews.com/articles/2009/05/20/creating-a-silverlight-enabled-wcf-service.aspx

Cross-Domain Policy Files

Silverlight supporte les requêtes « cross-domain »:Silverlight policy: clientaccesspolicy.xmlAdobe Flash policy: crossdomain.xmlDéjà utilisés par: etc…

Tous les sites publics, qui fonctionnent avec Flash, fonctionnent avec SilverlightClientaccesspoilicy.xml vs. Crossdomain.xml

http://community.dynamics.com/blogs/cesardalatorre/comments/9579.aspx

Cross Domain Policy Flow

Sécurité Silverlight

Applications « Sandboxées »Pas d’élévation de privilèges ni de prompts de sécurité (ActiveX) — juste un clic sur URLApplications incapables de réaliser des actions malicieuses

Interactions locales limitées« Safe isolated storage »Contrôle de file upload clientSupporte les requêtes « Cross domain »

Quels bénéfices avec Silverlight ?

Zero DeploymentCross Browser & Cross platformWrite once, Test once

Limite : Interactions avec le browserTirer parti de la puissance du clientBasé sur un moteur vectoriel graphique 2D

La meilleure résolution pour mon application ?Architectures multi-tiers et orientées servicesMêmes outils, mêmes langagesMêmes développeurs !

LES NOUVELLES FONCTIONNALITÉS DE SILVERLIGHT 3.0

http://silverlight.net/samples/sl3/toolkitcontrolsamples/run/default.html

+ de 60 contrôlesContrôles: Calendar, ChildWindow, DatePicker, DockPanel, Expander, GridSplitter, TabControl, TreeView, ViewBox, WrapPanel, …Données: DataForm, DataPager, Validation, DataGrid, …Charting: Area / Bar / Bubble / Column / Line / Pie / Scatter Series, …Input: AutoCompleteBox, ButtonSpinner, DomainUpDown, NumericUpDown, TimePicker, UpDownBase, …Layout: Accordion, TransitioningContentControl, …NavigationTheming: ImplicitStyleManager, + thèmes, … (Thème dynamique)Sans compter tous les composants tiers (VisiFire, ComponentArt, DevExpress, Infragistics, …)

Démonstrationhttp://silverlight.net/samples/sl3/toolkitcontrolsamples/run/default.html

SaveFileDialog Permet de sauver du contenu sur le disque local Récupération d’un Stream pour écritureL’enregistrement ne peut se faire que sur action utilisateur

private void saveButton_Click(object sender, RoutedEventArgs e) { SaveFileDialog dialog = 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(); } } }

Local MessagingCommunication locale entre plusieurs applications SilverlightDepuis la même instance du navigateur ou autre instanceLa communication se fait à l’aide de named pipes et de shared memoryClasses pour les connexions locales:

LocalMessageSender (méthode SendAsync)LocalMessageReceiver (événement MessageReceived)

DémonstrationsBoucing BallsSource: http://blogs.msdn.com/jstegman/archive/2009/03/23/local-messaging-samples.aspx

Bitmap/Pixel APIsWriteableBitmap 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 graphiquesDropShadow, Blur, …

Démonstration Chroma Key Pixel Shader Sample:http://joestegman.members.winisp.net/Mix09/MoreEffects/

Des animations plus naturellesAnimations 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 “Easing Functions”

HD & Support du RAW Audio/Video

Support Audio & Vidéo Haute QualitéH.264/AAC, VC-1/WMA (.M4A)Smooth Streaming, Full HD (720p+) playbackSupport pour d’autres CODECs via Raw AV PipelineSupport 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.aspxhttp://www.innoveware.com/quakelight.html

L’accélération matérielle via le GPUL’activation de l’accélération matérielle se fait grâce au paramètre EnableGPUAccelerationUtile pour les vidéos, les opérations graphiques couteuses, …Fonctionnement:

Via DirectX sur PCOpenGL sur 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

ExempleSans l’accélération matérielle activée: http://www.andybeaulieu.com/silverlight/3.0/scrollmonster/DisabledGPUAcceleration.htmlAvec l’accélération matérielle activée: http://www.andybeaulieu.com/silverlight/3.0/scrollmonster/EnabledGPUAcceleration.html

Perspective 3DPossibilité de projeter des objects 2D dans un espace 3D

Exemple en XAML:<Button Content="Button">

<Button.Projection> <PlaneProjection RotationY="-40" />

</Button.Projection> </Button>

Démonstration: http://blogs.msdn.com/jstegman/archive/2009/03/22/perspective-3d-sample.aspxDocumentation: http://msdn.microsoft.com/en-us/library/dd470131(VS.96).aspx

Mode déconnectéOut of browserIntégration au menu Démarrer & BureauSandbox et stockage local isoléInstallation transparenteAuto-updateDétection de la perte de connexionDémonstration: http://joestegman.members.winisp.net/Mix09/LocalChess/

Applications Orientées Données

Deep Linking & Search Engine OptimizationBinding Element à ElementTemplate de projet VS Silverlight Navigation ApplicationNavigation Framework

Frame & PageNavigationServiceNavigationContextUri Routing

.NET RIA Services (Preview)Réduire la complexité de développement des applications RIA n-Tiers (notamment les application LoB)

FrameworkOutilsServices

BénéficesSupport end-to-end des applications orientées donnéesUnification des composantes clients et serveursProductivité accrue

Intégration avec les classes « DomainService » et « DomainContext »

Récupération des données, mise à jour, …Logique de liaison aux données

Documentationhttp://download.microsoft.com/download/F/B/8/FB8CA635-296B-487F-965C-8148F08B5319/riaservicesoverviewpreview.pdfhttp://code.msdn.microsoft.com/RIAServices

Silverlight et Windows AzureWindows Azure

Plateforme de type « Cloud Computing » de MicrosoftEq Amazon EC2, Google AppEngine

Enregistrer le type MIME dans la fabrique

http://www.tekigo.com/Downloads/TEKIGO%20-%20Windows%20Azure%20-%20Présentation%20Technologique.pdf

ExemplesAvec stockage de vidéos: http://blogs.msdn.com/jnak/archive/2008/11/05/silverlight-mediaelement-playing-a-video-stored-in-windows-azure-blob-storage.aspxSilverLining: http://azurecoding.net/blogs/icbtw/archive/2008/11/08/silver-lining-for-windows-azure-silverlight-2-sample-hosted-in-azure.aspx

Et encore…

Silverlight pour Mobilehttp://silverlight.net/learn/mobile.aspxWindows Mobile 7

Silverlight sur Linux = Moonlight

Projet OpenSourceInitié par Miguel de Icazahttp://www.mono-project.com/Moonlight

Silverlight vs. Flash (1/2) 

Silverlight Flash

Plateformes Windows Vista/XP/2000, Windows Server 2003/2008, Windows Mobile 6, Mac OS 10.1/10.5 (PowerPC) and Mac OS 10.1/10.5 (Intel)

Windows Vista/XP/2000, Windows Server 2003/2008, Mac OS 10.1/10.5 (PowerPC), Mac OS 10.1/10.5 (Intel), Linux 5, openSUSE 11, Ubuntu 7.10 or later and Solaris 10

Linux Moonlight Linux 5, openSUSE 11, Ubuntu 7.10 or later and Solaris 10

Audio / Vidéo WMV, WMA and MP3 FLV

Animation Time-based animation (begin/end) Frame-based Animation

Sound processing

No Audio APIs Control du son via ActionScript

Formats d’image

PNG, Gif & JPEG Tout format

Debugging Facile (via VS) Difficile

Polices True type en ressource du XAP Complexe

Silverlight vs. Flash (2/2) 

Silverlight Flash

Programmation Réseau

Communication asynchrone & cross-domain, serveur ou autre instance

XMLSocket pour communication Server

IDE Visual Studio 2008 Adobe Flex Builder 3

Langages Javascript, VB.NET, C#, langages dynamiques (IronPython, IronRuby, Managed Jscript)

Action Script

Applications d’entreprise

WCF, LINQ Flash peut lire des sources de données XML ou texte depuis des URLs

Déploiement XAP SWF

Indexable Oui En partie

…

Toute la liste: http://silverlight.net/forums/t/3015.aspx

Tester: http://www.shinedraw.com/flash-vs-silverlight-gallery/

Blend 3 Beta: Outils pour Designers et Développeurs

Visual Studio 2008

XAML

DesignersLook, identité visuelle, marque,et connection émotionnelle

DéveloppeursFonctions, déploiement, données,

sécurité, intégrité

Fichiers Projet VS

Expression Blend

Expression Design

Blend 3 SketchFlow

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

Silverlight 3 et Visual Studio 2010Multi-targeting (SL2 ou SL 3)

Install Visual Studio 2010 Beta 1Install Silverlight 2 SDKInstall Silverlight 3 Beta SDKInstall Silverlight 3 Beta Developer Runtime

Pas (encore) de support des .NET RIA ServicesDesigner Silverlight

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

RéférencesBlog de David Rousset

http://blogs.msdn.com/davrousBlog de Joe Stegman

http://blogs.msdn.com/jstegman Blog de Tim Heuer

http://timheuer.com/blog/ Blog de Brad Abrams

http://blogs.msdn.com/bradaLe site Officiel

http://silverlight.net/Référence MSDN

http://msdn.microsoft.com/en-us/library/cc838158(vs.96).aspx

Silverlight Toolkithttp://www.codeplex.com/Silverlight

MERCI!