XPFE et le XUL sous Mozilla ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Paul Franchi SI 5 2013-14 18/06/2015 Transparent - 1 XUL XBL XPCOM XPI XUL XBL XPCOM.

Présentation au sujet: "XPFE et le XUL sous Mozilla ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Paul Franchi SI 5 2013-14 18/06/2015 Transparent - 1 XUL XBL XPCOM XPI XUL XBL XPCOM."— Transcription de la présentation:

1 XPFE et le XUL sous Mozilla ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Paul Franchi SI 5 2013-14 18/06/2015 Transparent - 1 XUL XBL XPCOM XPI XUL XBL XPCOM XPI Plasticité des Interfaces utilise les répertoires:../../LANGDOC/COURS./EXEMPLES/../LANGDOC/XUL utilise les répertoires:../../LANGDOC/COURS./EXEMPLES/../LANGDOC/XUL Web GUI Mozilla Project Web GUI Mozilla Project

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

3 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 3 18/06/2015 n Les extensions Mozilla  Firefox: Firebug, etc...  Thunderbird  autres n Les applications "standalone"  Komodo, Blue Grifon, Redcar, Editix  Filezilla, Buzzbird, ChatZilla, Google Gadget, etc.  List_of_Mozilla-Based_Applications List_of_Mozilla-Based_Applications n concepts CSS3  Box sizing  flexible Box n Points de vue  Les joies de XUL | MDN Les joies de XUL | MDN  XUL user interfaces XUL user interfaces  XUL vs. HTML 5 XUL vs. HTML 5  XUL est-il encore le bon choix pour une applic. web riche ? XUL est-il encore le bon choix pour une applic. web riche ? Avec et sur XUL...

4 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 4 18/06/2015 Les Boites flexibles de CSS3 n display:box  box-orient  box-direction  box-ordinal-group  box-flex  box-pack  box-align body{ display : box; box-orient : horizontal; box-direction : reverse; box-pack : center; /* horizontalement */ box-align : center; /* verticalement */ } #boite1 { box-ordinal-group : 2; box-flex : 2; } #boite2 { box-ordinal-group : 2; box-flex : 1; } #boite3 { box-ordinal-group : 1; box-flex : 1; } n « Le modèle de boite flexible CSS3 permet de déterminer la façon dont des boites sont distribuées au sein d'autres boites (horizontalement ou verticalement) et comment elles se répartissent l'espace disponible entre elles. n Ce modèle de boite est utilisé par XUL (le langage de définition d'interface des produits Mozilla). Des mécanismes similaires sont utilisés par de nombreux autres langages de description d'interface comme XAML ou GladeXML. » n « Le modèle de boite flexible CSS3 permet de déterminer la façon dont des boites sont distribuées au sein d'autres boites (horizontalement ou verticalement) et comment elles se répartissent l'espace disponible entre elles. n Ce modèle de boite est utilisé par XUL (le langage de définition d'interface des produits Mozilla). Des mécanismes similaires sont utilisés par de nombreux autres langages de description d'interface comme XAML ou GladeXML. »

5 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 5 18/06/2015 XUL based Applications Getting started with XULRunner XULRunner (download) XUL Gear (ext. FF)

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

7 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 7 18/06/2015 n Web  cours "XML" SI-4 http:www.polytech.unice.fr/~pfz/document.html http:www.polytech.unice.fr/~pfz/document.html  Mozilla Development Center https://developer.mozilla.org/Fr https://developer.mozilla.org/Fr  XULPlanet http://www.xulplanet.com/http://www.xulplanet.com/  XULFR.org http://mozillazine-fr.org/annuaire- mozilla/fr/developpeurs/http://mozillazine-fr.org/annuaire- mozilla/fr/developpeurs/  xul.fr http://www.xul.fr/http://www.xul.fr/  XULforum http://www.xulforum.org/site/ http://www.xulforum.org/site/ n Biblio:  Xul Tutorial (pdf) Xul Tutorial (pdf)  Rapid Application development with Mozilla Rapid Application development with Mozilla  ouvrages disponibles. ouvrages disponibles Références

8 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 8 18/06/2015 n-Tier Architecture for Web light Client Presentation Layer Client Data Layer Application (Business) Layer Application (Business) Layers Server HTML CSS DHTML, JS AJAX XML XSL Data Bases C, Java, C++

9 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Server Transparent 9 18/06/2015 RIA Architecture Rich Client Data Base Datas Style Structure XML, RDF CSS, XSL Networking Contrôle & Web Services JS, DOM SOAP, WSDL http, AJAX Applicatio n

10 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 10 18/06/2015 "Light Client" vs "Rich Client" (R.I.A.) Rich Client XML XSL Data Bases "import" of fonctionalities dynamic interface transform metadata multi-formats HTML, CSS DHTML, JS, AJAX reduce the back&forth needs

11 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf 18/06/2015 Web GUI main concepts n Layout  Boxes or Canvas or both ?  Attribute Rules vs Programmation  Structure vs Computation ? n Widgets n Event Programming & Animation n Data Generation & "Pouring" n Media-type Processing n Networking n Design

12 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf 18/06/2015 State of "my"Art j.b.X. (just before Xul) Web GUI based on n Navigators n XML + XSL + CSS as input n 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.xsl

13 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf 18/06/2015 XML as metadatas for Web GUI n SPRY (Adobe Labs) SPRY  using XML to describe "contents"  using JS & DOM to generate wIdgets & "contents"  using AJAX to access/modify "contents" n from RDF, XML to PHP/SQLRDF, XML  using XML/RDF to describe "contents"  using XSLT from XML to SQL  exporting from SQL to XML n XSLT 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) n XUL (Mozilla Foundation) XUL  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"

14 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf XSL JS 18/06/2015 XML as metadatas & XSLT CSS HTML XSLT XML rdf XML.xsl XSLT Pfz's State of the Art RefsWeb TechnosWeb Exam LDOC 2012

15 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 15 18/06/2015 Web Reference Browser de XML vers HTML5+CSS3 html xml css via xsl css dtd xsd metadata.xml

16 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 16 18/06/2015 Doc Example Browsers de XML vers HTML5+CSS3+JS html metadata xml css via xsl xsd dtd js css TechnosWeb.xml

17 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 17 18/06/2015 XML (meta) modèle de données (ERD ) <Code titre keywords file version > <Description libellé* img? > <Categorie type path > <Show version > 1,* 1,? n,m uses: n,m used_by: n,m Type Aut Path Keyword

18 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf JS 18/06/2015 R.I.A. - XML as metadatas & SPRY CSS, XSL HTML DHTML AJAX SPRY Rich Client XML rdf DHTML XML rdf

19 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 19 18/06/2015 Spry: framework JS pour dHTML n Librairie (libre) JS par Adobe Labs n 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") n Implémentation  (X)HTML + "Include" JS  DOM  XML  CSS  HTTP + AJAX  intégration complète avec DW CS n sur le Web  http://labs.adobe.com/technol ogies/spry/ http://labs.adobe.com/technol ogies/spry/  http://labs.adobe.com/wiki/ind ex.php/Spry http://labs.adobe.com/wiki/ind ex.php/Spry  http://www.adobe.com/devnet /spry/ http://www.adobe.com/devnet /spry/  http://labs.adobe.com/technol ogies/spry/demos/index.html http://labs.adobe.com/technol ogies/spry/demos/index.html

20 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 20 18/06/2015 Spry - Schéma & Utilisation ….. cours 1 cours 2 cours 3 HTML généré interpréteur JS Dom

21 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 21 18/06/2015 Spry - Génération de XML DATA SETs var dsBib = new Spry.Data.XMLDataSet("bib.xml", "Bib/Article"); dsBib.setColumnType("Date", "date"); Titre Date ref {Title} {Date} {@ref} mis à plat "flatening" TitleDateEdit@ref

22 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 22 18/06/2015 Spry: Démos

23 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Comment un Arbre (une forêt, en fait)...? XML Parseur XMLs CSS XSL DOM XML DOM XSL

24 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf...peut en cacher un Autre Comment un Arbre... ? XML Parseur XMLs CSS XSL DOM XML DOM XSL DOM

25 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Peut en cacher un Autre Peut en cacher un Autre... ? XML Parseur XMLs CSS XSL DOM XML DOM XSL DOM... qui contrôle (modifie) les 2 premiers

26 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Peut en cacher un Autre Peut en cacher un Autre... ? XML Parseur XMLs CSS XSL DOM XML DOM XSL DOM... qui contrôle (modifie) les 2 premiers

27 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf 18/06/2015 Goto the Best of Xul n Xul Element Table Xul Element Table n Dynamic DOM Dynamic DOM  cursor coordinates  add (copy) Buttons  check from input  delete menu item  scroll To Visible n Slide-show (anything) with XBL Slide-show (anything) with XBL n XUL with SVG XUL with SVG n Pfz's Tutorial Pfz's Tutorial n Xul with RDF Xul with RDF n XUL with XPCOM XUL with XPCOM

28 XPFE et le XUL sous Mozilla ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Paul Franchi SI 5 2013-14 18/06/2015 Transparent - 28 Chap I - Mozilla & XPFE/XUL Historique Standards Lexique Références Architecture XPFE Historique Standards Lexique Références Architecture XPFE

29 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 29 18/06/2015 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

30 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Events DOMs XPConnect Transparent 30 LDAP SOAP POP files Sockets RDF HTML XUL XBL XML SVG JS CSS XUL & XPFE

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

32 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 32 18/06/2015 Mozilla Structure & Components n Packages "Content" .xul pour les "windows" et "elements" browser.xul .js pour les fichiers de script browser.js  contents.rdf n Packages "Skin"  fichiers de style.css: browser.css  fichiers images n 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" /Mozilla Firefox /chrome

33 XPFE et le XUL sous Mozilla ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Paul Franchi SI 5 2013-14 18/06/2015 Transparent - 33 Intro Boxes & Spacers Texts & Buttons ToolBar & Menu Intro Boxes & Spacers Texts & Buttons ToolBar & Menu Group & Tabboxes Lists & Grids Panels & Splitters Stack & Decks Group & Tabboxes Lists & Grids Panels & Splitters Stack & Decks Layout Tree Chap II - XUL - les Bases

34 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 34 18/06/2015 <window id="findfile-window" title="XUL-Essai1" orient="horizontal" xmlns=http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xulhttp://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul > Entrez votre critère pour démarrer la recherche.

35 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 35 18/06/2015 id, class, style orient width, heigth, min-, max- flex pack align

36 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 36 18/06/2015 <button label="ALERT" style="min-width: 100px;" oncommand="alert ('Le bouton a été pressé !');"/> <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");' /> id, class, style label, crop image disabled, selected, checked accesskey oncommand onclick

37 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 37 18/06/2015 Donner son profil puis se loger ci-dessous. <textbox id="profil" multiline="true" value="compléter votre profil ici"/> <label control="pass" type="password" value="Mot de passe:"/> id, class, style value control type multiline maxlength onclick

38 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 38 18/06/2015

39 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 39 18/06/2015 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 XUL XBL XML RDF CONTENT TREE LAYOUT BOX TREE

40 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 40 18/06/2015 Les secrets de XUL n Architecture XPFE ouverte n Compatibilité avec les standards XML, DOM, CSS n Deux Arborescences distinctes pour Contenu et Présentation n Un type parent "Box" pour tous les objets graphiques n 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

41 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 41 18/06/2015 n Héritage, Masquage, Cascading  CSS properties: font, color, etc.  Box properties: pos, size  (X)HTML defaults n DOM Navigation "Orderings"  child(), sibling()  first(), last() n Modifications  par sous arbres: XSL, RDF, XBL  eval. incrémentales ("refresh")

42 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 42 18/06/2015 CSS ::-moz-

43 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 43 18/06/2015 container primary open

44 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 44 18/06/2015 enableColumnDrag persist

45 XPFE et le XUL sous Mozilla ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Paul Franchi SI 5 2013-14 18/06/2015 Transparent - 45 (X)HTML CSS avec -moz les "skins" (X)HTML CSS avec -moz les "skins" Chap III - XUL et le Style

46 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 46 18/06/2015 <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" > Entrez votre critère pour démarrer la recherche.

47 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 47 18/06/2015 CSS Mozilla -moz-opacity -moz-border-radius -moz-image-region -moz-box-orient treechildren::-moz-tree-row(makeItBlue) { background-color: red; } CSS 2 & CSS3 button #special-button.bigbuttons button.bigbuttons toolbar > button toolbar > button.bigbuttons button.bigbuttons:hover button#special-button:active box[orient="horizontal"] n CSS Mozilla trees ::-moz-tree-cell ::-moz-tree-row ::-moz-tree-column ::-moz-tree-line ::-moz-tree-indentation

48 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 48 18/06/2015 créer un thème "skin" menubar { background-color: red; } n customizes ton FF 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 0px 0px; } 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; } / Doc&Sett/pfz /Application data /Profiles/chrome / Doc&Sett/pfz /Application data /Profiles/chrome

49 XPFE et le XUL sous Mozilla ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Paul Franchi SI 5 2013-14 18/06/2015 Transparent - 49 XUL DOM Changer les Styles XUL DOM Changer les Styles Chap IV - XUL Dynamique, JS + DOM

50 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 50 18/06/2015 function addButton() { var aBox = document.getElementById("aBox"); var button = document.createElement("button"); button.setAttribute("label","A Button"); aBox.appendChild(button); } n créer, copier des boutons n tester, modifier des listes n gérer les "events" n animation n etc. XUL + DOM + JS

51 XPFE et le XUL sous Mozilla ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Paul Franchi SI 5 2013-14 18/06/2015 Transparent - 51 TextScan TextScan Chap V - XUL Génération de Contenu RDF/XML(new FF3)

52 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 52 18/06/2015 Template + RDF zoo.rdf <RDF:Description Z:specimens="101" rdf:about="http://www.zoo.com/mammals"> Lion

53 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf zoo.xml … Transparent 53 18/06/2015 New FF3: Template + XML (external)

54 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 54 18/06/2015 New FF3: Template + XML (internal) …

55 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 55 18/06/2015 <vbox datasources="rdf:bookmarks" ref="NC:BookmarksRoot" flex="1"> <button uri="rdf:*" label="rdf:http://home.netscape.com/NC-rdf#Name"/> datasources ref uri content xulex file:///C:/path Chrome: enregistrement n URL: chrome://xulex/content/BM.xul BM.xul /Mozilla Firefox /chrome

56 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 56 18/06/2015

57 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 57 18/06/2015 <listitem uri="rdf:*" label="rdf:http://www.essi.fr/textes/rdf#title" selected="true" filename="rdf:http://www.essi.fr/textes/rdf#filename" path="rdf:http://www.essi.fr/textes/rdf#path" /> datasources ref uri textes.rdf

58 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 58 18/06/2015

59 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 59 18/06/2015 photos.rdf weather.rdf

60 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 60 18/06/2015 <arrowscrollbox orient="vertical" flex="1" minheight="150" maxheight="350" id="list_gauche" datasources="docShow.xml" ref="*" querytype="xml" > <button uri="?" width="20" orient="vertical" path="?path" label="?title" selected="true" filename="?filename" base="?dossier" class="menu_gauche" > datasources= expr= querytype='xml' builder.rebuild() show.xml showFilters.xml RDF/XML Filtering show.xbl show.css

61 XPFE et le XUL sous Mozilla ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Paul Franchi SI 5 2013-14 18/06/2015 Transparent - 61 Chap VI - XBL Extensions/Comportements

62 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 62 18/06/2015 n Syntaxes & Liaisons XBL:Xml Binding Language <?xml-stylesheet href="chrome://global/skin/" type="text/css"? <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> box.okcancelbuttons { -moz-binding: url('example.xml#okcancel'); }

63 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 63 18/06/2015 n Extensions  Content Xml Binding Language includes inherits scrbb_xbl scrbb.css

64 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 64 18/06/2015 n Implementation  Fields  Properties  Methods n Events  handler n Héritage Xml Binding Language onset, onget event, key, modifiers action this.value="http;//www"+this.value; extends

65 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 65 18/06/2015.slideshow { -moz-binding: url("sshow.xml#slideshow"); }

66 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 66 18/06/2015 <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul> <xul:button xbl:inherits="label=previoustext" oncommand="parentNode.parentNode.parentNode.page--;"/> <xul:button xbl:inherits="label=nexttext" oncommand="parentNode.parentNode.parentNode.page++;"/>

67 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 67 18/06/2015 var totalpages=this.childNodes.length; document.getAnonymousNodes(this)[0].childNodes[1].childNodes[1]. setAttribute("value",(this.page+1)+" of "+totalpages); <property name="page" onget="return parseInt(document.getAnonymousNodes(this)[0].childNodes[0].getAttribute('selectedIndex'));" onset="return this.setPage(val);"/> <![CDATA[ var thedeck=document.getAnonymousNodes(this)[0].childNodes[0]; var totalpages=this.childNodes.length; if (newidx<0) return 0; if (newidx>=totalpages) return totalpages; thedeck.setAttribute("selectedIndex",newidx); document.getAnonymousNodes(this)[0].childNodes[1].childNodes[1].setAttribute("value",(newidx+1)+" of "+totalpages); return newidx; ]]>

68 XPFE et le XUL sous Mozilla ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Paul Franchi SI 5 2013-14 18/06/2015 Transparent - 68 Chap VII - XUL: Modularité

69 XPFE et le XUL sous Mozilla ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Paul Franchi SI 5 2013-14 18/06/2015 Transparent - 69 Composants Services Composants Services Chap VIII - XPCOM Cross Platform Component Object Model

70 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 70 18/06/2015 XPCOM – Components n XPCOM Components  Components are dedicated to specific tasks: File, Menu, Buttons, etc;  Appel par un script XPConnect n Calling XP Components  Get THE Component supporting THE desired Interface (API) : createInstance  Get the Interface implementation: QueryInterface  Call THE Function of THE Interface var aFile = Components.classes["@mozilla.org/file/local;1"]. createInstance() ; if (aFile instanceof Components.interfaces.nsILocalFile) { aFile.initWithPath("/mozilla/testfile.txt"); aFile.remove(false); } 18/06/2015

71 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 71 18/06/2015 XPCOM – Services n XPCOM Services  Get THE Service supporting THE desired Interface (API) : getService  Get the Interface implementation: QueryInterface  Call THE Function of THE Interface function addBookMark(URLwho, URLtitle) { var bmarks = Components.classes ["@mozilla.org/browser/bookmarks-service;1"]. getService() ; if (!bmarks) { alert("bookmarks-service FAILS !"); return false ;} bmarks. QueryInterface ( Components.interfaces.nsIBookmarksService); bmarks.addBookmarkImmediately((URLwho, URLtitle, 0, null); } /Mozilla Firefox /chrome

72 XPFE et le XUL sous Mozilla ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Paul Franchi SI 5 2013-14 18/06/2015 Transparent - 72 avec XHTML avec SVG avec MathML avec XHTML avec SVG avec MathML Chap IX - XUL: et les Autres

73 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 73 18/06/2015 XUL & XHTML & SVG &XLINK <window title="TestSVG" orient="horizontal" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <svg-shape id="background-circle" flex="1" type="circle" /> <bindings xmlns= "http://www.mozilla.org/xbl" xmlns:xbl= "http://www.mozilla.org/xbl" xmlns:html= "http://www.w3.org/1999/xhtml" xmlns:xul= "http://www.mozilla.org/keymaste r/gatekeeper/there.is.only.xul" xmlns:svg= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" > svg-shape { -moz-binding: url("shape.xml#shape"); }

74 XPFE et le XUL sous Mozilla ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Paul Franchi SI 5 2013-14 18/06/2015 Transparent - 74 extrait de "Langages & Documents" RDF/XML Dublin Core OWL RDF validator RDF validator RDF/XML Dublin Core OWL RDF validator RDF validator Annexe 1 - RDF "Resource Description Framework"

75 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 75 18/06/2015 RDF- Resource Description Framework (W3C) n RDF is a part of the W3C's Semantic Web Activity  RDF is a W3C Recommendation  RDF is a framework for describing resources on the web  RDF provides a model for data, and a syntax so that independent parties can exchange and use it  RDF is designed to be read and understood by computers  RDF is not designed for being displayed to people  RDF is a XML Dialect n RDF - Examples of Use  Describing properties for shopping items, such as price and availability  Describing time schedules for web events  Describing information about web pages, such as content, author, created and modified date  Describing content and rating for web pictures  Describing content for search engines  Describing electronic libraries. n RDF and "The Semantic Web"(W3C's "Semantic Web Vision")  Web information has exact meaning  Web information can be understood and processed by computers  Computers can integrate information from the web

76 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 76 18/06/2015 RDF/XML – Resource with Properties and Values n A Resource is anything that can have a URI (about=), such as "http://polytech/LANGDOC/RDF" n A Property is a Resource that has a name, such as or n A Property value, such as "Paul Franchi" or "http://www.polytech.unice.fr/~pfz" n W3C RDF Syntax Validator & Graph Generator W3C RDF Syntax Validator & Graph Generator <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:pol="http://polytech#" > Paul Franchi http://www.polytech.unice.fr/~pfz

77 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf n Un modèle de Graphe Entités/Relations n Une syntaxe RDF/XML pour "sérialiser" le graphe http://polytech.LANGDOC/RDF PFZ http://polytech.unice.fr/~pfz Transparent 77 18/06/2015 RDF - Graphe Entité-Relation http://polytech#author http://polytech#homepage

78 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 78 18/06/2015 RDF: Description, Property, Attribute, Value, resource <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:cd="http://www.Bib/cd#"> <rdf:Description rdf:about="http://www.Bib/cd/Empire Burlesque" cd:artist="Bob Dylan" cd:country="USA" cd:company="Columbia" cd:price="10.90" cd:year="1985" /> CBS Records 1988...

79 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 79 18/06/2015 RDF - W3C Syntax Validator & Graph Generator http://www.w3.org/RDF/Validator/

80 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 80 18/06/2015 RDF: Bag et les autres Conteneurs <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:cd="http://www.Bib/cd#"> John Paul George Ringo

81 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 81 18/06/2015 RDF: Bag, Seq, Alt <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:cd="http://www.Bib/cd#"> John Paul George Ringo... CD Record Tape George John Paul Ringo

82 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 82 18/06/2015 RDF- les utilisations classiques n Dublin Core MetaData n OWL n Mozilla  contents.rdf  chrome.rdf  XUL n Communication par RDF files (génération par Php, etc.) n RSS 1.0

83 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 83 18/06/2015 Dublin Core n The Dublin Core Metadata Initiative (DCMI) has created some predefined properties for describing documents. Property Definition Contributor An entity responsible for making contributions to the content of the resource Coverage The extent or scope of the content of the resource Creator An entity primarily responsible for making the content of the resource Format The physical or digital manifestation of the resource Date A date of an event in the lifecycle of the resource Description An account of the content of the resource Identifier An unambiguous reference to the resource within a given context Language A language of the intellectual content of the resource Publisher An entity responsible for making the resource available Relation A reference to a related resource Rights Information about rights held in and over the resource Source A Reference to a resource from which the present resource is derived Subject A topic of the content of the resource Title A name given to the resource Type The nature or genre of the content of the resource

84 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 84 18/06/2015 Dublin Core <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc= "http://purl.org/dc/elements/1.1/" >http://purl.org/dc/elements/1.1/ http://www.w3schools.com D-Lib Program W3Schools - Free tutorials Refsnes Data as 1999-09-01 Web Development text/html en

85 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 85 18/06/2015 OWL - "Web Ontology Language " (W3C) n What is OWL?  OWL is built on top of RDF as a web standard  OWL is for processing information on the web  OWL was designed to be interpreted by computers  OWL was not designed for being read by people  OWL is written in XML n OWL has three sublanguages:  OWL Lite  OWL DL (includes OWL Lite)  OWL Full (includes OWL DL) n OWL is Different from RDF  OWL is a stronger language with greater machine interpretability than RDF.  OWL comes with a larger vocabulary and stronger syntax than RDF. What is Ontology? For the web, Ontology is about the exact description of web information and relationships between web information. OWL Example (Airport)  OWL Resource: http://www.daml.org/2001/10/ html/airport-ont http://www.daml.org/2001/10/ html/airport-ont  Class: AirportAirport  Properties:  elevation elevation  iataCode iataCode  icaoCode icaoCode  latitude latitude  location location  longitude longitude  name name

86 XPFE et le XUL sous Mozilla ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Paul Franchi SI 5 2013-14 18/06/2015 Transparent - 86 Http synchrone XMLHttpRequest Http synchrone XMLHttpRequest extrait de "Langages & Documents" Annexe II - AJAX "Asynchronous JavaScript And XML"

87 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 87 18/06/2015 n AJAX is not a new programming language, but a technique for creating better, faster, and more interactive web applications. n With AJAX, your JavaScript can communicate directly with the server, using the JavaScript XMLHttpRequest object. With this object, your JavaScript can trade data with a web server, without reloading the page. n AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages. n The AJAX technique makes Internet applications smaller, faster and more user-friendly. n AJAX is a browser technology independent of web server software. n AJAX is based on the following web standards:  JavaScript  XML  HTML  CSS AJAX- Asynchronous JavaScript and XML

88 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 88 18/06/2015 function HTTP() { } HTTP() ; Côté "Client" send() open(GET,...) new XMLHttpRequest status responseText responseXML Côté "Serveur" AJAX : schéma "HttpRequest / Response"

89 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 89 18/06/2015 L'Objet XMLHttpRequest n Attributs  readyState  status 200 si ok - 404 si la page n'est pas trouvée.  responseText données chargées dans une chaîne de caractères.  responseXml données chargées sous forme xml,  onreadystatechange propriété activée par un évènement de changement d'état. On lui assigne une fonction. n Méthodes  open(mode, url, boolean)  mode: type de requête, GET ou POST  url: l'adresse des données,  boolean: true (asynchrone) / false (synchrone).  en option on peut ajouter un login et un mot de passe.  send("chaine") null pour une commande GET. n Attributs  readyState  status 200 si ok - 404 si la page n'est pas trouvée.  responseText données chargées dans une chaîne de caractères.  responseXml données chargées sous forme xml,  onreadystatechange propriété activée par un évènement de changement d'état. On lui assigne une fonction. n Méthodes  open(mode, url, boolean)  mode: type de requête, GET ou POST  url: l'adresse des données,  boolean: true (asynchrone) / false (synchrone).  en option on peut ajouter un login et un mot de passe.  send("chaine") null pour une commande GET. n 0 (non init) n 1 (connexion) n 2 (requete) n 3 (réponse), n 4 (terminé) n 0 (non init) n 1 (connexion) n 2 (requete) n 3 (réponse), n 4 (terminé)

90 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 90 18/06/2015 function submitForm() { var xhr; try { xhr = new ActiveXObject('Msxml2.XMLHTTP'); } catch (e) { //IE try { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e2) { //FF try { xhr = new XMLHttpRequest(); } catch (e3) { xhr = false; } } xhr.onreadystatechange = function() { if(xhr.readyState == 4) { if(xhr.status == 200) document.ajax.dyn="Received:" + xhr.responseText; else document.ajax.dyn="Error code " + xhr.status; } }; xhr.open( GET", "data.xml", true); xhr.send(null); } Script AJAX

91 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 91 18/06/2015 function syncHTTP() { try { var xmlHttp; try { // IE7, Firefox, Opera 8.0+, Safari netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead"); xmlHttp=new XMLHttpRequest(); } catch (e) { alert("Your browser is not a good one!"); return false; } xmlHttp.open ("GET","http://www.w3schools.com/ajax/time.asp", false); // synchrone xmlHttp.send (null); if(xmlHttp.status != 200) { throw new ERROR("HTTP " + xmlHttp.status); } //200=OK document.myForm.time.value=xmlHttp.responseText; } catch (e) { alert("Erreur au HTTP"); return false;} } // syncHTTP() Name: Time: "Http synchrone" "Request" synchrone sur un serveur

92 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 92 18/06/2015 var xmlHttp; function ajaxFunction() { /* voir suivant */ xmlHttp.onreadystatechange = function() { /* voir suivant */ } Name: <input type="text" onkeyup="ajaxFunction();" name="username" /> Time: n XMLHttpRequest asynchrone: onreadystatechange() "Request" sur un serveur (url,.asp ou.php)

93 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 93 18/06/2015 function ajaxFunction() { var xmlHttp; try { // IE7, Firefox, Opera 8.0+, Safari netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead"); xmlHttp = new XMLHttpRequest(); } catch (e) { // Internet Explorer 6 et - try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Your browser does not support AJAX!"); return false; } } xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState==4) { document.myForm.time.value = xmlHttp.responseText; } } xmlHttp.open("GET","http://www.w3schools.com/ajax/time.asp", true); xmlHttp.send (null); } // ajaxFunction n XMLHttpRequest asynchrone: onreadystatechange() "Request" sur un serveur (url,.asp ou.php)

94 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 94 18/06/2015 <![CDATA[ var xmlhttp; function loadXMLDoc (url) { xmlhttp=null; if (window.XMLHttpRequest) { // code for IE7, Firefox, Mozilla, etc. netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead"); xmlhttp=new XMLHttpRequest(); } else if (window.ActiveXObject) { // code for IE5, IE6 xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP"); } if (xmlhttp!=null) { xmlhttp.onreadystatechange = onResponse; xmlhttp.open ("GET", url, true); xmlhttp.send (null); } else { alert ("Your browser does not support XMLHTTP."); } } n XMLHttpRequest asynchrone: onResponse() "Request" sur un document.xml

95 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 95 18/06/2015 function onResponse() { if (xmlhttp.readyState!=4) return; if (xmlhttp.status!=0 && xmlhttp.status!=200) // OK? { alert ("Problem retrieving XML data"); return; } TRAITEMENT_DU_XML() ; // ou TRAITEMENT_DU_TEXTE() } ]]> Get CD info n XMLHttpRequest asynchrone: onResponse() "Request" sur un document.xml

96 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 96 18/06/2015 TRAITEMENT_DU_TEXTE() { // extraction du "string source" var reponse = xmlhttp.responseText ; /******* traitement avec RegExp, match(), split(), substr(), slice(), etc. ****/ var debut=new RegExp ("[\\d\\D]*? "); alert (xmlhttp.responseText.match(debut)[0]) ; } n XMLHttpRequest: responseText "Request" sur un document.xml

97 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 97 18/06/2015 TRAITEMENT_DU_XML() { txt=" "; x = xmlhttp.responseXML. documentElement.getElementsByTagName("CD"); for (i=0;i<x.length;i++) { txt=txt + " "; xx=x[i].getElementsByTagName("TITLE"); { try { txt=txt + " " + xx[0].firstChild.nodeValue + " "; } catch (er) { txt=txt + " "; } } xx=x[i].getElementsByTagName("ARTIST"); { try { txt=txt + " " + xx[0].firstChild.nodeValue + " "; } catch (er) { txt=txt + " "; } } txt=txt + " "; } txt=txt + " "; document.getElementById('copy').innerHTML = txt; } n XMLHttpRequest: responseXML. "Request" sur un document.xml