Après avoir présenté XUL (notre article du 06/06/2003), ses évènements (notre article du 27/10/2003) et ses éléments de mise en page (notre article du 30/09/2004), nous allons maintenant nous intéresser à ses divers éléments d'interface. Ces éléments, ou widgets, font tout l'intérêt d'une application XUL : leur diversité permet la création d'interfaces bien plus complexes que ne le pourrait le langage XHTML, et autorise donc la création d'applications légères disposant des mêmes fonctionnalités que pour un client lourd... avec la portabilité en plus.

Nous avions déjà vu comment définir une fenêtre XUL, et mettre en place un menu et des boutons liés à un évènement JavaScript. Voici donc le code XML définissant cette fenêtre, ces boutons et ce menu.

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window title="Youpla" width="150px" height="30px" xmlns="http://www.mozilla.org/keymaster/gatekeeper
/there.is.only.xul">
  <script type="application/x-javascript" src="app1.js"/>

  <menubar>
    <menu label="Fichier">
      <menupopup>
        <menuitem label="Fermer" oncommand="window.close();"/>
      </menupopup>
    </menu>
    <menu label="?">
      <menupopup>
        <menuitem label="À propos " oncommand="about();" />
      </menupopup>
    </menu>
  </menubar>

  <box>
    <button label="À propos " oncommand="about();" />
    <button label="Fermer" oncommand="self.close();" />
  </box>

</window>

Nous avons donc, au sein de notre <window>, divers éléments imbriqués dans d'autres : menupop (le menu qui s'affiche), dans menu (l'emplacement du menu), lui-même dans menubar (la barre de menus), et button (le bouton) placé dans box (la boîte de regroupement).

Cela nous donne, chargé dans Firefox, le résultat suivant :



Nous allons voir ici quelques éléments XUL pour construire une interface plus complète.

Cases à cocher et boutons radio
Si les cases à cocher peuvent, logiquement, rester indépendantes, les boutons radio doivent être placés dans un radiogroup :
<radiogroup>
  <radio label="Cliqué dès le départ" selected="true" />
  <radio label="Normal" />
  <radio label="Annulé" disabled="true" />
</radiogroup>

<checkbox label="Je suis bien d'accord" />
<checkbox label="Pôreil" />



Champ texte et description
Un champ texte permet à l'utilisateur d'entrer des données, une description est un texte donnant dans informations dans l'interface.
<textbox value="Ce champ est normal" />
<textbox disabled="true" value="Ce champ est annulé" />
<textbox readonly="true" value="Ce champ est en lecture seule" />
<label>
  Ceci est une étiquette.
</label>
<description>
  Ceci est une description.
</description>



Onglets et arbre
Les onglets permettent de présenter plusieurs fenêtres dans une seule, chacune étant accessible par son propre clic.
<tabbox  flex="1" >
  <tabs>
    <tab label="Premier" />
    <tab label="Deuxième" />
    <tab label="Et troisème onglet" />
  </tabs>
  <tabpanels flex="1" >
    <iframe src="long-lipsum.txt" />
    <iframe src="about.xul"/>
    <iframe src="test1.xul" />
  </tabpanels>
</tabbox>



Enfin, un arbre correspond en fait à un tableau de données.
<groupbox flex="1">
  <tree flex="1" hidecolumnpicker="false" seltype="single" enableColumnDrag="true">
    <treecols>
      <treecol id="name1"  flex="1" label="Colonne 1" />
      <treecol id="sex1"   flex="1" label="Colonne 2" />
      <treecol id="color1" flex="1" label="Colonne 3" />
      <treecol id="attr1"  flex="1" label="Colonne 4" />
    </treecols>

    <treechildren>
      <treeitem>
        <treerow>
          <treecell label="Element 1A" />
        <treecell label="Element 1B" />
        <treecell label="Element 1C" />
        <treecell label="Element 1D" />
        </treerow>
      </treeitem>
      <treeitem>
        <treerow>
        <treecell label="Element 2A" />
        <treecell label="Element 2B" />
        <treecell label="Element 2C" />
        <treecell label="Element 2D" />
        </treerow>
      </treeitem>
      <treeitem>
        <treerow>
        <treecell label="Element 3A" />
        <treecell label="Element 3B" />
        <treecell label="Element 3C" />
        <treecell label="Element 3D" />
        </treerow>
      </treeitem>
    </treechildren>
  </tree>
</groupbox>

Forum

Réagissez dans les forums de JDN Développeurs