Table Of Content11675_XUL_XP 25/08/05 11:20 Page 1
Programmez intelligent les Cahiers
avec les Cahiers o
k
n du Programmeur
e
du Programmeur z
t
o
r
P
.
J
XUL
Jonathan PROTZENKO
s’est toujours passionné pour les
interfaces graphiques, depuis
Visual Basic 5 jusqu’à PHP-GTK
en passant par le DHTML,
Java/AWT et l’API Win32.
Il découvre enfin la solution mi-
Embarqués dans l’excellent navigateur libre Mozilla Firefox, XUL et le framework
racle avec XUL, qu’il s’empresse
XPFE de Mozilla ouvrent la voie à la création et au déploiement d’applications
de faire connaître par des articles
web riches s’appuyant, à la manière d’AJAX, sur les standards du Web (CSS,
et conférences. L
Javascript, XML, RDF…).
Mozilla XPFE, XPCOM, XBL, XPI, CSS, JavaScript, XML, RDF, DOM, PHP 5
À travers la création d’un forum de discussion, découvrez et maîtrisez la puissance
de l’environnement de développement Mozilla, depuis la réalisation d’interfaces BenoîtPicaudestconsultant senior U
graphiques avec XUL et CSS jusqu’à la logique applicative avec Javascript et XPCOM chez IDEALX, référence française Jonathan Protzenko
et le déploiement avec XPI. On verra comment intégrer l’application dans le pour la réalisation de logiciels libres.
En charge de la conception d’infra-
navigateur grâce aux overlays et à RDF et comment recourir à l’API DOM dans Avec la contribution
structures de sécurité et de gestion
JavaScript et PHP 5. L’étude de cas décrit également l’interfaçage avec un annuaire de Benoît Picaud
des identités, il s’est intéressé aux
LDAP, la connexion à un serveur SOAP ou la réutilisation de code avec XBL. problématiques de déploiement des
X
applications en entreprise. Préface de Stéphane Mariel
@ Téléchargez l’intégralité du code source XUL et des pages PHP
et retrouvez l’étude de cas en ligne !
www.editions-eyrolles.com
Sommaire
a
Mozilla, XUL et le XPFE•Organisation du XPFE•L’étude de cas : un forum de discussion•Inscription et identi-
l
fication • Ajout/modification/lecture d’un sujet • Premiers pas en XUL • Contents.rdf et dossier content • l
Modification du fichier chrome.rdf•Dossier locale•Intégration d’une DTD et début de l’internationalisation•Fenêtres zi
•XURLen•duD éCcSoSup•aMgeis eet esné fpoarrmateio dne etne xoteve•rlaPyossi•tioBnnaerrmese ndt’o•uCtilSsS, dsep émciefinquu ee àt Mdeo szitllaatu•tC•ouAlerburres eett impaangneesau• Pà roonpgriléettés mpo o
di:pM••eJgn taraert SuoFevstéXelpaé rotcPucinrSrn-uleiCroeacapc msOnrltéaiàsi igpMrov dpaauetMneot tecin :s•iooo M aeanvdznCnmevi oe laletrradzssevésci’ l uenila •ooaXlnctt’vno iP o•ePsRbdfCnri rjc’DeRlusO eahdtnFyamyM i’ne/ss uccrwitc nXè rh:•oerid iMdnru efeoofGggr Li nlnbceaeececiut•n sso d tnti niemXiG’ocdaoftlnBiéltna gaet anLv uteismniié•renoyca•rrtnnuaMlteu lic•ttoLddiiha•opneeeIrnnnl e (oIi)w vdtpl n’deiieupan•ieedrnlot a agteuRAl•t’iecofrirDouittcfb I inatnFFoajfoesceit ntrtma éienoe Dvge XenfaeaoOnrtM tcrvxaatMie ,sertvL PMaeice ToHH: t chn JsiJtoP out aguappna nvnv5Rt uda•ai ao eseSS•cvnqirCmcecœsbuEorcr iepxiràuin pppsdlR rettttll,e ao D debn iM••tFcetiuan o oItALdnM•ndizoDntiun•lnéoalLAa eg zlewcyR xPris eilôaoilefdaett•otnc gé irolhd•ae Om•nXeu tp rsUEa Càé:cfuxt Lio rhc ti<XtaeRmehe•ctUnsiDieomos AL•Frnsnio um tus•aUen:nr évn Li tnceAdllitDialœaoi>cefs fAtr eliiuicaDols•P’rdihtnnt O iesaola tAeM,a egnv sdnvree a eiefdmc arp•sced ccr Ja ’séemeAlRa’t efr ipéDvoeerdxaprnettmFu eéSru lonriaabcnrsiccsevvrrtahieeeeeupv•eccsssrit- Code éditeur: G11675 ISBN: 2-212-11675-6 7822121167559 onception couverture: Nordco M
C
<implementation> : propriétés, champs, méthodes • Plier, déplier, cacher le fenetreMsg • Widget qui réagit aux 32€
événements : <handlers>•Services web entre client et serveur•Application de SOAP à XUL Forum•Serveur
PHP 5 et client JavaScript•Authentification•Lire et enregistrer un message•Vérifier la session•Distribution
de XUL Forum avec XPinstall•Contenu du fichier xulforum.xpi•Création du fichier xulforum.jar•Installation avec
install.rdf•Compatibilité avec Mozilla 1.x : install.js•Signaler des mises à jour avec update.rdf•Annexes•Vers
Firefox 1.5•XUL Runner•SeaMonkey•SVG, <canvas>•Liste des composants XPCOM•Liste des fichiers de
l’application•Rappels CSS•Référence XUL.
��������������������������������������
������������������
���
�������
��
�����������
���
��������������������������
���������������������������������������
������������������������������������������
ÉDITIONS EYROLLES
61, bd Saint-Germain
75240 Paris Cedex 05
www.editions-eyrolles.com
Remerciements à Julie Meyer.
Le code de la propriété intellectuelle du 1er juillet 1992 interdit en effet expressément la photocopie à usage collectif sans
autorisation des ayants droit. Or, cette pratique s’est généralisée notamment dans les établissements d’enseignement,
provoquant une baisse brutale des achats de livres, au point que la possibilité même pour les auteurs de créer des œuvres
nouvelles et de les faire éditer correctement est aujourd’hui menacée.
En application de la loi du 11 mars 1957, il est interdit de reproduire intégralement ou partiellement le présent ouvrage,
sur quelque support que ce soit, sans autorisation de l’éditeur ou du Centre Français d’Exploitation du Droit de Copie, 20,
rue des Grands-Augustins, 75006 Paris.
© Groupe Eyrolles, 2005, ISBN : 2-212-11675-6
Préface
Ces dernières années, l’Open Source a démontré sa capacité à conquérir
des pans entiers de l’informatique d’entreprise, au point parfois de
devenir la référence détrônant les solutions établies. C’est le cas des ser-
vices d’infrastructure, comme la messagerie avec les logiciels libres
Sendmail ou Postfix, ou la publication web avec Apache.
Toutefois, il n’en va pas encore de même pour les applications présentes
sur le poste de travail de l’utilisateur. Le plus souvent les logiciels Open
Source sont perçus comme des suiveurs, se contentant de copier des
fonctionnalités déjà disponibles par ailleurs. D’où un sentiment de déca-
lage permanent.
Cette vision est cependant dépassée et ce cahier du programmeur con-
sacré à XUL en est le meilleur exemple. Ainsi le succès de Firefox repose
déjà naturellement plus sur les innovations offertes à l’utilisateur, que sur
son aptitude à faire aussi bien que ses concurrents. Mais que dire alors
du framework Mozilla dont Firefox et XUL ne sont que des parties
émergées?
Ici il n’est donc plus question de suiveurs : le framework Mozilla livre
dès aujourd’hui une technologie que Microsoft ne proposera qu’avec son
prochain système, au mieux dans un an. En outre, ce framework est, lui,
d’ores et déjà multi-plates-formes!
En vous accompagnant dans la création d’une application type, Jonathan
vous propose de découvrir les facettes parfois complexes d’un environne-
ment novateur qui a fait le choix des standards et d’une réutilisation
maximale des langages existants.
© Groupe Eyrolles, 2005
L
U
X
ur
e
m
m Car c’est une autre qualité du framework Mozilla que de tirer profit des
a
gr standards ouverts, sur lesquels nous avons tous, «techniciens» et entre-
o
u pr prises, investi ces dernières années. XML y joue naturellement un rôle
d
ers clé, mais l’environnement reprend aussi largement CSS, JavaScript et
ahi l’incontournable DOM, désormais bien entré dans les mœurs et qui
C
es ouvre la voie à la mutualisation des efforts...
L
Aussi, que vous ayez déjà capitalisé une expérience en PHP 5 (et son
API DOM désormais conforme) ou en JavaScript côté client (avec
Firefox, voire Microsoft Internet Explorer), vous ne serez pas dépaysé à
la lecture de cet ouvrage. De même, si vous avez créé des applications
AJAX, vous pourrez réutiliser votre savoir-faire pour dynamiser votre
application XUL.
Mozilla réussit ainsi le tour de force de créer un environnement novateur
tout en capitalisant sur l’existant, qualité déterminante face à ses concur-
rents. Il est temps pour vous de l’expérimenter! :-)
Stéphane MARIEL
VI © Groupe Eyrolles, 2005
Table des matières
AVANT-PROPOS...........................................................XI 3. PREMIERS PAS EN XUL................................................27
Un premier fichier XUL(cid:129)28
1. INTRODUCTION À XUL..................................................1
À la découverte des premiers éléments...(cid:129)31
Mozilla et XUL•2
Première version de l’écran d’authentification(cid:129)32
Un point de départ: le code source de Netscape(cid:129)2
Corriger les premières erreurs: utilisation de boîtes(cid:129)32
Des problèmes d’évolution(cid:129)3
Un élément plus adapté: un tableau(cid:129)34
Un nouveau moteur et une nouvelle architecture(cid:129)3
La touche finale: spacers(cid:129)35
Un projet ambitieux qui a réussi(cid:129)4
En résumé...(cid:129)37
La place de XUL au sein du XPFE(cid:129)6
XUL: un langage qui ne s’utilise pas seul(cid:129)7 4. UNE VÉRITABLE EXTENSION MOZILLA.............................39
Les technologies connexes à XUL, CSS et JavaScript(cid:129)8 La séparation générale des fichiers(cid:129)40
Organisation générale du XPFE(cid:129)9 Contents.rdf et dossier content(cid:129)41
Pourquoi choisir XUL?(cid:129)11 Modification du fichier chrome.rdf(cid:129)43
Un langage facile à apprendre(cid:129)11 Intégration d’une DTD et début de l’internationalisation(cid:129)45
Portable(cid:129)12 Dossier locale(cid:129)47
Sans limite!(cid:129)12 Modification du fichier XUL et ajout d’une DTD(cid:129)48
En résumé...(cid:129)13 Chrome.rdf(cid:129)50
En résumé...(cid:129)51
2. L’ÉTUDE DE CAS.........................................................15
Introduction(cid:129)16 5. XUL AVANCÉ: LA FENÊTRE PRINCIPALE..........................53
Fonctionnement(cid:129)17 La structure globale(cid:129)54
Principe de fonctionnement d’un forum(cid:129)17 Découpage avec les principales boîtes(cid:129)54
Le fonctionnement de XUL Forum(cid:129)18 Séparation en overlays(cid:129)56
Les différents modules(cid:129)18 Dans le document principal(cid:129)56
L’inscription(cid:129)18 Dans les fichiers overlay(cid:129)58
L’identification(cid:129)18 Le fichier index-barres-overlay.xul: barres d’outils,
L’écran principal(cid:129)19 de menu et de statut(cid:129)61
La fenêtre d’ajout/modification/lecture d’un sujet(cid:129)20 Les menus(cid:129)62
Les différentes parties du XPFE mises en jeu(cid:129)21 Des menus plus évolués(cid:129)64
Les technologies «statiques»(cid:129)21 Éléments communs à toutes les pages(cid:129)66
Les technologies «dynamiques»(cid:129)22 La barre d’outils(cid:129)69
Quels seront les avantages de XUL dans cecas?(cid:129)22 La barre de statut(cid:129)70
Des modules réutilisables(cid:129)23 Résumé: les barres(cid:129)71
Une approche croissante des difficultés(cid:129)23 Les overlays: arbre et onglets(cid:129)72
Une large utilisation des possibilités du XPFE(cid:129)23 L’arbre(cid:129)73
Un environnement professionnel(cid:129)23 La liste des membres(cid:129)75
Points noirs à l’utilisation de XUL(cid:129)24 En résumé...(cid:129)77
En résumé...(cid:129)25
© Groupe Eyrolles, 2005 VII
L
U
X
ur
e
mm 6. PERFECTIONNEMENT DU RENDU AVEC CSS.....................79 Listes(cid:129)131
a
gr Présentation de CSS; utilisation dans Mozilla(cid:129)80 Génération de RDF avec PHP(cid:129)132
o
pr Débuts avec CSS: effets sur du texte(cid:129)82 Objectifs(cid:129)132
u
ers d Mise en place de CSS(cid:129)82 Le fichier PHP(cid:129)133
hi Premiers effets sur du texte(cid:129)84 Retour à XUL(cid:129)136
a
es C Retoucher le positionnement avec CSS(cid:129)90 Un premier modèle simple(cid:129)136
L CSS spécifique à Mozilla(cid:129)91 Un modèle plus complexe(cid:129)138
La barre d’outils(cid:129)91 Modification côté PHP(cid:129)138
Autres propriétés CSS(cid:129)93 Exploitation côté XUL(cid:129)139
Les onglets du panneau de gauche(cid:129)93 Amélioration de RDF avec JavaScript(cid:129)142
Couleur des lignes de l’arbre(cid:129)94 Version synchrone(cid:129)143
Images dans les menus(cid:129)95 Version asynchrone(cid:129)146
Utilisation d’une propriété propre à Mozilla(cid:129)96 En résumé...(cid:129)148
En résumé...(cid:129)96
9. UNE INTÉGRATION AU CŒUR DE MOZILLA....................151
7. PREMIÈRE ANIMATION DE L’INTERFACE AVEC JAVASCRIPT99 Extension de l’interface du navigateur avec de
Concepts de base du langage(cid:129)100 nouveauxoverlays(cid:129)152
Syntaxe de base(cid:129)101 Modification du fichier contents.rdf(cid:129)152
Variables, utilisation de fonctions(cid:129)101 Où trouver les fichiers à modifier?(cid:129)153
Commentaires(cid:129)101 Gestion multiple: Firefox, Thunderbird, Mozilla(cid:129)155
Chaînes(cid:129)102 La suite Mozilla(cid:129)156
Déclarations de fonctions(cid:129)102 Le navigateur Firefox(cid:129)157
Méthodes d’objets(cid:129)103 Le client mail Thunderbird(cid:129)159
Tableaux(cid:129)103 Utilisation des préférences(cid:129)160
Objets: instanciation(cid:129)103 Présentation(cid:129)160
Exceptions(cid:129)104 Les fonctions XPCOM essentielles(cid:129)161
Plus...(cid:129)104 Le code de XUL Forum(cid:129)161
Intégration à XUL(cid:129)105 Application à l’identification(cid:129)163
Application directe à XUL Forum(cid:129)106 Autres techniques utiles(cid:129)165
Une première routine pour l’affichage d’erreurs (cid:129)106 Raccourcis clavier(cid:129)165
Multi-langue avec l’objet stringbundle(cid:129)109 En résumé...(cid:129)167
Plus de manipulation DOM: options avancées à la
10. JAVASCRIPT VERSION «PRO»: LDAP......................169
connexion(cid:129)110
Recherches LDAP avec JavaScript et nos propres
Le code servant à montrer les options avancées(cid:129)112
composantsXPCOM(cid:129)170
Communication avec l’extérieur: récupération d’un
La structure LDAP de XUL Forum: le DIT(cid:129)172
fichierdeconfiguration(cid:129)114
La succession des différentes fonctions(cid:129)173
L’objet XMLHttpRequest(cid:129)114
L’initialisation(cid:129)175
L’analyse avec DOM(cid:129)118
Nos propres composants XPCOM en JavaScript: listeners(cid:129)176
Approche des composants XPCOM: fonction include()(cid:129)120
Les composants(cid:129)176
Les composants XPCOM(cid:129)120
Création d’une file d’attente(cid:129)179
Notre inclusion(cid:129)121
Obtention d’une opération(cid:129)180
En résumé...(cid:129)123
Identification avec un simple bind(cid:129)180
8. AUTOMATISATION AVEC RDF.....................................125 Obtenir la liste des membres(cid:129)182
Le format RDF: explications détaillées(cid:129)126 Analyse du côté LDAP(cid:129)182
Les nœuds et les arcs(cid:129)126 Traitement XUL(cid:129)184
Nœuds et URI(cid:129)127 Les informations d’un connecté(cid:129)185
Sérialisation de RDF avec RDF/XML(cid:129)128 En résumé...(cid:129)187
VIII © Groupe Eyrolles, 2005
es
èr
ati
m
11. DO-IT-YOURSELF WIDGETS: XBL..............................189 Le moment crucial: l’identification(cid:129)227 es
d
Fonctionnement d’un widget XBL(cid:129)190 Indispensable: lire un message(cid:129)227 e
bl
Le widget fenetreMsg(cid:129)190 Vital: poster nos propres messages(cid:129)228 Ta
Notre implémentation: le binding fenetreMsg(cid:129)192 Les modifications de l’interface avec XUL(cid:129)229
Le contenu du widget: <content>(cid:129)193 Changements dans le fichier XBL(cid:129)229
Le widget vu de l’extérieur: un bloc div et une classe Changements dans les fichiers JavaScript(cid:129)233
CSS(cid:129)193 En résumé...(cid:129)235
Le contenu intérieur: mélange HTML et XUL(cid:129)194
13. DISTRIBUTION DE XUL FORUM AVEC XPINSTALL........241
La mise en forme CSS(cid:129)196
Le fichier xulforum.xpi(cid:129)242
Un widget qui s’anime: <implementation>(cid:129)198
Création du fichier xulforum.jar(cid:129)242
Les propriétés et les champs(cid:129)198
install.rdf: comment installer XUL Forum?(cid:129)243
Les méthodes(cid:129)199
Compatibilité avec Mozilla 1.x: install.js(cid:129)247
Plier (cid:129)200
Signaler des mises à jour futures(cid:129)249
Déplier(cid:129)201
En résumé...(cid:129)251
Cacher(cid:129)202
Un widget réactif: le <handler>(cid:129)202
LE MOT DE LA FIN.....................................................253
Le double-clic(cid:129)203
Le bouton de la souris est baissé(cid:129)204
A. LE FUTUR: VERS FIREFOX 1.5 ET AU-DELÀ...................255
La souris est déplacée(cid:129)206
Il n’y a plus de contents.rdf dans Firefox1.5 et
La souris est relâchée(cid:129)206
Thunderbird1.5(cid:129)256
Mise en relation avec la page principale de XUL Forum(cid:129)206
Un petit nouveau... XUL Runner!(cid:129)258
Modifications dans le fichier XUL(cid:129)207
Une valeur sûre: SeaMonkey(cid:129)261
Modifications dans le JavaScript(cid:129)207
De nouvelles voies: SVG et <canvas>(cid:129)262
En résumé...(cid:129)210
Des modifications mineures(cid:129)263
12. LES SERVICES WEB, POUR UNECOMMUNICATION B. LISTE DES COMPOSANTS XPCOM UTILISÉS..................265
HARMONIEUSE ENTRECLIENT ET SERVEUR.....................213
SOAP en détail: application à XUL Forum(cid:129)215 C. LA LISTE DES FICHIERS DE L’APPLICATION.....................269
Le serveur en pratique avec PHP5(cid:129)217
D. CSS: SYNTAXE, SÉLECTEURS, PROPRIÉTÉS...................273
Le serveur, vue globale(cid:129)217
Syntaxe de base de CSS(cid:129)274
Permettre l’authentification de l’utilisateur(cid:129)219
Les sélecteurs(cid:129)276
Lire un message(cid:129)220
Les propriétés utiles en CSS2.1(cid:129)277
Enregistrer un message(cid:129)221
Les extensions Mozilla à CSS(cid:129)281
Le client JavaScript(cid:129)223
L’initialisation(cid:129)223
E. RÉFÉRENCE DES ÉLÉMENTS XUL GRAPHIQUES...............285
Est-on en phase avec le serveur ?
Vérification de lasession(cid:129)224
INDEX......................................................................301
Pas de duplication de code: une routine pour tous
nos appels SOAP(cid:129)225
© Groupe Eyrolles, 2005 IX
Avant-propos
Un renouveau nécessaire dans le monde
des clients riches
Le grand réseau Internet arrive à un tournant majeur de son existence:
derrière lui, une balkanisation effroyable des sites, des normes et des
navigateurs; devant lui, une perspective d’évolutions prometteuses, de
nouvelles bases de développement et de nouveaux standards. On entend
désormais parler de nouveaux formats, comme XML, CSS, XHTML,
ECMAScript et de nouvelles pratiques de développement plus ordon-
nées, posant des fondations solides pour l’avenir et étendant le champ
fonctionnel des applications fondées sur les technologies de l’Internet.
Dans le même temps, on assiste à un renouveau des clients riches, appli-
cations pour les utilisateurs, souvent programmées dans des langages
lourds associés à des bibliothèques graphiques. Java et Swing, C et GTK
ou QT animent ainsi un grand nombre de postes de travail. En dépit de
leur succès, ces langages réclament un long apprentissage et obligent
parfois à ce que les programmes qui en résultent soient adaptés pour
Linux, Windows ou MacOS, engendrant des coûts de développement
élevés et des évolutions ralenties.
Que faire alors? N’existe-t-il pas une perspective visant à associer viva-
cité des applications web et richesse des applications desktop?
© Groupe Eyrolles, 2005
