View
111
Download
0
Category
Preview:
Citation preview
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
Recommended