View
43
Download
4
Category
Preview:
DESCRIPTION
Plasticité des Interfaces. utilise les répertoires: ../../LANGDOC/COURS ./EXEMPLES / ../LANGDOC/XUL. XUL XBL XPCOM XPI. Web GUI Mozilla Project. www.polytech.unice.fr\~pfz. pfz@polytech.unice.fr. Bien s'installer sous XUL/Firefox. user_pref( "nglayout.disable_xul_cache", true); - PowerPoint PPT Presentation
Citation preview
XPFE et le XUL sous Mozilla
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdfPaul Franchi
SI 52013-14
21/04/23 Transparent - 1
XUL
XBL
XPCOM
XPI
XUL
XBL
XPCOM
XPI
Plasticité des InterfacesPlasticité 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
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 221/04/23
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);
user_pref(
"nglayout.disable_xul_fastload",
true);
user_pref(
"nglayout.disable_xul_cache",
true);
user_pref(
"nglayout.disable_xul_fastload",
true);
installer l'extension
XUL Remote Manager
et ajouter "<file>"
à la "whitelist"
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"
ATTENTION - RDF XUL :
pas d'espaces dans les paths;
par ex "C:\Documents and Settings\Bureau"
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 321/04/23
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
concepts CSS3 Box sizing flexible Box
Points de vue Les joies de XUL | MDN XUL user interfaces XUL vs. HTML 5 XUL est-il encore le bon choix pour une applic. web riche ?
Avec et sur XUL ...
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 421/04/23
Les Boites flexibles de CSS3
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; }
« 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.
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 . »
« 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.
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 . »
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 521/04/23
XUL based Applications
Getting started with XULRunner
XULRunner (download)
XUL Gear (ext. FF)
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 621/04/23
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
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 721/04/23
Web cours "XML" SI-4
http:www.polytech.unice.fr/~pfz/document.html
Mozilla Development Center https://developer.mozilla.org/Fr
XULPlanet http://www.xulplanet.com/
XULFR.org http://mozillazine-fr.org/annuaire-mozilla/fr/developpeurs/
xul.fr http://www.xul.fr/
XULforum http://www.xulforum.org/site/
Biblio: Xul Tutorial (pdf) Rapid Application development with Mozilla ouvrages disponibles.
Références
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 821/04/23
n-Tier Architecture for Web light Client
Presentation Layer
Client
Data Layer
Application (Business) LayerApplication
(Business) LayerApplication (Business) Layers
Server
HTML
CSS
DHTML, JS
AJAX
XML
XSL
Data Bases
C, Java, C++C, Java, C++
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Server
Transparent 921/04/23
RIA Architecture Rich Client
Data Base
Datas
Style
Structure XML, RDF
CSS, XSL
Networking
Contrôle &Web Services
JS, DOM
SOAP, WSDL
http, AJAX
Application
Application
Application
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 1021/04/23
"Light Client" vs "Rich Client" (R.I.A.)
Rich ClientXML
XSL
Data Bases
"import"
of
fonctionalities
"import"
of
fonctionalities
dynamic
interface
transform
dynamic
interface
transform
metadata
multi-formats
metadata
multi-formats
HTML, CSS
DHTML, JS, AJAX
reduce the
back&forth
needs
reduce the
back&forth
needs
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
21/04/23
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
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
21/04/23
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
.xsl
.xsl
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
21/04/23
XML as metadatas for Web GUI
SPRY (Adobe Labs) using XML to describe "contents"
using JS & DOM to generate wIdgets & "contents"
using AJAX to access/modify "contents"
from RDF, XML to PHP/SQL using XML/RDF to describe "contents"
using XSLT from XML to SQL
exporting from SQL to XML
XSLT using XML/RDF to describe "contents"
using XSLT to generate wIdgets (DHTML, JS)
using XSLT to generate/modify "contents" (HTML)
using XSLT to generate/modify style (CSS)
XUL (Mozilla Foundation)
using RDFL to describe "contents"
using XUL to generate WIdgets &
"contents"
using AJAX to access "contents"
using JASON, XML-RPC, WSDL for
"networking" and "web services"
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdfXSLXSL
JSJS
21/04/23
XML as metadatas & XSLT
CSSCSS
HTMLHTML XSLTXSLT
XML
rdf
XML
rdf
XMLXML.xsl
.xsl
XSLT Pfz's State of the Art
RefsWeb
TechnosWeb
Exam LDOC 2012
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 1521/04/23
Web Reference Browser
de XML vers HTML5+CSS3
html
xml
css
via xsl
css
dtd
xsd
metadata
.xml
metadata
.xml
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 1621/04/23
Doc Example Browsers
de XML vers HTML5+CSS3+JS
html
metadata xml
css
via xsl
xsd
dtd
jscss
css
TechnosWeb
.xml
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 1721/04/23
XML (meta) modèle de données (ERD )
<Code•titre
•keywords•file
•version>
<Description•libellé*
•img?>
<Categorie •type•path
>
<Show•version
>1,*
1,*
1,?
<Auteur>n,m
uses: n,mused_by: n,m
TypeType
AutAutPathPath
KeywordKeywordKeywordKeyword
KeywordKeywordKeywordKeyword
KeywordKeyword
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
JSJS
21/04/23
R.I.A. - XML as metadatas & SPRY
CSS, XSLCSS, XSL
HTMLHTML
DHTMLDHTML AJAXAJAX
SPRYSPRY
Rich Client
XML
rdf
XML
rdf
DHTMLDHTML
XML
rdf
XML
rdf
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 1921/04/23
Spry: framework JS pour dHTML
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
sur le Web http://labs.adobe.com/technol
ogies/spry/ http://labs.adobe.com/wiki/ind
ex.php/Spry http://www.adobe.com/devnet
/spry/ http://labs.adobe.com/technol
ogies/spry/demos/index.html
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 2021/04/23
Spry - Schéma & Utilisation
<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>
HTML
généré
interpréteur
JS
Dom
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 2121/04/23
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 spry:sort="@ref">ref</th> </tr>
<tr spry:repeat="dsBib" spry:setrow="dsBIb">
<td>{Title}</td> <td>{Date}</td> <td>{@ref}</td>
</tr>
</table>
</body></html>
<head>
</script><script src="SpryAssets/xpath.js"… />
</script><script src="SpryAssets/SpryData.js" … />
</head>
mis à plat
"flatening"
Title Date Edit @ref
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
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
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
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
21/04/23
Goto the Best of Xul 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
XPFE et le XUL sous Mozilla
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdfPaul Franchi
SI 52013-14
21/04/23 Transparent - 28
Chap I - Mozilla & XPFE/XULChap I - Mozilla & XPFE/XUL
Historique
Standards
Lexique
Références
Architecture XPFE
Historique
Standards
Lexique
Références
Architecture XPFE
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 2921/04/23
Historique & StandardsProjet 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
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Event
s
DOM
s
XPConnectTransparent 30
LDAP SOAP POP
filesSockets
RDF
HTML
XUL
XBL
XML
SVG
JS
CSS
XUL & XPFE
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 3121/04/23
Architecture XPFE: le 4iè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 ?
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 3221/04/23
Mozilla Structure & Components
Packages "Content" .xul pour les "windows" et "elements" browser.xul .js pour les fichiers de script browser.js contents.rdf
Packages "Skin" fichiers de style .css: browser.css fichiers images
Packages "Locale" fichiers .text (;dtd) pour les textes à afficher en-US.jar fr-FR.jar browse.dtd
le répertoire "chrome/"
file.manifest
l'url chrome://global/skin/ extensions + privilèges
Utilisation "pointilleuse"
/Mozilla Firefox /chrome
XPFE et le XUL sous Mozilla
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdfPaul Franchi
SI 52013-14
21/04/23 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 TreeLayout Tree
Chap II - XUL - les BasesChap II - XUL - les Bases
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 3421/04/23
<?xml version="1.0" encoding="iso-8859-1"?><?xml-stylesheet href="window.css" type="text/css"?>
<window id="findfile-window" title="XUL-Essai1" orient="horizontal" xmlns=http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul><vbox>
<hbox flex="1" maxheight="80" align="top"> <button label="Gauche" style="min-width: 100px;"
flex="1"/> <spacer flex="2"/>
<button label="Droite" style="min-width: 100px;" flex="1"/></hbox><spacer flex="1" maxheight="50"/>
<description> Entrez votre critère pour démarrer la recherche. </description> <spacer flex="1" maxheight="50"/>
<button label="HELLO" oncommand="alert('hello World!');"/></vbox></window> <window>
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 3521/04/23
<window ....>
<vbox>
<hbox flex="2" maxheight="80" align="top">
</hbox>
<spacer flex="1" maxheight="50"/>
<box flex="2" orient="vertical" pack="center">
</box>
<spacer flex="1" maxheight="50"/>
</vbox></window>
<box> <hbox> <vbox><spacer>
id, class, styleorient
width, heigth, min- , max-
flexpackalign
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 3621/04/23
<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, stylelabel, crop
imagedisabled, selected, checked
accesskeyoncommand onclick
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 3721/04/23
<window ....><vbox>
<description> Donner son profil puis se loger ci-dessous. </description>
<hbox> <textbox id="profil" multiline="true"
value="compléter votre profil ici"/> </hbox>
<hbox> <label control="login" value="Login :"/> <textbox id="login"/> </hbox> <hbox> <label control="pass" type="password"
value="Mot de passe:"/> <textbox id="pass" maxlength="12" /> </hbox>
<label value="Envoyer" onclick="send();"/></vbox></window>
<label> <description><textbox>
id, class, stylevalue
controltype
multilinemaxlength
onclick
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
<caption> <image>
<progressbar>
<toolbox><toolbar>
<toolbarbutton>
Transparent 3821/04/23
<menubar><menu>
<menupopup><menuitem><popupset>
<arrowscrollbox>
<groupbox> <radiogroup>
<stack> <deck>
<tabbox> <tabpanel> <tabpanels>
<tabs> <tab>
<iframe> <browser><splitter> <gripy>
<grid> <rows><row>
<columns><column>
<listbox> <listitem><listhead> <listheader>
<listcols> <listcol> <listcell>
<menulist>
<tree>
<template>
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 3921/04/23
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 RDFCONTENT
TREE
LAYOUT
BOX TREE
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 4021/04/23
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
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 4121/04/23
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>
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 4221/04/23
<window ....><tree flex="1">
<treecols> <treecol id="sender" label="Sender" flex="1"/> <treecol id="subject" label="Subject" flex="2"/>
</treecols> <treechildren>
<treeitem> <treerow properties="makeItRed"> <treecell label="joe@somewhere.com"/>
<treecell label="Top secret plans"/> </treerow> </treeitem> <treeitem> <treerow> <treecell label="mel@whereever.com"/> <treecell label="Let's do lunch"/>
</treerow> </treeitem>
</treechildren> </tree></window>
<tree><treecols>
<treecol><treechildren>
<treeitem> <treerow> <treececll>
CSS ::-moz-
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 4321/04/23
<window ....><tree rows="6"> <treecols> <treecol id="fname" label="First Name" primary="true" flex="3"/> <treecol id="lname" label="Last Name" flex="7"/> </treecols> <treechildren> <treeitem container="true" open="true"> <treerow> <treecell label="Guys"/> </treerow> <treechildren> <treeitem> <treerow> <treecell label="Bob"/> <treecell label="Carpenter"/> </treerow> </treeitem> <treeitem> <treerow> <treecell label="Jerry"/> <treecell label="Hodge"/> </treerow> </treeitem> </treechildren> </treeitem> </treechildren></tree></window>
container primary
open
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 4421/04/23
<tree enableColumnDrag="true" flex="1"> <treecols> <treecol id="runner" label="Runner" flex="2" persist="width ordinal hidden"/> <splitter class="tree-splitter"/> <treecol id="city" label="City" flex="2" persist="width ordinal hidden"/> <splitter class="tree-splitter"/> <treecol id="starttime" label="Start" flex="1" persist="width ordinal hidden"/> <splitter class="tree-splitter"/> <treecol id="endtime" label="End" flex="1" persist="width ordinal hidden"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="Joshua Granville"/> <treecell label="Vancouver"/> <treecell label="7:06:00"/> <treecell label="9:10:26"/> </treerow> </treeitem> <treeitem> <treerow> <treecell label="Robert Valhalla"/> <treecell label="Seattle"/> <treecell label="7:08:00"/> <treecell label="9:15:51"/> </treerow> </treeitem> </treechildren></tree>
enableColumnDrag persist
XPFE et le XUL sous Mozilla
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdfPaul Franchi
SI 52013-14
21/04/23 Transparent - 45
(X)HTML
CSS avec -moz
les "skins"
(X)HTML
CSS avec -moz
les "skins"
Chap III - XUL et le StyleChap III - XUL et le Style
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 4621/04/23
<?xml version="1.0" encoding="iso-8859-1"?><window id="findfile-window" title="XUL-Essai1" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"><vbox>
<html:table><htm:tr>
<htm:td> <button label="Gauche" style="min-width: 100px;" /> </html:td> <html:td>
<button label="Droite" style="min-width: 100px;" /></html:td>
</html:tr> </html:table> <html:p> Entrez votre critère pour démarrer la recherche. </html:p>
<button label="HELLO" oncommand="alert('Bonjour!');"/></vbox></window>
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 4721/04/23
CSS Mozilla• -moz-opacity• -moz-border-radius• -moz-image-region• -moz-box-orient
treechildren::-moz-tree-row(makeItBlue) { background-color: red; }
<treerow properties="makeItRed">
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
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 4821/04/23
créer un thème "skin"
menubar { background-color: red; }
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
XPFE et le XUL sous Mozilla
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdfPaul Franchi
SI 52013-14
21/04/23 Transparent - 49
XUL DOM
Changer les Styles
XUL DOM
Changer les Styles
Chap IV - XUL Dynamique, JS + DOMChap IV - XUL Dynamique, JS + DOM
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 5021/04/23
<window ... ><script>function addButton() { var aBox = document.getElementById("aBox"); var button = document.createElement("button"); button.setAttribute("label","A Button"); aBox.appendChild(button);}</script><box id="aBox" width="200"> <button label="Add" oncommand="addButton();"/></box></window>
créer, copier des boutons tester, modifier des listes gérer les "events" animation etc.
XUL + DOM + JS
XPFE et le XUL sous Mozilla
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdfPaul Franchi
SI 52013-14
21/04/23 Transparent - 51
<tree>
<templates> <rule><query><action>
TextScan
<tree>
<templates> <rule><query><action>
TextScan
Chap V - XUL Génération de Contenu RDF/XML(new FF3)Chap V - XUL Génération de Contenu RDF/XML(new FF3)
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 5221/04/23
<window …>
<tree flex="1" width="200" height="200" datasources="zoo.rdf" ref="http://www.zoo.com/all-animals">
<treecols> <treecol id="name" /> <treecol id="species" /> </treecols> <template> <rule> <treechildren> <treeitem uri='rdf:*'> <treerow> <treecell label="rdf:http://www.zoo.com/rdf#name"/> <treecell label="rdf:http://www.zoo.com/rdf#species"/> </treerow> </treeitem> </treechildren> </rule> </template></tree>
Template + RDF
zoo.rdf<RDF:RDF xmlns:Z="http://www.zoo.com/rdf#">
<RDF:Description Z:specimens="101" rdf:about="http://www.zoo.com/mammals"> <Z:name> Lion </Z:name> </RDF:Description>
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
zoo.xml<zoo><about name="Arachnids">
… </about><about name="Birds"> <about name=" " species=" "></about></about></zoo>
Transparent 5321/04/23
<window …>
<tree flex="1" datasources="zoo.xml" ref="*" querytype="xml" >
<treecols> <treecol id="name" /> <treecol id="spec" /> </treecols>
<template><query expr="about" /> <action> <treechildren> <treeitem uri='?'> <treerow> <treecell label="?name"/> <treecell label="?species"/> </treerow> </treeitem> </treechildren> </action> </template></tree>
New FF3: Template + XML (external)
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 5421/04/23
<window …>
<tree flex="1" datasources="#ZOO" ref="*" querytype="xml" >
<treecols> <treecol id="name" /> <treecol id="spec" />
</treecols> <template><query expr="about" /> <action>
<!-- idem -->
</action> </template></tree>
New FF3: Template + XML (internal)
<zoo id="ZOO"><about name="Arachnids">
… </about><about name="Birds"> <about name=" " species=" "></about></about></zoo>
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 5521/04/23
<window ....><vbox datasources="rdf:bookmarks"
ref="NC:BookmarksRoot" flex="1">
<template> <button uri="rdf:*"
label="rdf:http://home.netscape.com/NC-rdf#Name"/> </template>
</vbox></window>
<template>
datasourcesref uri
content xulex file:///C:/path
Chrome: enregistrement
URL:
chrome://xulex/content/BM.xulBM.xul
/Mozilla Firefox /chrome
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 5621/04/23
<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" --> <splitter/></vbox> <!-- fin de la "PAGE" --></window>
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 5721/04/23
<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="http://pfz/liste"> <template>
<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" /> </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" --> <splitter/></vbox> <!-- fin de la "PAGE" --></window>
<template>
datasourcesref uri
textes.rdf
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 5821/04/23
<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"> <!-- voir précédent -->
<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>
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 5921/04/23
<rule><conditions>
<content uri="?site" /><member container="?site" child="?photo" />
<triple subject="?photo"predicate="http://www.essi.fr/photos/rdf#file"object="?file" />
<triple subject="?photo"predicate="http://www.essi.fr/photos/rdf#title"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>
<template><rule>
<conditions><content> <member>
<triple> <action>
photos.rdf
weather.rdf
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 6021/04/23
<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" expr="../@base"/>
</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
showFilters.xml
RDF/XML Filtering
show.xbl
show.css
XPFE et le XUL sous Mozilla
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdfPaul Franchi
SI 52013-14
21/04/23 Transparent - 61
<binding><binding>
Chap VI - XBL Extensions/ComportementsChap VI - XBL Extensions/Comportements
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 6221/04/23
Syntaxes & Liaisons
XBL:Xml Binding Language
<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?<?xml-stylesheet href="example.css" type="text/css"?><window
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <box class="okcancelbuttons"/> </window>
<?xml version="1.0"?><bindings xmlns="http://www.mozilla.org/xbl"xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <binding id="okcancel"> <content> <xul:button label="OK"/> <xul:button label="Cancel"/> </content> </binding> </bindings>
box.okcancelbuttons { -moz-binding:
url('example.xml#okcancel'); }
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 6321/04/23
Extensions Content
Xml Binding Language
<scrollbar />
<scrollbar> <xul:scrollbarbutton
type="decrement"/> <xul:slider flex="1"> <xul:thumb/> </xul:slider>
<xul:scrollbarbutton type="increment"/>
</scrollbar>
<bindings ... >
<binding id="scrollbarBinding"> <content> <xul:scrollbarbutton type="decrement"/> <xul:slider flex="1"> <xul:thumb/> </xul:slider> <xul:scrollbarbutton type="increment"/> </content> </binding>
</bindings>
<bindings><binding><content><children>
includesinherits scrbb_xbl
scrbb.css
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 6421/04/23
Implementation Fields Properties Methods
Events handler
Héritage
Xml Binding Language <bindings> <binding>
<implementation><field> <property>
<method> <parameter> <body><constructor> <destructor>
onset, onget
<binding id="scrollbarBinding"> <handlers> <handler event="mouseup"
action="this.checked.toggle():" /> </handlers></binding>
<bindings> <binding><handlers> <handler>
event, key, modifiersaction
<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
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 6521/04/23
<?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>
.slideshow { -moz-binding: url("sshow.xml#slideshow");}
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 6621/04/23
<?xml version="1.0"?><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> <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>
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 6721/04/23
<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]; 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; ]]> </body> </method> </implementation></binding></bindings>
XPFE et le XUL sous Mozilla
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdfPaul Franchi
SI 52013-14
21/04/23 Transparent - 68
<overlay><overlay>
Chap VII - XUL: Modularité Chap VII - XUL: Modularité
XPFE et le XUL sous Mozilla
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdfPaul Franchi
SI 52013-14
21/04/23 Transparent - 69
Composants
Services
Composants
Services
Chap VIII - XPCOMCross Platform Component Object ModelChap VIII - XPCOMCross Platform Component Object Model
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 7021/04/23
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
var aFile = Components.classes["@mozilla.org/file/local;1"]
.createInstance(); if (aFile instanceof Components.interfaces.nsILocalFile){ aFile.initWithPath("/mozilla/testfile.txt");
aFile.remove(false);
}
21/04/23
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 71
21/04/23
XPCOM – Services
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
XPFE et le XUL sous Mozilla
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdfPaul Franchi
SI 52013-14
21/04/23 Transparent - 72
avec XHTML
avec SVG
avec MathML
avec XHTML
avec SVG
avec MathML
Chap IX - XUL: et les AutresChap IX - XUL: et les Autres
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 7321/04/23
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">
<stack flex="1"><vbox flex="1">
<svg-shape id="background-circle" flex="1" type="circle" />
</vbox><vbox flex="1">
<spacer flex="2"/><svg-shape flex="1" id="svg-button" type="rect" radius="12" label="Box"/><spacer flex="2"/><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"/>
</vbox></stack>
<?xml version="1.0"?><bindingsxmlns= "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"
xmlns:svg= "http://www.w3.org/2000/svg"
xmlns:xlink= "http://www.w3.org/1999/xlink"
><binding id="shape">
svg-shape { -moz-binding: url("shape.xml#shape");}
XPFE et le XUL sous Mozilla
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdfPaul Franchi
SI 52013-14
21/04/23 Transparent - 74
extrait de "Langages & Documents"extrait de "Langages & Documents"
RDF/XML
Dublin Core
OWL
RDF validator
RDF/XML
Dublin Core
OWL
RDF validator
Annexe 1 - RDF"Resource Description Framework"Annexe 1 - RDF"Resource Description Framework"
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 7521/04/23
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
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 7621/04/23
RDF/XML – Resource with Properties and Values
A Resource is anything that can have a URI (about=), such as "http://polytech/LANGDOC/RDF"
A Property is a Resource that has a name, such as <author>or <homepage>
A Property value, such as "Paul Franchi" or "http://www.polytech.unice.fr/~pfz"
W3C RDF Syntax Validator & Graph Generator
<?xml version="1.0" encoding="ISO-8859-1"?><!-- RDF file pour ce cours --><rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:pol="http://polytech#" ><rdf:Description rdf:about="http://polytech/LANGDOC/RDF"> <pol:author> Paul Franchi </pol:author> <pol:homepage> http://www.polytech.unice.fr/~pfz </pol:homepage> </rdf:Description> </rdf:RDF>
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Un modèle de Graphe Entités/Relations Une syntaxe RDF/XML pour "sérialiser" le graphe
Transparent 7721/04/23
RDF - Graphe Entité-Relation
http://polytech#author
http://polytech#homepage
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 7821/04/23
RDF: Description, Property, Attribute, Value, resource
<?xml version="1.0" encoding="ISO-8859-1"?><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" />
<rdf:Description rdf:about="http://www.Bib/cd/Hide your heart"> <cd:artist rdf:resource="http://www.Bib/cd/Bonnie Tyler" /><cd:company>CBS Records</cd:company><cd:year>1988</cd:year> </rdf:Description> . . .
</rdf:RDF>
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 7921/04/23
RDF - W3C Syntax Validator & Graph Generator
http://www.w3.org/RDF/Validator/http://www.w3.org/RDF/Validator/
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 8021/04/23
RDF: Bag et les autres Conteneurs
<?xml version="1.0" encoding="ISO-8859-1"?><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/Beatles"> <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>
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 8121/04/23
RDF: Bag, Seq, Alt
<?xml version="1.0" encoding="ISO-8859-1"?><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/Beatles"> <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:format> <rdf:Alt> <rdf:li>CD</rdf:li> <rdf:li>Record</rdf:li> <rdf:li>Tape</rdf:li> </rdf:Alt> </cd:format>
<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>
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 8221/04/23
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
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 8321/04/23
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
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 8421/04/23
Dublin Core
<?xml version="1.0" encoding="ISO-8859-1"?><!-- RDF file pour le Tutorial de W3Schools--><rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:dc= "http://purl.org/dc/elements/1.1/" > <rdf:Description rdf:about="http://www.w3schools.com "> <dc:title>D-Lib Program</dc:title> <dc:description>W3Schools - Free tutorials</dc:description> <dc:publisher>Refsnes Data as</dc:publisher> <dc:date>1999-09-01</dc:date> <dc:type>Web Development</dc:type> <dc:format>text/html</dc:format> <dc:language>en</dc:language> </rdf:Description> </rdf:RDF>
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 8521/04/23
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:
http://www.daml.org/2001/10/html/airport-ont
Class: Airport Properties:
elevation iataCode icaoCode latitude location longitude name
XPFE et le XUL sous Mozilla
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdfPaul Franchi
SI 52013-14
21/04/23 Transparent - 86
Http synchrone
XMLHttpRequest
Http synchrone
XMLHttpRequest
extrait de "Langages & Documents"extrait de "Langages & Documents"
Annexe II - AJAX"Asynchronous JavaScript And XML"Annexe II - AJAX"Asynchronous JavaScript And XML"
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 8721/04/23
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
AJAX- Asynchronous JavaScript and XML
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 8821/04/23
<html><script type="text/javascript">
function HTTP() {
}</script><body>
HTTP() ;
</body> </html>
Côté "Client"
Côté "Serveur"
AJAX : schéma "HttpRequest / Response"
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 8921/04/23
L'Objet XMLHttpRequest
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.
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.
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.
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.
0 (non init) 1 (connexion) 2 (requete) 3 (réponse), 4 (terminé)
0 (non init) 1 (connexion) 2 (requete) 3 (réponse), 4 (terminé)
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 9021/04/23
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
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 9121/04/23
<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","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()</script><body> <form name="myForm"> Name: <input type="text" onkeyup="syncHTTP() ;" name="username" />Time: <input type="text" name="time" /></form> </body> </html>
"Http synchrone"
"Request" synchrone sur un serveur
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 9221/04/23
<html><script type="text/javascript"> var xmlHttp;function ajaxFunction() {
/* voir suivant */ xmlHttp.onreadystatechange = function() { /* voir suivant */ } }</script>
<form name="myForm"> Name:
<input type="text" onkeyup="ajaxFunction();" name="username" />
Time: <input type="text" name="time" />
</form></body></html>
XMLHttpRequest asynchrone: onreadystatechange()
"Request" sur un serveur (url, .asp ou .php)
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 9321/04/23
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
XMLHttpRequest asynchrone: onreadystatechange()
"Request" sur un serveur (url, .asp ou .php)
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 9421/04/23
<?xml version="1.0" encoding="ISO-8859-1"?><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."); }}
XMLHttpRequest asynchrone: onResponse()
"Request" sur un document .xml
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 9521/04/23
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()
"Request" sur un document .xml
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 9621/04/23
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
"Request" sur un document .xml
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 9721/04/23
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"); { try { txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>"; } catch (er) { txt=txt + "<td> </td>"; } } txt=txt + "</tr>"; }txt=txt + "</table>";document.getElementById('copy').innerHTML = txt;}
XMLHttpRequest: responseXML.
"Request" sur un document .xml
Recommended