68
Epitech - Journée Ateliers pratiques Silverlight 2 Christophe Lauer Christophe Lauer http://blogs.msdn.com/clauer Pierre Lagarde Pierre Lagarde http://blogs.msdn.com/ pierlag

Ateliers Silverlight 2 à l'Epitech

Embed Size (px)

DESCRIPTION

Présentation utilisée lors de la journée d'ateliers techniques sur Silverlight 2 à l'Epitech le 19 Juin 2008 - Pierre Lagarde et Christophe Lauer - (c) Microsoft France

Citation preview

Page 1: 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

Page 2: Ateliers Silverlight 2 à l'Epitech

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

Page 3: Ateliers Silverlight 2 à l'Epitech

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/

Page 4: Ateliers Silverlight 2 à l'Epitech

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!

Page 5: Ateliers Silverlight 2 à l'Epitech

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 !

Page 6: Ateliers Silverlight 2 à l'Epitech

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

Page 7: Ateliers Silverlight 2 à l'Epitech

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

Page 8: Ateliers Silverlight 2 à l'Epitech

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

Page 9: Ateliers Silverlight 2 à l'Epitech
Page 10: Ateliers Silverlight 2 à l'Epitech

• Compatibilité ascendante de 1.0 vers Silverlight 2

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

Silverlight 2

SilverligSilverlightht1.01.0

Page 11: Ateliers Silverlight 2 à l'Epitech

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. 

Page 12: Ateliers Silverlight 2 à l'Epitech

Exemples d’applications Silverlight 1.0 et Silverlight 2

Page 13: Ateliers Silverlight 2 à l'Epitech

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”

Page 14: Ateliers Silverlight 2 à l'Epitech

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

Page 15: Ateliers Silverlight 2 à l'Epitech

Les designers et les développeurs sont différents

Page 16: Ateliers Silverlight 2 à l'Epitech

Developers work from the inside outward

Page 17: Ateliers Silverlight 2 à l'Epitech

Démarrer avec Silverlight

Page 18: Ateliers Silverlight 2 à l'Epitech

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

Page 19: Ateliers Silverlight 2 à l'Epitech

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

Page 20: Ateliers Silverlight 2 à l'Epitech

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

Page 21: Ateliers Silverlight 2 à l'Epitech

Réaliser un “Hello world” avecExpression Blend

Page 22: Ateliers Silverlight 2 à l'Epitech
Page 23: Ateliers Silverlight 2 à l'Epitech
Page 24: Ateliers Silverlight 2 à l'Epitech

XAML

Page 25: Ateliers Silverlight 2 à l'Epitech

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

Page 26: Ateliers Silverlight 2 à l'Epitech

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

Page 27: Ateliers Silverlight 2 à l'Epitech

XAML 101

Page 28: Ateliers Silverlight 2 à l'Epitech

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*

Page 29: Ateliers Silverlight 2 à l'Epitech

Eléments de UI composables et réutilisables

Silverlight 2 ajoute 20+ contrôles à la toolbox

Page 30: Ateliers Silverlight 2 à l'Epitech
Page 31: Ateliers Silverlight 2 à l'Epitech

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

Page 32: Ateliers Silverlight 2 à l'Epitech
Page 33: Ateliers Silverlight 2 à l'Epitech
Page 34: Ateliers Silverlight 2 à l'Epitech

Contrôles Silverlight 2

Page 35: Ateliers Silverlight 2 à l'Epitech

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

Page 36: Ateliers Silverlight 2 à l'Epitech

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

Page 37: Ateliers Silverlight 2 à l'Epitech

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

Page 38: Ateliers Silverlight 2 à l'Epitech

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

Page 39: Ateliers Silverlight 2 à l'Epitech

Databinding

Page 40: Ateliers Silverlight 2 à l'Epitech

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

Page 41: Ateliers Silverlight 2 à l'Epitech

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

Page 42: Ateliers Silverlight 2 à l'Epitech

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

Page 43: Ateliers Silverlight 2 à l'Epitech

Aller plus loin

Page 44: Ateliers Silverlight 2 à l'Epitech

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”

Page 45: Ateliers Silverlight 2 à l'Epitech

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

Page 46: Ateliers Silverlight 2 à l'Epitech
Page 47: Ateliers Silverlight 2 à l'Epitech
Page 48: Ateliers Silverlight 2 à l'Epitech
Page 49: Ateliers Silverlight 2 à l'Epitech

Extras

Page 50: Ateliers Silverlight 2 à l'Epitech

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é

Page 51: Ateliers Silverlight 2 à l'Epitech

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

Page 52: Ateliers Silverlight 2 à l'Epitech
Page 53: Ateliers Silverlight 2 à l'Epitech

Au delà de Silverlight

Page 54: Ateliers Silverlight 2 à l'Epitech

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

Page 55: Ateliers Silverlight 2 à l'Epitech

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]

Page 56: Ateliers Silverlight 2 à l'Epitech

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

Page 57: Ateliers Silverlight 2 à l'Epitech

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

Page 58: Ateliers Silverlight 2 à l'Epitech

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

Page 59: Ateliers Silverlight 2 à l'Epitech

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

Page 60: Ateliers Silverlight 2 à l'Epitech

Deep Zoom

Page 61: Ateliers Silverlight 2 à l'Epitech

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

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

Page 62: Ateliers Silverlight 2 à l'Epitech

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

Page 63: Ateliers Silverlight 2 à l'Epitech
Page 64: Ateliers Silverlight 2 à l'Epitech
Page 65: Ateliers Silverlight 2 à l'Epitech
Page 66: Ateliers Silverlight 2 à l'Epitech
Page 67: Ateliers Silverlight 2 à l'Epitech
Page 68: Ateliers Silverlight 2 à l'Epitech

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