Plasticité des Interfaces

Présentation au sujet: "Plasticité des Interfaces"— Transcription de la présentation:

1 Plasticité des Interfaces
01/04/2017 Plasticité des Interfaces utilise les répertoires: ../../LANGDOC/COURS ./EXEMPLES/ ../LANGDOC/XUL XUL XBL XPCOM XPI Web GUI Mozilla Project Objectif pédagogique Introduction aux documents hypertextes: langages de définition, manipulation et édition 01/04/2017 Langages & Documents

2 Bien s'installer sous XUL/Firefox
01/04/2017 Bien s'installer sous XUL/Firefox 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 user_pref( "nglayout.disable_xul_cache", true); "nglayout.disable_xul_fastload", 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" 01/04/2017 Langages & Documents

3 Sommaire du Cours Introduction - Web GUI & Clients "Riches"
01/04/2017 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 01/04/2017 Transparent 3 Langages & Documents ESSI - 2 – Paul Franchi

4 01/04/2017 Références Web cours "XML" SI-4 Mozilla Development Center XULPlanet XULFR.org xul.fr XULforum Biblio: Xul Tutorial (pdf) Rapid Application development with Mozilla ouvrages disponibles. 01/04/2017 Langages & Documents

5 n-Tier Architecture for Web light Client
01/04/2017 n-Tier Architecture for Web light Client ApI HTML CSS DHTML, JS AJAX Client CGI Presentation Layer Servlet, JSP PHP, ASP C, Java, C++ XML XSL Application (Business) Layer Application (Business) Layer Application (Business) Layers ApI Hypertrophy Data Layer SQL Apache Data Bases Server 01/04/2017 Transparent 5 Langages & Documents ESSI - 2 – Paul Franchi

6 PHP, ASP ApI ApI ApI ApI SQL ApI
01/04/2017 RIA Architecture Rich Client Server XML, RDF Structure PHP, ASP Networking http, AJAX Style CSS, XSL Application Contrôle & Web Services ApI Application ApI Application JS, DOM SOAP, WSDL ApI ApI SQL Data Base Datas ApI 01/04/2017 Transparent 6 Langages & Documents ESSI - 2 – Paul Franchi

7 "Light Client" vs "Rich Client" (R.I.A.)
01/04/2017 "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 01/04/2017 Transparent 7 Langages & Documents ESSI - 2 – Paul Franchi

8 Web GUI main concepts Layout Boxes or Canvas or both ?
01/04/2017 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 01/04/2017 Langages & Documents

9 State of "my"Art j.b.X. (just before Xul)
01/04/2017 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 01/04/2017 Langages & Documents ESSI - 2 – Paul Franchi

10 XML as metadatas for Web GUI
01/04/2017 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 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" 01/04/2017 Langages & Documents ESSI - 2 – Paul Franchi

11 XSLT Pfz's State of the Art
01/04/2017 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 01/04/2017 Langages & Documents ESSI - 2 – Paul Franchi

12 Web Reference Browser xml dtd xsd html css css de XML vers HTML5+CSS3
metadata .xml de XML vers HTML5+CSS3 via xsl 01/04/2017 Transparent 12 ESSI - 2 – Paul Franchi 12

13 de XML vers HTML5+CSS3+JS
Doc Example Browsers TechnosWeb .xml dtd xsd html css css css js metadata xml via xsl de XML vers HTML5+CSS3+JS 01/04/2017 Transparent 13 ESSI - 2 – Paul Franchi 13

14 XML (meta) modèle de données (ERD )
<Show version > uses: n,m used_by: n,m <Categorie type path > 1,* <Code titre keywords file version > <Description libellé* img? > 1,* 1,? n,m <Auteur> Type Keyword Keyword Path Keyword Keyword Aut Keyword 01/04/2017 Transparent 14 ESSI - 2 – Paul Franchi 14

15 R.I.A. - XML as metadatas & SPRY
01/04/2017 R.I.A. - XML as metadatas & SPRY XML rdf Rich Client XML rdf HTML SPRY CSS, XSL JS DHTML AJAX DHTML 01/04/2017 Langages & Documents ESSI - 2 – Paul Franchi

16 Spry: framework JS pour dHTML
01/04/2017 Spry: framework JS pour dHTML avec une assistance 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 compatible avec HTML, XHTML, CSS XML, et Dialectes XSLT, XUL sur le Web 01/04/2017 Transparent 16 Langages & Documents ESSI - 2 – Paul Franchi

17 Spry - Schéma & Utilisation
01/04/2017 Spry - Schéma & Utilisation versions Spry <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 01/04/2017 Transparent 17 Langages & Documents ESSI - 2 – Paul Franchi

18 Spry - Génération de XML DATA SETs
01/04/2017 Spry - Génération de XML DATA SETs <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 </tr> <tr spry:repeat="dsBib" spry:setrow="dsBIb"> <td>{Title}</td> <td>{Date}</td> </tr> </table> </body></html> <head> </script><script src="SpryAssets/xpath.js"… /> </script><script src="SpryAssets/SpryData.js" … /> </head> XPath Code Partiel "flatening" mis à plat Title Date Edit @ref JS Object 01/04/2017 Transparent 18 Langages & Documents ESSI - 2 – Paul Franchi

19 Spry: Démos 01/04/2017 Transparent 19
Langages & Documents ESSI - 2 – Paul Franchi

20 XML +XSL Comment un Arbre (une forêt, en fait) ...? avec une démarche
01/04/2017 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" Langages & Documents

21 XML +XSL Comment un Arbre ... ? ...peut en cacher un Autre Dom XML XML
01/04/2017 Comment un Arbre ... ? XML +XSL Dom XML XML CSS Dom XSL XSL Parseur XMLs Dom ...peut en cacher un Autre Langages & Documents

22 XML +XSL JS Peut en cacher un Autre ... ?
01/04/2017 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 Langages & Documents

23 JS XML +XSL Peut en cacher un Autre ... ?
01/04/2017 Peut en cacher un Autre ... ? JS XML +XSL Dom XML XML CSS Dom XSL XSL Parseur XMLs Dom ... qui contrôle (modifie) les 2 premiers Peut en cacher un Autre Langages & Documents ESSI - 2 – Paul Franchi

24 Xul Periodic Table Goto the Best of Xul Xul Element Table Dynamic DOM
01/04/2017 Goto the Best of Xul Xul Periodic 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 01/04/2017 Langages & Documents

25 Chap I - Mozilla & XPFE/XUL
01/04/2017 Chap I - Mozilla & XPFE/XUL Historique Standards Lexique Références Architecture XPFE Objectif pédagogique Introduction aux documents hypertextes: langages de définition, manipulation et édition 01/04/2017 Langages & Documents

26 Historique & Standards
I am Mosaic Killer 01/04/2017 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" 01/04/2017 Langages & Documents

27 XUL XPCOM XUL & XPFE Events LDAP SOAP POP files Sockets DOMs JS
01/04/2017 XUL & XPFE XUL Events XUL XBL LDAP SOAP POP files Sockets SVG XML DOMs HTML JS CSS XPCOM RDF XPConnect Langages & Documents

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

29 Mozilla Structure & Components
01/04/2017 Mozilla Structure & Components /Mozilla Firefox /chrome le répertoire "chrome/" file.manifest l'url chrome://global/skin/ extensions + privilèges 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 Utilisation "pointilleuse" 01/04/2017 Langages & Documents

30 Chap II - XUL - les Bases Intro Boxes & Spacers Group & Tabboxes
01/04/2017 Chap II - XUL - les Bases Intro Boxes & Spacers Texts & Buttons ToolBar & Menu Group & Tabboxes Lists & Grids Panels & Splitters Stack & Decks Objectif pédagogique Introduction aux documents hypertextes: langages de définition, manipulation et édition Layout Tree 01/04/2017 Langages & Documents

31 ...can also say "hello World"
01/04/2017 my First XUL ... <?xml version="1.0" encoding="iso "?> <?xml-stylesheet href="window.css" type="text/css"?> <window id="findfile-window" title="XUL-Essai1" orient="horizontal" xmlns= > <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> <button label="HELLO" oncommand="alert('hello World!');"/> </vbox> </window> ...can also say "hello World" <window> 01/04/2017 Langages & Documents

32 <box> <hbox> <vbox>
01/04/2017 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> </vbox> </window> <box> <hbox> <vbox> <spacer> id, class, style orient width, heigth, min- , max- flex pack align 01/04/2017 Langages & Documents

33 my Buttons are Boxes <window ....> <vbox> <hbox>
01/04/2017 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 oncommand onclick 01/04/2017 Langages & Documents

34 <label> <description>
01/04/2017 my Texts 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> <label control="login" value="Login :"/> <textbox id="login"/> <label control="pass" type="password" value="Mot de passe:"/> <textbox id="pass" maxlength="12" /> <label value="Envoyer" onclick="send();"/> </vbox> </window> <label> <description> <textbox> id, class, style value control type multiline maxlength onclick 01/04/2017 Langages & Documents

35 all my Elements are Boxes !
01/04/2017 all my Elements are Boxes ! Xul Periodic Table <caption> <image> <progressbar> <toolbox> <toolbar> <toolbarbutton> <listbox> <listitem> <listhead> <listheader> <listcols> <listcol> <listcell> <menulist> <groupbox> <radiogroup> <stack> <deck> <grid> <rows> <row> <columns> <column> <tabbox> <tabpanel> <tabpanels> <tabs> <tab> <iframe> <browser> <splitter> <gripy> <menubar> <menu> <menupopup> <menuitem> <popupset> <arrowscrollbox> <tree> <template> 01/04/2017 Langages & Documents

36 Layout: la solution Mozilla
01/04/2017 Layout: la solution Mozilla CONTENT TREE 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 not isomorphic ! 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] LAYOUT BOX TREE 01/04/2017 Langages & Documents

37 XUL c'est le XML des GUI ! Les secrets de XUL
01/04/2017 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 ! 01/04/2017 Langages & Documents

38 2 Arbres, sinon Rien ! Héritage, Masquage, Cascading
01/04/2017 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> 01/04/2017 Langages & Documents

39 <treecols> <treecol> <treechildren>
01/04/2017 my Trees <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 <treecell label="Top secret plans"/> </treerow> </treeitem> <treerow> <treecell <treecell label="Let's do lunch"/> </treerow> </treechildren> </tree> </window> <tree> <treecols> <treecol> <treechildren> <treeitem> <treerow> <treececll> CSS ::-moz- 01/04/2017 Langages & Documents

40 my hierachical Trees <window ....> <tree rows="6">
01/04/2017 my hierachical Trees <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> <treeitem> <treerow> <treecell label="Bob"/> <treecell label="Carpenter"/> </treerow> </treeitem> <treecell label="Jerry"/> <treecell label="Hodge"/> </treechildren> </tree> </window> container primary open 01/04/2017 Langages & Documents

41 my remembering state Trees
01/04/2017 <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"/> <treecol id="starttime" label="Start" flex="1" persist="width ordinal hidden"/> <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> <treecell label="Robert Valhalla"/> <treecell label="Seattle"/> <treecell label="7:08:00"/> <treecell label="9:15:51"/> </treechildren> </tree> my remembering state Trees enableColumnDrag persist 01/04/2017 Langages & Documents

42 Chap III - XUL et le Style
01/04/2017 Chap III - XUL et le Style (X)HTML CSS avec -moz les "skins" Objectif pédagogique Introduction aux documents hypertextes: langages de définition, manipulation et édition 01/04/2017 Langages & Documents

43 avec html pREFIXE OBLIGATOIRE possible, mais pas conseillé
01/04/2017 avec html <?xml version="1.0" encoding="iso "?> <window id="findfile-window" title="XUL-Essai1" orient="horizontal" xmlns=" xmlns:html=" > <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é 01/04/2017 Langages & Documents

44 avec CSS tree.xul tree.css CSS 2 & CSS3 CSS Mozilla trees CSS Mozilla
01/04/2017 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 Mozilla trees ::-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 <treerow properties="makeItRed"> treechildren::-moz-tree-row(makeItBlue) { background-color: red; } tree.css 01/04/2017 Langages & Documents

45 my skinS userChrome.css findfile.css /Doc&Sett/pfz /Doc&Sett/pfz
01/04/2017 my skinS 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; customizes ton FF /Doc&Sett/pfz /Application data /Profiles/chrome userChrome.css menubar { background-color: red; } créer un thème "skin" /Doc&Sett/pfz /Application data /Profiles/chrome findfile.css 01/04/2017 Langages & Documents

46 Chap IV - XUL Dynamique, JS + DOM
01/04/2017 Chap IV - XUL Dynamique, JS + DOM XUL DOM Changer les Styles Objectif pédagogique Introduction aux documents hypertextes: langages de définition, manipulation et édition 01/04/2017 Langages & Documents

47 my XUL is Dynamic XUL + DOM + JS créer, copier des boutons
01/04/2017 XUL + DOM + JS my XUL is Dynamic créer, copier des boutons tester, modifier des listes gérer les "events" animation etc. <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> 01/04/2017 Langages & Documents

48 Chap V - XUL Génération de Contenu RDF/XML(new FF3)
01/04/2017 Chap V - XUL Génération de Contenu RDF/XML(new FF3) <tree> <templates> <rule> <query> <action> TextScan Objectif pédagogique Introduction aux documents hypertextes: langages de définition, manipulation et édition 01/04/2017 Langages & Documents

49 01/04/2017 Template + RDF <window …> <tree flex="1" width="200" height="200" datasources="zoo.rdf" ref=" <treecols> <treecol id="name" /> <treecol id="species" /> </treecols> <template> <rule> <treechildren> <treeitem uri='rdf:*'> <treerow> <treecell label="rdf: <treecell label="rdf: </treerow> </treeitem> </treechildren> </rule> </template> </tree> zoo.rdf <RDF:RDF xmlns:Z=" <RDF:Description Z:specimens="101" rdf:about=" <Z:name> Lion </Z:name> </RDF:Description> 01/04/2017 Langages & Documents

50 New FF3: Template + XML (external)
01/04/2017 New FF3: Template + XML (external) <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> zoo.xml <zoo> <about name="Arachnids"> … </about> <about name="Birds"> <about name=" " species=" "> </zoo> 01/04/2017 Transparent 50 Langages & Documents ESSI - 2 – Paul Franchi

51 New FF3: Template + XML (internal)
01/04/2017 New FF3: Template + XML (internal) <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> <zoo id="ZOO"> <about name="Arachnids"> … </about> <about name="Birds"> <about name=" " species=" "> </zoo> 01/04/2017 Transparent 51 Langages & Documents ESSI - 2 – Paul Franchi

52 my templates avec RDF & chrome://
01/04/2017 my templates avec RDF & chrome:// <template> datasources ref uri <window ....> <vbox datasources="rdf:bookmarks" ref="NC:BookmarksRoot" flex="1"> <template> <button uri="rdf:*" label="rdf: </template> </vbox> </window> chrome registration Obligatoire Chrome: enregistrement URL: chrome://xulex/content/BM.xul ~FireFox/chrome/file.manifest /Mozilla Firefox /chrome content xulex file:///C:/path using RDF reload or restart FF en minuscule sous windows BM.xul 01/04/2017 Transparent 52 Langages & Documents ESSI - 2 – Paul Franchi

53 TextScan(1) <window ....> <!-- à compléter -->
01/04/2017 TextScan(1) <window ....> <!-- à compléter --> <vbox id="PAGE" width="600" height="200"> <hbox width="600" height="200" style="background: LightGray"> <vbox width="450" flex="3" style="background: LightGreen"> <groupbox id="desc_group" flex="1"> <caption id="title-caption" /> <vbox flex="1" style="overflow: auto ; background: Yellow" > <description id="main_description" class="whole_text" > </description> </vbox> <label value="Pour voir le contenu d'un texte"/> </groupbox> </vbox> <!-- fin de la "verte" --> <splitter/> <!-- voir suivant --> </hbox> <!-- fin de la "grise" --> </vbox> <!-- fin de la "PAGE" --> </window> 01/04/2017 Langages & Documents

54 TextScan(2) textes.rdf <window ....> <!-- à compléter -->
01/04/2017 TextScan(2) <window ....> <!-- à compléter --> <vbox id="PAGE" width="600" height="200"> <hbox width="600" height="200" style="background: LightGray"> <!-- voir précédent --> <vbox width="150" flex="1" style="background: LightBlue"> <label value="Choisis le texte"/> <listbox id="list_texts" class="menu_text" label="Choisis le texte..." datasources="textes/my_list_textes.rdf" ref=" <template> <listitem uri="rdf:*" label="rdf: selected="true" filename="rdf: path="rdf: /> </template> </listbox> <splitter/> <groupbox flex="1"> <!-- voir suivant --> </groupbox> <button label="Revenir au texte" onclick= "document.getElementById('main_description').setExercise('texte');" /> </vbox> <!-- fin de la "blue" --> </hbox> <!-- fin de la "grise" --> </vbox> <!-- fin de la "PAGE" --> </window> textes.rdf <template> datasources ref uri 01/04/2017 Langages & Documents

55 TextScan(3) <window ....> <!-- à compléter -->
01/04/2017 TextScan(3) <window ....> <!-- à compléter --> <vbox id="PAGE" width="600" height="200"> <hbox width="600" height="200" style="background: LightGray"> <!-- voir précédent --> <vbox width="150" flex="1" style="background: LightBlue"> <groupbox flex="1"> <caption label="Choisis le Test" /> <description value="(Même si ....)"/> <radiogroup id='exercises' class="radio_ex" flex="1"> <radio label="Ponctuation" tooltiptext="Ponctuation?" exercise= 'ponct'/> <radio label="Mots" tooltiptext="Mots?" exercise='mots' /> <radio label="articles" tooltiptext="Articles?" exercise='articles' /> </radiogroup> <separator flex="1" /> </groupbox> </vbox> <!-- fin de la "blue" --> </hbox> <!-- fin de la "grise" --> <splitter/> </vbox> <!-- fin de la "PAGE" --> </window> 01/04/2017 Langages & Documents

56 Advanced <rule>
01/04/2017 Advanced <rule> <template> <rule> <conditions> <content> <member> <triple> <action> <rule> <conditions> <content uri="?site" /> <member container="?site" child="?photo" /> <triple subject="?photo" predicate=" object="?file" /> <triple subject="?photo" predicate=" object="?title" /> </conditions> <action> <vbox uri="?photo" flex="1"> <image style="width:120px; height:90px" src="?file" /> <label crop="end" value="?title" /> </vbox> </action> </rule> weather.rdf photos.rdf using RDF reload or restart FF 01/04/2017 Langages & Documents

57 <template> <rule> <action> <assign>
01/04/2017 RDF/XML Filtering <arrowscrollbox orient="vertical" flex="1" minheight="150" maxheight="350" id="list_gauche" datasources="docShow.xml" ref="*" querytype="xml" > <template> <query id="FILTRE" expr="//doc" > <assign var="?dossier" </query> <action> <button uri="?" width="20" orient="vertical" path="?path" label="?title" selected="true" filename="?filename" base="?dossier" class="menu_gauche" > <image src="?icone" height="40" /> <caption label="?title" crop="right" style="font-size:6pt" /> </button> </action> </template> </arrowscrollbox> <template> <rule> <query> <action> <assign> datasources= expr= querytype='xml' builder.rebuild() show.xml show.css showFilters.xml show.xbl 01/04/2017 Transparent 57 Langages & Documents ESSI - 2 – Paul Franchi

58 Chap VI - XBL Extensions/Comportements
01/04/2017 Chap VI - XBL Extensions/Comportements <binding> Objectif pédagogique Introduction aux documents hypertextes: langages de définition, manipulation et édition 01/04/2017 Langages & Documents

59 XBL:Xml Binding Language
01/04/2017 XBL:Xml Binding Language my sister knows how ! Syntaxes & Liaisons <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"? <?xml-stylesheet href="example.css" type="text/css"?> <window xmlns=" <box class="okcancelbuttons"/> </window> example.xul box.okcancelbuttons { -moz-binding: url('example.xml#okcancel'); } example.css <?xml version="1.0"?> <bindings xmlns=" xmlns:xul=" <binding id="okcancel"> <content> <xul:button label="OK"/> <xul:button label="Cancel"/> </content> </binding> </bindings> example.xml 01/04/2017 Langages & Documents

60 <bindings><binding>
01/04/2017 Xml Binding Language a scrollbarbutton ! <bindings ... > <binding id="scrollbarBinding"> <content> <xul:scrollbarbutton type="decrement"/> <xul:slider flex="1"> <xul:thumb/> </xul:slider> <xul:scrollbarbutton type="increment"/> </content> </binding> </bindings> Extensions Content <bindings><binding> <content> <children> includes inherits scrbb_xbl scrbb.css <scrollbar> <xul:scrollbarbutton type="decrement"/> <xul:slider flex="1"> <xul:thumb/> </xul:slider> <xul:scrollbarbutton type="increment"/> </scrollbar> <scrollbar /> scrbb.xul 01/04/2017 Langages & Documents

61 Xml Binding Language Implementation Events Héritage Fields Properties
01/04/2017 Xml Binding Language <bindings> <binding> <implementation> <field> <property> <method> <parameter> <body> <constructor> <destructor> onset, onget Implementation Fields Properties Methods Events handler Héritage <binding id="scrollbarBinding"> <handlers> <handler event="mouseup" action="this.checked.toggle():" /> </handlers> </binding> <bindings> <binding> <handlers> <handler> event, key, modifiers action <binding id="textboxhttp" extends="textbox.xml#textbox"> </handlers> <handler event="keypress" keycode="VE_F4"> this.value="http;//www"+this.value; </handler> </handlers></binding> <binding> extends 01/04/2017 Langages & Documents

62 XBL Slide (1) shows anything !
01/04/2017 XBL Slide (1) shows anything ! <?xml-stylesheet href="sshow.css" type="text/css"?> <window .... > <box class="slideshow" previoustext="Previous" nexttext="Next" flex="1"> <!-- on met ci-dessous ce que l'on veut afficher --> <button label="Button 1"/> <image src="../../../IMAGES/GOOGLE_icon.jpg" /> <label control="INPUT" value="ENTRER VOTRE TEXTE" /> <textbox id="INPUT" multiline="true"/> </box> </window> sshow.xul .slideshow { -moz-binding: url("sshow.xml#slideshow"); } sshow.css 01/04/2017 Langages & Documents

63 XBL Slide(2) works like that
01/04/2017 XBL Slide(2) works like that <?xml version="1.0"?> <bindings xmlns=" xmlns:xbl=" xmlns:html=" xmlns:xul=" <binding id="slideshow"> <content> <xul:vbox flex="1"> <xul:deck xbl:inherits="selectedIndex" selectedIndex="0" flex="1"> <children/> </xul:deck> <xul:hbox> <xul:button xbl:inherits="label=previoustext" oncommand="parentNode.parentNode.parentNode.page--;"/> <xul:description flex="1"/> <xul:button xbl:inherits="label=nexttext" oncommand="parentNode.parentNode.parentNode.page++;"/> </xul:hbox> </xul:vbox> </content> <! -- voir suivant --> </binding></bindings> sshow.xml 01/04/2017 Langages & Documents

64 XBL Slide(3) sshow.xml <binding id="slideshow">
01/04/2017 <binding id="slideshow"> <! -- voir précédant --> <implementation> <constructor> var totalpages=this.childNodes.length; document.getAnonymousNodes(this)[0].childNodes[1].childNodes[1] setAttribute("value",(this.page+1)+" of "+totalpages); </constructor> <property name="page" onget="return parseInt(document.getAnonymousNodes(this)[0].childNodes[0].getAttribute('selectedIndex'));" onset="return this.setPage(val);"/> <method name="setPage"> <parameter name="newidx"/> <body> <![CDATA[ var thedeck=document.getAnonymousNodes(this)[0].childNodes[0]; 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; ]]> </body> </method> </implementation> </binding> </bindings> XBL Slide(3) sshow.xml 01/04/2017 Langages & Documents

65 Chap VII - XUL: Modularité
01/04/2017 Chap VII - XUL: Modularité <overlay> Objectif pédagogique Introduction aux documents hypertextes: langages de définition, manipulation et édition 01/04/2017 Langages & Documents

66 Chap VIII - XPCOM Cross Platform Component Object Model
01/04/2017 Chap VIII - XPCOM Cross Platform Component Object Model Composants Services Objectif pédagogique Introduction aux documents hypertextes: langages de définition, manipulation et édition 01/04/2017 Langages & Documents

67 XPCOM – Components XPCOM Components Calling XP Components Contrat ID
01/04/2017 XPCOM – Components XPCOM Components Components are dedicated to specific tasks: File, Menu, Buttons, etc; Appel par un script XPConnect Calling XP Components Get THE Component supporting THE desired Interface (API) : createInstance Get the Interface implementation: QueryInterface Call THE Function of THE Interface Contrat ID Component Creation var aFile = .createInstance(); if (aFile instanceof Components.interfaces.nsILocalFile) { aFile.initWithPath("/mozilla/testfile.txt"); aFile.remove(false); } Interface Implementation (cf QueryInterface) Function Call 01/04/2017 01/04/2017 Langages & Documents

68 needs Chrome: XPCOM – Services /Mozilla Firefox /chrome XPCOM Services
01/04/2017 XPCOM – Services needs Chrome: /Mozilla Firefox /chrome XPCOM Services Get THE Service supporting THE desired Interface (API) : getService Get the Interface implementation: QueryInterface Call THE Function of THE Interface Contrat ID Component Creation function addBookMark(URLwho, URLtitle) { var bmarks = Components.classes if (!bmarks) { alert("bookmarks-service FAILS !"); return false ;} bmarks.QueryInterface( Components.interfaces.nsIBookmarksService); bmarks.addBookmarkImmediately((URLwho, URLtitle, 0, null); } Interface Implementation Function Call 01/04/2017 Langages & Documents

69 Chap IX - XUL: et les Autres
01/04/2017 Chap IX - XUL: et les Autres avec XHTML avec SVG avec MathML Objectif pédagogique Introduction aux documents hypertextes: langages de définition, manipulation et édition 01/04/2017 Langages & Documents

70 shape.css shape.xml shape.xul XUL & XHTML & SVG &XLINK
01/04/2017 XUL & XHTML & SVG &XLINK shape.css <window title="TestSVG" orient="horizontal" xmlns:html=" xmlns:svg=" xmlns:xlink=" xmlns=" <stack flex="1"> <vbox flex="1"> <svg-shape id="background-circle" flex="1" type="circle" /> </vbox> <spacer flex="2"/> <svg-shape flex="1" id="svg-button" type="rect" radius="12" label="Box"/> <hbox flex="4"> <svg-shape flex="1" id="circ1" type="circle" label="1"/> <svg-shape flex="1" id="circ2" type="circle" label="2" /> <svg-shape flex="1" id="circ3" type="circle" label="3" /> </hbox> <spacer flex="1"/> </stack> svg-shape { -moz-binding: url("shape.xml#shape"); } shape.xml <?xml version="1.0"?> <bindings xmlns= " xmlns:xbl= " xmlns:html= " xmlns:xul= " xmlns:svg= " xmlns:xlink= " > <binding id="shape"> shape.xul 01/04/2017 Langages & Documents

71 Les apports de XUL Les extensions Mozilla
01/04/2017 Les apports de XUL Les extensions Mozilla Firefox: Firebug, etc ... Thunderbird autres Les applications "standalone" Komodo, Blue Grifon, Redcar, Editix Filezilla, Buzzbird, ChatZilla, Google Gadget, etc. List_of_Mozilla-Based_Applications CSS3 Box sizing flexible Box etc. 01/04/2017 Langages & Documents

72 extrait de "Langages & Documents"
01/04/2017 Annexe 1 - RDF "Resource Description Framework" extrait de "Langages & Documents" RDF/XML Dublin Core OWL RDF validator Objectif pédagogique Introduction aux documents hypertextes: langages de définition, manipulation et édition 01/04/2017 Langages & Documents

73 RDF- Resource Description Framework (W3C)
01/04/2017 RDF- Resource Description Framework (W3C) 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 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. 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 01/04/2017 Transparent 73 Langages & Documents ESSI - 2 – Paul Franchi

74 RDF/XML – Resource with Properties and Values
01/04/2017 RDF/XML – Resource with Properties and Values A Resource is anything that can have a URI (about=), such as " A Property is a Resource that has a name, such as <author>or <homepage> A Property value, such as "Paul Franchi" or " W3C RDF Syntax Validator & Graph Generator RDF Namespace <?xml version="1.0" encoding="ISO "?> <!-- RDF file pour ce cours --> <rdf:RDF xmlns:rdf=" xmlns:pol=" > <rdf:Description rdf:about=" <pol:author> Paul Franchi </pol:author> <pol:homepage> </pol:homepage> </rdf:Description> </rdf:RDF> Namespace URI 01/04/2017 Transparent 74 Langages & Documents ESSI - 2 – Paul Franchi

75 RDF - Graphe Entité-Relation
01/04/2017 RDF - Graphe Entité-Relation Un modèle de Graphe Entités/Relations Une syntaxe RDF/XML pour "sérialiser" le graphe Resource PFZ Value PrOperty PrOperty Value 01/04/2017 Transparent 75 Langages & Documents ESSI - 2 – Paul Franchi

76 RDF: Description, Property, Attribute, Value, resource
01/04/2017 RDF: Description, Property, Attribute, Value, resource RDF Namespace <?xml version="1.0" encoding="ISO "?> <rdf:RDF xmlns:rdf=" xmlns:cd=" <rdf:Description rdf:about=" Burlesque" cd:artist="Bob Dylan" cd:country="USA" cd:company="Columbia" cd:price="10.90" cd:year="1985" /> <rdf:Description rdf:about=" your heart"> <cd:artist rdf:resource=" Tyler" /> <cd:company>CBS Records</cd:company> <cd:year>1988</cd:year> </rdf:Description> . . . </rdf:RDF> Bib Namespace URI 01/04/2017 Transparent 76 Langages & Documents ESSI - 2 – Paul Franchi

77 RDF - W3C Syntax Validator & Graph Generator
01/04/2017 RDF - W3C Syntax Validator & Graph Generator 01/04/2017 Transparent 77 Langages & Documents ESSI - 2 – Paul Franchi

78 RDF: Bag et les autres Conteneurs
01/04/2017 RDF: Bag et les autres Conteneurs <?xml version="1.0" encoding="ISO "?> <rdf:RDF xmlns:rdf=" xmlns:cd=" <rdf:Description rdf:about=" <cd:artist> <rdf:Bag> <rdf:li>John</rdf:li> <rdf:li>Paul</rdf:li> <rdf:li>George</rdf:li> <rdf:li>Ringo</rdf:li> </rdf:Bag> </cd:artist> </rdf:Description> </rdf:RDF> 01/04/2017 Transparent 78 Langages & Documents ESSI - 2 – Paul Franchi

79 RDF: Bag, Seq, Alt <?xml version="1.0" encoding="ISO-8859-1"?>
01/04/2017 RDF: Bag, Seq, Alt <?xml version="1.0" encoding="ISO "?> <rdf:RDF xmlns:rdf=" xmlns:cd=" <rdf:Description rdf:about=" <cd:artist> <rdf:Bag> <rdf:li>John</rdf:li> <rdf:li>Paul</rdf:li> <rdf:li>George</rdf:li> <rdf:li>Ringo</rdf:li> </rdf:Bag> </cd:artist> </rdf:Description> . . . </rdf:RDF> <cd:artist> <rdf:Seq> <rdf:li>George</rdf:li> <rdf:li>John</rdf:li> <rdf:li>Paul</rdf:li> <rdf:li>Ringo</rdf:li> </rdf:Seq> </cd:artist> <cd:format> <rdf:Alt> <rdf:li>CD</rdf:li> <rdf:li>Record</rdf:li> <rdf:li>Tape</rdf:li> </rdf:Alt> </cd:format> 01/04/2017 Transparent 79 Langages & Documents ESSI - 2 – Paul Franchi

80 RDF- les utilisations classiques
01/04/2017 RDF- les utilisations classiques Dublin Core MetaData OWL Mozilla contents.rdf chrome.rdf XUL Communication par RDF files (génération par Php, etc.) RSS 1.0 01/04/2017 Transparent 80 Langages & Documents ESSI - 2 – Paul Franchi

81 01/04/2017 Dublin Core 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 01/04/2017 Transparent 81 Langages & Documents ESSI - 2 – Paul Franchi

82 Dublin Core <?xml version="1.0" encoding="ISO-8859-1"?>
01/04/2017 Dublin Core <?xml version="1.0" encoding="ISO "?> <!-- RDF file pour le Tutorial de W3Schools--> <rdf:RDF xmlns:rdf=" xmlns:dc= " > <rdf:Description rdf:about=" "> <dc:title>D-Lib Program</dc:title> <dc:description>W3Schools - Free tutorials</dc:description> <dc:publisher>Refsnes Data as</dc:publisher> <dc:date> </dc:date> <dc:type>Web Development</dc:type> <dc:format>text/html</dc:format> <dc:language>en</dc:language> </rdf:Description> </rdf:RDF> 01/04/2017 Transparent 82 Langages & Documents ESSI - 2 – Paul Franchi

83 OWL - "Web Ontology Language " (W3C)
01/04/2017 OWL - "Web Ontology Language " (W3C) 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 OWL has three sublanguages: OWL Lite OWL DL (includes OWL Lite) OWL Full (includes OWL DL) 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: Class: Airport Properties: elevation iataCode icaoCode latitude location longitude name 01/04/2017 Transparent 83 Langages & Documents ESSI - 2 – Paul Franchi

84 Annexe II - AJAX "Asynchronous JavaScript And XML"
01/04/2017 Annexe II - AJAX "Asynchronous JavaScript And XML" extrait de "Langages & Documents" Http synchrone XMLHttpRequest Objectif pédagogique Introduction aux documents hypertextes: langages de définition, manipulation et édition 01/04/2017 Langages & Documents

85 AJAX- Asynchronous JavaScript and XML
01/04/2017 AJAX- Asynchronous JavaScript and XML AJAX is not a new programming language, but a technique for creating better, faster, and more interactive web applications. 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. 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. The AJAX technique makes Internet applications smaller, faster and more user-friendly. AJAX is a browser technology independent of web server software. AJAX is based on the following web standards: JavaScript XML HTML CSS 01/04/2017 Transparent 85 Langages & Documents ESSI - 2 – Paul Franchi

86 Asynchrone= non bloquant
01/04/2017 AJAX : schéma "HttpRequest / Response" <html> <script type="text/javascript"> function HTTP() { } </script> <body> HTTP() ; </body> </html> send() open(GET, ...) new XMLHttpRequest status responseText responseXML Côté "Serveur" Synchrone=bloquant ou Asynchrone= non bloquant Côté "Client" 01/04/2017 Transparent 86 Langages & Documents ESSI - 2 – Paul Franchi

87 L'Objet XMLHttpRequest
01/04/2017 L'Objet XMLHttpRequest 0 (non init) 1 (connexion) 2 (requete) 3 (réponse), 4 (terminé) Attributs readyState status si ok 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. 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. 01/04/2017 Transparent 87 Langages & Documents ESSI - 2 – Paul Franchi

88 Script AJAX function submitForm() { var xhr;
01/04/2017 Script AJAX 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); 01/04/2017 Transparent 88 Langages & Documents ESSI - 2 – Paul Franchi

89 "false" = synchrone "Request" synchrone sur un serveur
01/04/2017 "Request" synchrone sur un serveur <html> <script type="text/javascript"> 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"," 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() </script> <body> <form name="myForm"> Name: <input type="text" onkeyup="syncHTTP() ;" name="username" /> Time: <input type="text" name="time" /> </form> </body> </html> "false" = synchrone "Http synchrone" 01/04/2017 Transparent 89 Langages & Documents ESSI - 2 – Paul Franchi

90 "Request" sur un serveur (url, .asp ou .php)
01/04/2017 "Request" sur un serveur (url, .asp ou .php) <html> <script type="text/javascript"> var xmlHttp; function ajaxFunction() { /* voir suivant */ xmlHttp.onreadystatechange = function() { } </script> <form name="myForm"> Name: <input type="text" onkeyup="ajaxFunction();" name="username" /> Time: <input type="text" name="time" /> </form> </body> </html> XMLHttpRequest asynchrone: onreadystatechange() 01/04/2017 Transparent 90 Langages & Documents ESSI - 2 – Paul Franchi

91 "true" = asynchrone "Request" sur un serveur (url, .asp ou .php)
01/04/2017 "Request" sur un serveur (url, .asp ou .php) 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"," true); xmlHttp.send (null); } // ajaxFunction "true" = asynchrone XMLHttpRequest asynchrone: onreadystatechange() 01/04/2017 Transparent 91 Langages & Documents ESSI - 2 – Paul Franchi

92 "Request" sur un document .xml
01/04/2017 <?xml version="1.0" encoding="ISO "?> <script type="text/javascript"> <![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."); } "Request" sur un document .xml XMLHttpRequest asynchrone: onResponse() 01/04/2017 Transparent 92 Langages & Documents ESSI - 2 – Paul Franchi

93 "Request" sur un document .xml
01/04/2017 "Request" sur un document .xml 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() ]]> </script> </head> <body> <div id="copy"> <button onclick="loadXMLDoc('cd_catalog.xml')">Get CD info</button> </div> </body> XMLHttpRequest asynchrone: onResponse() 01/04/2017 Transparent 93 Langages & Documents ESSI - 2 – Paul Franchi

94 "Request" sur un document .xml
01/04/2017 "Request" sur un document .xml 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]*?<\/CD>"); alert (xmlhttp.responseText.match(debut)[0]) ; } XMLHttpRequest: responseText 01/04/2017 Transparent 94 Langages & Documents ESSI - 2 – Paul Franchi

95 "Request" sur un document .xml
01/04/2017 "Request" sur un document .xml TRAITEMENT_DU_XML() { txt="<table border='1'>"; x = xmlhttp.responseXML. documentElement.getElementsByTagName("CD"); for (i=0;i<x.length;i++) { txt=txt + "<tr>"; xx=x[i].getElementsByTagName("TITLE"); { try { txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>"; } catch (er) { txt=txt + "<td> </td>"; } } xx=x[i].getElementsByTagName("ARTIST"); txt=txt + "</tr>"; txt=txt + "</table>"; document.getElementById('copy').innerHTML = txt; XMLHttpRequest: responseXML. 01/04/2017 Transparent 95 Langages & Documents ESSI - 2 – Paul Franchi