Créer une application XUL – Partie 2 – Création de l’Interface

Tutoriel « Réalisation d’un projet XUL pas à pas »

– Création de l’Interface –

  Prérequis:

  • CSS (quelques notions),
  • Javascript (notion de base)
  • HTML (facultatif)

  Outils :

  Temps estimé:

  • 1 heure 30 à 2 heures pour ceux qui découvrent XUL.

Vous vous y connaissez en création de site web simple? Un peu de CSS par ci un peu de Javascript par la!
Imaginez que vous puissiez réaliser une application comme si c’était un site 🙂 Et bien c’est la que XUL rentre en scène! et une fois que l’on comprend le principe, XUL prend l’allure d’un jeu d’enfant.

XUL c’est quoi?? 🙂 rappelez vous on l’a présenté dans un précédent billet, a quoi servait ‘il, son importance dans le développement d’interface, et pourquoi il attire de plus en plus de monde?
Le seul défaut de XUL a mon avis, c’est que coté marketing il est vraiment nul! dans le sens ou on a pas su nous le présenter comme il fallait, pas assez de pub, pas assez d’article… donc j’espère que ce billet saura vous convaincre de ces possibilités. Pour cela, je vais essayer de sortir du cadre du programme « Hello World » qui est plus un test de fonctionnement histoire de se dire « ouaiiiss ça fonctionne » qu’une démonstration réelle de ces capacités. L’application que je vous propose est un condensé de technologies qui j’espère avec votre esprit d’imagination donneront lieu a de grands projets comme par exemple la réalisation de votre propre navigateur 🙂 En nous basant sur l’arborescence et les fichiers déjà crées en première partie, nous allons passer d’une simple application qui affiche « Hello World » a une application qui intégrera un menu (bof!), un widget (wow!), du javascript (oula!) et du DOM (nannnnn!), puis on jouera un peu avec le fichier chrome.manifest pour montrer comment faire une application multilingue (das ist unmöglich!!), et avant de terminer on montrera que grâce aux interfaces XPCOM (huh? au quoi?) on peut réaliser et manipuler des préférences (paramètres de configuration) propres au logiciels offrant bien plus de possibilités à vos réalisations. Et le clou de la fin, la manipulation pure et dure du presse papier.

Les opérations de notre application seront réalisables en cliquant sur un bouton, un menu ou alors via la capture de touche (du genre si vous appuyez sur ESCAPE l’application se ferme, sur F1 vous avez l’aide etc…).

Remarque: ce tutoriel sera réalisé sans IDE (XUL-Explorer). Pour ceux qui souhaitent utiliser XUL-Explorer nous développerons son utilisation dans un prochain tutoriel/billet.

1. Étude des besoins

Que fera notre projet? c’est la grande question ne pouvez vous passez de cette étape. dans le cas par exemple ou vous réaliserait une extension pour Firefox il faut d’abord vérifier que cette extension n’existe pas sinon a quoi bon réinventer la roue quand on peut améliorer son fonctionnement.

Notre projet nous permet de choisir une date dans un calendrier et de dire quel jour étions nous. C’est vraiment la partie la plus facile, ceux qui va nous permettre d’avoir un aperçu sur les différentes fonctionnalités de XUL c’est les options que l’on va rajouter.
La j’insiste sur une chose très importante!!!!! oubliez les acronymes!! N’en ayez pas peur, si je vous dis « les accées XPCOM / XPConnect » ça ne doit pas vous faire broncher, de même quand je dis que chrome.manifest pointe selon la langue vers le DTD correspondant! ce ne sont que des acronymes!!! C’est comme pour les portables GSM, une très faible partie de la population savent ce que veut dire les lettres G, S et M et pourtant tout le monde sait l’utiliser 🙂 c’est comme ca que l’on devra fonctionner! (pas seulement avec XUL mais partout!).

Pour les options nous aurons un menu et 3 langues, le français l’anglais et l’arabe (utilisez pour vous aider Google Translator). Dans le menu il y aura l’affichage de l’aide, des informations sur l’application et l’auteur, la réinitialisation de la date à celle d’aujourd’hui, le changement de la langue, la copie du résultat (correspondance date et jour) dans le presse papier, ainsi que le modification de la couleur du fond de l’application. La plupart des commandes seront activé par des raccourci clavier comme par exemple la pression sur la touche ESCAPE pour quitter, ESPACE pour réinitialiser la date, F5 F6 et F7 activeront le français, l’arabe et l’anglais etc…

2. l’Interface, création de la maquette

La maquette: il existe plusieurs site qui permette de faire en ligne et gratuitement votre maquette! rappelez vous que vous n’êtes pas très loin de la réalisation d’un site web et dans un site web la maquette (généralement écrite sur papier) est appelée wireframe ou mockup. Voici le site que nous utiliserons: https://gomockingbird.com/mockingbird/#.

Bien une fois que nous avons une idée sur l’interface présentons les dossiers et fichiers du projet, ne rajouter rien aux fichiers décompressés de l’exemple « hello world » nous le ferons au fur et à mesure.

3. Aperçu sur les différents dossiers et fichiers du projet

Voici l’arborescence (uniquement les dossiers du projet)

├───chrome
│   ├───content (contient les fenêtres et scripts)
│   │   └───icons
│   ├───icons
│   │   └───default (contient les icônes .ico de la fenêtre application)
│   └───locale
│       ├───ar (contient les fichiers dtd « document type definition » de la langue arabe)
│       ├───en-US (contient les fichiers dtd de la langue anglaise)
│       └───fr (contient les fichiers dtd de la langue française)
├───defaults
│   └───preferences (contient le fichier de préférences et configuration du projet)
├───extensions
└───updates
└───0

Voici l’arborescence du projet avec a présent les fichiers et les explications entre parenthèse

RACINE DU PROJET:
│   application.ini (fiche de présentation de l’application)
│   chrome.manifest (infos sur les fenêtres, les langues et les thèmes)

├───chrome
│   │   chrome.manifest (idem: infos sur les fenêtres, les langues et les thèmes)
│   │
│   ├───content
│   │   │   main.xul (notre fenêtre principale)
│   │   │   main.js (les scripts de la fenêtre principale)
│   │   │   about.xul (une fenêtre en plus pour montrer l’ouverture des fenêtres)
│   │   │
│   │   └───icons
│   │       │   accept.png  (icônes a disposition pour éventuellement les intégrer)
│   │       │   calendar.png  »
│   │       │   ….
│   │       │   ….
│   │       │   zoom.png  »
│   │       │
│   │       └───flag (icones/images que j’utilise dans le menu pour indiquer la langue)
│   │               France.png (image pour la langue française)
│   │               Tunisia.png (image pour la langue arabe)
│   │               UnitedKingdom.png (image pour la langue US [Je sais ça ne correspond pas])
│   │
│   ├───icons
│   │   └───default
│   │           about.ico (icône que le système montrera lors du lancement de about.xul)
│   │           main.ico (icône que le système montrera lors du lancement de main.xul)
│   │
│   └───locale
│       ├───ar
│       │       main.dtd (fichier contenant les traduction arabe pour la fenêtre main.xul)
│       │
│       ├───en-US
│       │       main.dtd (fichier contenant les traductions anglaise  pour la fenêtre main.xul)
│       │
│       └───fr
│               main.dtd (fichier contenant les traductions française pour la fenêtre main.xul)
│               option.dtd

├───defaults
│   └───preferences
│           prefs.js (fichier de configuration de l’application)

├───extensions
└───updates
└───0

4. le fichier application.ini

Contenu du fichier application.ini

; ***** INFORMATION *****
; La partie App renseigne sur les méta de l’application
; La Partie Gecko sur la compatibilité avec le moteur de rendu
; La Partie XRE sont des options propres a XULRunner
; La Partie Crash Reporter concerne l’envoi de rapport d’erreur en cas de bug
; Les Parties [XRE] & [Crash Reporter] peuvent être omise
; ******* FIN INFOS *******

[App]
Vendor=tutorielsinformatique.wordpress.com
Name=jours
Version=1.0.0.0
BuildID=20111010
ID=admin@tutorielsinformatique.wordpress.com
Copyright= Huh! 🙂

[Gecko]
MinVersion=1.8

[XRE]
EnableExtensionManager=1
EnableProfileMigrator=1

[Crash Reporter]
Enabled=True
ServerURL=https://crash-reports.mozilla.com/submit

Explications

Nous avions vu que c’est un fichier qui renseigne sur l’application en générale et qui surtout et utilisé dans la ligne de commande XULRunner pour lancer l’application (sous le répertoire ou se trouve l’application)

xulrunner application.ini

Il est aussi possible d’exécuter votre application via Firefox (voir prérequis au début de l’article) en faisant la commande suivante:

firefox -app application.ini

je précise que cela ne fonctionne que si le chemin qui mène a Firefox est dans le PATH (voir partie 1) du système sinon il faudra donner les chemins absolus (en vert le chemin absolu de Firefox et en rouge celui de l’application):

c:\Program Files\Mozilla Firefox\firefox.exe -app C:\Documents and Settings\Administrateur\Mes documents\Développement\XUL\sample-app\application.ini

Vous pouvez lancer votre application avec la console javascript pour le mode debug (qui montre les messages de debug) en écrivant la commande suivante:

xulrunner application.ini -jsconsole

ou alors pour avoir en même temps que l’application un terminal

xulrunner application.ini -console

Voici le contenu que nous mettrons sachez juste qu’en ce qui vous concerne ne changer pas trop d’ID (qui peut être un mail [ce que nous ferons nous] ou un identifiant unique UUID) lors de la production de votre application car a chaque nouvelle valeur XULRunner créera un répertoire sous le dossier des extensions Mozilla

Il existe une application gratuite qui permet de générer un ID, c’est Microsoft qui l’offre gratuitement (c’est moi qui a dit ça???) vous pouvez le télécharger directement ici ou consulter la page de téléchargement.

Au lancement choisissez la génération d’un format pour Registre (le 4 ème format) qui vous donnera entre crochet 8 puis 3 fois 4 puis enfin 12 éléments hexadécimaux séparés par un tiret par exemple:

{BA254E13-CA32-D4C9-B9551-1D266EA3BAB7}

Voici le contenu de mon fichier application.ini, notez ici que je n’ai pas spécifié de version max de Gecko mais juste une version minimum (1.8) (Attention de bine noter le nom de l’application [jours] que j’utilise dans les autres fichiers)

5.le fichier prefs.js

Contenu du fichier prefs.js

/* Ma fenêtre sera centrée de taille fixe et sans barre des titres */
pref(‘toolkit.defaultChromeFeatures’, ‘chrome, centerscreen,dialog=no, resizeable=no,titlebar=no’);
/* La première fenêtre de l’application est main.xul */
pref(« toolkit.defaultChromeURI », « chrome://jours/content/main.xul »);

/* Supposé ne laissé qu’une seule occurrence de l’application */
pref(« toolkit.singletonWindowName », « Tutoriel_XUL »);
pref(« toolkit.singletonWindowtype », « Tutoriel_XUL »);

/* Pour contrôler la langue on demande de ne pas suivre la config du system */
pref(« intl.locale.matchOS », « false »);

/* Et ici on configure la lange locale à français */
pref(« general.useragent.locale », « fr »);

/* La on permet le redémarrage de l’application*/
pref(« dom.allow_scripts_to_close_windows », true);

/* ici les préférences à utiliser seulement lors du développement*/
/* lors de l’exploitation réelle, enlever tout ce qui suit 🙂 */
pref(« browser.dom.window.dump.enabled », true);
// Affichage des erreurs dans une console
pref(« javascript.options.showInConsole », true);
// Afficher toutes les erreurs d’exécution
pref(« javascript.options.strict », true);
// Désactive le Cache XUL
pref(« nglayout.debug.disable_xul_cache », true);
// Désactive le chargement rapide
pref(« nglayout.debug.disable_xul_fastload », true);

Explications

Ce fichier informe XULRunner sur les préférences de l’application comme par exemple quel est la fenêtre de démarrage (dans notre cas c’est main.xul) comment sera les dimensions et propriétés de cette fenêtre ainsi que d’autre option qui permet de modifier le comportement de l’application.

Par exemple changer la langue par défaut et donc l’application affichera les traductions de la langue choisie, ou alors désactiver la mise en cache (très utile lors du développement)Voici les éléments les plus courants:

toolkit.defaultChromeURI: Informe sur la page de démarrage de l’application

Par exemple

pref(« toolkit.defaultChromeURI », « chrome://myapp/content/main.xul »);

toolkit.singletonWindowType:

toolkit.defaultChromeFeatures: informe sur les options de la fenêtre(resizable, dependent, dialog, minimizable, fullscreen[], chrome, modal, titlebar, close)

Par exemple

pref(‘toolkit.defaultChromeFeatures’, ‘chrome, centerscreen, resizeable=no, titlebar=no’);

va enlever de la page qui sera au centre de l’écran la barre des titres (fermer la page avec ALT+F4) et ne sera pas redimensionnable.

toolkit.singletonWindowType:

Par exemple: pref("toolkit.defaultChromeURI", "chrome://applicationName/content/startPage.xul");

permet de forcer l’exécution unique de votre application, si par exemple vous ne voulez pas que votre programme se lance deux fois (pour une raison bien précise) alors activé cette option et permettra de donner le focus à la première instance exécuté si votre application est exécutée

6. Le fichier chrome.manifest

Contenu du fichier prefs.js à la racine

# la directive manifest permet de charger un second chrome.manifest
manifest chrome/chrome.manifest

Contenu du fichier prefs.js

# ici on défini l’endroit ou se trouve les fichiers de l’URI chrome://jours/content/
content     jours             content/
# permet de charger les langue pour le « localname » fr
locale      jours     fr        locale/fr/
# permet de charger les langue pour le « localname » ar
locale        jours     ar         locale/ar/
# permet de charger les langue pour le « localname » (langue et pays)  en-US
locale        jours     en-US      locale/en-US/
# sachez qu’il y a la possibilité de rajouté des flags après chaque ligne
# les flags sont une sorte de condition au chargement
# les conditions sont des tests de version de l’OS de l’ABI etc…

Explications

Lorsqu’on consulte le fichier chrome.manifest qui est à la racine on voit qu’il nous renvoi vers le fichier du même nom qui se trouve sous le répertoire « chrome » (directive manifest)

manifest chrome/chrome.manifest

C’est le fichier qui contiens les 3 providers (faites pas attention au mot provider dites vous que c’est une catégorie de fichier) suivant: content (pour les fenêtres et UI), skin (pour les fichiers relatives au style) et locale (pour les fichiers relatives à l’internationalisation).

les fichiers décrit dans le chrome.manifest pointeront vers un répertoire par provider (par exemple le contenu se trouvera sous chrome/content et les fichiers de style sous chrome/skin/) soit dans une archive fichier.jar (qui contient tous les fichiers chrome).

Prenons l’exemple d’une application multilingue

dans le fichier chrome.manifest nous aurons ceci

locale  jours fr jar:chrome/jours.jar!/locale/fr/
locale  jours en-US jar:chrome/jours.jar!/locale/en-US/
locale  jours ar jar:chrome/jours.jar!/locale/ar/

pour dire que les fichiers de langue seront dans un fichier jar

ou alors mettre directement ceci (sans le jar!)

locale  jours fr    chrome/locale/fr/
locale    jours       chrome/locale/ar/
locale    jours en-US    chrome/locale/en-US/

Dans chaque répertoire il devrait y avoir logiquement les même fichiers (au format DTD: Document Type Definition) ce sont des déclarations de « variables »  ENTITY avec écrit à coté la traduction selon la langue

par exemple dans le repertoire fr on aura dans un fichier option.dtd cette ligne:

<!ENTITY queljoursetionsnous.bienvenue    « Salut! »>

dans le repertoire ar nous aurons dans un autre fichier option.dtd ceci (aidez vous de google translator)

<!ENTITY queljoursetionsnous.bienvenue    « مرحبا! »>

et dans en-US avec un autre fichier option.dtd ceci

<!ENTITY queljoursetionsnous.bienvenue    « Hello! »>

Remarque si vous utilisez l’arabe pensez a encoder votre fichier en UTF8 (dans notepad++ ce sera le menu Encodage > Encoder en UTF8 (sans BOM)

Et donc si par exemple j’utilise dans ma page la variable a afficher &queljoursetionsnous.bienvenue; alors l’application va d’abord tester les paramètres régionaux de l’application pour voir a quel langue il devra se référer, si c’est le français alors il changera &queljoursetionsnous.bienvenue; par salut! si c’est de l’anglais cela sera Hello!

A faire

Bien a ce stade si vous le voulez vous pouvez créer 3 répertoire dans le répertoire chrome/locale : ar, fr et en-US

Nous allons commencer d’abord par le fichier main.xul qui se trouve dans le répertoire chrome/content/

1. création de l’interface

Ouvrons avec notepad++ le fichier main.xul et commençons par le code de base que contient tout fichier XUL valide et vide.

a. le fenêtre principale

<?xml version= »1.0″?>
<?xml-stylesheet href= »chrome://global/skin/ » type= »text/css »?>
<window
xmlns= »http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul »&gt;
</window>

voici la liste des attributs possibles

Attributs de la fenêtre
height: La hauteur en pixel
width: La largeur en pixel
hidechrome: true / false (pour voir ou cacher la barre des titres et options de dialogue)
id: identifiant unique, correspond au nom de l’icône de l’application et permet via DOM de modifier la fenêtre
class: nom de la classe CSS qui définira le style de la fenêtre (équivaut au body en HTML)
onload: fonction javascript à exécuter au démarrage (permet d’initialiser les données)
screenX: position horizontale en pixel de la fenêtre (la position 0 étant à gauche)
screenY: position verticale en pixel de la fenêtre (la position 0 étant en haut)
sizemode: maximized / minimized / normal (État de la fenêtre)
title: titre de la fenêtre
windowtype: identifiant du type de fenêtre, peut être utiliser par XPCOM

Remarque si on rajoute dans les attributs la ligne suivante:
xmlns:html= »http://www.w3.org/1999/xhtml &raquo;
alors il devient possible d’intégrer dans le code de la fenêtre des éléments « HTML » comme suit:

<html:img src="image.jpg"/>
<html:input type="checkbox" value="true"/><html:table>
  <html:tr>
    <html:td>
      première colonne ligne 1
    </html:td>
    <html:td>
      deuxième colonne ligne 1
    </html:td>
  </html:tr>
  <html:tr>
    <html:td>
      première colonne ligne 2
    </html:td>
    <html:td>
      seconde colonne ligne 2
    </html:td>
  </html:tr>
</html:table>

En appliquant ces attributs on obtient ceci:

<?xml version= »1.0″?>
<?xml-stylesheet href= »chrome://global/skin/ » type= »text/css »?>
<window
id= »main »
class= »main »
title= »Quel jour étions nous? »
xmlns= »http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul »&gt;
</window>

b. Les zones HBOX et VBOX

vous pouvez définir des zones (tout comme dans HTML serait la balise DIV). Ces zones peuvent être verticale (vbox) ou horizontale (hbox). ce n’est pas parce qu’un box va dans la longueur qu’il doit être appelé hbox!!!

En gros pour comprendre il faut oublier la longueur et largeur, ça n’a rien avoir, cela concerne le positionnement des éléments à l’intérieur du BOX, si vous voulez qu’il soit l’un après l’autre Horizontalement alors ça sera HBOX, si vous voulez que les éléments soit l’un en dessous de l’autre alors ce sera du VBOX.

voici quelques attributs possibles

Attributs des zones hbox et vbox
height: La hauteur en pixel
width: La largeur en pixel
align: start / center / end / baseline / stretch (alignement des éléments contenus)
class: nom de la classe CSS qui définira le style de la fenêtre (équivaut au body en HTML)
context:
contextmenu:
menu:
popup:
id du menu en popup
dir: normal / reverse (éléments contenu seront placés de gauche à droite ou l’inverse)
flex: Ratio de flexibilité la place occupé sera égale au « flex » sur les somme des « flexs » se partageant un espace donné en horizontal ou vertical (mettre un élément seul avec flex=1 reviens à dire qu’il prend tout l’espace ou l’espace restant si d’autres éléments [sans attribut flex] sont en concurrence).
Dans un espace de 3 éléments (flex = 1, flex= 2 et flex=3) de 300 pixels les éléments, les tailles respectives seront de 50, 100 et 150 pixels.
max-height: La hauteur max en pixel
max-width: La largeur max en pixel
min-height: La hauteur minimum en pixel
min-width: La largeur minimum en pixel
orient: horizontal / vertical (permet de changer l’orientation, équivalent à la propriété css « -moz-box-orient », de plus un hbox en orientation vertical devient équivalent à un vbox)
pack: start / center / end (équivalent à la propriété css « -moz-box-orient » cela renseigne sur ou mettre l’espace vide si les contenants occupent un espace inférieur à la taille du conteneur).
Pour faire simple, le Pack est un alignement horizontale.
position:
insertafter:
insertbefore:
une sorte d’id qui permet de classer autrement (même si dans le fichier XUL deux éléments sont supposé être positionné l’un après l’autre, ces attributs permettent de modifier l’ordre)
statustext: permet de changer le texte de la barre d’état (généralement en bas) au survol de la souris
style: code css qui lui sera attribué
id: identifiant unique, correspond au nom de l’icône de l’application et permet via DOM de modifier la zone
tooltiptext: texte qui apparaitra dans une bulle d’aide au survol par la souris.

On ne va pas utilisé ces attributs, du moins par pour l’instant vu que plusieurs d’entre eux on des prérequis, par exemple pour statustext il faut une barre d’état dans la fenêtre, et pour context il faut un menu popup

c. Les labels, les descriptions et les Buttons

Les labels sont de simples étiquettes texte dont le message est mis dans l’attribut « value ». Par contre la balise description permet quand à elle de mettre entre deux balises (ouvrante et fermante de description) tout un memo (long texte), en modifiant e style de la description comme suit: <description style= »white-space: pre; »>, il est possible d’afficher un message texte sur plusieurs lignes.

Les buttons quand a eux sont le maillon fort de l’application, c’est en cliquant sur eux que l’on va exécuter une opération (ou action). Voici un exemple de leur utilisation.

<?xml version= »1.0″?>
<?xml-stylesheet href= »chrome://global/skin/ » type= »text/css »?>
<window
id= »main »
class= »main »
title= »Quel jour étions nous? »
xmlns= »http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul »&gt;
<vbox>
<label value= »ceci est un label »/>

<label value= »label01: » control= »bouton1″/>
<button id= »bouton1″ label= »bouton rattaché au label (cliquer sur le label01) »/>

<description style= »color: red; »>
ceci est une description.
sur une seule ligne
</description>
<description style= »white-space: pre;color: green; »>
ceci est une description.
sur deux ligne
</description>
</vbox>
<vbox style= »background-color:#A7A37E »>
<button label= »bouton dans un vbox »/>
<button label= »autre bouton dans un vbox »/>
</vbox>
<hbox style= »background-color:#B5E655; »>
<button label= »bouton dans un hbox »/>
<button label= »autre bouton dans un hbox »/>
</hbox>

</window>

[Code source]

Ce qui devrait nous donner le résultat suivant:

d. le menu

Le menu est vraiment la partie la plus intéressante, c’est par elle que nous contrôlerons l’application, il doit donc être logique et intuitif (dans le choix du nom des menus et sous menus).

Notre menu:

Fichier

  • Aujourd’hui / Réinitialiser
  • ———————————
  • Quitter

Edition

  • Copier la Date
  • Éditer le presse papier

Langue

  • Français
  • عربية
  • English

Interface

  • Couleur du fond
  • Couleur par defaut
  • ———————–
  • Couleur du Texte
  • Couleur par défaut

?

  • Aide
  • ——–
  • A propos
  • Infos Système

Explication par l’exemple:

Ce qu’il faut savoir c’est qu’un menu surgissant sera entre les balises popup, un point final de menu (c’est à dire qui n’a pas de sous menu) sera mis entre les balises menuitem, un bouton simple sera dans un toolbarbutton enfin bref, ce qui est exceptionnel avec XUL c’est que vous pouvez vraiment faire n’importe quoi! tant que le format est valide (dans le sens ou les balises sont correctement bien ouvertes et fermées) vous pouvez faire appel à votre imagination, ici j’ai mis dans un sous menu un hbox et deux vbox avec dans chaque vbox des boutons (entre d’autre terme, dans un sous menu j’ai mis deux colonnes). prenez l’exemple suivant et faites vos tests vous verrez que c’est pas si compliqué

<?xml version= »1.0″?>
<?xml-stylesheet href= »chrome://global/skin/ » type= »text/css »?>
<window
id= »main »
class= »main »
title= »Quel jour étions nous? »
xmlns= »http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul »&gt;
<toolbox>
<toolbar id= »menu_toolbar » width= »640″>
<menubar>
<menu label= »Menu Déroulant 1″>
<menupopup width= »200″>
<hbox width= »200″>
<vbox width= »100″>
<toolbarbutton label= »bouton 1 « />
<toolbarbutton label= »bouton 2 « />
</vbox>
<vbox width= »100 »>
<toolbarbutton label= »bouton 1 « />
<toolbarbutton label= »bouton 2 « />
</vbox>
</hbox>
<menu label= »avec sous menu »>
<menupopup>
<menuitem label= »élèment 1″/>
<menuitem label= »élèment 2″/>
</menupopup>
</menu>
<menuitem width= »200″ dir= »reverse » align= »start » label= »Ecriture de droite à gauche »/>
<menuitem label= »avec image » image= »icons/user_comment.png »/>
<menuseparator/>
<menuitem label= »choix » checked= »true » type= »checkbox »/>
<menuseparator/>
<menuitem label= »désactivé » disabled= »true » />
<menuseparator/>
<menuitem label= »choix 1″ type= »radio » name= »groupe 1″ checked= »true »/>
<menuitem label= »choix 2″ type= »radio » name= »groupe 1″/>
<menuitem label= »choix 3″ type= »radio » name= »groupe 1″/>
</menupopup>
</menu>
</menubar>
<menu label= »Menu Déroulant 2″>
<menupopup>
<menu label= »élèment 1″>
<menupopup>
<menuitem label= »élèment 1″/>
<menuitem label= »élèment 2″/>
<menuitem label= »élèment 3″/>
<menuitem label= »élèment 4″/>
<menuitem label= »élèment 5″/>
</menupopup>
</menu>
<menuitem label= »élèment 2″/>
<menuitem label= »élèment 3″/>
<menuitem label= »élèment 4″/>
<menuitem label= »élèment 5″/>
</menupopup>
</menu>
<toolbarbutton label= »bouton 1 « />
<toolbarbutton label= »bouton 2 « />
<description value= »Liste » style= »margin-top:6px; »/>
<menulist editable= »false »>
<menupopup>
<menuitem label= »élèment 1″/>
<menuitem label= »élèment 2″/>
<menuitem label= »élèment 3″/>
<menuitem label= »élèment 4″/>
<menuitem label= »élèment 5″/>
</menupopup>
</menulist>
<spacer flex= »1″/>
<toolbarbutton label= »bouton à droite « />
</toolbar>
</toolbox>
<vbox height= »200 »>
</vbox>
</window>

Ce code code source donne le résultat suivant:

Quelques attributs des éléments du menu

La balise menuseparator est ce qui permet de séparer une partie du menu à une autre. l’élément qui nous intéresse dans notre projet et le menuitem, voici quelques un de ces attributs:

Attributs des éléments du menu
Accesskey: Touche de raccourci qui active le menu (si le caractère existe dans le texte du menu alors il sera souligné sinon une indication sera ajoutée)
Acceltext: C’est le texte qui apparaitra prés du label du menu
checked: true / false (coche le menu ou pas)
label: titre affiché dans le menu
name:
Les éléments avec la même valeur seront regroupés ensemble (type radio)
tabindex: ordre du menu pour être atteint lors de la pression sur la touche Tabulation
type: checkbox / radio (checkbox pour activer ou désactivé et radio pour un choix parmi les éléments ayant le même name)
class: menuitem-iconic / menuitem-non-iconic (pour le rajout d’une image ou non, avec une image il faudra spécifier l’attribut « image »)
image: URL de l’image utilisée comme icône (nécessite que class soit égale à menuitem-iconic)

a présent rentrons dans le pure et dure et analysons juste un item ensuite je donnerais le reste:

L’attribut image renseigne sur l’URL d’une image sous le repertoire icons qui est lui même sous le repertoire chrome.

Codage de notre menu:

voici donc notre menu avec juste avant le dernier item la balise spacer qui créera un espace (puisque son flex=1) et prendra toute la taille restant, laissant ainsi le dernier menu à droite de la fenêtre

Soit donc le code source correspondant:

<?xml version= »1.0″?>
<?xml-stylesheet href= »chrome://global/skin/ » type= »text/css »?>
<!DOCTYPE dialog SYSTEM « chrome://jours/locale/main.dtd »>
<window
id= »main »
width= »640″
height= »240″
class= »main »
title= »Quel jour étions nous? »
xmlns= »http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul »&gt;
<vbox width= »640″>
<toolbox>
<toolbar>
<menubar>
<menu label= »Fichier » accesskey= »F » >
<menupopup>
<menuitem label= »Réinitialiser » acceltext= »ESPACE » accesskey= »A » image= »icons/calendar_empty.png »/>
<menuseparator/>
<menuitem label= »Quitter » acceltext= »ESCAPE »  accesskey= »Q » image= »icons/delete.png »/>
</menupopup>
</menu>
<menu label= »Edition » accesskey= »E » >
<menupopup>
<menuitem label= »Copier Date » accesskey= »C » acceltext= »CTRL+C » image= »icons/copy_paste.png »/>
<menuitem label= »Edition Presse Papier » accesskey= »E » acceltext= »CTRL+E » image= »icons/edit.png »/>
</menupopup>
</menu>
<menu label= »Langue » accesskey= »L » >
<menupopup>
<menuitem label= »Francais » accesskey= »F » acceltext= »F5″ image= »icons/flag/France.png »/>
<menuitem label= »عربية » accesskey= »A » acceltext= »F6″ image= »icons/flag/Tunisia.png »/>
<menuitem label= »English » accesskey= »E » acceltext= »F7″ image= »icons/flag/UnitedKingdom.png »/>
</menupopup>
</menu>
<menu label= »Interface » accesskey= »I » >
<menupopup>
<colorpicker label= »Couleur d’Origine » id= »couleur » type= »button » color= »#151515″ onchange= »changefond() »/>
<menuitem label= »Couleur d’Origine » accesskey= »C » acceltext= »F2″ image= »icons/refresh.png »/>
<menuitem label= »Couleur au hazard » accesskey= »H » acceltext= »F3″ image= »icons/chart.png »/>
</menupopup>
</menu>
</menubar>
<spacer flex= »1″/>
<menubar>
<menu label= »? » accesskey= »? » crop= »start »>
<menupopup>
<menuitem label= »Info »             acceltext= »CTRL+I »     accesskey= »I » image= »icons/id_card.png »  oncommand= »alert(‘tutorielsinformatique.wordpress.com (c) 2011’); » />
<menuseparator/>
<menuitem label= »A propos »         acceltext= »F1″     accesskey= »A » image= »icons/image_accept.png »/>
<menuitem label= »Info Système »     acceltext= »CTRL+S »     accesskey= »S » image= »icons/search_page.png »/>
</menupopup>
</menu>
</menubar>
</toolbar>
</toolbox>
</vbox>
<vbox height= »250″>
</vbox>
</window>

Et voila le résultat:


e. La barre d’état « statusbars »

C’est une zone hbox particulière rendue (affichée) différement, elle se trouve normalement en bas de la page et permet d’afficher des infos supplémentaires selon votre application, il y a en principe un seul statusbar et des élements qui sont à l’intérieur qu’on appelle statusbarpanels, ce sont des petits blocs qui chacun contiennent chacun une information particulière (forme d’icône et ou texte) par exemple la langue qui est en cours ou dans le cas d’un navigateur le site en chargement ou encore le résultat d’un calcul, l’état de la connexion si par exemple il s’agit d’une application utilisant le réseau comme un client de « chat » etc..

Ce qui est formidable dans la réalisation d’une application XUL c’est que vous êtes vraiment le maître de votre application, loin des logiciels de réalisation d’applications graphique (comme Visual Basic ou Delphi) ou l’interface est comme un puzzle que vous assemblez en glissant déplaçant des élément de l’interface qui au fond auront la forme et le format dicté par l’éditeur, ici si vous l’avez remarqué je passe mon temps à vous expliquer des notions en disant « en principe » par ci « en principe » par la, tout simplement parce que XUL est extrêmement flexible, vous pouvez dans la barre d’état coller un menu, un widget, dans l’image en dessous on voit l’ajout d’un widget, d’une zone input et d’une liste, par contre ce qu’on ne voit pas et qui sera afficher en infobulle c’est qu’en double cliquant sur la première icône on peut fermer l’application, en cliquant du droit on peut changer la langue et même la date et au final si l’on veut on pourrait même faire en sortes que s’il l’on clique sur Tutorielsinformatique on affiche le site DANS l’application via l’attribut src de balise <iframe> ou<browser>:

Quelques attributs des éléments de la barre d’état

Attributs des éléments statusbarpannel
id: Comme pour tout élément du DOM il s’agit de son identifiant qui doit être unique pour pouvoir le manipuler
context: identifiant (id) du popupmenu qui sera affiché lors d’un clique droit sur ce statusbarpanel
tooltiptext: texte qui sera affiché en info bulle lors du survol par le curseur de la souris
label: titre affiché dans le panel
class: statusbarpanel-iconic / statusbarpanel-iconic-text / statusbarpanel-menu-iconic (précise si le panel sera constitué que d’une icône ou d’une icône et d’un texte
image: URL de l’image utilisée comme icône (nécessite que class soit égale à menuitem-iconic)

Remarque: Un mot sur le menu contextuel
On peut code le menu qui apparaitra sous la baslie popup en notant que l’id de se popup sera la valeur à utiliser pour l’ouverture du menu. ensuite dans l’élement qui appel / active ce popup menu il y a deux facon de faire:

  • Soit avec l’attribut context: et alors le menu sera appelé via un clique droit
  • Soit avec l’attribut popup: et alors le menu sera appelé avec un clique gauche.

Voici le code de notre projet (qui sera utilisé pour notre application)

<?xml version= »1.0″?>
<?xml-stylesheet href= »chrome://global/skin/ » type= »text/css »?>
<!DOCTYPE dialog SYSTEM « chrome://jours/locale/main.dtd »>
<window
id= »main »
width= »640″
height= »295″
class= »main »
title= »Quel jour étions nous? »
onload= » »
onbeforeunload= » »
xmlns= »http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul »&gt;
<vbox width= »640″>
<toolbox>
<toolbar>
<menubar>
<menu label= »Fichier » accesskey= »F » >
<menupopup>
<menuitem label= »Réinitialiser » acceltext= »ESPACE » accesskey= »A » image= »icons/calendar_empty.png »/>
<menuseparator/>
<menuitem label= »Quitter » acceltext= »ESCAPE »  accesskey= »Q » image= »icons/delete.png » oncommand= »prompts.alert(window, ‘Alert Title’, ‘Hello!’); »/>
</menupopup>
</menu>
<menu label= »Edition » accesskey= »E » >
<menupopup>
<menuitem label= »Copier Date » accesskey= »C » acceltext= »CTRL+C » image= »icons/copy_paste.png »/>
<menuitem label= »Edition Presse Papier » accesskey= »E » acceltext= »CTRL+E » image= »icons/edit.png »/>
</menupopup>
</menu>
<menu label= »Langue » accesskey= »L » >
<menupopup>
<menuitem label= »Francais » accesskey= »F » acceltext= »F5″ image= »icons/flag/France.png »/>
<menuitem label= »عربية » accesskey= »A » acceltext= »F6″ image= »icons/flag/Tunisia.png »/>
<menuitem label= »English » accesskey= »E » acceltext= »F7″ image= »icons/flag/UnitedKingdom.png »/>
</menupopup>
</menu>
<menu label= »Interface » accesskey= »I » >
<menupopup>
<colorpicker label= »Couleur d’Origine » id= »couleur » type= »button » color= »#151515″ onchange= »changefond() »/>
<menuitem label= »Couleur d’Origine » accesskey= »C » acceltext= »F2″ image= »icons/refresh.png »/>
<menuitem label= »Couleur au hazard » accesskey= »H » acceltext= »F3″ image= »icons/chart.png »/>
</menupopup>
</menu>
</menubar>
<spacer flex= »1″/>
<menubar>
<menu label= »? » accesskey= »? » crop= »start »>
<menupopup>
<menuitem label= »Info »             acceltext= »CTRL+I »     accesskey= »I » image= »icons/id_card.png »  oncommand= »alert(‘tutorielsinformatique.wordpress.com (c) 2011’); » />
<menuseparator/>
<menuitem label= »A propos »         acceltext= »F1″     accesskey= »A » image= »icons/image_accept.png »/>
<menuitem label= »Info Système »     acceltext= »CTRL+S »     accesskey= »S » image= »icons/search_page.png »/>
</menupopup>
</menu>
</menubar>
</toolbar>
</toolbox>
</vbox>

<!– si nous voulions avoir une fenetre qui montre un site web on peut utiliser iframe
<iframe flex= »1″ src= »http:///www.google.com &raquo; />
<browser src= »http://www.mozilla.org &raquo; flex= »1″ autoscroll= »false »/>
–>
<vbox height= »246″ style= »background-color:#CCC6AD; »>
</vbox>

<statusbar id= »statusbar »>
<statusbarpanel id= »sbmessage »  class= »statusbarpanel-iconic » src= »icons/plus/fermer.png » tooltiptext= »Double cliquer pour fermer » ondblclick= »alert(‘fermeture’); »/>

<statusbarpanel id= »sbauteur » class= »statusbarpanel-iconic-text » src= »icons/plus/wordpress.png » label= »https://tutorielsinformatique.wordpress.com »/&gt;
<spacer flex= »1″/>
<statusbarpanel id= »sbdate » class= »statusbarpanel-iconic-text » src= »icons/plus/date.png » label= »Jeudi 13/10/2011″ context= »menudate » />
<statusbarpanel id= »sblangue » class= »statusbarpanel-iconic-text » src= »icons/flag/fr.png » label= »FR » context= »menulangue » tooltiptext= »Cliquer ici du droit pour changer la langue » />

<menupopup id= »menulangue »>
<menuitem label= »Francais » accesskey= »F » acceltext= »F5″ image= »icons/flag/France.png »/>
<menuitem label= »عربية » accesskey= »A » acceltext= »F6″ image= »icons/flag/Tunisia.png »/>
<menuitem label= »English » accesskey= »E » acceltext= »F7″ image= »icons/flag/UnitedKingdom.png »/>
</menupopup>
<menupopup id= »menudate »>
<datepicker flex= »1″ firstdayofweek= »1″ type= »grid » value= » »/>
</menupopup>
</statusbar>
</window>

Voici le résultat:

Explication du code

Ouverture de la balise statusbar, début de la barre d’état

<statusbar id= »statusbar »>

Insertion d’un panel contenant juste une icone (fermer.png), nous le verrons dans la partie javascript, le ondblclick veut dire que si l’on clique deux fois de suite dessus un message ‘fermeture’ sera affiché grace à la fonction alert(), au passage de la souris un infobulle s’affiche grâce à l’attribut tooltiptext

<statusbarpanel id= »sbmessage »  class= »statusbarpanel-iconic » src= »icons/plus/fermer.png » tooltiptext= »Double cliquer pour fermer » ondblclick= »alert(‘fermeture’); »/>

Insertion du panel contenant une info sur l’auteur ou sur votre licence (CC) avec une icône (ici wordpress.png) et un label (l’adresse de ce blog)

<statusbarpanel id= »sbauteur » class= »statusbarpanel-iconic-text » src= »icons/plus/wordpress.png » label= »https://tutorielsinformatique.wordpress.com »/&gt;

Insertion de la balise spacer qui permet de remplir un espace et de pousser ce qui suit comme panel vers la droite grâce à la valeur 1 de l’attribut flex (en gros sur la ligne aucun autre élément n’utilise l’attribut flex qui en fin de compte sera un ratio de la somme des valeurs des flexs d’une même orientation)

<spacer flex= »1″/>

Ici on rajoute un panel icône/texte qui affiche la date mais qui au clique droit (attribut context) va afficher le popup menu dont l’id est « menudate »

<statusbarpanel id= »sbdate » class= »statusbarpanel-iconic-text » src= »icons/plus/date.png » label= »Jeudi 13/10/2011″ context= »menudate » />

Ici on rajoute un panel icône/texte qui affiche le drapeau et la langue utilisé et qui au clique gauche (attribut context) va afficher le popup menu dont l’id est « menulangue » et qui affiche un info bulle au passage de la souris

<statusbarpanel id= »sblangue » class= »statusbarpanel-iconic-text » src= »icons/flag/fr.png » label= »FR » popup= »menulangue » tooltiptext= »Cliquer ici du droit pour changer la langue » />

ici c’est la définition du popup menu de langue

<menupopup id= »menulangue »>
<menuitem label= »Francais » accesskey= »F » acceltext= »F5″ image= »icons/flag/France.png »/>
<menuitem label= »عربية » accesskey= »A » acceltext= »F6″ image= »icons/flag/Tunisia.png »/>
<menuitem label= »English » accesskey= »E » acceltext= »F7″ image= »icons/flag/UnitedKingdom.png »/>
</menupopup>

ici c’est l’affichage d’un popup menu qui au lieu d’intégré un menuitem contient plutôt un selectionneur de date

<menupopup id= »menudate »>
<datepicker flex= »1″ firstdayofweek= »1″ type= »grid » value= » »/>
</menupopup>

fin de la barre d’état

</statusbar>

f. Le contenu de l’application (la partie centrale)

Nous avons besoin de deux éléments, un calendrier pour choisir la date et une zone de texte pour y afficher le jour correspondant

le calendrier ou sélectionneur de date: datepicker

Il est simple d’utilisation, il y a 3 type (grid, popup et normal, voir illustration en bas) et l’attribut id qui permettra via javascript et le dom de récupérer ou modifier sa valeur, il y a aussi l’attribut firstdayofweek qui est un nombre commençant par 0 (0 reprèsente le dimanche, 1 lundi, 2 mardi etc…)

la zone de texte: textbox

la zone de texte est supposée être une zone d’entrée de texte (un input), mais grâce à la class « plain » il peut tout à fait être utilisé comme un label et gagné par la même occasion les attributs, propriétés et fonction d’un textbox. on peut donc (puisque c’est un textbox) lui attribuer un label comme suit:

<label control= »textbox1″ value= »Jour de la Semaine: »/><textbox id= »textbox1″ class= »plain » style= »background:transparent; » readonly= »true »/>

Ces attributs sont les suivants:

cols, decimalplaces, disabled, emptytext, hidespinbuttons, increment, label, max, maxlength, min, multiline, newlines, onchange, oninput, placeholder, preference, readonly, rows, searchbutton, size, spellcheck, tabindex, timeout, type, value, wrap, wraparound

Voici les attributs les plus importants pour notre projet

Attributs des éléments textbox
multiline: permet d’écrire sur plusieurs lignes, dans notre cas il nous permettrais de garder l’historique de toutes les opérations demandés (ce que nous ne ferons pas car à chaque clique sur le calendrier le calcul se fera en temps réel même si l’utilisateur ne désire pas cette date »
onchange: action a entreprendre lors du changement du textbox
oninput: action a entreprendre lors de l’appuie sur une touche (par exemple on peut faire un test de validité de la touche appuyée, si par exemple on attend un numéro de téléphone et qu’une lettre est frappée on peut l’annuler)
readonly: ne permet pas l’édition par l’utilisateur
maxlength:
il s’agit du nombre de caractère visible à l’écran
value: valeur du texte affiché ou entré
type: autocomplete, number, password, search et timed qui n’est plus utilisé
class: la seule classe intéressante est la classe « plain » qui permet avec un pu de style d’enlever les bordures et fond et d’en faire une zone d’affichage (plutôt qu’une zone d’entrée)
timeout: c’est un temps de retard avant d’effectuer quoi que ce soit. il fonctionne avec les types autocomplete, par défaut le temps est de 500 millisecondes (la valeur donnée est également en milliseconde)

pour plus d’informations sur l’autocomplete consulter la page sur textbox XPFE autocomplete.

Code source de la partie centrale:

 <vbox style<= »background-color:#CCC6AD; » flex= »1″>
<datepicker id= »datee1″ firstdayofweek= »1″ type= »grid » value= » » onchange= »alert(document.getElementById(‘datee1’).value) »/>
<separator/>
<hbox>
<spacer width= »10″/> <!– on est dans un hbox, ce spacer est le suivant me créer une marge à droite et à gauche de 10 pixels–>
<label control= »jdls » value= »Jour de la Semaine: »/>
<textbox id= »jdls » style= »background:transparent; » value= » » increment= »1″ searchbutton= »true »/>
<spacer width= »10″/></hbox>
<hbox height= »20″ />
<!– ICI CODE DU STATUSBAR –>
</vbox>

voici le  code source  de l’interface avec quelques lignes de code CSS que nous expliquerons dans la prochaine partie.

A SUIVRE (partie 3) ….

Que nous reste il?

  • Incrustation de code CSS
  • Modifier l’application en une version multilingue
  • Introduction au DOM
  • Introduction de rigueur sur les événements et les scripts
  • Introduction et gestions des préférences
  • Le modèle XPCOM
  • Manipulation du presse papier
  • ?
  • Finalisation du projet
Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s