Transcript Documents

XPFE
Plasticité des Interfaces
utilise les répertoires:
../../LANGDOC/COURS
XUL
XPFE et le XUL sous Mozilla
./EXEMPLES/
../LANGDOC/XUL
&CSS
&JS
&RDF
XBL
XPCOM
rdf
XUL
Web GUI
XBL
Mozilla Project
XPCOM
Paul Franchi
SI 5
2013-14
XPI
ajax
22/07/2015
Transparent - 1
Bien s'installer sous XUL/Firefox
XPFE
sous FF (Mozilla)

XUL
&CSS
&JS
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/
&RDF
user_pref(
"nglayout.disable_xul_cache",
true);
user_pref(
"nglayout.disable_xul_fastload",
true);
sous Gecko 2.0 (FF4+, Thunderbird 3.3)
XBL

Xul distant n'est pas supporté par
défaut

les "manifest chrome" sont à déclarer
dans chrome.manifest
XPCOM
rdf
ajax
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"
22/07/2015
Transparent 2

 Firefox: Firebug, etc ...
 Thunderbird
 autres
XPFE
XUL

&CSS

rdf
ajax
Les applications "standalone"
concepts CSS3
 Box sizing
 flexible Box
XBL
XPCOM
Avec et sur XUL ...
 Komodo, Blue Grifon, Redcar, Editix
 Filezilla, Buzzbird, ChatZilla, Google Gadget, etc.
 List_of_Mozilla-Based_Applications
&JS
&RDF
Les extensions Mozilla

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 ?
22/07/2015
Transparent 3
Les Boites flexibles de CSS3
XPFE

XUL
&CSS

&JS
« 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 . »
&RDF

XBL
XPCOM
rdf
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; }
ajax
22/07/2015
Transparent 4
XPFE
XUL
XUL based Applications
Getting started with XULRunner
&CSS
&JS
&RDF
XULRunner (download)
XUL Gear (ext. FF)
XBL
XPCOM
rdf
ajax
22/07/2015
Transparent 5
Sommaire du Cours
XPFE

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
XPCOM

Chap XI - XUL: Distribution & Installation
rdf

Annexe I - RDF & OWL

Annexe II - AJAX
XUL
&CSS
&JS
&RDF
XBL
ajax
22/07/2015
Transparent 6
Références
XPFE

XUL
Web
 cours "XML" SI-4
http:www.polytech.unice.fr/~pfz/document.html
 Mozilla Development Center https://developer.mozilla.org/Fr
&CSS
 XULPlanet http://www.xulplanet.com/
&JS
 XULFR.org http://mozillazine-fr.org/annuairemozilla/fr/developpeurs/
&RDF
 xul.fr http://www.xul.fr/
XBL
 XULforum http://www.xulforum.org/site/
XPCOM
rdf
ajax

Biblio:
 Xul Tutorial (pdf)
 Rapid Application development with Mozilla
 ouvrages disponibles.
22/07/2015
Transparent 7
n-Tier Architecture for Web light Client
XPFE
HTML
CSS
DHTML, JS
AJAX
Presentation Layer
XUL
&CSS
&JS
&RDF
XBL
Client
XML
XSL
C, Java, C++
Application
Application
(Business)
Layer
Application
(Business)
Layer
(Business) Layers
XPCOM
rdf
Data Layer
ajax
Server
22/07/2015
Data Bases
Transparent 8
RIA Architecture
Rich Client
XPFE
XUL
&CSS
&JS
&RDF
XML, RDF
Structure
Networking
http, AJAX
CSS, XSL
Applicatio
n
Application
Style
Contrôle &
Web Services
Application
XBL
JS, DOM
SOAP, WSDL
XPCOM
rdf
ajax
Datas
Server
22/07/2015
Data Base
Transparent 9
XPFE
"Light Client"
vs "Rich Client" (R.I.A.)
Rich Client
XUL
&CSS
&JS
XML
XSL
dynamic
HTML, CSS
interface
DHTML, JS, AJAX transform
&RDF
"import"
of
fonctionalities
XBL
XPCOM
rdf
reduce the
back&forth
needs
metadata
multi-formats
Data Bases
ajax
22/07/2015
Transparent 10
Web GUI main concepts
XPFE

Layout
XUL
Boxes or Canvas or both ?
&CSS
Attribute Rules vs Programmation
Structure vs Computation ?
&JS

Widgets

Event Programming & Animation
XBL

Data Generation & "Pouring"
XPCOM

Media-type Processing

Networking

Design
&RDF
rdf
ajax
22/07/2015
XPFE
XUL
&CSS
&JS
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
&RDF
XBL
 JS with actions changing via DOM
 XML source
.xsl
or
XPCOM
rdf
 XSL source
 Dynamic refresh of the XML rendering
 Dynamic changes on widgets of the GUI
ajax
22/07/2015
.xsl
XML as metadatas for Web GUI
XPFE  SPRY (Adobe Labs)
 using XML to describe "contents"
 using JS & DOM to generate wIdgets & "contents"
XUL
 using AJAX to access/modify "contents"
&CSS


&JS
XUL (Mozilla Foundation)
from RDF, XML to PHP/SQL
 using XML/RDF to describe "contents"
 using XSLT from XML to SQL
&RDF
 exporting from SQL to XML
 using RDFL to describe
"contents"
 using XUL to generate WIdgets &
"contents"
 using AJAX to access "contents"
XBL

XPCOM
XSLT
 using XML/RDF to describe "contents"
 using JASON, XML-RPC, WSDL
for "networking" and "web
services"
 using XSLT to generate wIdgets (DHTML, JS)
rdf
 using XSLT to generate/modify "contents" (HTML)
 using XSLT to generate/modify style (CSS)
ajax
22/07/2015
XML as metadatas & XSLT
RefsWeb
XPFE
XUL
TechnosWeb
&CSS
JS
&JS
XML
rdf
CSS
&RDF
XBL
XPCOM
HTML
XSLT
Exam LDOC 2012
XSLT Pfz's
State of the Art
.xsl
XML
XSL
rdf
.xsl
ajax
22/07/2015
Web Reference Browser
XPFE
xml
XUL
dtd
&CSS
xsd
&JS
&RDF
html
XBL
css
css
XPCOM
rdf
metadata
.xml
ajax
22/07/2015
de XML vers
HTML5+CSS3
via xsl
Transparent 15
Doc Example Browsers
TechnosWeb
.xml
XPFE
XUL
dtd
&CSS
xsd
&JS
html
&RDF
css
css
js css
XBL
XPCOM
rdf
ajax
metadata xml
de XML vers
HTML5+CSS3+JS
22/07/2015
via xsl
Transparent 16
XPFE
XUL
&CSS
XML (meta) modèle de données
(ERD )
uses: n,m
<Show
•version
>
<Categorie
•type
•path
>
1,*
&JS
&RDF
XBL
XPCOM
rdf
ajax
Type
Path
used_by: n,m
<Code
•titre
•keywords
•file
•version
>
Keyword
Keyword
Keyword
Keyword
Keyword
22/07/2015
<Description
•libellé*
•img?
>
<Auteur>
Aut
Transparent 17
R.I.A. - XML as metadatas & SPRY
XPFE
Rich Client
XUL
XML
rdf
&CSS
HTML
&JS
&RDF
XML
rdf
SPRY
CSS, XSL
XBL
JS
XPCOM
DHTML
rdf
DHTML
ajax
22/07/2015
AJAX
Spry: framework JS pour dHTML
XPFE

XUL

&CSS
&JS
&RDF
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")

XBL
XPCOM
rdf
ajax

Implémentation
 (X)HTML + "Include" JS
 DOM
 XML
 CSS
 HTTP + AJAX
 intégration complète avec DW CS
22/07/2015
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
Transparent 19
Spry - Schéma & Utilisation
XPFE
XUL
&CSS
&RDF
<style>
…..
</style>
</head>
<body>
<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
&JS
<html>
<head>
<div id="TP1" class="TabbedPanels">
Dom
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">cours 1</li>
XPCOM
<li class="TabbedPanelsTab" >cours 2</li>
<li class="TabbedPanelsTab" >cours 3</li>
rdf
</ul></div>
</body></html>
ajax
XBL
22/07/2015
HTML
généré
Transparent 20
Spry - Génération de XML DATA SETs
XPFE
XUL
<html>
<head>
<head>
</script><script src="SpryAssets/xpath.js"… />
</script><script src="SpryAssets/SpryData.js" … />
</head>
22/07/2015
mis à plat
"flatening"
<script type="text/javascript">
var dsBib = new Spry.Data.XMLDataSet("bib.xml", "Bib/Article");
&CSS
dsBib .setColumnType("Date", "date");
</script>
&JS
</head>
&RDF <body>
<div spry:region="dsBib">
<table>
XBL
<tr> <th>Titre</th> <th>Date</th> <th spry:sort="@ref">ref</th> </tr>
XPCOM <tr spry:repeat="dsBib" spry:setrow="dsBIb">
Title Date
<td>{Title}</td> <td>{Date}</td> <td>{@ref}</td>
</tr>
rdf
</table>
ajax
</body></html>
Edit
@ref
Transparent 21
Spry: Démos
XPFE
XUL
&CSS
&JS
&RDF
XBL
XPCOM
rdf
ajax
22/07/2015
Transparent 22
Comment un Arbre (une forêt, en fait) ...?
XPFE
XUL
&CSS
&JS
&RDF
DOM
XML
XML
CSS
XSL
XBL
Parseur XMLs
XPCOM
rdf
ajax
DOM
XSL
Comment un Arbre ... ?
XPFE
XUL
&CSS
DOM
XML
XML
CSS
&JS
XSL
DOM
XSL
&RDF
Parseur XMLs
XBL
XPCOM
rdf
ajax
...peut
en cacher
un Autre
Peut en cacher un Autre ... ?
XPFE
XUL
&CSS
DOM
XML
XML
CSS
&JS
XSL
&RDF
DOM
XSL
Parseur XMLs
XBL
XPCOM
rdf
Peut en cacher un Autre
ajax
... qui contrôle
(modifie) les 2
premiers
Goto the Best of
XPFE

Xul Element Table

Dynamic DOM
XUL





&CSS
&JS
&RDF
XBL
XPCOM
Xul
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
rdf

Xul with RDF
ajax

XUL with XPCOM
22/07/2015
XPFE
XUL
Chap I - Mozilla & XPFE/XUL
XPFE et le XUL sous Mozilla
&CSS
&JS
&RDF
Historique
XBL
XPCOM
Standards
Lexique
Paul Franchi
SI 5
2013-14
Références
rdf
Architecture XPFE
ajax
22/07/2015
Transparent - 28
XPFE
Projet Mozilla
XUL
1998
&CSS
&JS
rdf
ajax
2008
XPCOM
 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
&RDF
XBL
Historique & Standards
 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"
22/07/2015
Transparent 29
XUL & XPFE
XPFE
XUL
&CSS
&JS
XUL
XBL
&RDF
SVG
XBL
XML
HTML
XPCOM
rdf
ajax
JS
CSS
RDF
XPConnect
Transparent 30
Architecture XPFE: le 4ième Tiers
Contenu
XPFE
XUL
 XUL supporte (X)HTML, XML,
 RDF/XML
 MathML & SVG
XUL XBL XML RDF
XUL - Conteneur
CONTENT
TREE
&CSS
Comportement (Contrôle)
 XUL utilise DOM & JS1.5
&JS
 XBL ("Bindings") pour décrire le
comportement des "widgets"
&RDF
XBL
XPCOM
rdf
ajax
LAYOUT
BOX TREE
Présentation
 XUL - la
description du
"layout" des
conteneurs (box)
 automatisation
avec RDF et les
templates
 XUL utilise des
locales (DTD,
localisation)
 XUL supporte CSS 2
 XUL supporte les formats image
 XUL utilise des thèmes ("skins")
XPFE - Communication
 XUL supporte AJAX
 XPCOM pour les Services Web,etc. via XPConnect
22/07/2015
Transparent 31
Mozilla Structure & Components
XPFE
XUL
le répertoire "chrome/"

&JS

Packages "Content"
Packages "Skin"
 fichiers de style .css: browser.css
 fichiers images
&RDF
XPCOM
/chrome
 .xul pour les "windows" et "elements" browser.xul
 .js pour les fichiers de script browser.js
 contents.rdf
&CSS
XBL
/Mozilla
Firefox

Utilisation
"pointilleuse"
Packages "Locale"
 fichiers .text (;dtd) pour les textes à afficher
 en-US.jar fr-FR.jar browse.dtd
file.manifest
rdf
ajax
l'url chrome://global/skin/
22/07/2015
extensions + privilèges
Transparent 32
XPFE
XUL
Chap II - XUL - les Bases
XPFE et le XUL sous Mozilla
&CSS
&JS
&RDF
XBL
Intro
Group & Tabboxes
Boxes & Spacers
Lists & Grids
XPCOM Texts & Buttons
ToolBar & Menu
Panels & Splitters
Stack & Decks
rdf
Layout Tree
Paul Franchi
SI 5
2013-14
ajax
22/07/2015
Transparent - 33
XPFE
<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet href="window.css" type="text/css"?>
XUL
&CSS
&JS
&RDF
XBL
XPCOM
rdf
ajax
<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>
22/07/2015
Transparent 34
XPFE
XUL
<window ....>
<vbox>
&CSS
<hbox flex="2" maxheight="80" align="top">
&JS
&RDF
<box> <hbox> <vbox>
<spacer>
</hbox>
<spacer flex="1" maxheight="50"/>
<box flex="2" orient="vertical" pack="center">
XBL
XPCOM
rdf
ajax
</box>
id, class, style
orient
width, heigth,
min- , maxflex
pack
align
<spacer flex="1" maxheight="50"/>
</vbox>
</window>
22/07/2015
Transparent 35
XPFE
XUL
&CSS
&JS
&RDF
XBL
XPCOM
rdf
ajax
<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>
<button> <checkbox>
<radio label="ROUGE"
<radio> <radiogroup>
selected="true" id="red" />
<button
id, class, style
id="newW"
label, crop
class="dialog"
image
label="Click ou Type W"
disabled, selected, checked
image="IMAGES/newW.png"
accesskey
disabled="false"
oncommand onclick
accesskey="W"
oncommand='window.open("window.css","_new");'
/>
</vbox>
</window>
22/07/2015
Transparent 36
XPFE
XUL
&CSS
&JS
&RDF
XBL
XPCOM
rdf
ajax
<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> <description>
<textbox>
<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>
22/07/2015
id, class, style
value
control
type
multiline
maxlength
onclick
Transparent 37
XPFE
XUL
&CSS
&JS
<listbox> <listitem>
<listhead>
<listheader>
<listcols> <listcol>
<listcell>
<menulist>
<caption>
<image>
<progressbar>
<toolbox>
<toolbar>
<toolbarbutton>
<groupbox>
<radiogroup>
<stack> <deck>
&RDF
XBL
<tabbox>
<tabpanel> <tabpanels>
<tabs> <tab>
XPCOM
rdf
<iframe> <browser>
<splitter> <gripy>
<menubar>
<menu>
<menupopup>
<menuitem>
<popupset>
<arrowscrollbox>
<grid>
<rows>
<row>
<columns>
<column>
<tree>
ajax
<template>
22/07/2015
Transparent 38
Layout: la solution Mozilla
XPFE
XUL
&CSS
&JS
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, XUL XBL XML RDF
XBL, et les templates RDF
 modification dynamique
via les DOMs respectifs
CONTENT
TREE
&RDF
A Layout Tree
XBL
XPCOM
rdf
 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
ajax
22/07/2015
Transparent 39
Les secrets de XUL
XPFE
XUL



&CSS
&JS
&RDF
XBL
XPCOM
rdf


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
22/07/2015
Transparent 40
XPFE

XUL
 CSS properties: font, color, etc.
 Box properties: pos, size
 (X)HTML defaults
&CSS
&JS
&RDF
Héritage, Masquage,
Cascading

<elem>
<elem>
<elem>
DOM Navigation "Orderings"
 child(), sibling()
 first(), last()
XBL
XPCOM

rdf
ajax
Modifications
 par sous arbres: XSL, RDF, XBL
 eval. incrémentales ("refresh")
22/07/2015
Transparent 41
XPFE
XUL
&CSS
&JS
&RDF
XBL
XPCOM
rdf
ajax
<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="[email protected]"/>
<treecell label="Top secret plans"/>
</treerow>
<tree>
</treeitem>
<treecols>
<treeitem>
<treecol>
<treerow>
<treechildren>
<treecell label="[email protected]"/>
<treeitem>
<treecell label="Let's do lunch"/>
<treerow>
</treerow>
<treececll>
</treeitem>
</treechildren>
</tree>
CSS
</window>
::-moz22/07/2015
Transparent 42
XPFE
XUL
&CSS
&JS
&RDF
XBL
XPCOM
rdf
ajax
<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>
22/07/2015
container
primary
open
Transparent 43
<tree enableColumnDrag="true" flex="1">
<treecols>
XPFE
<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"/>
XUL
<splitter class="tree-splitter"/>
<treecol id="starttime" label="Start" flex="1" persist="width ordinal hidden"/>
<splitter class="tree-splitter"/>
&CSS
<treecol id="endtime" label="End" flex="1" persist="width ordinal hidden"/>
</treecols>
&JS
<treechildren>
<treeitem>
<treerow>
&RDF
<treecell label="Joshua Granville"/> <treecell label="Vancouver"/>
<treecell label="7:06:00"/> <treecell label="9:10:26"/>
XBL
</treerow>
</treeitem>
<treeitem>
XPCOM
<treerow>
<treecell label="Robert Valhalla"/> <treecell label="Seattle"/>
<treecell label="7:08:00"/> <treecell label="9:15:51"/>
rdf
</treerow>
enableColumnDrag
</treeitem>
persist
ajax
</treechildren>
</tree>
22/07/2015
Transparent 44
XPFE
XUL
Chap III - XUL et le Style
XPFE et le XUL sous Mozilla
&CSS
&JS
&RDF
XBL
(X)HTML
CSS avec -moz
XPCOM
les "skins"
Paul Franchi
SI 5
2013-14
rdf
ajax
22/07/2015
Transparent - 45
XPFE
XUL
&CSS
&JS
&RDF
XBL
XPCOM
rdf
ajax
<?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>
22/07/2015
Transparent 46

CSS 2 & CSS3
XPFE
•
•
XUL
•
•
&CSS
•
•
&JS
•
•
&RDF
•
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
XBL

XPCOM
CSS Mozilla
•
•
rdf
ajax
•
•
-moz-opacity
-moz-border-radius
-moz-image-region
-moz-box-orient
<treerow properties="makeItRed">
treechildren::-moz-tree-row(makeItBlue) {
background-color: red;
}
22/07/2015
Transparent 47
XPFE

XUL
&CSS
customizes ton FF
/Doc&Sett/pfz
/Application data
/Profiles/chrome
&JS
&RDF
XBL
XPCOM
rdf
ajax
menubar {
background-color: red;
}

créer un thème
"skin"
/Doc&Sett/pfz
/Application data
/Profiles/chrome
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;
}
22/07/2015
Transparent 48
XPFE
XUL
Chap IV - XUL Dynamique, JS + DOM
XPFE et le XUL sous Mozilla
&CSS
&JS
&RDF
XBL
XUL DOM
Changer les Styles
XPCOM
Paul Franchi
SI 5
2013-14
rdf
ajax
22/07/2015
Transparent - 49
XUL + DOM + JS
XPFE
XUL


&CSS

&JS


&RDF
XBL
XPCOM
rdf
ajax
créer, copier des boutons
tester, modifier des listes
gérer les "events"
animation
<window ... >
etc.
<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>
22/07/2015
Transparent 50
XPFE
XUL
Chap V - XUL Génération de
Contenu RDF/XML(new FF3)
XPFE et le XUL sous Mozilla
&CSS
&JS
&RDF
XBL
XPCOM
rdf
<tree>
<templates>
<rule>
<query>
<action>
Paul Franchi
SI 5
2013-14
TextScan
ajax
22/07/2015
Transparent - 51
<window …>
Template + RDF
XPFE
<tree flex="1" width="200" height="200" datasources="zoo.rdf"
ref="http://www.zoo.com/all-animals">
XUL <treecols> <treecol id="name" /> <treecol id="species" /> </treecols>
<template>
<rule>
&CSS
<treechildren>
<treeitem uri='rdf:*'>
&JS
<treerow>
<treecell label="rdf:http://www.zoo.com/rdf#name"/>
&RDF
<treecell label="rdf:http://www.zoo.com/rdf#species"/>
</treerow>
zoo.rdf
</treeitem>
XBL
<RDF:RDF xmlns:Z="http://www.zoo.com/rdf#">
</treechildren>
</rule>
XPCOM
</template>
<RDF:Description Z:specimens="101"
</tree>
rdf:about="http://www.zoo.com/mammals">
rdf
ajax
<Z:name> Lion </Z:name>
</RDF:Description>
22/07/2015
Transparent 52
New FF3: Template + XML (external)
<window …>
XPFE
XUL
&CSS
&JS
&RDF
XBL
XPCOM
rdf
ajax
<tree flex="1" datasources="zoo.xml"
ref="*" querytype="xml" >
<treecols> <treecol id="name" /> <treecol
id="spec" /> </treecols>
<template>
<query expr="about" />
zoo.xml
<action>
<zoo>
<treechildren>
<about name="Arachnids">
<treeitem uri='?'>
…
<treerow>
</about>
<treecell label="?name"/>
<treecell label="?species"/> <about name="Birds">
</treerow>
<about name=" " species=" ">
</treeitem>
</about>
</treechildren>
</about>
</action>
</zoo>
</template>
</tree>
22/07/2015
Transparent 53
New FF3: Template + XML (internal)
<window …>
XPFE
XUL
&CSS
&JS
&RDF
XBL
XPCOM
rdf
ajax
<tree flex="1" datasources="#ZOO"
ref="*" querytype="xml" >
<treecols>
<treecol id="name" />
<zoo id="ZOO">
<treecol id="spec" />
<about name="Arachnids">
</treecols>
…
<template>
</about>
<query expr="about" />
<about name="Birds">
<action>
<about name=" " species="
">
</about>
</about>
</zoo>
<!-- idem -->
</action>
</template>
</tree>
22/07/2015
Transparent 54
XPFE
<window ....>
<vbox
datasources="rdf:bookmarks"
ref="NC:BookmarksRoot" flex="1">
XUL
&CSS
<template>
datasources
ref uri
<template>
<button uri="rdf:*"
label="rdf:http://home.netscape.com/NC-rdf#Name"/>
</template>
&JS
&RDF
XBL
</vbox>
</window>

/Mozilla
Firefox
XPCOM
rdf
ajax
Chrome: enregistrement
content xulex
file:///C:/path
/chrome
URL:
chrome://xulex/content/BM.xul

22/07/2015
BM.xul
Transparent 55
XPFE
XUL
&CSS
&JS
&RDF
XBL
XPCOM
rdf
ajax
<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>
22/07/2015
Transparent 56
<window ....>
<!-- à compléter -->
XPFE
XUL
&CSS
&JS
&RDF
XBL
XPCOM
rdf
ajax
<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>
textes.rdf
</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>
22/07/2015
<template>
datasources
ref uri
Transparent 57
<window ....>
<!-- à compléter -->
XPFE
XUL
&CSS
&JS
&RDF
XBL
XPCOM
rdf
ajax
<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>
22/07/2015
Transparent 58
<template>
<rule>
<conditions>
<content> <member>
<triple>
<action>
XPFE
XUL
&CSS
&JS
&RDF
XBL
XPCOM
rdf
ajax
<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>
22/07/2015
weather.rdf
photos.rdf
Transparent 59
RDF/XML Filtering
XPFE
XUL
&CSS
&JS
&RDF
XBL
XPCOM
rdf
<arrowscrollbox orient="vertical" flex="1" minheight="150"
maxheight="350" id="list_gauche"
datasources="docShow.xml"
<template> <rule>
ref="*" querytype="xml"
<query>
>
<action> <assign>
<template>
datasources= expr=
<query id="FILTRE" expr="//doc" >
querytype='xml'
<assign var="?dossier" expr="../@base"/>
builder.rebuild()
</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>
show.xbl
show.xml
</template>
</arrowscrollbox>
show.css
ajax
22/07/2015
showFilters.xml
Transparent 60
XPFE
XUL
Chap VI - XBL Extensions/Comportements
XPFE et le XUL sous Mozilla
&CSS
&JS
&RDF
XBL
<binding>
XPCOM
Paul Franchi
SI 5
2013-14
rdf
ajax
22/07/2015
Transparent - 61
XBL:Xml Binding Language
XPFE

Syntaxes & Liaisons
XUL <?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?
&CSS<?xml-stylesheet href="example.css" type="text/css"?>
<window
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
&JS <box class="okcancelbuttons"/>
</window>
box.okcancelbuttons {
&RDF
-moz-binding:
url('example.xml#okcancel');
}
XBL
<?xml version="1.0"?>
XPCOM
<bindings xmlns="http://www.mozilla.org/xbl"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
rdf <binding id="okcancel">
<content> <xul:button label="OK"/> <xul:button label="Cancel"/> </content>
</binding>
ajax </bindings>
22/07/2015
Transparent 62
Xml Binding Language
<bindings ... >
XPFE

XUL
&CSS
&JS
Extensions
 Content
<bindings><binding>
<content>
<children>
includes
inherits
&RDF
scrbb.css
<binding id="scrollbarBinding">
<content>
<xul:scrollbarbutton type="decrement"/>
<xul:slider flex="1">
<xul:thumb/>
</xul:slider>
<xul:scrollbarbutton type="increment"/>
</content>
</binding>
scrbb_xbl
</bindings>
XBL
XPCOM
<scrollbar>
<xul:scrollbarbutton
type="decrement"/>
<xul:slider flex="1">
<xul:thumb/>
</xul:slider>
<xul:scrollbarbutton
type="increment"/>
</scrollbar>
<scrollbar />
rdf
ajax
22/07/2015
Transparent 63
Xml Binding Language
XPFE

Implementation
 Fields
 Properties
 Methods
XUL
&CSS
&JS
&RDF

Events
 handler
XBL
XPCOM
rdf
ajax

Héritage
<bindings> <binding>
<implementation>
<field> <property>
<method> <parameter> <body>
<constructor> <destructor>
onset, onget
<binding id="scrollbarBinding">
<bindings> <binding>
<handlers>
<handlers> <handler>
<handler event="mouseup"
action="this.checked.toggle():" /> event, key, modifiers
</handlers>
action
</binding>
<binding id="textboxhttp" extends="textbox.xml#textbox">
</handlers>
<handler event="keypress" keycode="VE_F4">
this.value="http;//www"+this.value;
<binding>
</handler>
</handlers></binding>
extends
22/07/2015
Transparent 64
XPFE
XUL
<?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 -->
&CSS
&JS
<button label="Button 1"/>
<image src="../../../IMAGES/GOOGLE_icon.jpg" />
<label control="INPUT" value="ENTRER VOTRE TEXTE" />
<textbox id="INPUT" multiline="true"/>
&RDF
XBL
XPCOM
rdf
</box>
</window>
.slideshow {
-moz-binding: url("sshow.xml#slideshow");
}
ajax
22/07/2015
Transparent 65
XPFE<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl"
xmlns:xbl="http://www.mozilla.org/xbl"
XUL
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul>
&CSS<binding id="slideshow">
<content>
<xul:vbox flex="1">
&JS
<xul:deck xbl:inherits="selectedIndex" selectedIndex="0" flex="1">
<children/>
&RDF </xul:deck>
<xul:hbox>
<xul:button xbl:inherits="label=previoustext"
oncommand="parentNode.parentNode.parentNode.page--;"/>
XBL
<xul:description flex="1"/>
<xul:button xbl:inherits="label=nexttext"
XPCOM
oncommand="parentNode.parentNode.parentNode.page++;"/>
</xul:hbox>
</xul:vbox>
rdf
</content>
<! -- voir suivant -->
ajax </binding></bindings>
22/07/2015
Transparent 66
<binding id="slideshow">
<! -- voir précédant -->
<implementation>
XPFE <constructor>
var totalpages=this.childNodes.length;
document.getAnonymousNodes(this)[0].childNodes[1].childNodes[1].
setAttribute("value",(this.page+1)+" of "+totalpages);
XUL </constructor>
<property name="page" onget="return
parseInt(document.getAnonymousNodes(this)[0].childNodes[0].getAttribute('selectedIndex'));"
&CSS
onset="return this.setPage(val);"/>
<method name="setPage">
<parameter name="newidx"/>
&JS
<body>
<![CDATA[
var thedeck=document.getAnonymousNodes(this)[0].childNodes[0];
&RDF
var totalpages=this.childNodes.length;
if (newidx<0) return 0;
if (newidx>=totalpages) return totalpages;
XBL
thedeck.setAttribute("selectedIndex",newidx);
document.getAnonymousNodes(this)[0].childNodes[1].childNodes[1]
.setAttribute("value",(newidx+1)+" of "+totalpages);
XPCOM
return newidx;
]]>
</body>
rdf
</method>
</implementation>
ajax </binding>
</bindings>
22/07/2015
Transparent 67
XPFE
XUL
Chap VII - XUL: Modularité
XPFE et le XUL sous Mozilla
&CSS
&JS
&RDF
XBL
<overlay>
XPCOM
Paul Franchi
SI 5
2013-14
rdf
ajax
22/07/2015
Transparent - 68
XPFE
XUL
Chap VIII - XPCOM
Cross Platform Component Object Model
XPFE et le XUL sous Mozilla
&CSS
&JS
&RDF
XBL
Composants
Services
XPCOM
Paul Franchi
SI 5
2013-14
rdf
ajax
22/07/2015
Transparent - 69
XPCOM – Components
XPFE

 Components are dedicated to specific tasks: File,
Menu, Buttons, etc;
 Appel par un script XPConnect
XUL
&CSS

&RDF
XPCOM
Calling XP Components
 Get THE Component supporting THE desired
Interface (API) : createInstance
 Get the Interface implementation: QueryInterface
 Call THE Function of THE Interface
&JS
XBL
XPCOM Components
var aFile =
Components.classes["@mozilla.org/file/local;1"]
.createInstance();
if (aFile instanceof Components.interfaces.nsILocalFile)
{
aFile.initWithPath("/mozilla/testfile.txt");
rdf
aFile.remove(false);
ajax
}
22/07/2015
22/07/2015
Transparent 70
XPCOM – Services
XPFE

&CSS
&RDF
XBL
XPCOM
rdf
ajax
XPCOM Services
/chrome
 Get THE Service supporting THE desired Interface
(API) : getService
 Get the Interface implementation: QueryInterface
 Call THE Function of THE Interface
XUL
&JS
/Mozilla
Firefox
function addBookMark(URLwho, URLtitle) {
var bmarks = Components.classes
["@mozilla.org/browser/bookmarks-service;1"].getService();
Transparent 71
if (!bmarks)
{ alert("bookmarks-service FAILS !"); return false ;}
bmarks.QueryInterface(
Components.interfaces.nsIBookmarksService);
bmarks.addBookmarkImmediately((URLwho, URLtitle, 0, null);
}
22/07/2015
XPFE
XUL
Chap IX - XUL: et les Autres
XPFE et le XUL sous Mozilla
&CSS
&JS
&RDF
avec XHTML
XBL
XPCOM
avec SVG
avec MathML
Paul Franchi
SI 5
2013-14
rdf
ajax
22/07/2015
Transparent - 72
XUL & XHTML & SVG &XLINK
<window title="TestSVG"
svg-shape {
orient="horizontal"
-moz-binding:
xmlns:html="http://www.w3.org/1999/xhtml"
url("shape.xml#shape");
}
XUL 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">
&CSS
<stack flex="1">
<?xml version="1.0"?>
<vbox flex="1">
<bindings
<svg-shape
id="background-circle"
&JS
xmlns= "http://www.mozilla.org/xbl"
flex="1" type="circle" />
xmlns:xbl=
</vbox>
"http://www.mozilla.org/xbl"
&RDF
<vbox flex="1">
xmlns:html=
<spacer flex="2"/>
"http://www.w3.org/1999/xhtml"
radius="12" label="Box"/>
xmlns:xul=
XBL <svg-shape flex="1" id="svg-button" type="rect"
"http://www.mozilla.org/keymaste
<spacer flex="2"/>
r/gatekeeper/there.is.only.xul"
<hbox flex="4">
xmlns:svg=
XPCOM<svg-shape flex="1" id="circ1" type="circle" label="1"/>
"http://www.w3.org/2000/svg"
<svg-shape flex="1" id="circ2" type="circle" label="2" />
xmlns:xlink=
<svg-shape flex="1" id="circ3" type="circle" label="3"
/>
"http://www.w3.org/1999/xlink"
rdf </hbox>
>
<spacer flex="1"/>
<binding id="shape">
</vbox>
ajax
</stack>
XPFE
22/07/2015
Transparent 73
Annexe 1 - RDF
"Resource Description Framework"
XPFE
XUL
extrait de "Langages & Documents"
XPFE et le XUL sous Mozilla
&CSS
&JS
&RDF
XBL
RDF/XML
Dublin Core
XPCOM
rdf
OWL
Paul Franchi
SI 5
2013-14
RDF validator
ajax
22/07/2015
Transparent - 74
RDF- Resource Description Framework (W3C)
XPFE

 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
XUL
&CSS
&JS

XBL
XPCOM
ajax
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
&RDF
rdf
RDF is a part of the W3C's Semantic Web Activity
 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
22/07/2015
Transparent 75
RDF/XML – Resource with Properties and Values
XPFE

XUL

&CSS

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"
&JS
&RDF
XBL
XPCOM
rdf
ajax
<?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>

W3C RDF Syntax Validator & Graph Generator
22/07/2015
Transparent 76
RDF - Graphe Entité-Relation
XPFE


Un modèle de Graphe Entités/Relations
Une syntaxe RDF/XML pour "sérialiser" le graphe
XUL
&CSS
&JS
http://polytech.LANGDOC/RDF
&RDF
PFZ
XBL
XPCOM
rdf
ajax
http://polytech.unice.fr/~pfz
22/07/2015
Transparent 77
RDF: Description, Property, Attribute, Value, resource
XPFE
XUL
&CSS
&JS
&RDF
XBL
XPCOM
rdf
<?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
22/07/2015
Transparent 78
RDF - W3C Syntax Validator & Graph Generator
XPFE
XUL
&CSS
&JS
&RDF
XBL
XPCOM
rdf
http://www.w3.org/RDF/Validator/
ajax
22/07/2015
Transparent 79
RDF: Bag et les autres Conteneurs
XPFE
XUL
&CSS
&JS
&RDF
XBL
<?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>
XPCOM
rdf
ajax
22/07/2015
Transparent 80
RDF: Bag, Seq, Alt
XPFE
<?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#">
XUL
&CSS
&JS
&RDF
XBL
XPCOM
rdf
ajax
<rdf:Description rdf:about="http://www.Bib/cd/Beatles">
<cd:artist>
<cd:artist>
<rdf:Bag>
<rdf:Seq>
<rdf:li>John</rdf:li>
<rdf:li>George</rdf:li>
<rdf:li>Paul</rdf:li>
<rdf:li>John</rdf:li>
<rdf:li>George</rdf:li>
<rdf:li>Paul</rdf:li>
<rdf:li>Ringo</rdf:li>
<rdf:li>Ringo</rdf:li>
</rdf:Bag>
</rdf:Seq>
</cd:artist>
</cd:artist>
</rdf:Description>
...
<cd:format>
<rdf:Alt>
</rdf:RDF>
<rdf:li>CD</rdf:li>
<rdf:li>Record</rdf:li>
<rdf:li>Tape</rdf:li>
</rdf:Alt>
</cd:format>
22/07/2015
Transparent 81
RDF- les utilisations classiques
XPFE

Dublin Core MetaData

OWL

Mozilla
XUL
&CSS
&JS
 contents.rdf
 chrome.rdf
 XUL
&RDF
XBL

Communication par RDF files (génération par
Php, etc.)

RSS 1.0
XPCOM
rdf
ajax
22/07/2015
Transparent 82
Dublin Core
XPFE
XUL
&CSS
&JS
&RDF
XBL
XPCOM
rdf
ajax

The Dublin Core Metadata Initiative (DCMI) has created some
predefined properties for describing documents.
Property
Contributor
Coverage
Definition
Creator
An entity primarily responsible for making the content of the resource
Format
The physical or digital manifestation of the resource
Date
Description
A date of an event in the lifecycle 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
Title
A topic of the content of the resource
Type
The nature or genre of the content of the resource
An entity responsible for making contributions to the content of the resource
The extent or scope of the content of the resource
An account of the content of the resource
A name given to the resource
22/07/2015
Transparent 83
XPFE
Dublin Core
XUL
&CSS
&JS
&RDF
XBL
XPCOM
<?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>
rdf
ajax
22/07/2015
Transparent 84
OWL - "Web Ontology Language " (W3C)
XPFE

 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
XUL
&CSS
&JS
&RDF
What is OWL?

OWL has three sublanguages:
 OWL Lite
 OWL DL (includes OWL Lite)
 OWL Full (includes OWL DL)
XBL
XPCOM

rdf
ajax
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.
22/07/2015
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
Transparent 85
XPFE
XUL
Annexe II - AJAX
"Asynchronous JavaScript And XML"
extrait de "Langages & Documents"
XPFE et le XUL sous Mozilla
&CSS
&JS
&RDF
Http synchrone
XBL
XMLHttpRequest
XPCOM
Paul Franchi
SI 5
2013-14
rdf
ajax
22/07/2015
Transparent - 86
AJAX- Asynchronous JavaScript and XML
XPFE

XUL

&CSS
&JS

&RDF

XBL
XPCOM
rdf


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
22/07/2015
Transparent 87
AJAX : schéma "HttpRequest / Response"
XPFE
<html>
<script type="text/javascript">
XUL
function HTTP() {
&CSS
send()
open(GET, ...)
new
XMLHttpRequest
&JS
Côté "Serveur"
&RDF
XBL
}
</script>
<body>
responseXML
HTTP() ;
XPCOM
</body>
</html>
status
responseText
rdf
ajax
Côté "Client"
22/07/2015
Transparent 88
L'Objet
XMLHttpRequest
XPFE
XUL

&JS
&RDF
XPCOM
rdf
ajax



Attributs

0 (non init)
1 (connexion)
2 (requete)
3 (réponse),
4 (terminé)
 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.
&CSS
XBL


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.
22/07/2015
Transparent 89
Script AJAX
XPFE
XUL
&CSS
&JS
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;
}
};
&RDF
XBL
XPCOM
rdf
ajax
}
xhr.open( GET", "data.xml", true);
xhr.send(null);
}
22/07/2015
Transparent 90
XPFE
XUL
"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();
&CSS
&JS
&RDF
XBL
XPCOM
}
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>
rdf
ajax
"Http synchrone"
22/07/2015
Transparent 91
"Request" sur un
serveur (url, .asp
ou .php)
<html>
<script type="text/javascript">
var xmlHttp;
function ajaxFunction() {
/* voir suivant */
xmlHttp.onreadystatechange = function() {
/* voir suivant */
}
}
</script>
XPFE
XUL
&CSS
&JS
<form name="myForm">
Name:
<input
type="text" onkeyup="ajaxFunction();"
name="username" />
Time:
<input type="text" name="time" />
</form>
</body>
</html>
&RDF
XBL
XPCOM
rdf
ajax

XMLHttpRequest asynchrone: onreadystatechange()
22/07/2015
Transparent 92
"Request" sur un serveur
(url, .asp ou .php)
function ajaxFunction() {
XPFE var xmlHttp;
try { // IE7, Firefox, Opera 8.0+, Safari
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
XUL
xmlHttp = new XMLHttpRequest();
}
&CSS catch (e) { // Internet Explorer 6 et try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e) {
&JS
try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); }
catch (e) { alert("Your browser does not support AJAX!"); return false; }
}
&RDF
}
xmlHttp.onreadystatechange = function() {
XBL
if (xmlHttp.readyState==4) {
document.myForm.time.value = xmlHttp.responseText; }
}
XPCOM
xmlHttp.open("GET","http://www.w3schools.com/ajax/time.asp", true);
xmlHttp.send (null);
rdf
} // ajaxFunction
ajax

XMLHttpRequest asynchrone: onreadystatechange()
22/07/2015
Transparent 93
XPFE
XUL
&CSS
&JS
&RDF
XBL
XPCOM
rdf
ajax
<?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."); }
}
"Request" sur un
document .xml

XMLHttpRequest asynchrone: onResponse()
22/07/2015
Transparent 94
XPFE
XUL
&CSS
&JS
&RDF
XBL
XPCOM
"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>
rdf
ajax

XMLHttpRequest asynchrone: onResponse()
22/07/2015
Transparent 95
"Request" sur un
document .xml
XPFE
XUL
&CSS
&JS
&RDF
XBL
XPCOM
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]) ;
}
rdf

ajax
XMLHttpRequest: responseText
22/07/2015
Transparent 96
XPFE
XUL
&CSS
&JS
&RDF
XBL
XPCOM
rdf
ajax
"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");
{
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.
22/07/2015
Transparent 97