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="joe@somewhere.com"/>

<treecell label="Top secret plans"/> </treerow>

</treeitem>

<treeitem>

<treerow>

<treecell label="mel@whereever.com"/> <treecell label="Let's do lunch"/> </treerow>

</treeitem>

</treechildren>

</tree>

</window>

<tree>

<treecols> <treecol>

<treechildren>

<treeitem>

<treerow>

<treececll>

CSS

::-moz-

ajax

&CSS

XUL

XPFE

&JS

&RDF

XBL

XPCOM

rdf

Transparent 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