1 / 55

Développement Web en 2007

Développement Web en 2007. Pierre Lagarde http://blogs.msdn.com/pierlag. Christophe Lauer http://blogs.msdn.com/clauer. Agenda. Positionnement de Silverlight Les bases avec Silverlight 1.0 Les nouveautés pour développement Web avec Silverlight 1.1 Langages dynamiques PopFly

calida
Download Presentation

Développement Web en 2007

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Développement Web en 2007 Pierre Lagarde http://blogs.msdn.com/pierlag Christophe Lauer http://blogs.msdn.com/clauer

  2. Agenda • 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

  3. Beaucoup à dire… Choix et arbitrages… mais : - TechDays 2007 : http://tinyurl.com/2yh868 - Mini Mix 2007 : http://tinyurl.com/3b9ogb

  4. PleaseWelcomeourGuest! • Miguel de Icaza, Mono Project Lead, Novell.

  5. Pourquoi 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)

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

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

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

  9. .NET for Silverlight Browser Host Data WPF Networking MS AJAX Library REST Extensible Controls LINQ XLINQ POX RSS BCL DLR JSON DOM Integration SOAP Generics Collections Ruby Python Légende CLR Execution Engine v1.1 Application Services XAML Légende v1.0 Presentation Core Deploy Inputs UICore DRM Media Keyboard Mouse Ink Friction-Free Installer Vector Text Media Controls Animation Images Auto- Updater Editing WMA MP3 Layout VC1

  10. demo - Vidéo- PageTurn- Scribbler

  11. demo - Debugging sur Mac

  12. Silverlight 1.0 Bêta

  13. Comment fonctionneSilverlight ? • Silverlightest un contrôle qui s’installedans IE et un plug-in dans Firefox et Safari • Silverlight 1.0 se programme en Javascript, classiquementcomme pour Ajax • Les éléments HTML et du DOM XAML peuventêtremanipulésdans le même bloc de code • Le contenuSilverlightpeutêtreintégré à n’importequelélémentconteneur HTML (ie DIV) dansune document HTML • Les contrôles HTML peuvent se superposer au contenuSilverlight

  14. Script de chargement <div id="SilverlightControlHost" class="silverlightHost"> <script type="text/javascript"> createSilverlight(); </script> </div> 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) } }); }

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

  16. Dessiner / Designer avec XAML • Vocabulaire de base des éléments XAML • Canvas • Brush • Formes de base • Rectangle, Ellipse, Line, Polygon, PolyLine, Path, etc… • TextBlock • Image

  17. Canvas Canvas Rectangle • Est une surface de dessin • Les enfants ont des positions relatives <Canvas Width="250" Height="200"> <Rectangle Canvas.Top="25" Canvas.Left="25" Width="200" Height="150" Fill=“Yellow" /> </Canvas>

  18. Integration des Médias • <MediaElement /> • Utilisé pour afficher des médiasmusiqueouvidéo • Contrôle de la vidéo par code • Pas de contrôles standards – Vousconstruisezvotre interface en XAML ! • Conventions de nommage • playButton, stopButton,pauseButton, … • volumeDownButton, … <Canvas xmlns="..." xmlns:x="..."> <MediaElement Source=“silverlight.wmv" /> </Canvas>

  19. Accé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 = document.getElementById(“SilverlightControl”); var control = $get(“SilverlightControl”);

  20. Retrouver un objet XAML en Javascript • Utilisation de la méthode findName(<Name>) <Canvas xmlns="..." xmlns:x="..."> <Ellipse x:Name="theCircle" Width="100" Height="100" Fill="Yellow" /> </Canvas> varsControl= document.getElementById(“SilverlightControl1"); vartheCircle = sControl.content.findName("theCircle"); if (theCircle != null) theCircle.opacity = 0.5;

  21. Référencer les éléments “Child” • La Collection Canvas.Children : • Add() • Insert() • Remove() • RemoveAt() • GetItem() • Clear() • Count

  22. MéthodeCreateFromXaml • 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 varsControl= document.getElementById(“SilverlightControl1"); var rootCanvas2 = sControl.content.findName("canvas2"); var fragment ='<Rectangle Fill="Red" Height="100" Width="100"/>'; varnewRect = sControl.content.createFromXaml(fragment);     rootCanvas2.children.add(newRect);

  23. EvènementsSilverlight Standards • Evènements Standards : • Loaded • MouseMove • MouseEnter • MouseLeave • MouseLeftButtonDown • MouseLeftButtonUp • Utilisez le pattern suivant : • KeyUp • KeyDown • GotFocus • LostFocus function onMouseEnter(sender, eventargs) { sender.Fill = “Red”; }

  24. Exempled’évènement <Canvas xmlns="..." xmlns:x="..."> <Ellipse MouseEnter="javascript:onMouseEnter" MouseLeave="javascript:onMouseLeave" Height="100" Width="100" Fill="Teal" /> <Ellipse Canvas.Left="120“ MouseEnter="javascript:onMouseEnter" MouseLeave="javascript:onMouseLeave" Height="100" Width="100" Fill="Teal" /> </Canvas> function onMouseEnter(sender) { sender.Fill = “Coral”; } function onMouseLeave(sender) { sender.Fill = “Teal”; }

  25. Animations 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

  26. Programmer les Animations • L’objet StoryBoard peut être contrôlé par code : • Begin() • Pause() • Resume() • Stop() • Seek() function onMouseEnter(sender) { varanimationSequence = sCtrl1.content.findName(“animationSequence”); animationSequence.Begin(); }

  27. démo Silverlight 1.0 Bêta

  28. Silverlight 1.1 Alpha

  29. .NET for Silverlight Browser Host Data WPF Networking MS AJAX Library REST Extensible Controls LINQ XLINQ POX RSS BCL DLR JSON DOM Integration SOAP Generics Collections Ruby Python Légende CLR Execution Engine v1.1 Application Services XAML Légende v1.0 Presentation Core Deploy Inputs UICore DRM Media Keyboard Mouse Ink Friction-Free Installer Vector Text Media Controls Animation Images Auto- Updater Editing WMA MP3 Layout VC1

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

  31. Accéder au DOM en .NET • Namespace • System.Windows.Browser • Instance accésible depuis • HtmlPage.

  32. HtmlDocument et HtmlElement Typé

  33. Hiérarchie des types HTMLSystem.Windows.Browser HtmlDocument HtmlElement ScriptableObject HtmlObject HtmlPage.Window

  34. Appeler 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

  35. demo Coder une page HTML dynamique en .NET !

  36. WebService • 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

  37. Isolated 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

  38. demo Web Services et IsolatedStorage

  39. File Upload OpenFileDialog ofd = new OpenFileDialog(); ofd.EnableMultipleSelection = true; foreach (FileDialogFileInfo fdfi in ofd.SelectedFiles) { //fdfi.Name; SendFileWebService(…); }

  40. demo FileUpload

  41. Agenda • 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

  42. Langages Dynamiques Miguel de Icaza, Mono Project Lead, Novell

  43. Public depuis le 18 Mai : Voir www.popfly.com

  44. 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, …

  45. 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 »…

  46. Vos propres Blocs dans Popfly ! <YourNameHere/>

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

  48. Ecrire un bloc Custom • Un descripteur XML • Un fichier JS contenant la logique • Mise au point… • console.write • Intuition ;)

  49. démo Ecrire un Bloc pour Popfly

  50. Agenda • 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

More Related