Première CTP le 4 décembre Nouvelle CTP depuis le 1 er février RTM milieu de cette année

Dick LantimExpérience Utilisateur et Ecosystèmedicklant@microsoft.com Microsoft France

WPF/E

INTRODUCTION

« WPF/e » est le nom de code d’une solution navigateur

cross-plateforme basée sur XAML qui améliore les présentations à base

de contenu riches (2d, animation, dessin vectorielle, video et audio) en

complément du code HTML.

Définition

Démos

Première CTP le 4 décembreNouvelle CTP depuis le 1er févrierRTM milieu de cette année

Roadmap

A terme, WPF/e sera aussi disponible sur Smartphone et PDA

Les navigateurs et OS supportés

Déploiement dans IEPlugin de type ActiveX~1MB

Déploiement dans Firefox et SafariPlugin de type Netscape~1MB sous Windows~2MB sous Macintosh (PowerPC et Intel)

Le mécanisme de déploiement

XAML est utilisé pour le renduPossibilité de charger du code XAML à la voléeCouplage fort avec javascript (HTML et AJAX)

Définition des événementsDéfinition de la logique applicative

Support du code IL pour la V2Le moteur « Telesto » supportera C# et VB.NETD’autres langages seront supportés…

Le code WPF/e s’exécute dans une SandboxImpossibilité d’accéder à des ressources locales

Mode full screen supporté

Les particularités

Browser Application / OS

ContentPackage XAML

ProgrammingModel

“WPF/E” Runtime

Plug-insPlug-ins Platform SpecificHosting ModelPlatform SpecificHosting Model

JavaScript

C# / VB.NET

Native API

XML - DataFonts Video/AudioImages

Native “WPF/E” APINative “WPF/E” API

UI & Rendering CoreUI & Rendering Core

Platform Abstraction LayerPlatform Abstraction Layer

Architecture de WPF/e

Le noyau de WPF/e

Core Runtime

Media Integration LayerMedia Integration Layer

AudioAudio VideoVideo

Composition EngineComposition Engine

Base ServicesBase Services

XML/XAML ParserXML/XAML Parser

AccessibilityAccessibility

Property SystemProperty System

Input and Eventing

Input and Eventing

TextText

ImagingImaging

2D2D

Animation

Animation

Other ServicesOther Services

Core ControlsCore Controls

Basic LayoutBasic Layout

Container Controls

Container Controls

WPF/e != WPFRuntime, librairie de base et espace de nom différents

Empreinte mémoire différente WPF = .NET 3.0 = 60Mo WPF/e = 2Mo max

Fausse idée

L

Analogies entre WPF/e et WPF

J

La syntaxe XAMLinstanciation d’objetsnotions de propriété simple et attachée

La plupart des concepts de WPFtechnique de tracés, animation et composants

Les outils l’intégration avec les graphistes l’expérience des développeurs

Pas de notion de styles et de templatesPas de notion de ressourcesPas de flowdocument Les composants de WPF…

Absences dans WPF/e

L

LE MODÈLE DE DÉVELOPPEMENT

La structure d’une application

HTML

Contrôle WPF/e

Code javascript

Site Web

XAML

Audio/Video

Code javascript

Instanciation spécifique à chaque navigateurUn script d’instanciation universel disponible

aghost.js est un code cross plateforme

Possibilité d’utiliser les extenders ASP.NET Ajax 1.0

Le plugin WPF/e

ActiveX sous Windows

Script générique aghost.js

Exemples d’instanciation

<DIV id="wpfeControl1Host" style="width:900; height:710; background:White"> <SCRIPT type="text/javascript"> new agHost("wpfeControl1Host“, // hostElementID (HTML element to put WPF/E

// ActiveX control inside of -- usually a <div>) "wpfobj", // ID of the WPF/E ActiveX control we create

"900", // Width"710", // Height"#ffB42600", // Background colornull, // SourceElement (name of script tag containing xaml)"xaml/MainPage.xaml", // Source file"false", // IsWindowless"24", // MaxFrameRatenull); // OnError handler (method name -- no quotes)

</SCRIPT></DIV>

<object id="wpfobj" width="900" height="710" classid="CLSID:32C73088-76AE-40F7-AC40-81F62CB2C1DA" <param name="BackgroundColor" value="#ffB42600" /> <param name="SourceElement" value=null /> <param name="Source" value="xaml/MainPage.xaml" /> <param name="WindowlessMode" value= "false" /> <param name="MaxFrameRate" value= "24" /> <param name="OnError" value= "null" /> </object>

<div/> obligatoire

Exprime des tracés de basePath, Line, Clipping, etc.

Instancie et manipule des objetsImage, Rectangle, Ellipse, etc.

Manipule les opérations de transformation

RotateTransform, ScaleTransform, SkewTransform et TranslateTransform

Manipule les animationsTrigger, Storyboard, etc.

Le langage de XAML pour WPF/e

Exemple de code XAML

<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="Untitled2"> <Canvas x:Name="Layer_1" Width="900" Height="710">

<Ellipse x:Name="Ellipse" Width="582" Height="534" Canvas.Left="156" Canvas.Top="96" Stretch="Fill" StrokeThickness="6" >

<Ellipse.Fill><LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5"><LinearGradientBrush.GradientStops><GradientStop Color="#FF000000" Offset="0"/><GradientStop Color="#FFFFFFFF" Offset="1"/></LinearGradientBrush.GradientStops></LinearGradientBrush>

</Ellipse.Fill></Ellipse>

</Canvas></Canvas>

Espace de nom de WPF/e

Démos

•Expression Web•Projet minimal WPF/e

ÉVÉNEMENTS, ANIMATION ET MEDIA

Le DOM de la page HTML est accessible au code WPF/e

Le DOM du code WPF/e est accessible au code javascript

Une histoire de DOM

Evenements exposés par WPF/ecycle de vie d’une application clavier et focus curseuractions de la souris États du composant MediaElement

Le modèle événementiel

V1 : Evénements en javascriptV2 : Les langages C# et VB.NET

<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Loaded="javascript:onMainPageLoaded"> <Ellipse x:Name="MyEllipse“ Height="200" Width="200“ Canvas.Left="10“ Canvas.Top="10“ Fill="Blue"/></Canvas>

function onMainPageLoaded(sender, eventArgs) { ellipse1 = sender.findName("MyEllipse"); ellipse1.Fill = "Red"; ellipse1.mouseLeftButtonDown = "javascript:hdleEllipseClick";}

function hdleEllipseClick(sender, eventArgs) { alert("On clique sur moi !");}

Implémentation d’un événement

Une animation est définie par un StoryboardUn Storyboard est déclenché par un triggerProblème : un seul trigger disponible !

Loaded du composant

Astuce : Définir plusieurs Storyboard avec un BeginTime=« 1 »Dans les événements rechercher un StoryboardAppeler la méthode Begin du Storyboard

Les animations

ComposantsImage et MediaElement

Plusieurs formats supportésImage : jpg, gif, png ?Audio : Windows Media Audio, Mp3Vidéo : Windows Media Video

2 modes d’accès pour la vidéoVidéo streamingProgressif download

La gestion des médias

Démos

•Evénement, animation et média

WPF/E ET LES OUTIS

L’assistant VS disponible dans le SDK de WPF/eNécessite le plugin de projet ASP.NET

Avantages de VS Coloration syntaxique pour la page HTML, ASP.NET et le code XAMLPossibilité de débogage

L’environnement Visual Studio

Expression WebGestion du site (css, pages HTML, ASP.NET) et du code javascript

Expression Design Génère des visuels WPF/e

Expression Blend Aide à la constitution des animations en V1À terme, supportera les applications WPF/e

Expression Media Encoder Génère des applications WPF/e pour la vidéo

Expression Studio

Démos

•Expression Media Encoder

MERCI

La référence technique

pour les IT Pros :technet.microsoft.com

La référence technique

pour les développeurs :

msdn.microsoft.com

S’informer - Un portail d’informations, des événements, une newsletter bimensuelle personnalisée

Se former - Des webcasts, des articles techniques, des téléchargements, des forums pour échanger avec vos pairs

Bénéficier de services - Des cursus de formations et de certifications, des offres de support technique

Visual Studio 2005 +

Abonnement MSDN Premium

Abonnement TechNet Plus :

Versions d’éval + 2 incidents support

© 2007 Microsoft France

Votre potentiel, notre passion TM