[email protected]

XPFE et le XUL sous Mozilla

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdfPaul Franchi

SI 52013-14

21/04/23 Transparent - 1

XUL

XBL

XPCOM

XPI

XUL

XBL

XPCOM

XPI

Plasticité des InterfacesPlasticité des Interfaces utilise les répertoires:

../../LANGDOC/COURS

./EXEMPLES/

../LANGDOC/XUL

utilise les répertoires:

../../LANGDOC/COURS

./EXEMPLES/

../LANGDOC/XUL

Web GUI

Mozilla Project

Web GUI

Mozilla Project

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf

Transparent 221/04/23

Bien s'installer sous XUL/Firefox

sous FF (Mozilla)

désactiver le cache XUL, dans

Profiles/..defaut/prefs.js

sous Gecko 1.9 (FF3, Thunderbird 3)

Xul distant est intégré

les "manifest chrome" sont à placer

dans le répertoire chrome/

sous Gecko 2.0 (FF4+, Thunderbird 3.3)

Xul distant n'est pas supporté par

défaut

les "manifest chrome" sont à déclarer dans chrome.manifest

user_pref(

"nglayout.disable_xul_cache",

true);

user_pref(

"nglayout.disable_xul_fastload",

true);

user_pref(

"nglayout.disable_xul_cache",

true);

user_pref(

"nglayout.disable_xul_fastload",

true);

installer l'extension

XUL Remote Manager

et ajouter "<file>"

à la "whitelist"

installer l'extension

XUL Remote Manager

et ajouter "<file>"

à la "whitelist"

ATTENTION - RDF XUL :

pas d'espaces dans les paths;

par ex "C:\Documents and Settings\Bureau"

ATTENTION - RDF XUL :

pas d'espaces dans les paths;

par ex "C:\Documents and Settings\Bureau"

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf


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


Les Boites flexibles de CSS3

display:box box-orient box-direction box-ordinal-group box-flex box-pack box-align

body{ display : box; box-orient : horizontal; box-direction : reverse; box-pack : center; /* horizontalement */ box-align : center; /* verticalement */ }#boite1 { box-ordinal-group : 2; box-flex : 2; } #boite2 { box-ordinal-group : 2; box-flex : 1; }#boite3 { box-ordinal-group : 1; box-flex : 1; }

« Le modèle de boite flexible CSS3 permet de déterminer la façon dont des boites sont distribuées au sein d'autres boites (horizontalement ou verticalement) et comment elles se répartissent l'espace disponible entre elles.

Ce modèle de boite est utilisé par XUL (le langage de définition d'interface des produits Mozilla). Des mécanismes similaires sont utilisés par de nombreux autres langages de description d'interface comme XAML ou GladeXML . »

« Le modèle de boite flexible CSS3 permet de déterminer la façon dont des boites sont distribuées au sein d'autres boites (horizontalement ou verticalement) et comment elles se répartissent l'espace disponible entre elles.

Ce modèle de boite est utilisé par XUL (le langage de définition d'interface des produits Mozilla). Des mécanismes similaires sont utilisés par de nombreux autres langages de description d'interface comme XAML ou GladeXML . »

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf


XUL based Applications

Getting started with XULRunner

XULRunner (download)

XUL Gear (ext. FF)

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf


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


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


n-Tier Architecture for Web light Client

Presentation Layer

Client

Data Layer

Application (Business) LayerApplication

(Business) LayerApplication (Business) Layers

Server

HTML

CSS

DHTML, JS

AJAX

XML

XSL

Data Bases

C, Java, C++C, Java, C++

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf

Server


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


"Light Client" vs "Rich Client" (R.I.A.)

Rich ClientXML

XSL

Data Bases

"import"

of

fonctionalities

"import"

of

fonctionalities

dynamic

interface

transform

dynamic

interface

transform

metadata

multi-formats

metadata

multi-formats

HTML, CSS

DHTML, JS, AJAX

reduce the

back&forth

needs

reduce the

back&forth

needs

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf

21/04/23

Web GUI main concepts

Layout

Boxes or Canvas or both ?

Attribute Rules vs Programmation

Structure vs Computation ?

Widgets

Event Programming & Animation

Data Generation & "Pouring"

Media-type Processing

Networking

Design

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf

21/04/23

State of "my"Art j.b.X.

(just before Xul) Web GUI based on Navigators

XML + XSL + CSS as input

with XSLT producing

(X)HTML + CSS

JS with actions changing via DOM

XML source

or

XSL source

Dynamic refresh of the XML rendering

Dynamic changes on widgets of the GUI

.xsl

.xsl

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf

21/04/23

XML as metadatas for Web GUI

SPRY (Adobe Labs) using XML to describe "contents"

using JS & DOM to generate wIdgets & "contents"

using AJAX to access/modify "contents"

from RDF, XML to PHP/SQL using XML/RDF to describe "contents"

using XSLT from XML to SQL

exporting from SQL to XML

XSLT using XML/RDF to describe "contents"

using XSLT to generate wIdgets (DHTML, JS)

using XSLT to generate/modify "contents" (HTML)

using XSLT to generate/modify style (CSS)

XUL (Mozilla Foundation)

using RDFL to describe "contents"

using XUL to generate WIdgets &

"contents"

using AJAX to access "contents"

using JASON, XML-RPC, WSDL for

"networking" and "web services"

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdfXSLXSL

JSJS

21/04/23

XML as metadatas & XSLT

CSSCSS

HTMLHTML XSLTXSLT

XML

rdf

XML

rdf

XMLXML.xsl

.xsl

XSLT Pfz's State of the Art

RefsWeb

TechnosWeb

Exam LDOC 2012

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf


Web Reference Browser

de XML vers HTML5+CSS3

html

xml

css

via xsl

css

dtd

xsd

metadata

.xml

metadata

.xml

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf


Doc Example Browsers

de XML vers HTML5+CSS3+JS

html

metadata xml

css

via xsl

xsd

dtd

jscss

css

TechnosWeb

.xml

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf


XML (meta) modèle de données (ERD )

<Code•titre

•keywords•file

•version>

<Description•libellé*

•img?>

<Categorie •type•path

>

<Show•version

>1,*

1,*

1,?

<Auteur>n,m

uses: n,mused_by: n,m

TypeType

AutAutPathPath

KeywordKeywordKeywordKeyword

KeywordKeywordKeywordKeyword

KeywordKeyword

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf

JSJS

21/04/23

R.I.A. - XML as metadatas & SPRY

CSS, XSLCSS, XSL

HTMLHTML

DHTMLDHTML AJAXAJAX

SPRYSPRY

Rich Client

XML

rdf

XML

rdf

DHTMLDHTML

XML

rdf

XML

rdf

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf


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


Spry - Schéma & Utilisation

<html>

<head>

<style>

…..

</style>

</head>

<body>

<div id="TP1" class="TabbedPanels">

<ul class="TabbedPanelsTabGroup">

<li class="TabbedPanelsTab" tabindex="0">cours 1</li>

<li class="TabbedPanelsTab" >cours 2</li>

<li class="TabbedPanelsTab" >cours 3</li>

</ul></div>

</body></html>

<head>

<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript">

</script><script src="SpryAssets/SpryMenuBar.js"… />

</script><script src="SpryAssets/xpath.js"… />

</script><script src="SpryAssets/SpryData.js" … />

<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" … />

<link href="SpryAssets/SpryMenuBarHorizontal.css" … />

<link href="SpryAssets/SpryMenuBarVertical.css"… />

</head>

HTML

généré

interpréteur

JS

Dom

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf


Spry - Génération de XML DATA SETs

<html>

<head>

<script type="text/javascript">

var dsBib = new Spry.Data.XMLDataSet("bib.xml", "Bib/Article");

dsBib .setColumnType("Date", "date");

</script>

</head>

<body>

<div spry:region="dsBib">

<table>

<tr> <th>Titre</th> <th>Date</th> <th spry:sort="@ref">ref</th> </tr>

<tr spry:repeat="dsBib" spry:setrow="dsBIb">

<td>{Title}</td> <td>{Date}</td> <td>{@ref}</td>

</tr>

</table>

</body></html>

<head>

</script><script src="SpryAssets/xpath.js"… />

</script><script src="SpryAssets/SpryData.js" … />

</head>

mis à plat

"flatening"

Title Date Edit @ref

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf


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

DOM

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf

Peut en cacher un Autre

Peut en cacher un Autre ... ?

XML

Parseur XMLs

CSS

XSL

DOM XML

DOM XSL

DOM

... qui contrôle (modifie) les 2

premiers

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf

21/04/23

Goto the Best of Xul Xul Element Table

Dynamic DOM cursor coordinates add (copy) Buttons check from input delete menu item scroll To Visible

Slide-show (anything) with XBL

XUL with SVG

Pfz's Tutorial

Xul with RDF

XUL with XPCOM


ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdfPaul Franchi

SI 52013-14


Chap I - Mozilla & XPFE/XULChap I - Mozilla & XPFE/XUL

Historique

Standards

Lexique

Références

Architecture XPFE

Historique

Standards

Lexique

Références

Architecture XPFE

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf


Historique & StandardsProjet Mozilla

code Netscape => Open Source (1998) Gecko: moteur de "rendu" HTML 4.0 XPFE: "Cross Platform Front-End" Suite Mozilla 1.7 & 1.8 => SeaMonkey XUL - XML User interface Langage

XUL utilise les Standards du W3C XML – eXtensible Markup Language HTML 4, 5 & XHTML CSS 2 & CSS3 - Cascading Style Sheets DTD DOM & JS 1.5 (ECMAScript) RDF - Resource Description FrameWork RSS, SOAP, AJAX, SVG

Objectif: Développement d'Interfaces clients portables Clients "riches" entre "légers" et "lourds"

1998 2008

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf

Event

s

DOM

s

XPConnectTransparent 30

LDAP SOAP POP

filesSockets

RDF

HTML

XUL

XBL

XML

SVG

JS

CSS

XUL & XPFE

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf


Architecture XPFE: le 4ième Tiers

Présentation XUL supporte CSS 2 XUL supporte les formats image XUL utilise des thèmes ("skins")

Comportement (Contrôle) XUL utilise DOM & JS1.5 XBL ("Bindings") pour décrire le

comportement des "widgets"

XPFE - Communication XUL supporte AJAX XPCOM pour les Services Web,etc. via XPConnect

Contenu XUL supporte (X)HTML, XML, RDF/XML MathML & SVG

XUL - Conteneur XUL - la

description du "layout" des conteneurs (box)

automatisation avec RDF et les templates

XUL utilise des locales (DTD, localisation)

XUL XBL XML RDF CONTENT TREE

LAYOUT

BOX TREE

Why only one

Tree,

when we may

have Two ?

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf


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


ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdfPaul Franchi

SI 52013-14


Intro

Boxes & Spacers

Texts & Buttons

ToolBar & Menu

Intro

Boxes & Spacers

Texts & Buttons

ToolBar & Menu

Group & Tabboxes

Lists & Grids

Panels & Splitters

Stack & Decks

Group & Tabboxes

Lists & Grids

Panels & Splitters

Stack & Decks

Layout TreeLayout Tree

Chap II - XUL - les BasesChap II - XUL - les Bases

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf


<?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


<window ....>

<vbox>

<hbox flex="2" maxheight="80" align="top">

</hbox>

<spacer flex="1" maxheight="50"/>

<box flex="2" orient="vertical" pack="center">

</box>

<spacer flex="1" maxheight="50"/>

</vbox></window>

<box> <hbox> <vbox><spacer>

id, class, styleorient

width, heigth, min- , max-

flexpackalign

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf


<window ....><vbox> <hbox> <button id="ok" label="OK" maxwidth="20" />

<spacer maxwidth="10"/><button label="ALERT" style="min-width: 100px;"

oncommand="alert ('Le bouton a été pressé !');"/><checkbox label="Voir les images" checked="true"/></hbox><radio label="ROUGE"

selected="true" id="red" /><button

id="newW" class="dialog" label="Click ou Type W" image="IMAGES/newW.png" disabled="false" accesskey="W"

oncommand='window.open("window.css","_new");'/>

</vbox></window>

<button> <checkbox> <radio> <radiogroup>

id, class, stylelabel, crop

imagedisabled, selected, checked

accesskeyoncommand onclick

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf


<window ....><vbox>

<description> Donner son profil puis se loger ci-dessous. </description>

<hbox> <textbox id="profil" multiline="true"

value="compléter votre profil ici"/> </hbox>

<hbox> <label control="login" value="Login :"/> <textbox id="login"/> </hbox> <hbox> <label control="pass" type="password"

value="Mot de passe:"/> <textbox id="pass" maxlength="12" /> </hbox>

<label value="Envoyer" onclick="send();"/></vbox></window>

<label> <description><textbox>

id, class, stylevalue

controltype

multilinemaxlength

onclick

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf

<caption> <image>

<progressbar>

<toolbox><toolbar>

<toolbarbutton>


<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


Layout: la solution Mozilla

A Layout Tree les noeuds sont "calculés" en fonction

du content tree et des sources CSS et XBL

les éléments XUL sont typés "box", avec 4 propriétés: [x, y, width, heigth]

les objets hidden n'y sont pas (plus) les objets collapse y sont avec [0,0,0,0]

A Content Tree à partir des éléments (balises) de

HTML, XML, SVG , etc. avec l'ordre partiel du source

(arborescence) idem pour les éléments XUL,

XBL, et les templates RDF modification dynamique via

les DOMs respectifs

XUL XBL XML RDFCONTENT

TREE

LAYOUT

BOX TREE

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf


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


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


<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


<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


<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


ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdfPaul Franchi

SI 52013-14


(X)HTML

CSS avec -moz

les "skins"

(X)HTML

CSS avec -moz

les "skins"

Chap III - XUL et le StyleChap III - XUL et le Style

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf


<?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


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


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


ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdfPaul Franchi

SI 52013-14


XUL DOM

Changer les Styles

XUL DOM

Changer les Styles

Chap IV - XUL Dynamique, JS + DOMChap IV - XUL Dynamique, JS + DOM

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf


<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


ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdfPaul Franchi

SI 52013-14


<tree>

<templates> <rule><query><action>

TextScan

<tree>

<templates> <rule><query><action>

TextScan

Chap V - XUL Génération de Contenu RDF/XML(new FF3)Chap V - XUL Génération de Contenu RDF/XML(new FF3)

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf


<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>


<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


<window …>

<tree flex="1" datasources="#ZOO" ref="*" querytype="xml" >

<treecols> <treecol id="name" /> <treecol id="spec" />

</treecols> <template><query expr="about" /> <action>



</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


<window ....><vbox datasources="rdf:bookmarks"

ref="NC:BookmarksRoot" flex="1">

<template> <button uri="rdf:*"

label="rdf:http://home.netscape.com/NC-rdf#Name"/> </template>

</vbox></window>

<template>

datasourcesref uri

content xulex file:///C:/path

Chrome: enregistrement

URL:

chrome://xulex/content/BM.xulBM.xul


ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf


<window ....><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>  <splitter/> 

</hbox>  <splitter/></vbox> </window>

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf


<window ....>

<vbox id="PAGE" width="600" height="200"> <hbox width="600" height="200" style="background: LightGray">

 <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">  </groupbox>

<button label="Revenir au texte" onclick= "document.getElementById('main_description').setExercise('texte');" />

</vbox> 

</hbox>  <splitter/></vbox> </window>

<template>

datasourcesref uri

textes.rdf

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf


<window ....>

<vbox id="PAGE" width="600" height="200"> <hbox width="600" height="200" style="background: LightGray">



<vbox width="150" flex="1" style="background: LightBlue"> 

<groupbox flex="1"> <caption label="Choisis le Test" />

<description value="(Même si ....)"/> <radiogroup id='exercises' class="radio_ex" flex="1"> <radio label="Ponctuation" tooltiptext="Ponctuation?" exercise= 'ponct'/> <radio label="Mots" tooltiptext="Mots?" exercise='mots' /> <radio label="articles" tooltiptext="Articles?" exercise='articles' /> </radiogroup>

<separator flex="1" /> </groupbox> </vbox>  </hbox>  <splitter/></vbox> </window>

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf


<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


<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


ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdfPaul Franchi

SI 52013-14


<binding><binding>

Chap VI - XBL Extensions/ComportementsChap VI - XBL Extensions/Comportements

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf


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


Extensions Content

Xml Binding Language

<scrollbar />

<scrollbar> <xul:scrollbarbutton

type="decrement"/> <xul:slider flex="1"> <xul:thumb/> </xul:slider>

<xul:scrollbarbutton type="increment"/>

</scrollbar>

<bindings ... >

<binding id="scrollbarBinding"> <content> <xul:scrollbarbutton type="decrement"/> <xul:slider flex="1"> <xul:thumb/> </xul:slider> <xul:scrollbarbutton type="increment"/> </content> </binding>

</bindings>

<bindings><binding><content><children>

includesinherits scrbb_xbl

scrbb.css

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf


Implementation Fields Properties Methods

Events handler

Héritage

Xml Binding Language <bindings> <binding>

<implementation><field> <property>

<method> <parameter> <body><constructor> <destructor>

onset, onget

<binding id="scrollbarBinding"> <handlers> <handler event="mouseup"

action="this.checked.toggle():" /> </handlers></binding>

<bindings> <binding><handlers> <handler>

event, key, modifiersaction

<binding id="textboxhttp" extends="textbox.xml#textbox"> </handlers><handler event="keypress" keycode="VE_F4"> this.value="http;//www"+this.value;</handler></handlers></binding>

<binding>

extends

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf


<?xml-stylesheet href="sshow.css" type="text/css"?><window .... ><box class="slideshow" previoustext="Previous" nexttext="Next" flex="1">

<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


<?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


<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>


ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdfPaul Franchi

SI 52013-14


<overlay><overlay>

Chap VII - XUL: Modularité Chap VII - XUL: Modularité


ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdfPaul Franchi

SI 52013-14


Composants

Services

Composants

Services

Chap VIII - XPCOMCross Platform Component Object ModelChap VIII - XPCOMCross Platform Component Object Model

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf


XPCOM – Components

XPCOM Components Components are dedicated to specific tasks: File,

Menu, Buttons, etc; Appel par un script XPConnect

Calling XP Components Get THE Component supporting THE desired

Interface (API) : createInstance Get the Interface implementation: QueryInterface Call THE Function of THE Interface

var aFile = Components.classes["@mozilla.org/file/local;1"]

.createInstance(); if (aFile instanceof Components.interfaces.nsILocalFile){ aFile.initWithPath("/mozilla/testfile.txt");

aFile.remove(false);

}

21/04/23

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf

Transparent 71

21/04/23

XPCOM – Services

XPCOM Services Get THE Service supporting THE desired Interface

(API) : getService Get the Interface implementation: QueryInterface Call THE Function of THE Interface

function addBookMark(URLwho, URLtitle) {

var bmarks = Components.classes ["@mozilla.org/browser/bookmarks-service;1"].getService();

if (!bmarks) { alert("bookmarks-service FAILS !"); return false ;}

bmarks.QueryInterface(Components.interfaces.nsIBookmarksService);

bmarks.addBookmarkImmediately((URLwho, URLtitle, 0, null);

}



ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdfPaul Franchi

SI 52013-14


avec XHTML

avec SVG

avec MathML

avec XHTML

avec SVG

avec MathML

Chap IX - XUL: et les AutresChap IX - XUL: et les Autres

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf


XUL & XHTML & SVG &XLINK <window title="TestSVG"

orient="horizontal"xmlns:html="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<stack flex="1"><vbox flex="1">

<svg-shape id="background-circle" flex="1" type="circle" />

</vbox><vbox flex="1">

<spacer flex="2"/><svg-shape flex="1" id="svg-button" type="rect" radius="12" label="Box"/><spacer flex="2"/><hbox flex="4"><svg-shape flex="1" id="circ1" type="circle" label="1"/><svg-shape flex="1" id="circ2" type="circle" label="2" /><svg-shape flex="1" id="circ3" type="circle" label="3" /></hbox><spacer flex="1"/>

</vbox></stack>

<?xml version="1.0"?><bindingsxmlns= "http://www.mozilla.org/xbl" xmlns:xbl=

"http://www.mozilla.org/xbl" xmlns:html=

"http://www.w3.org/1999/xhtml" xmlns:xul=

"http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"

xmlns:svg= "http://www.w3.org/2000/svg"

xmlns:xlink= "http://www.w3.org/1999/xlink"

><binding id="shape">

svg-shape { -moz-binding: url("shape.xml#shape");}


ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdfPaul Franchi

SI 52013-14


extrait de "Langages & Documents"extrait de "Langages & Documents"

RDF/XML

Dublin Core

OWL

RDF validator

RDF/XML

Dublin Core

OWL

RDF validator

Annexe 1 - RDF"Resource Description Framework"Annexe 1 - RDF"Resource Description Framework"

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf


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


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: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


RDF - Graphe Entité-Relation

http://polytech#author

http://polytech#homepage

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf


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


RDF - W3C Syntax Validator & Graph Generator

http://www.w3.org/RDF/Validator/http://www.w3.org/RDF/Validator/

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf


RDF: Bag et les autres Conteneurs


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


RDF: Bag, Seq, Alt


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


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


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


Dublin Core

<?xml version="1.0" encoding="ISO-8859-1"?><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


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


ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdfPaul Franchi

SI 52013-14


Http synchrone

XMLHttpRequest

Http synchrone

XMLHttpRequest

extrait de "Langages & Documents"extrait de "Langages & Documents"

Annexe II - AJAX"Asynchronous JavaScript And XML"Annexe II - AJAX"Asynchronous JavaScript And XML"

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf


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


<html><script type="text/javascript">

function HTTP() {

}</script><body>

HTTP() ;

</body> </html>

Côté "Client"

Côté "Serveur"

AJAX : schéma "HttpRequest / Response"

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf


L'Objet XMLHttpRequest

Attributs readyState status 200 si ok - 404 si la page n'est pas trouvée. responseText données chargées dans une chaîne de

caractères. responseXml données chargées sous forme xml, onreadystatechange propriété activée par un évènement de

changement d'état. On lui assigne une fonction.

Méthodes open(mode, url, boolean)

mode: type de requête, GET ou POST url: l'adresse des données, boolean: true (asynchrone) / false (synchrone). en option on peut ajouter un login et un mot de passe.

send("chaine") null pour une commande GET.

Attributs readyState status 200 si ok - 404 si la page n'est pas trouvée. responseText données chargées dans une chaîne de

caractères. responseXml données chargées sous forme xml, onreadystatechange propriété activée par un évènement de

changement d'état. On lui assigne une fonction.

Méthodes open(mode, url, boolean)

mode: type de requête, GET ou POST url: l'adresse des données, boolean: true (asynchrone) / false (synchrone). en option on peut ajouter un login et un mot de passe.

send("chaine") null pour une commande GET.

0 (non init) 1 (connexion) 2 (requete) 3 (réponse), 4 (terminé)

0 (non init) 1 (connexion) 2 (requete) 3 (réponse), 4 (terminé)

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf


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


<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


<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


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


<?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


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()


ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf


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


ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf


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.


[email protected]

Documents

Transcript of [email protected]