" à la "whitelist" ATTENTION - RDF XUL : pas d'espaces dans les paths; par ex "C:\Documents and Settings\Bureau" 01/04/2017 Langages & Documents">

La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Plasticité des Interfaces

Présentations similaires


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 https://developer.mozilla.org/Fr 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

Titre Date ref
{Title} {Date} {@ref}

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=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> <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="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é 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

XMLHttpRequest asynchrone: onResponse() 01/04/2017. Transparent 93. Langages & Documents. ESSI - 2 – 2004-05 - Paul Franchi.", "width": "800" }

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


Télécharger ppt "Plasticité des Interfaces"

Présentations similaires


Annonces Google