1 / 94

pfz@polytech.unice.fr

Plasticité des Interfaces. utilise les répertoires: ../../LANGDOC/COURS ./EXEMPLES / ../LANGDOC/XUL. XUL XBL XPCOM XPI. Web GUI Mozilla Project. www.polytech.unice.fr~pfz. pfz@polytech.unice.fr. Bien s'installer sous XUL/Firefox. user_pref( "nglayout.disable_xul_cache", true);

pierce
Download Presentation

pfz@polytech.unice.fr

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. Plasticité des Interfaces utilise les répertoires: ../../LANGDOC/COURS ./EXEMPLES/ ../LANGDOC/XUL XUL XBL XPCOM XPI Web GUI Mozilla Project www.polytech.unice.fr\~pfz pfz@polytech.unice.fr

  2. Bien s'installer sous XUL/Firefox user_pref( "nglayout.disable_xul_cache", true); user_pref( "nglayout.disable_xul_fastload", true); sous FF (Mozilla) • désactiver le cache XUL, dans Profiles/..defaut/prefs.js sous Gecko 1.9 (FF3, Thunderbird 3) • Xul distant est intégré • les "manifest chrome" sont à placer dans le répertoire chrome/ sous Gecko 2.0 (FF4+, Thunderbird 3.3) • Xul distant n'est pas supporté par défaut • les "manifest chrome" sont à déclarer dans chrome.manifest installer l'extension XUL Remote Manager et ajouter "<file>" à la "whitelist" ATTENTION - RDF XUL : pas d'espaces dans les paths; par ex "C:\Documents and Settings\Bureau"

  3. Sommaire du Cours Introduction - Web GUI & Clients "Riches" Chap I - Mozilla & XPFE/XUL: Historique & Standards Chap II - XUL: les bases- Box & Widgets Chap III - XUL: le style - Rendu avec CSS Chap IV - XUL: Dynamique avec JS+DOM Chap V - XUL: Génération de Contenu avec RDF Chap VI - XUL: Les Widgets avec XBL Chap VII - XUL: Modularité avec les "overlays" Chap VIII - XUL: Communication avec AJAX & XPCOM Chap IX - XUL: et les Autres Chap X- XUL: Services Web avec SOAP Chap XI - XUL: Distribution & Installation Annexe I - RDF & OWL Annexe II - AJAX 24/09/2014 Transparent 3

  4. Références • Web • cours "XML" SI-4 http:www.polytech.unice.fr/~pfz/document.html • Mozilla Development Center https://developer.mozilla.org/Fr • XULPlanet http://www.xulplanet.com/ • XULFR.org http://mozillazine-fr.org/annuaire-mozilla/fr/developpeurs/ • xul.fr http://www.xul.fr/ • XULforum http://www.xulforum.org/site/ • Biblio: • Xul Tutorial (pdf) • Rapid Application development with Mozilla • ouvrages disponibles.

  5. n-Tier Architecture for Web light Client ApI HTML CSS DHTML, JS AJAX Client CGI Servlet, JSP Presentation Layer PHP, ASP XML XSL C, Java, C++ Application (Business) Layer Application (Business) Layer Application (Business) Layers ApI Hypertrophy SQL Data Layer Data Bases Apache Server 24/09/2014 Transparent 5

  6. RIA Architecture Structure Style Application Application Application Datas Data Base Server Rich Client XML, RDF PHP, ASP Networking http, AJAX CSS, XSL Contrôle & Web Services ApI JS, DOM SOAP, WSDL ApI ApI ApI SQL ApI 24/09/2014 Transparent 6

  7. "Light Client" vs "Rich Client" (R.I.A.) Rich Client XML XSL "import" of fonctionalities dynamic interface transform HTML, CSS DHTML, JS, AJAX reduce the back&forth needs metadata multi-formats SQL Data Bases 24/09/2014 Transparent 7

  8. Web GUI main concepts • Layout • Boxes or Canvas or both ? • Attribute Rules vs Programmation • Structure vs Computation ? • Widgets • Event Programming & Animation • Data Generation & "Pouring" • Media-type Processing • Networking • Design

  9. State of "my"Art j.b.X. (just before Xul) Web GUI based on Navigators XML + XSL + CSS as input with XSLT producing (X)HTML + CSS JS with actions changing via DOM XML source or XSL source Dynamic refresh of the XML rendering Dynamic changes on widgets of the GUI "à la main", en transpirant ! .xsl .xsl 24/09/2014

  10. XML as metadatas for Web GUI SPRY (Adobe Labs) using XML to describe "contents" using JS & DOM to generate wIdgets & "contents" using AJAX to access/modify "contents" from RDF, XML to PHP/SQL using XML/RDF to describe "contents" using XSLT from XML to SQL exporting from SQL to XML XSLT using XML/RDF to describe "contents" using XSLT to generate wIdgets (DHTML, JS) using XSLT to generate/modify "contents" (HTML) using XSLT to generate/modify style (CSS) • XUL (Mozilla Foundation) • using RDFL to describe "contents" • using XUL to generate WIdgets & "contents" • using AJAX to access "contents" • using JASON, XML-RPC, WSDL for "networking" and "web services" 24/09/2014

  11. XML as metadatas & XSLT RefsWeb TechnosWeb XML rdf JS Exam LD 2010 CSS XSLT Pfz's State of the Art HTML XSLT .xsl XSL XML .xsl 24/09/2014

  12. Web Reference Browser xml dtd xsd html css css metadata .xml de XML vers HTML5+CSS3 via xsl 24/09/2014 Transparent 12

  13. Doc Example Browsers TechnosWeb .xml dtd xsd html css css css js metadata xml via xsl de XML vers HTML5+CSS3+JS 24/09/2014 Transparent 13

  14. XML (meta) modèle de données (ERD ) 1,? 1,* 1,* n,m • <Show • version • > uses: n,m used_by: n,m • <Categorie • type • path • > • <Code • titre • keywords • file • version • > • <Description • libellé* • img? • > <Auteur> Type Keyword Keyword Path Keyword Keyword Aut Keyword 24/09/2014 Transparent 14

  15. R.I.A. - XML as metadatas & SPRY XML rdf Rich Client XML rdf HTML SPRY CSS, XSL JS DHTML AJAX DHTML 24/09/2014

  16. Spry: framework JS pour dHTML avec une assistance compatibleavec HTML, XHTML, CSS XML, etDialectes XSLT, XUL • sur le Web • http://labs.adobe.com/technologies/spry/ • http://labs.adobe.com/wiki/index.php/Spry • http://www.adobe.com/devnet/spry/ • http://labs.adobe.com/technologies/spry/demos/index.html 24/09/2014 Transparent 16 • Librairie (libre) JS par Adobe Labs • Conception • Création assistée de Widgets • Effets dynamiques avec JS • Définition de "Data Sets" à partir XML/RDF • Génération de contenus HTML • Gestion des Interfaces/HTTP • Extensible ("Open") • Implémentation • (X)HTML + "Include" JS • DOM • XML • CSS • HTTP + AJAX • intégration complète avec DW CS

  17. Spry -Schéma & Utilisation versions Spry 1.4 1.5 1.6 <html> <head> <style> ….. </style> </head> <body> <div id="TP1" class="TabbedPanels"> <ul class="TabbedPanelsTabGroup"> <li class="TabbedPanelsTab" tabindex="0">cours 1</li> <li class="TabbedPanelsTab" >cours 2</li> <li class="TabbedPanelsTab" >cours 3</li> </ul></div> </body></html> <head> <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"> </script><script src="SpryAssets/SpryMenuBar.js"… /> </script><script src="SpryAssets/xpath.js"… /> </script><script src="SpryAssets/SpryData.js" … /> <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" … /> <link href="SpryAssets/SpryMenuBarHorizontal.css" … /> <link href="SpryAssets/SpryMenuBarVertical.css"… /> </head> interpréteur JS Dom HTML généré Code Partiel 24/09/2014 Transparent 17

  18. Spry - Génération de XML DATA SETs <head> </script><script src="SpryAssets/xpath.js"… /> </script><script src="SpryAssets/SpryData.js" … /> </head> <html> <head> <script type="text/javascript"> var dsBib = new Spry.Data.XMLDataSet("bib.xml", "Bib/Article"); dsBib .setColumnType("Date", "date"); </script> </head> <body> <div spry:region="dsBib"> <table> <tr> <th>Titre</th> <th>Date</th> <th spry:sort="@ref">ref</th> </tr> <tr spry:repeat="dsBib" spry:setrow="dsBIb"> <td>{Title}</td> <td>{Date}</td> <td>{@ref}</td> </tr> </table> </body></html> XPath Code Partiel mis à plat "flatening" JS Object 24/09/2014 Transparent 18

  19. Spry: Démos 24/09/2014 Transparent 19

  20. Comment un Arbre (une forêt, en fait) ...? XML +XSL XML Dom XML CSS XSL Dom XSL Parseur XMLs avec une démarche "structurée"

  21. Comment un Arbre ... ? XML +XSL Dom XML XML CSS Dom XSL XSL Parseur XMLs Dom ...peut en cacher un Autre

  22. Peut en cacher un Autre ... ? XML +XSL Dom XML XML CSS Dom XSL XSL JS Parseur XMLs Dom ... qui contrôle (modifie) les 2 premiers Peut en cacher un Autre

  23. Goto the Best of Xul XulPeriodic Table • Xul Element Table • Dynamic DOM • cursor coordinates • add (copy) Buttons • check from input • delete menu item • scroll To Visible • Slide-show (anything) with XBL • XUL with SVG • Pfz's Tutorial • Xul with RDF • XUL with XPCOM

  24. Chap I - Mozilla & XPFE/XUL Historique StandardsLexiqueRéférences Architecture XPFE

  25. I amMosaic Killer Historique & Standards Projet Mozilla • code Netscape => Open Source (1998) • Gecko: moteur de "rendu" HTML 4.0 • XPFE: "Cross Platform Front-End" • Suite Mozilla 1.7 & 1.8 => SeaMonkey • XUL - XML User interface Langage XUL utilise les Standards du W3C • XML – eXtensible Markup Language • HTML 4, 5 & XHTML • CSS 2 & CSS3 - Cascading Style Sheets • DTD • DOM & JS 1.5 (ECMAScript) • RDF - Resource Description FrameWork • RSS, SOAP, AJAX, SVG Objectif: • Développement d'Interfaces clients portables • Clients "riches" entre "légers" et "lourds" 1998 2008

  26. XUL & XPFE XUL Events XUL XBL LDAP SOAP POP files Sockets SVG XML DOMs HTML JS CSS XPCOM RDF XPConnect

  27. Architecture XPFE: le 4ième Tiers • Contenu • XUL supporte (X)HTML, XML, • RDF/XML • MathML & SVG Présentation • XUL supporte CSS 2 • XUL supporte les formats image • XUL utilise des thèmes ("skins") XUL - Conteneur • XUL - la description du "layout" des conteneurs (box) • automatisation avec RDF et les templates • XUL utilise des locales (DTD, localisation) CONTENT TREE XUL XBL XML RDF • Comportement (Contrôle) • XUL utilise DOM & JS1.5 • XBL ("Bindings") pour décrire le comportement des "widgets" LAYOUT BOX TREE Why only one Tree, when we may have Two ? • XPFE - Communication • XUL supporte AJAX • XPCOM pour les Services Web,etc. via XPConnect

  28. /Mozilla Firefox /chrome Mozilla Structure & Components • Packages "Content" • .xul pour les "windows" et "elements" browser.xul • .js pour les fichiers de script browser.js • contents.rdf • Packages "Skin" • fichiers de style .css: browser.css • fichiers images • Packages "Locale" • fichiers .text (;dtd) pour les textes à afficher • en-US.jar fr-FR.jar browse.dtd le répertoire "chrome/" file.manifest l'url chrome://global/skin/ extensions + privilèges Utilisation "pointilleuse"

  29. Chap II - XUL - les Bases IntroBoxes & Spacers Texts & Buttons ToolBar & Menu Group & Tabboxes Lists & Grids Panels & Splitters Stack & Decks Layout Tree

  30. my First XUL ... <?xml version="1.0" encoding="iso-8859-1"?> <?xml-stylesheet href="window.css" type="text/css"?> <window id="findfile-window" title="XUL-Essai1" orient="horizontal" xmlns=http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul > <vbox> <hbox flex="1" maxheight="80" align="top"> <button label="Gauche" style="min-width: 100px;" flex="1"/> <spacer flex="2"/> <button label="Droite" style="min-width: 100px;" flex="1"/> </hbox> <spacer flex="1" maxheight="50"/> <description> Entrez votre critère pour démarrer la recherche. </description> <spacer flex="1" maxheight="50"/> <button label="HELLO" oncommand="alert('hello World!');"/> </vbox> </window> ...canalsosay "hello World" <window>

  31. my Boxes <window ....> <vbox> <hbox flex="2" maxheight="80" align="top"> </hbox> <spacer flex="1" maxheight="50"/> <box flex="2" orient="vertical" pack="center"> </box> <spacer flex="1" maxheight="50"/> </vbox> </window> <box> <hbox> <vbox> <spacer> id, class, style orient width, heigth, min- , max- flex pack align

  32. my Buttons are Boxes <window ....> <vbox> <hbox> <button id="ok" label="OK" maxwidth="20" /> <spacer maxwidth="10"/> <button label="ALERT" style="min-width: 100px;" oncommand="alert ('Le bouton a été pressé !');"/> <checkbox label="Voir les images" checked="true"/> </hbox> <radio label="ROUGE" selected="true" id="red" /> <button id="newW" class="dialog" label="Click ou Type W" image="IMAGES/newW.png" disabled="false" accesskey="W" oncommand='window.open("window.css","_new");' /> </vbox> </window> <button> <checkbox> <radio> <radiogroup> id, class, style label, crop image disabled, selected, checked accesskey oncommandonclick

  33. myTexts are also Boxes <window ....> <vbox> <description> Donner son profil puis se loger ci-dessous. </description> <hbox> <textbox id="profil" multiline="true" value="compléter votre profil ici"/> </hbox> <hbox> <label control="login" value="Login :"/> <textbox id="login"/> </hbox> <hbox> <label control="pass" type="password" value="Mot de passe:"/> <textbox id="pass" maxlength="12" /> </hbox> <label value="Envoyer" onclick="send();"/> </vbox> </window> <label> <description> <textbox> id, class, style value control type multiline maxlength onclick

  34. all myElements are Boxes ! XulPeriodic Table <tabbox> <tabpanel> <tabpanels> <tabs> <tab> <iframe> <browser> <splitter> <gripy> <tree> <template> <listbox> <listitem> <listhead> <listheader> <listcols> <listcol> <listcell> <menulist> <caption> <image> <progressbar> <toolbox> <toolbar> <toolbarbutton> <menubar> <menu> <menupopup> <menuitem> <popupset> <arrowscrollbox> <grid> <rows> <row> <columns> <column> <groupbox> <radiogroup> <stack> <deck>

  35. Layout: la solution Mozilla A Layout Tree • les noeuds sont "calculés" en fonction du content tree et des sources CSS et XBL • les éléments XUL sont typés "box", avec 4 propriétés: [x, y, width, heigth] • les objets hidden n'y sont pas (plus) • les objets collapse y sont avec [0,0,0,0] • A Content Tree • à partir des éléments (balises) de HTML, XML, SVG , etc. • avec l'ordre partiel du source (arborescence) • idem pour les éléments XUL, XBL, et les templates RDF • modification dynamique via les DOMs respectifs CONTENT TREE XUL XBL XML RDF not isomorphic ! LAYOUT BOX TREE

  36. Les secrets de XUL • Architecture XPFE ouverte • Compatibilité avec les standards XML, DOM, CSS • Deux Arborescences distinctes pour Contenu et Présentation • Un type parent "Box" pour tous les objets graphiques • Avantages • existence d'un méta-modèle commun (XML) • existence de deux modèles explicites pour le layout et les contenus • validation (DTD, XSD) • accès et modification via le DOM • modification dynamique (incrémentale) via JS XUL c'est le XML des GUI !

  37. 2 Arbres, sinon Rien ! • Héritage, Masquage, Cascading • CSS properties: font, color, etc. • Box properties: pos, size • (X)HTML defaults • DOM Navigation "Orderings" • child(), sibling() • first(), last() • Modifications • par sous arbres: XSL, RDF, XBL • eval. incrémentales ("refresh") <elem> <elem> <elem>

  38. myTrees <window ....> <tree flex="1"> <treecols> <treecol id="sender" label="Sender" flex="1"/> <treecol id="subject" label="Subject" flex="2"/> </treecols> <treechildren> <treeitem> <treerow properties="makeItRed"> <treecell label="joe@somewhere.com"/> <treecell label="Top secret plans"/> </treerow> </treeitem> <treeitem> <treerow> <treecell label="mel@whereever.com"/> <treecell label="Let's do lunch"/> </treerow> </treeitem> </treechildren> </tree> </window> CSS ::-moz- <tree> <treecols> <treecol> <treechildren> <treeitem> <treerow> <treececll>

  39. myhierachicalTrees <window ....> <tree rows="6"> <treecols> <treecol id="fname" label="First Name" primary="true" flex="3"/> <treecol id="lname" label="Last Name" flex="7"/> </treecols> <treechildren> <treeitem container="true" open="true"> <treerow> <treecell label="Guys"/> </treerow> <treechildren> <treeitem> <treerow> <treecell label="Bob"/> <treecell label="Carpenter"/> </treerow> </treeitem> <treeitem> <treerow> <treecell label="Jerry"/> <treecell label="Hodge"/> </treerow> </treeitem> </treechildren> </treeitem> </treechildren> </tree> </window> container primary open

  40. <tree enableColumnDrag="true" flex="1"> <treecols> <treecol id="runner" label="Runner" flex="2" persist="width ordinal hidden"/> <splitter class="tree-splitter"/> <treecol id="city" label="City" flex="2" persist="width ordinal hidden"/> <splitter class="tree-splitter"/> <treecol id="starttime" label="Start" flex="1" persist="width ordinal hidden"/> <splitter class="tree-splitter"/> <treecol id="endtime" label="End" flex="1" persist="width ordinal hidden"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="Joshua Granville"/> <treecell label="Vancouver"/> <treecell label="7:06:00"/> <treecell label="9:10:26"/> </treerow> </treeitem> <treeitem> <treerow> <treecell label="Robert Valhalla"/> <treecell label="Seattle"/> <treecell label="7:08:00"/> <treecell label="9:15:51"/> </treerow> </treeitem> </treechildren> </tree> myremembering state Trees enableColumnDrag persist

  41. Chap III - XUL et le Style (X)HTML CSS avec -moz les "skins"

  42. avec html <?xml version="1.0" encoding="iso-8859-1"?> <window id="findfile-window" title="XUL-Essai1" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml" > <vbox> <html:table> <htm:tr> <htm:td> <button label="Gauche" style="min-width: 100px;" /> </html:td> <html:td> <button label="Droite" style="min-width: 100px;" /> </html:td> </html:tr> </html:table> <html:p> Entrez votre critère pour démarrer la recherche. </html:p> <button label="HELLO" oncommand="alert('Bonjour!');"/> </vbox> </window> pREFIXE OBLIGATOIRE possible, mais pas conseillé

  43. avec CSS • CSS 2 & CSS3 • button  • #special-button  • .bigbuttons • button.bigbuttons • toolbar > button • toolbar > button.bigbuttons • button.bigbuttons:hover • button#special-button:active • box[orient="horizontal"] • CSS Mozillatrees • ::-moz-tree-cell • ::-moz-tree-row • ::-moz-tree-column • ::-moz-tree-line • ::-moz-tree-indentation • CSS Mozilla • -moz-opacity • -moz-border-radius • -moz-image-region • -moz-box-orient tree.xul <treerowproperties="makeItRed"> treechildren::-moz-tree-row(makeItBlue) { background-color: red; } tree.css

  44. /Doc&Sett/pfz /Application data /Profiles/chrome /Doc&Sett/pfz /Application data /Profiles/chrome myskinS window > box { background-color: #0088CC;} menubar, menupopup, toolbar, tabpanels { background-color: lightblue; border-top: 1px solid white; border-bottom: 1px solid #666666; border-left: 1px solid white; border-right: 1px solid #666666; } caption { background-color: lightblue; } tab:first-child { -moz-border-radius: 4px 0px 0px0px; } tab:last-child { -moz-border-radius: 0px 4px 0px 0px; } #opensearch { list-style-image: url("chrome://editor/skin/icons/btn1.gif"); -moz-image-region: rect(48px 16px 64px 0); -moz-box-orient: vertical; } • customizes ton FF userChrome.css menubar { background-color: red; } • créer un thème "skin" findfile.css

  45. Chap IV - XUL Dynamique, JS + DOM XUL DOM Changer les Styles

  46. XUL + DOM + JS my XUL isDynamic <window ... > <script> function addButton() { var aBox = document.getElementById("aBox"); var button = document.createElement("button"); button.setAttribute("label","A Button"); aBox.appendChild(button); } </script> <box id="aBox" width="200"> <button label="Add" oncommand="addButton();"/> </box> </window> • créer, copier des boutons • tester, modifier des listes • gérer les "events" • animation • etc.

  47. Chap V - XUL Génération de Contenu RDF/XML(new FF3) <tree> <templates> <rule> <query> <action> TextScan

  48. Template + RDF <window …> <tree flex="1" width="200" height="200" datasources="zoo.rdf" ref="http://www.zoo.com/all-animals"> <treecols> <treecol id="name" /> <treecol id="species" /> </treecols> <template> <rule> <treechildren> <treeitem uri='rdf:*'> <treerow> <treecell label="rdf:http://www.zoo.com/rdf#name"/> <treecell label="rdf:http://www.zoo.com/rdf#species"/> </treerow> </treeitem> </treechildren> </rule> </template> </tree> zoo.rdf <RDF:RDF xmlns:Z="http://www.zoo.com/rdf#"> <RDF:Description Z:specimens="101" rdf:about="http://www.zoo.com/mammals"> <Z:name> Lion </Z:name> </RDF:Description>

  49. <window …> <tree flex="1" datasources="zoo.xml" ref="*" querytype="xml" > <treecols> <treecol id="name" /> <treecol id="spec" /> </treecols> <template> <query expr="about" /> <action> <treechildren> <treeitem uri='?'> <treerow> <treecell label="?name"/> <treecell label="?species"/> </treerow> </treeitem> </treechildren> </action> </template> </tree> New FF3: Template + XML (external) zoo.xml <zoo> <about name="Arachnids"> … </about> <about name="Birds"> <about name=" " species=" "> </about> </about> </zoo> 24/09/2014 Transparent 50

  50. <window …> <tree flex="1" datasources="#ZOO" ref="*" querytype="xml" > <treecols> <treecol id="name" /> <treecol id="spec" /> </treecols> <template> <query expr="about" /> <action> <!-- idem --> </action> </template> </tree> New FF3: Template + XML (internal) <zoo id="ZOO"> <about name="Arachnids"> … </about> <about name="Birds"> <about name=" " species=" "> </about> </about> </zoo> 24/09/2014 Transparent 51

More Related