plasticité Des Interfaces Utilise Les...
Transcript of plasticité Des Interfaces Utilise Les...
XPFE et le XUL sous Mozilla
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Paul Franchi
SI 5
2013-14
28/10/2014 Transparent - 1
XUL XBL XPCOM XPI
Plasticité des Interfaces utilise les répertoires: ../../LANGDOC/COURS ./EXEMPLES/ ../LANGDOC/XUL
Web GUI Mozilla Project
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 2 28/10/2014
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);
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"
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 3 28/10/2014
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 4 28/10/2014
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 . »
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 5 28/10/2014
XUL based Applications
Getting started with XULRunner
XULRunner (download)
XUL Gear (ext. FF)
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 6 28/10/2014
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 7 28/10/2014
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 8 28/10/2014
n-Tier Architecture for Web light Client
Presentation Layer
Client
Data Layer
Application (Business) Layer Application
(Business) Layer Application (Business) Layers
Server
HTML
CSS
DHTML, JS
AJAX
XML
XSL
Data Bases
C, Java, C++
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Server
Transparent 9 28/10/2014
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 10 28/10/2014
"Light Client"
vs "Rich Client" (R.I.A.)
Rich Client XML
XSL
Data Bases
"import"
of
fonctionalities
dynamic
interface
transform
metadata
multi-formats
HTML, CSS
DHTML, JS, AJAX
reduce the
back&forth
needs
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
28/10/2014
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
28/10/2014
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
28/10/2014
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
rdf
XSL
JS
28/10/2014
XML as metadatas & XSLT
CSS
HTML XSLT
XML
rdf
XML .xsl
.xsl
XSLT Pfz's
State of the Art
RefsWeb
TechnosWeb
Exam LDOC 2012
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 15 28/10/2014
Web Reference Browser
de XML vers
HTML5+CSS3
html
xml
css
via xsl
css
dtd
xsd
metadata
.xml
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 16 28/10/2014
Doc Example Browsers
de XML vers
HTML5+CSS3+JS
html
metadata xml
css
via xsl
xsd
dtd
js
css css
TechnosWeb
.xml
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 17 28/10/2014
XML (meta) modèle de données
(ERD )
<Code
•titre
•keywords
•file
•version
>
<Description
•libellé*
•img?
>
<Categorie
•type
•path
>
<Show
•version
>
1,*
<Auteur>
uses: n,m used_by: n,m
Type
Aut Path
Keyword Keyword
Keyword Keyword
Keyword
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
JS
28/10/2014
R.I.A. - XML as metadatas & SPRY
CSS, XSL
HTML
DHTML AJAX
SPRY
Rich Client
XML
rdf
DHTML
XML
rdf
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 19 28/10/2014
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 20 28/10/2014
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é
interp
réteur
JS
Dom
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 21 28/10/2014
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 à p
lat
"flatenin
g"
Title Date Edit @ref
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 22 28/10/2014
Spry: Démos
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
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
... qui contrôle
(modifie) les 2
premiers
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
28/10/2014
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
rdf
Paul Franchi
SI 5
2013-14
28/10/2014 Transparent - 28
Chap I - Mozilla & XPFE/XUL
Historique Standards Lexique Références Architecture XPFE
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 29 28/10/2014
Historique & Standards Projet Mozilla code Netscape => Open Source (1998)
Gecko: moteur de "rendu" HTML 4.0
XPFE: "Cross Platform Front-End"
Suite Mozilla 1.7 & 1.8 => SeaMonkey
XUL - XML User interface Langage
XUL utilise les Standards du W3C XML – eXtensible Markup Language
HTML 4, 5 & XHTML
CSS 2 & CSS3 - Cascading Style Sheets
DTD
DOM & JS 1.5 (ECMAScript)
RDF - Resource Description FrameWork
RSS, SOAP, AJAX, SVG
Objectif: Développement d'Interfaces clients portables
Clients "riches" entre "légers" et "lourds"
1998 2
008
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
XPConnect Transparent 30
RDF
HTML
XUL
XBL
XML
SVG
JS
CSS
XUL & XPFE
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 31 28/10/2014
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
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 32 28/10/2014
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
rdf
Paul Franchi
SI 5
2013-14
28/10/2014 Transparent - 33
Intro Boxes & Spacers Texts & Buttons ToolBar & Menu
Group & Tabboxes Lists & Grids Panels & Splitters Stack & Decks
Layout Tree
Chap II - XUL - les Bases
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 34 28/10/2014
<?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 35 28/10/2014
<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, style
orient
width, heigth,
min- , max-
flex
pack
align
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 36 28/10/2014
<window ....>
<vbox>
<hbox>
<button id="ok" label="OK" maxwidth="20" />
<spacer maxwidth="10"/>
<button label="ALERT" style="min-width: 100px;"
oncommand="alert ('Le bouton a été pressé !');"/>
<checkbox label="Voir les images" checked="true"/>
</hbox>
<radio label="ROUGE"
selected="true" id="red" />
<button
id="newW"
class="dialog"
label="Click ou Type W"
image="IMAGES/newW.png"
disabled="false"
accesskey="W"
oncommand='window.open("window.css","_new");'
/>
</vbox>
</window>
<button> <checkbox> <radio> <radiogroup>
id, class, style
label, crop
image
disabled, selected, checked
accesskey
oncommand onclick
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 37 28/10/2014
<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, style
value
control
type
multiline
maxlength
onclick
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
<caption>
<image>
<progressbar>
<toolbox>
<toolbar>
<toolbarbutton>
Transparent 38 28/10/2014
<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 39 28/10/2014
Layout: la solution Mozilla
A Layout Tree les noeuds sont "calculés" en fonction
du content tree et des sources CSS et XBL
les éléments XUL sont typés "box", avec 4 propriétés: [x, y, width, heigth]
les objets hidden n'y sont pas (plus)
les objets collapse y sont avec [0,0,0,0]
A Content Tree à partir des éléments (balises) de
HTML, XML, SVG , etc.
avec l'ordre partiel du source (arborescence)
idem pour les éléments XUL, XBL, et les templates RDF
modification dynamique via les DOMs respectifs
XUL XBL XML RDF
CONTENT
TREE
LAYOUT
BOX TREE
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 40 28/10/2014
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 41 28/10/2014
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 42 28/10/2014
<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>
</treeitem>
<treeitem>
<treerow>
<treecell label="[email protected]"/> <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 43 28/10/2014
<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 44 28/10/2014
<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
rdf
Paul Franchi
SI 5
2013-14
28/10/2014 Transparent - 45
(X)HTML CSS avec -moz les "skins"
Chap III - XUL et le Style
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 46 28/10/2014
<?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 47 28/10/2014
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 48 28/10/2014
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
rdf
Paul Franchi
SI 5
2013-14
28/10/2014 Transparent - 49
XUL DOM Changer les Styles
Chap IV - XUL Dynamique, JS + DOM
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 50 28/10/2014
<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
rdf
Paul Franchi
SI 5
2013-14
28/10/2014 Transparent - 51
<tree> <templates> <rule> <query> <action> TextScan
Chap V - XUL Génération de Contenu RDF/XML(new FF3)
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 52 28/10/2014
<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 53 28/10/2014
<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 54 28/10/2014
<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 55 28/10/2014
<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>
datasources
ref uri
content xulex file:///C:/path
Chrome: enregistrement
URL:
chrome://xulex/content/BM.xul BM.xul
/Mozilla
Firefox
/chrome
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 56 28/10/2014
<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 57 28/10/2014
<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>
datasources
ref uri
textes.rdf
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 58 28/10/2014
<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 59 28/10/2014
<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 60 28/10/2014
<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
rdf
Paul Franchi
SI 5
2013-14
28/10/2014 Transparent - 61
<binding>
Chap VI - XBL Extensions/Comportements
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 62 28/10/2014
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 63 28/10/2014
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>
includes
inherits scrbb_xbl
scrbb.css
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 64 28/10/2014
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, modifiers
action
<binding id="textboxhttp" extends="textbox.xml#textbox">
</handlers>
<handler event="keypress" keycode="VE_F4">
this.value="http;//www"+this.value;
</handler>
</handlers></binding>
<binding>
extends
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 65 28/10/2014
<?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 66 28/10/2014
<?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 67 28/10/2014
<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
rdf
Paul Franchi
SI 5
2013-14
28/10/2014 Transparent - 68
<overlay>
Chap VII - XUL: Modularité
XPFE et le XUL sous Mozilla
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Paul Franchi
SI 5
2013-14
28/10/2014 Transparent - 69
Composants Services
Chap VIII - XPCOM Cross Platform Component Object Model
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 70 28/10/2014
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);
}
28/10/2014
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 71
28/10/2014
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
rdf
Paul Franchi
SI 5
2013-14
28/10/2014 Transparent - 72
avec XHTML avec SVG avec MathML
Chap IX - XUL: et les Autres
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 73 28/10/2014
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"?>
<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"
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
rdf
Paul Franchi
SI 5
2013-14
28/10/2014 Transparent - 74
extrait de "Langages & Documents"
RDF/XML Dublin Core OWL RDF validator
Annexe 1 - RDF "Resource Description Framework"
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 75 28/10/2014
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 76 28/10/2014
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
http://polytech.LANGDOC/RDF
PFZ
http://polytech.unice.fr/~pfz
Transparent 77 28/10/2014
RDF - Graphe Entité-Relation
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 78 28/10/2014
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 79 28/10/2014
RDF - W3C Syntax Validator & Graph Generator
http://www.w3.org/RDF/Validator/
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 80 28/10/2014
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 81 28/10/2014
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 82 28/10/2014
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 83 28/10/2014
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 84 28/10/2014
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 85 28/10/2014
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
rdf
Paul Franchi
SI 5
2013-14
28/10/2014 Transparent - 86
Http synchrone XMLHttpRequest
extrait de "Langages & Documents"
Annexe II - AJAX "Asynchronous JavaScript And XML"
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 87 28/10/2014
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 88 28/10/2014
<html>
<script type="text/javascript">
function HTTP() {
}
</script>
<body>
HTTP() ;
</body>
</html>
Côté "Client"
send() open(GET, ...)
new XMLHttpRequest
status responseText
responseXML
Côté "Serveur"
AJAX : schéma "HttpRequest / Response"
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 89 28/10/2014
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.
0 (non init)
1 (connexion)
2 (requete)
3 (réponse),
4 (terminé)
ajax
&CSS
XUL
XPFE
&JS
&RDF
XBL
XPCOM
rdf
Transparent 90 28/10/2014
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 91 28/10/2014
<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 92 28/10/2014
<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 93 28/10/2014
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 94 28/10/2014
<?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 95 28/10/2014
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 96 28/10/2014
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 97 28/10/2014
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