Ateliers Silverlight 2 à l'Epitech

Epitech - Journée Ateliers pratiques Silverlight 2

Christophe LauerChristophe Lauerhttp://blogs.msdn.com/clauer

Pierre LagardePierre Lagardehttp://blogs.msdn.com/pierlag

Rich Interactive ApplicationsLarge audience via déploiement Web

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

Sandboxing garantit la sécurité

Productif sur design et développement

Capitalisation technique (XAML & .NET)Meilleur outillage de l’industrieDesign et développement séparés

Intéractions riches Glisser / DéplacerZoom et VectorielRedimensionnement, translations, rotations, déformations, …Rebonds, tweens, …

Contenus et médias richesAu-delà du texte et des imagesMusique et Vidéo !Vidéo HD 720p

http://www.riactu.fr/index.php/2008/05/06/dfinition-et-quelques-rflexions-sur-les-applications-ria/

Silverlight 1.0 Silverlight 2Enrichissement de sites existants (Media, Vectoriel, Intéractions)

Applications type « RIA » *et* médias riches

Animations, Medias, Transformations, Vectoriel, Events, etc…

Layout, Contrôles, User Controls, LINQ, DataBinding, Isolated Storage, etc…

Développeurs Web et Ajax Aussi et surtout les développeurs d’applications (Web & Windows)

Modèle de développement à la Ajax :Javascript, XAML et DOM

Modèle de développement full .NET :C#, compilation et DLR, Assemblies

Version finalisée, supportée et déployable

Version Bêta 1, pas encore Go-Live!

Fédérer autour du FrameworkFédérer autour du Framework• .NET.NET• LangagesLangages• Classes de la BCLClasses de la BCL

Silverlight permettra demain de Silverlight permettra demain de transformer les transformer les xx millions de millions de développeurs .NET en développeursdéveloppeurs .NET en développeursd’applications RIAd’applications RIA

C’était en 2001 avec .NET 1.0 !

C’était en 2001 avec .NET 1.0 !

Zero DeploymentCross Browser & Cross platformWrite once, Test once

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

La meilleure résolution pour mon application ?

OK pour les archis multi-tiers et orientées servicesMêmes outils, mêmes langagesMêmes développeurs

MacOS X 10.4+Silverlight 1.0 supporte tous hardwaresSilverlight 2 supporte Mac Intel seulement

Idem Mac OSX v.next

Mac OSX entièrement supporté par Microsoft

Distros Linux majeuresRuntime Moonlight implémenté par MonoAccord de coopération avec Microsoft

Accès à la documentation et aux tests unitairesCouverture légale des utilisateurs Mono

Silverlight 1.0 Shipped Sept’07

Silverlight 2March 5th Beta 1 (Non-commercial go-live)June 6th Beta 2 (Public Go-live!)

ToolsExpression Suite and Visual Studio updates for all public Silverlight releasesVisual Studio Designer support (Cider) later this year

• Compatibilité ascendante de 1.0 vers Silverlight 2

• La V2 ajoute .NET à la version V1.0 de Silverlight

Silverlight 2

SilverligSilverlightht1.01.0

UI FrameworkBeta 2 includes improvements in animation support, error handling and reporting, automation and accessibility support, keyboard input support, and general performance.  This release also provides more compatibility between Silverlight and WPF.

Rich ControlsBeta 2 includes a new templating model called Visual State Manager that allows for easier templating for controls. Other features include the introduction of TabControl, text wrapping and scrollbars for TextBox, and for DataGrid additions include Autosize, Reorder, Sort, performance increases and more.  Most controls are now in the runtime instead of packaged with the application. 

Networking SupportBeta 2 includes improved Cross Domain support and security enhancements, upload support for WebClient, and duplex communications (“push” from server to Silverlight client). 

Rich Base Class LibraryBeta 2 includes improved threading abilities, LINQ-to-JSON, ADO.NET Data Services support, better support for SOAP, and various other improvements to make networking and data handling easier. 

Deep ZoomBeta 2 introduces a new XML-based file format for Deep Zoom image tiles, as well as a new MultiScaleTileSource that enables existing tile databases to utilize Deep Zoom. Better, event driven notification for zoom/pan state is another improvement in Silverlight 2 Beta 2. 

Exemples d’applications Silverlight 1.0 et Silverlight 2

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”

Modèle de “code-behind” SilverlightLe code s’exécute dans la pageModifier le code ne change pas le design

Productif sur design et développement

Capitalisation technique (XAML & .NET)Meilleur outillage de l’industrieDesign et développement séparés

Les designers et les développeurs sont différents

Developers work from the inside outward

Démarrer avec Silverlight

Silverlight 2 Bêta 2

Notepad ?Pas de SDK requis, tout est du texte

On peut faire mieux…Silverlight Tools for Visual Studio 2008Expression Blend 2.5 June Preview

Tout le reste est disponible en lignehttp://www.silverlight.net

Whether you are designing rich standards-based websites, ultimate experiences on the desktop, or managing digital assets and content, Expression professional design tools give you the flexibility and freedom to bring your vision to reality.

The professional Web

design tool

The professional Interactive design tool

The professional Graphic

design tool

The professionalAsset Management

tool

Visual Studio Visual Studio 20082008

XAML

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

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

sécurité, intégrité

Fichiers Projet VS

Expression Expression BlendBlend

Expression Expression DesignDesign

Réaliser un “Hello world” avecExpression Blend

XAML

eXtensible Application Markup Language

Langage déclaratifLes outils de développement riches produisent du contenu Texte et XML

Les pages Silverlight peuvent être indexées

<Rectangle /><Ellipse /><Line /><Polygon /><PolyLine /><Path />

XAML 101

o 2D, Graphicso Audio, Vidéo et HDo Animationso Texte, Text Input*o Contrôles*o Layout*o Styles/Templates*o Data Binding*o Networking

o HTTP/S et Sockets*

* Nouveau dans Silverlight 2

o Support .NET*o C# et VB.NET*

o LINQ*o XML APIs*o Generics*o Intégration HTML*

o JSON Serializero Local Storage*o Crypto APIs (AES)*o Threading*

Eléments de UI composables et réutilisables

Silverlight 2 ajoute 20+ contrôles à la toolbox

Silverlight = XAML = UI flexibleCustomiser le look d’une application sans altérer son comportement

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

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

Contrôles Silverlight 2

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

Les 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

Silverlight 2 Bêta 2 étend le networking

HTTP, WS*/SOAP, REST, RSS, JSONSystem.Net.Sockets pour les protocole non-HTTP tels que les serveurs de “chat”

Support des requêtes “Cross domain”crossdomain.xml & clientaccesspolicy.xml

Silverlight looks for two policy files:Silverlight policy: clientaccesspolicy.xmlAdobe Flash policy: crossdomain.xmlAlready used by etc…

All public services that work with Flash – will also work with Silverlight

Databinding

Le Databinding renforce la séparation entre la présentation des données et le code-behind “applicatif”

Avec tout object implémentant IEnumerable

Arrays, Lists, Collections

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

Silverlight 2 introduit de nouveaux layouts

CanvasSurface de dessin avec positionnement relatif

StackPanelEmpile les éléments en vertical ou horizontal

GridColonnes arbitrairement spécifiées

Système de Layout customisableTilePanel, RadialPanel, etc

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 2 comprend System.LINQ et System.LINQ.Expression

Aller plus loin

Mécanismes de customisation en XAML

BrushesSolid, gradient, image, video

TransformationsRotate, scale, skew, translate

Les contrôles utilisateur peuvent exposer des propriétés et évènements “custom”

Les Styles permettent d’externaliser le “look and feel” d’un contrôle

Similaire aux Feuilles de Style en HTML

Style redéfini pour un contrôle ou pour tous ceux d’une application via le fichier App.xaml

Extras

Silverlight 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é

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 seulementAccès en écriture dans le Isolated storage

Au delà de Silverlight

Addressing entities and sets

Presentation options

Entity-set /Bookmarks

Single entity /Bookmarks(123)

Member access /Bookmarks(123)/Name

Link traversal /Bookmarks(123)/Tags

Deep access /Bookmarks(123)/Tags('abc')/Name

Raw value access /Bookmarks(123)/Names/$value

Sorting /Bookmarks?$orderby=Name

Filtering /Bookmarks?$filter=Created gt '2007-05-07'

Paging /Bookmarks?$top=10&$skip=30

Inline expansion /Bookmarks?$expand=Tags

Data Access LayerData Access LayerData Access LayerData Access Layer

Create services directly from Visual Studio

Various data sourcesEntity FrameworkLINQ providers

Model-drivenStructural description in Entity Data ModelMetadata shapes service

Entity Entity FrameworFramewor

kk

Entity Entity FrameworFramewor

kk

Custom Custom LINQ LINQ

providerprovider

Custom Custom LINQ LINQ

providerprovider

Relational

database

Relational

databaseOther

sourcesOther

sources

Service RuntimeService RuntimeService RuntimeService Runtime

Hosting/HTTP listenerHosting/HTTP listenerHosting/HTTP listenerHosting/HTTP listener

HTTPHTTPHTTPHTTP

IQueryable [+ IUpdatable]IQueryable [+ IUpdatable]

Scales Scales without Limitswithout Limits

• SStorage and torage and processing processing scales without scales without restrictionsrestrictions

• Businesses pay only Businesses pay only for for the resources the resources consumedconsumed

Scales Scales without Limitswithout Limits

• SStorage and torage and processing processing scales without scales without restrictionsrestrictions

• Businesses pay only Businesses pay only for for the resources the resources consumedconsumed

Application Application AgilityAgility

• Simple, flexible data Simple, flexible data model model

• REST and SOAP REST and SOAP protocols support protocols support

Application Application AgilityAgility

• Simple, flexible data Simple, flexible data model model

• REST and SOAP REST and SOAP protocols support protocols support

Business Business Ready SLAReady SLA

• Built using robust Built using robust Microsoft Microsoft SQL Server technology SQL Server technology

• SLA for business SLA for business continuitycontinuity

• Highly available, Highly available, reliable reliable and secure and secure

Business Business Ready SLAReady SLA

• Built using robust Built using robust Microsoft Microsoft SQL Server technology SQL Server technology

• SLA for business SLA for business continuitycontinuity

• Highly available, Highly available, reliable reliable and secure and secure

Microsoft® SQL Server® Data Services (SSDS) is aWeb facing data storage and processing utility

Microsoft® SQL Server® Data Services (SSDS) is aWeb facing data storage and processing utility

RIA vs RDA vs RIA on the Desktop ?La “Business logic” est transposable dans les applications Windows applications

Le XAML Silverlight est un subset de celui de WPFLa Base Class Library de Silverlight est un subset de celle du .NET FrameworkCoreCLR exécute le code .NET de la même façon que la CLR en version Desktop

Support des périphériques mobilesWindows Mobile 7 dans un premier tempsNokia a annoncé le support dans SymbianOSSony Ericcson a annoncé Windows Mobile

Provides seamless Viewing & Zooming of huge ImagesLoads only the Data necessary to show the Part of an Image the User is ViewingWhen the image is displayed on the client the lowest resolution tiles are shown firstThen as the higher quality tiles are downloaded, they are smoothly blended in

Deep Zoom Composer breaks image into 256 x 256 tilesThen generates pyramids of tiles at lower resolutionsExport as Deep Zoom Image or CollectionExposed through MultiScaleImage Control

Deep Zoom

http://silverlight.live.comhttp://silverlight.live.com

Hébergement scalable, “on demand” pour les applications Silverlight

Blend

Encoder

RemoteSilverlight

Control & VideoEmbeddedin HTML

LocalSilverlight

Control loadsRemoteVideo

SilverlightApplicationEmbeddedin HTML as

<iframe>

Windows HTAApplication

SilverlightApplication

SilverlightVideo Asset (VC-1)

http://silverlight.live.comhttp://silverlight.live.com

© 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.