Les technologies de

Mozilla

Laurent Jouanneau

juillet 2004

Sommaire

Présentation de Mozilla

Les technologies incluses dans Mozilla

Déploiement

Chapitre 1

Présentation de Mozilla

Mozilla

Suite Internet : navigateur, client mail...

Nom de code du projet pour développer le navigateur Netscape

Courant 1998 : libération du code source NS4 et naissance de Mozilla.

5 Juin 2002 : version 1.0

Problématique : faire un navigateur multi-plateforme sans "exploser" les temps de développement

La plateforme Mozilla

Mozilla n'est pas seulement un navigateur

Mozilla est un framework pour développer des applications desktop et web

Mozilla contient un ensemble de technologies permettant de réaliser des applications multi-plateforme et reposant sur bon nombre de standards (du W3C et ECMA).

Interface

Comportement

Données

Architecture d'une appli Mozilla

Gecko

XBL

XUL

CSS

Javascript 1.5

composants

XPCOM (C++, JS..)

XPCONNECT

RDF

XML

NSPR

Affichage

Réseau

Fichiers

(X)HTML

SVG

DOM

PNG, JPG, ...

MathML

Plateforme mozilla

Éléments de l'application

Chapitre 2

Les technologies incluses dans Mozilla

Interface

Comportement

Données

XUL

Gecko

XBL

XUL

CSS

Javascript 1.5

composants

XPCOM (C++, JS..)

XPCONNECT

RDF

XML

NSPR

Affichage

Réseau

Fichiers

(X)HTML

SVG

DOM

PNG, JPG, ...

MathML

Plateforme mozilla

Éléments de l'application

XUL

XML-based User interface Language

Permet de décrire une interface utilisateur

Ensemble de balises correspondant à des composants graphiques courants

boutons, case à cocher, champs de saisie

boîte de liste, liste en arbre, grilles

barres de menus, menu déroulant, menu popups

barres d'outils, barre de statut, onglets etc..

zones d'edition avancée, afficheur de page web..

etc...

XUL

<?xml version="1.0" encoding="ISO-8859-1" ?>

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window title="Recherche de fichiers"

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

<description>Entrez votre critère de recherche ci dessous et

appuyez sur le bouton Rechercher.</description>

<groupbox orient="horizontal">

<caption label="Critère de recherche"/>

<menulist id="searchtype">

<menupopup>

<menuitem label="Nom"/>

<menuitem label="Taille"/>

<menuitem label="Date"/>

</menupopup>

</menulist>

<textbox id="find-text" flex="1" style="min-width: 15em;"/>

</groupbox>

<button id="find-button" label="Rechercher" default="true"/>

</window>

exemple1.xul :

Voir "table périodique" de xul (http://www.hevanet.com/acorbin/xul/top.xul )

XUL

Modifiable dynamiquement via DOM javascript

Jeu de balise extensible avec XBL

Système d'overlay

permet de répartir la déclaration dans plusieurs fichiers

permet de modifier une interface déjà déclarée sans toucher à ses sources

Attributs pour répondre aux évènements (onclick, ondragdrop, onkeypress, onoverflow ...)

Localisable (utilisation de DTD + entités)

Interface

Comportement

Données

XBL

Gecko

XUL

CSS

Javascript 1.5

composants

XPCOM (C++, JS..)

XPCONNECT

RDF

XML

NSPR

Affichage

Réseau

Fichiers

(X)HTML

SVG

DOM

PNG, JPG, ...

MathML

Plateforme mozilla

Éléments de l'application

XBL

XBL

eXtensible Bindings Language

Note du W3C

Permet de définir un composant d'interface :

son contenu XUL / XHTML / autre

son implémentation

propriétés et méthodes que l'on pourra appeler en javascript

attributs de la balise qui le représentera

constructeur/destructeur

les traitements en réponse à des évènements

possibilités d'héritage

Portable : Indépendant de l'environnement (OS / GUI)

XBL

Exemple : créer un nouveau composant, representé par une nouvelle balise <slideshow>, permettant d'afficher un à un d'autres composants, par des boutons suivant / précédent

<?xml version="1.0" encoding="ISO-8859-1"?>

<?xml-stylesheet href="styles.css" type="text/css"?>

<window

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

<slideshow previoustext="Précedent" nexttext="Suivant" flex="1">

<button label="Bouton 1"/>

<checkbox label="Checkbox 2"/>

<textbox/>

</slideshow>

</window>

Voir source slideshow.xbl

Interface

Comportement

Données

CSS

Gecko

XBL

XUL

CSS

Javascript 1.5

composants

XPCOM (C++, JS..)

XPCONNECT

RDF

XML

NSPR

Affichage

Réseau

Fichiers

(X)HTML

SVG

DOM

PNG, JPG, ...

MathML

Plateforme mozilla

Éléments de l'application

CSS

Langage permettant de spécifier le rendu d'un fichier XML à l'écran

Connu pour son utilisation dans les sites HTML

Utilisé dans Mozilla pour "décorer" l'interface

Utilisé notamment pour les thèmes graphique

Respecte en grande partie la spécification CSS 2 éditée par le W3C

Implémente quelques styles du futur CSS 3 et des styles propriétaires

Interface

Comportement

Données

XPCOM

Gecko

XBL

XUL

CSS

Javascript 1.5

composants

XPCOM (C++, JS..)

XPCONNECT

RDF

XML

NSPR

Affichage

Réseau

Fichiers

(X)HTML

SVG

DOM

PNG, JPG, ...

MathML

Plateforme mozilla

Éléments de l'application

XPCOM

Cross-platform Component Object Model

Comparable à la technologie COM de MS

Permet de définir des composants réutilisables

une grande partie du framework Mozilla reposent sur des composants XPCOM

Programmé en C++, Javascript, ou Python (perl ou autre à l'avenir)

Chaque XPCOM offre une/des interfaces (méthodes et propriétés)

pour être utilisable dynamiquement (pour un programme voulant l'utiliser, pas besoin de recompilation / liaison)

pour cacher l'implémentation

XPCOM

Des composants pour

implémenter les éléments XUL de base ou autres éléments graphiques (html, svg...)

offrir des services

son

réseau

gérer le drag'n drop

accéder aux fichiers

faire des traitements fonctionnels

gérer les signets

gérer les cookies

lire des fichiers RDF

etc..

Interface

Comportement

Données

RDF

Gecko

XBL

XUL

CSS

Javascript 1.5

composants

XPCOM (C++, JS..)

XPCONNECT

RDF

XML

NSPR

Affichage

Réseau

Fichiers

(X)HTML

SVG

DOM

PNG, JPG, ...

MathML

Plateforme mozilla

Éléments de l'application

RDF

Resource Description Framework

Standard W3C

Format XML permettant de stocker des données de façon "relationnel"

Données du navigateur ou du client mail

Format utilisé comme source de donnée des éléments graphiques

Comment : attribut "datasource" + balises <template>

Interface

Comportement

Données

Javascript

Gecko

XBL

XUL

CSS

Javascript 1.5

composants

XPCOM (C++, JS..)

XPCONNECT

RDF

XML

NSPR

Affichage

Réseau

Fichiers

(X)HTML

SVG

DOM

PNG, JPG, ...

MathML

Plateforme mozilla

Éléments de l'application

Javascript

Javascript 1.5, implémentation de l'EcmaScript

Langage de script orienté objet

De nombreux objets sont fournis de base :

objets DOM

web service

Xml, Xsl, Xpath

objets représentant les composants HTML, XUL et styles CSS

Appel des objets XPCOM via XPConnect

Interface

Comportement

Données

Autres

Gecko

XBL

XUL

CSS

Javascript 1.5

composants

XPCOM (C++, JS..)

XPCONNECT

RDF

XML

NSPR

Affichage

Réseau

Fichiers

(X)HTML

SVG

DOM

PNG, JPG, ...

MathML

Plateforme mozilla

Éléments de l'application

Chapitre 3

Déploiement

Déploiement

Deux façon de procéder :

- utiliser XUL dans les applications web

- réaliser une extension de Mozilla/Firefox et installé en local

Application

(Php, Java, .Net..)

Applications Web traditionnelles

Serveur

http

HTML, CSS, JS

Contenus formulaires,

requête affichage de page

Traitements

Métiers

Base de données

Génération

des pages HTML

Actuellement :

Applications web avec XUL

Application

(Php, Java, .Net..)

Serveur

http

XUL, CSS, JS

requêtes affichage d'écran

Traitements

Métiers

Base de données

Génération

des écrans XUL

Remplaçons HTML par XUL :

Services

web

Appels de services web (vérification des données de formulaire, enregistrement, récupération de données à afficher etc..)

Applications Web avec XUL

Meilleure ergonomie

Client léger mais "riche"

Rien à installer sur le poste client

Look personnalisable

Utilisation des web services = Déplacement de la logique applicative coté client

Séparation plus nette entre interface et traitements métiers

Possibilité de signer l'application pour profiter des privilèges de la plateforme

Applications locales

Avantages :

Privilèges sur le poste utilisateur : accès aux objets XPCOM

Meilleure ergonomie (drag and drop ...)

Disponibilité

utilisation du format XPI = format d'archive de Mozilla

Archive zip = fichiers applis + fichiers manifest en rdf

Installation en 1 clic, sous forme d'extension au navigateur

Peut profiter du système de mise à jour de Firefox 0.9+

Liens

http://www.mozilla.org : site de la fondation

http://www.mozilla-europe.org

http://www.xulplanet.com : LA référence pour les développeurs (en anglais)

http://www.xulfr.org : site francophone sur le sujet.

http://www.mozdev.org : applications et extensions mozilla

http://xulfr.org/docs/conf_presentation/ : cette présentation

FIN

2004-04-12T10:01:49