Développement Web Développement Web en 2007en 2007

Christophe Lauer Christophe Lauer http://blogs.msdn.com/clauerhttp://blogs.msdn.com/clauer

Pierre Lagarde Pierre Lagarde http://blogs.msdn.com/pierlaghttp://blogs.msdn.com/pierlag

AgendaAgenda

• Positionnement de Silverlight• Les bases avec Silverlight 1.0• Les nouveautés pour développement Web

avec Silverlight 1.1• Langages dynamiques• PopFly• Silverlight avec Mono

Beaucoup à dire…Beaucoup à dire…

Choix et arbitrages… mais :

- TechDays 2007 : http://tinyurl.com/2yh868

- Mini Mix 2007 : http://tinyurl.com/3b9ogb

Please Welcome our Guest!Please Welcome our Guest!

• Miguel de Icaza, Mono Project Lead, Novell.

Pourquoi SilverlightPourquoi Silverlight• Avoir une interface riche dans une application

Web– Graphiques vectoriels– Des médias– Un moteur d’animation

• Intégration facile avec les sites web existants– Intégration sur une simple page HTML

• Exécution multi navigateur / multi plate forme– IE, FireFox, Safari– Windows, Macintosh (Intel – PPC)

Pourquoi Silverlight (suite)Pourquoi Silverlight (suite)• Intégration parfaite Design / Développeur

Les 3 scénarii de baseLes 3 scénarii de base• Scénario Média

– Codecs supportés• WMA, MP3 et WMV

– HTTP progressive download• Fonctionne avec tous les serveurs web

– Streaming– Supporte le 720 HD vidéo plein écran

• Contenu dynamique et intéractif– Interface vectorielle et animée– Langage de description d’interface en XML (XAML)

• RIA (Rich Internet Application) : futur

Rich Internet Application (RIA)Rich Internet Application (RIA)• Non supporté dans la CTP• Contrôles Riches

– Contrôles de base• Textbox, Bouton• ListView, Grille• Scrollbar, etc…

– Databinding– Positionnement par Layout

• Contrôles basés sur le Silverlight 1.1– écrits en .NET

Légende

v1.1Légende

v1.0XAML

Networking

JSON

REST POXRSS

DataLINQ XLINQ

DLRRuby Python

WPFExtensible Controls

BCLGenerics Collections

InputsKeyboardMouse Ink

MediaVC1 WMA MP3

Browser Host

MS AJAX Library

DOM Integration

UI Core

Images

Vector Text

Animation

DRM

MediaControls

Layout Editing

CLR Execution Engine

Deploy

Friction-Free Installer

Auto-Updater

ApplicationServices

SOAP

Silverlight 1.0 BêtaSilverlight 1.0 Bêta

Comment fonctionne Silverlight ?Comment fonctionne Silverlight ?• Silverlight est un contrôle qui s’installe dans IE et

un plug-in dans Firefox et Safari

• Silverlight 1.0 se programme en Javascript, classiquement comme pour Ajax– Les éléments HTML et du DOM XAML peuvent être

manipulés dans le même bloc de code• Le contenu Silverlight peut être intégré à

n’importe quel élément conteneur HTML (ie DIV) dans une document HTML

• Les contrôles HTML peuvent se superposer au contenu Silverlight

Script de chargementScript de chargement

function createSilverlight(){

var scene = new UntitledProject2.Scene();Sys.Silverlight.createObjectEx({

source: "Scene.xaml",parentElement: document.getElementById("SilverlightControlHost"),id: "SilverlightControl",properties: {

width: "100%",height: "100%",version: "0.9"

},events: {

onLoad: Sys.Silverlight.createDelegate(scene, scene.handleLoad)

}});

}

<div id="SilverlightControlHost" class="silverlightHost"><script type="text/javascript">

createSilverlight();</script>

</div>

Exemple de XAMLExemple de XAML

• Par exemple :<Canvas xmlns="..."<Canvas xmlns="..." xmlns:x="...">xmlns:x="..."> <Rectangle Width="200" Height="150" Fill="Blue" /><Rectangle Width="200" Height="150" Fill="Blue" /> <Ellipse Width="200" Height="150" Stroke="Orange" /><Ellipse Width="200" Height="150" Stroke="Orange" /></Canvas></Canvas>

Dessiner / Designer avec XAMLDessiner / Designer avec XAML

• Vocabulaire de base des éléments XAML– Canvas– Brush– Formes de base

• Rectangle, Ellipse, Line, Polygon, PolyLine, Path, etc…– TextBlock– Image

CanvasCanvas

• Est une surface de dessin• Les enfants ont des positions relatives

<Canvas Width="250" Height="200"><Canvas Width="250" Height="200">

<Rectangle Canvas.Top="25" Canvas.Left="25" <Rectangle Canvas.Top="25" Canvas.Left="25" Width="200" Height="150" Fill=“Yellow" />Width="200" Height="150" Fill=“Yellow" />

</Canvas></Canvas>

CanvasCanvasRectangleRectangle

Integration des MédiasIntegration des Médias• <MediaElement />

– Utilisé pour afficher des médias musique ou vidéo• Contrôle de la vidéo par code• Pas de contrôles standards – Vous construisez votre interface en XAML !

– Conventions de nommage • playButton, stopButton,

pauseButton, …• volumeDownButton, …

<Canvas xmlns="..."<Canvas xmlns="..." xmlns:x="...">xmlns:x="..."> <MediaElement <MediaElement Source=“silverlight.wmv" /> Source=“silverlight.wmv" /> </Canvas></Canvas>

Accéder à Silverlight via JavaScriptAccéder à Silverlight via JavaScript

• Utiliser le classique document.getElementById() du nabigateur pour retrouver le contrôle Silverlight dans une page :

• Ou bien le $get() de ASP.NET AJAX :

var control = var control = document.getElementById(“SilverlightControl”); document.getElementById(“SilverlightControl”);

var control = $get(“SilverlightControl”); var control = $get(“SilverlightControl”);

Retrouver un objet XAML en JavascriptRetrouver un objet XAML en Javascript• Utilisation de la méthode findName(<Name>)

var sControl = var sControl = document.getElementById(“SilverlightControl1");document.getElementById(“SilverlightControl1");

var theCircle = var theCircle = sControl.content.findName("theCircle");sControl.content.findName("theCircle");

if (theCircle != null)if (theCircle != null) theCircle.opacity = 0.5theCircle.opacity = 0.5; ;

<Canvas xmlns="..."<Canvas xmlns="..." xmlns:x="...">xmlns:x="...">

<Ellipse x:Name="<Ellipse x:Name="theCircletheCircle" Width="100" " Width="100" Height="100" Fill="Yellow" />Height="100" Fill="Yellow" />

</Canvas></Canvas>

Référencer les éléments “Child”Référencer les éléments “Child”

• La Collection Canvas.Children :– Add()– Insert()– Remove()– RemoveAt()– GetItem()– Clear()– Count

Méthode CreateFromXamlMéthode CreateFromXaml

• Permet la création dynamique d’objets Silverlight et leur insertion dans l’arbre XAML

• Permet des scénarios intéressants où le XAML est généré sur le client (Ajax) ou retourné par le serveur

var sControl = var sControl = document.getElementById(“SilverlightControl1");document.getElementById(“SilverlightControl1");var rootCanvas2 = sControl.content.findName("canvas2");var rootCanvas2 = sControl.content.findName("canvas2");

var fragment ='var fragment ='<Rectangle Fill="Red" Height="100" <Rectangle Fill="Red" Height="100" Width="100"/>Width="100"/>';';var newRect = sControl.content.var newRect = sControl.content.createFromXaml(fragment)createFromXaml(fragment);    ;    

rootCanvas2.children.addrootCanvas2.children.add(newRect);(newRect);

Evènements Silverlight StandardsEvènements Silverlight Standards• Evènements Standards :

– Loaded– MouseMove– MouseEnter– MouseLeave– MouseLeftButtonDown– MouseLeftButtonUp

• Utilisez le pattern suivant :function onMouseEnter(sender, eventargs) {function onMouseEnter(sender, eventargs) { sender.Fill = “Red”;sender.Fill = “Red”;} }

– KeyUp– KeyDown– GotFocus– LostFocus

Exemple d’évènementExemple d’évènement<Canvas xmlns="..."<Canvas xmlns="..." xmlns:x="...">xmlns:x="...">

<Ellipse MouseEnter="javascript:<Ellipse MouseEnter="javascript:onMouseEnteronMouseEnter" " MouseLeave="javascript:MouseLeave="javascript:onMouseLeaveonMouseLeave" " Height="100" Width="100" Fill="Teal" /> Height="100" Width="100" Fill="Teal" />

<Ellipse Canvas.Left="120“ <Ellipse Canvas.Left="120“ MouseEnter="javascript:MouseEnter="javascript:onMouseEnteronMouseEnter" " MouseLeave="javascript:MouseLeave="javascript:onMouseLeaveonMouseLeave" " Height="100" Width="100" Fill="Teal" /> Height="100" Width="100" Fill="Teal" />

</Canvas></Canvas>

function function onMouseEnter(sender)onMouseEnter(sender) { { sender.Fill = “Coral”;sender.Fill = “Coral”;} }

function function onMouseLeave(sender)onMouseLeave(sender) { { sender.Fill = “Teal”;sender.Fill = “Teal”;}}

Animations avec XAMLAnimations avec XAML• Silverlight propose un système d’animations riche

– Peuvent être définies en XAML– Peuvent être démarrées/contrôles par code

• Modèle Complet :– Timeline, Triggers, DoubleAnimation, PointAnimation, ColorAnimation, etc…– KeyFrames

• Discrete, Linear, Splines

Programmer les AnimationsProgrammer les Animations• L’objet StoryBoard peut être contrôlé par code :

– Begin()– Pause()– Resume()– Stop()– Seek()

function onMouseEnter(sender) {function onMouseEnter(sender) {

var animationSequence = var animationSequence = sCtrl1.content.findName(“animationSequence”);sCtrl1.content.findName(“animationSequence”); animationSequence.Begin()animationSequence.Begin();;} }

Silverlight 1.1 AlphaSilverlight 1.1 Alpha

Légende

v1.1Légende

v1.0XAML

Networking

JSON

REST POXRSS

DataLINQ XLINQ

DLRRuby Python

WPFExtensible Controls

BCLGenerics Collections

InputsKeyboardMouse Ink

MediaVC1 WMA MP3

Browser Host

MS AJAX Library

DOM Integration

UI Core

Images

Vector Text

Animation

DRM

MediaControls

Layout Editing

CLR Execution Engine

Deploy

Friction-Free Installer

Auto-Updater

ApplicationServices

SOAP

AgendaAgenda

• Accéder au DOM en code « Managed »• Web Services• IsolatedStorage• FileUpload

Accéder au DOM en .NETAccéder au DOM en .NET• Namespace

– System.Windows.Browser• Instance accésible depuis

– HtmlPage.

HtmlDocument et HtmlElementHtmlDocument et HtmlElement

Hiérarchie des types HTMLHiérarchie des types HTMLSystem.Windows.BrowserSystem.Windows.Browser

HtmlObjectHtmlObject

ScriptableObject

HtmlPage.Window

HtmlDocuHtmlDocumentment

HtmlElemHtmlElementent

Appeler du code .NET depuis le JavascriptAppeler du code .NET depuis le Javascript

• [Scriptable]– Propriétés, Méthodes, Evènement accessible depuis

le JavaScript• Enregistrement dynamique par l’objet .NET

WebApplication.Current.RegisterScriptableObject("exemple",

this);• Appel en JavaScript

– myControl.Content.[exemple].ManagedProperty

WebServiceWebService• Comme pour ASP.NET 1.0 Ajax

– [ScriptService] et [WebMethod]– Serialisation JSON

• Génération du proxy avec slwsdl.exe– Code généré pour .NET Silverlight avec

System.Windows.Browser.SoapHttpClientProtocol– Support l’appel Synchrone et Asynchrone

• Les services ASP.NET– Profile_JSON_AppService.axd– Authentication_JSON_AppService.axd

Isolated StorageIsolated Storage• Récupérer un handle sur le storage local :

– IsolatedStorageFile.GetUserStoreForApplication()

• Méthode create/read/write sur le handle

• Support d’un « path » relatif– "directoryA\SomeFileInTheStore.txt"

• Vérification de la taille du stockage– IsolatedStorageFile.CurrentSize

File UploadFile UploadOpenFileDialog ofd = new OpenFileDialog();ofd.EnableMultipleSelection = true;foreach (FileDialogFileInfo fdfi in ofd.SelectedFiles)

{ //fdfi.Name;

SendFileWebService(…); }

AgendaAgenda• Positionnement de Silverlight• Les bases avec Silverlight 1.0• Les nouveautés pour développement Web

avec Silverlight 1.1• Langages dynamiques• PopFly• Silverlight avec Mono

Langages DynamiquesLangages Dynamiques

Miguel de Icaza, Mono Project Lead, Novell

Public depuis le 18 Mai :

Voir www.popfly.com

Popfly, qu’est-ce au juste ?Popfly, qu’est-ce au juste ?• Editeur de Pages Web

– Idem Office Live– Intégration des mash-ups

• Création de « mash-ups » Web– Assemblage de blocs– Extensible (Your Name Here!)

• Communauté– Réseau Social, …– Partage, invitations, …

Mash-up Editor: Mash-up Editor: • Assemblage de blocs standards

– Service, Traitement, Affichage• Possible de copier et modifier un mash-up

– Les « Tweakers »• Possible de copier un bloc

– Nécessite de connaitre JavaScript…• Possible d’ajouter du HTML, CSS ou JS Custom

– Les « Power Users »…

Vos propres Blocs dans Popfly !Vos propres Blocs dans Popfly !

<YourNameHere/><YourNameHere/>

Ecrire un bloc dans Popfly ?Ecrire un bloc dans Popfly ?• Blocs natifs et Blocs « Custom »

– Pas de XAML dans la version actuelle…• Directement depuis Popfly

– « Rippez » un bloc existant– Visual Studio pour la coloration syntaxique

• Conventions de nommage– A voir…

• Complexité ?– 90% des blocs de services peuvent dériver de RSS

Ecrire un bloc CustomEcrire un bloc Custom• Un descripteur XML• Un fichier JS contenant la logique

• Mise au point…– console.write– Intuition ;)

AgendaAgenda• Positionnement de Silverlight• Les bases avec Silverlight 1.0• Les nouveautés pour développement Web

avec Silverlight 1.1• Langages dynamiques / Interopérabilité• PopFly• Silverlight avec Mono

Silverlight avec MonoSilverlight avec Mono

Miguel de Icaza, Mono Project Lead, Novell

Voilà !Voilà !

Vous avez aimé ?Vous avez aimé ?

Vous en voulez encore ?Le concours de développement de ALTI !

http://www.alti.com/site/fra/details_concours.php

54

Merci!Merci!

Christophe Lauer Christophe Lauer http://blogs.msdn.com/clauerhttp://blogs.msdn.com/clauer

Pierre Lagarde Pierre Lagarde http://blogs.msdn.com/pierlaghttp://blogs.msdn.com/pierlag