Interfaces utilisateur XUL

  • Raccourci de la révision : CSS/Premiers_pas/Interfaces_utilisateur_XUL
  • Titre de la révision : Interfaces utilisateur XUL
  • ID de la révision : 193965
  • Créé :
  • Créateur : Verruckt
  • Version actuelle ? Non
  • Commentaire /* Pour continuer */

Contenu de la révision

Cette page illustre le langage spécialisé de Mozilla pour créer des interfaces utilisateur.

Vous créerez une démonstration simple utilisable dans votre navigateur Mozilla.

Information : les interfaces utilisateur

Bien que le HTML propose quelques éléments d'interface utilisateur, il ne contient pas toutes les fonctionnalités nécessaires à la création d'une application complète.

Mozilla pallie à cette limitation en fournissant un langage spécialisé dans la création d'interfaces utilisateur : XUL (XML User-interface Language, généralement prononcé en anglais comme « zool »).

Beaucoup des fonctions usuelles des interfaces utilisateur sont intégrées dans XUL. Par exemple, celui-ci fournit des fenêtres spécialisées telles que des dialogues ou des assistants, ainsi que des barres d'état, des barres de menus et d'outils, et même des navigateurs entiers.

Des fonctionnalités plus spécialisées peuvent être construites en combinant XUL avec d'autres technologies que vous avez pu voir dans ce tutoriel : les styles CSS, du code JavaScript, et des liaisons XBL.

Comme d'autres langages basés sur XML, XUL utilise des feuilles de style CSS.

Plus de détails
Pour plus d'informations à propos des interfaces utilisateur en XUL, consultez la page XUL de ce wiki.

Action : une démonstration de XUL

Créez un nouveau document XUL en tant que fichier texte, doc7.xul. Copiez et collez-y le contenu ci-dessous, en vous assurant de le faire défiler pour en obtenir l'entièreté :

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="style7.css"?>
<!DOCTYPE window>

<window
  xmlns="http&58;//www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  title="Premiers pas avec CSS - Démonstration de XUL"
  onload="init();">

<script type="application/x-javascript" src="script7.js"/>

<label class="head-1" value="Démonstration de XUL"/>

<vbox>

  <groupbox class="demo-group">
    <caption label="Calculatrice du jour de la semaine"/>
    <grid>
      <columns>
        <column/>
        <column/>
        </columns>
      <rows>
        <row>
          <label class="text-prompt" value="Date :" 
            accesskey="D" control="date-text"/>
          <textbox id="date-text" type="timed" 
            timeout="750" oncommand="refresh();"/>
          </row>
        <row>
          <label value="Day:"/>
          <hbox id="day-box">
            <label class="day" value="Dimanche" disabled="true"/>
            <label class="day" value="Lundi" disabled="true"/>
            <label class="day" value="Mardi" disabled="true"/>
            <label class="day" value="Mercredi" disabled="true"/>
            <label class="day" value="Jeudi" disabled="true"/>
            <label class="day" value="Vendredi" disabled="true"/>
            <label class="day" value="Samedi" disabled="true"/>
            </hbox>
          </row>
        </rows>
      </grid>
    <hbox class="buttons">
      <button id="clear" label="Réinitialiser" accesskey="R" 
        oncommand="clearDate();"/>
      <button id="today" label="Aujourd'hui" accesskey="A"
        oncommand="setToday();"/>
      </hbox>
    </groupbox>

  <statusbar>
    <statusbarpanel id="status"/>
    </statusbar>

</vbox>

</window>

Créez un nouveau fichier CSS, style7.css. Copiez et collez-y le contenu ci-dessous, en vous assurant de le faire défiler pour en obtenir l'entièreté :

/*** Démonstration de XUL ***/
window {
  -moz-box-align: start;
  background-color: -moz-dialog;
  font: -moz-dialog;
  padding: 2em;
  }

.head-1 {
  font-weight: bold;
  font-size: 200%;
  padding-left: 5px;
  }


/* group box */
.demo-group {
  padding: 1em;
  }

.demo-group grid {
  margin-bottom: 1em;
  }

.demo-group column {
  margin-right: .5em;
  }

.demo-group row {
  margin-bottom: .5em;
  }

.demo-group .buttons {
  -moz-box-pack: end;
  }


/* labels des jours de la semaine */
.day {
  margin-left: 1em;
  }

.day[disabled] {
  color: #777;
  }

.day:first-child {
  margin-left: 4px;
  }


/* labels colonne de gauche */
.text-prompt {
  padding-top: .25em;
  }


/* boîte d'entrée de la date */
#date-text {
  max-width: 8em;
  }


/* barre d'état */
statusbar {
  width: 100%;
  border: 1px inset -moz-dialog;
  margin: 4px;
  padding: 0px 4px;
  }

#status {
  padding: 4px;
  }

#status[warning] {
  color: red;
  }

Créez un nouveau fichier texte, script7.js. Copiez et collez-y le contenu ci-dessous, en vous assurant de faire défiler pour en obtenir l'entièreté :

// Démonstratio de XUL

var dateBox, dayBox, currentDay, status; // éléments

// appelée par window onLoad
function init() {
  dateBox = document.getElementById("date-text")
  dayBox = document.getElementById("day-box")
  status = document.getElementById("status")
  setToday();
  }

// appelée par le bouton Réinitialiser
function clearDate() {
  dateBox.value = ""
  refresh()
  }

// appelée par le bouton aujourd'hui
function setToday() {
  var d = new Date()
  dateBox.value = (d.getMonth() + 1)
    + "/" + d.getDate()
    + "/" + d.getFullYear()
  refresh()
  }

// appelée par la boîte de texte Date
function refresh() {
  var d = dateBox.value
  var theDate = null

  showStatus(null)
  if (d != "") {
    try {
      var a = d.split("/")
      var theDate = new Date(a[2], a[1], a[0] - 1)
      showStatus(theDate)
      }
    catch (ex) {}
    }
  setDay(theDate)
  }

// fonctions internes
function setDay(aDate) {
  if (currentDay) currentDay.setAttribute("disabled", "true")
  if (aDate == null) currentDay = null
  else {
    var d = aDate.getDay()
    currentDay = dayBox.firstChild
    while (d-- > 0) currentDay = currentDay.nextSibling
    currentDay.removeAttribute("disabled")
    }
  dateBox.focus();
  }

function showStatus(aDate) {
  if (aDate == null) {
    status.removeAttribute("warning")
    status.setAttribute("label", "")
    }
  else if (aDate === false || isNaN(aDate.getTime())) {
    status.setAttribute("warning", "true")
    status.setAttribute("label", "Date invalide")
    }
  else {
    status.removeAttribute("warning")
    status.setAttribute("label", aDate.toLocaleDateString())
    }
  }

Pour voir le résultat exactement tel que prévu, utilisez le thème par défaut dans votre navigateur. Si vous utilisz un thème différent, il peut changer certains styles de l'interface et faire en sorte que la démonstration aie l'air étrange.

Ouvrez le document dans votre navigateur Mozilla et testez l'interface.

Ce wiki ne permet pas d'utiliser XUL et JavaScript dans ses pages, il n'est donc pas possible de faire la démonstration ici. Cela ressemble à ceci :

Démonstration de XUL

Calculatrice du jour de la semaine

Date : 27/06/2005
Day:Dimanche Lundi Mardi Mercredi Jeudi Vendredi Samedi
 

Réinitialiser Aujourd'hui

27 juin 2005

Remarques à propos de cette démonstration :

  • Le document XUL est lié à la feuille de style de la façon habituelle, ainsi qu'au script.
  • Le script n'est pas important dans cette démonstration.
  • Une grande partie du style de ce qui est visible dépend du thème de votre navigateur.

Examinez la feuille de style du document pour vous assurez que vous comprenez toutes les règles qui y figurent. S'il y a une règle que vous ne comprenez pas, mettez-la en commentaire et actualisez dans votre navigateur pour voir son effet sur le document.

Challenge
Utilisez l'inspecteur DOM pour examiner la boîte de texte Date. Elle est constituée d'autres éléments qui sont générés par sa liaison XBL.

Découvrez la classe (class) de son élément html:input. Il s'agit de l'élément qui reçoit réellement l'entrée de l'utilisateur.

À l'aide de ces informations, ajoutez une règle à la feuille de style qui rend le fond de la boîte Date bleu pâle lorsqu'elle a le focus clavier (mais reste blanche lorsque le focus clavier est ailleurs).

Pour continuer

Si vous avez eu des difficultés à comprendre cette page, ou si vous avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa page de discussion.

Dans cette démonstration, vous voyez les formes rectangulaires standard qui sont communes à la plupart des interfaces utilisateur. Mozilla gère également un langage graphique spécialisé pour créer des formes, et peut utiliser CSS pour en spécifier le style. La page suivante en propose une démonstration : Graphiques SVG.

{{ languages( { "en": "en/CSS/Getting_Started/XUL_user_interfaces", "pl": "pl/CSS/Na_pocz\u0105tek/XUL-owe_interfejsy_u\u017cytkownika", "pt": "pt/CSS/Como_come\u00e7ar/Interfaces_de_usu\u00e1rio_XUL" } ) }}

Source de la révision

<p>
</p><p>Cette page illustre le langage spécialisé de Mozilla pour créer des interfaces utilisateur.
</p><p>Vous créerez une démonstration simple utilisable dans votre navigateur Mozilla.
</p>
<h3 id="Information_:_les_interfaces_utilisateur" name="Information_:_les_interfaces_utilisateur"> Information : les interfaces utilisateur </h3>
<p>Bien que le HTML propose quelques éléments d'interface utilisateur, il ne contient pas toutes les fonctionnalités nécessaires à la création d'une application complète.
</p><p>Mozilla pallie à cette limitation en fournissant un langage spécialisé dans la création d'interfaces utilisateur : <i>XUL</i> (XML User-interface Language, généralement prononcé en anglais comme « <i>zool</i> »).
</p><p>Beaucoup des fonctions usuelles des interfaces utilisateur sont intégrées dans XUL. Par exemple, celui-ci fournit des fenêtres spécialisées telles que des dialogues ou des assistants, ainsi que des barres d'état, des barres de menus et d'outils, et même des navigateurs entiers.
</p><p>Des fonctionnalités plus spécialisées peuvent être construites en combinant XUL avec d'autres technologies que vous avez pu voir dans ce tutoriel : les styles CSS, du code JavaScript, et des liaisons XBL.
</p><p>Comme d'autres langages basés sur XML, XUL utilise des feuilles de style CSS.
</p>
<table style="border:1px solid #36b; padding:1em; background-color:#f4f4f4; margin-bottom:1em;width:100%;">
<caption style="font-weight:bold; text-align:left; margin-top:1em;">Plus de détails
</caption><tbody><tr>
<td> Pour plus d'informations à propos des interfaces utilisateur en XUL, consultez la page <a href="fr/XUL">XUL</a> de ce wiki.
</td></tr></tbody></table>
<h3 id="Action_:_une_d.C3.A9monstration_de_XUL" name="Action_:_une_d.C3.A9monstration_de_XUL"> Action : une démonstration de XUL </h3>
<p>Créez un nouveau document XUL en tant que fichier texte, <code>doc7.xul</code>.
Copiez et collez-y le contenu ci-dessous, en vous assurant de le faire défiler pour en obtenir l'entièreté :
</p>
<div style="width:48em; height:12em; overflow:auto;"><pre>&lt;?xml version="1.0"?&gt;
&lt;?xml-stylesheet type="text/css" href="style7.css"?&gt;
&lt;!DOCTYPE window&gt;

&lt;window
  xmlns="http&amp;58;//www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  title="Premiers pas avec CSS - Démonstration de XUL"
  onload="init();"&gt;

&lt;script type="application/x-javascript" src="script7.js"/&gt;

&lt;label class="head-1" value="Démonstration de XUL"/&gt;

&lt;vbox&gt;

  &lt;groupbox class="demo-group"&gt;
    &lt;caption label="Calculatrice du jour de la semaine"/&gt;
    &lt;grid&gt;
      &lt;columns&gt;
        &lt;column/&gt;
        &lt;column/&gt;
        &lt;/columns&gt;
      &lt;rows&gt;
        &lt;row&gt;
          &lt;label class="text-prompt" value="Date :" 
            accesskey="D" control="date-text"/&gt;
          &lt;textbox id="date-text" type="timed" 
            timeout="750" oncommand="refresh();"/&gt;
          &lt;/row&gt;
        &lt;row&gt;
          &lt;label value="Day:"/&gt;
          &lt;hbox id="day-box"&gt;
            &lt;label class="day" value="Dimanche" disabled="true"/&gt;
            &lt;label class="day" value="Lundi" disabled="true"/&gt;
            &lt;label class="day" value="Mardi" disabled="true"/&gt;
            &lt;label class="day" value="Mercredi" disabled="true"/&gt;
            &lt;label class="day" value="Jeudi" disabled="true"/&gt;
            &lt;label class="day" value="Vendredi" disabled="true"/&gt;
            &lt;label class="day" value="Samedi" disabled="true"/&gt;
            &lt;/hbox&gt;
          &lt;/row&gt;
        &lt;/rows&gt;
      &lt;/grid&gt;
    &lt;hbox class="buttons"&gt;
      &lt;button id="clear" label="Réinitialiser" accesskey="R" 
        oncommand="clearDate();"/&gt;
      &lt;button id="today" label="Aujourd'hui" accesskey="A"
        oncommand="setToday();"/&gt;
      &lt;/hbox&gt;
    &lt;/groupbox&gt;

  &lt;statusbar&gt;
    &lt;statusbarpanel id="status"/&gt;
    &lt;/statusbar&gt;

&lt;/vbox&gt;

&lt;/window&gt;
</pre></div>
<p>Créez un nouveau fichier CSS, <code>style7.css</code>.
Copiez et collez-y le contenu ci-dessous, en vous assurant de le faire défiler pour en obtenir l'entièreté :
</p>
<div style="width:48em; height:12em; overflow:auto;"><pre>/*** Démonstration de XUL ***/
window {
  -moz-box-align: start;
  background-color: -moz-dialog;
  font: -moz-dialog;
  padding: 2em;
  }

.head-1 {
  font-weight: bold;
  font-size: 200%;
  padding-left: 5px;
  }


/* group box */
.demo-group {
  padding: 1em;
  }

.demo-group grid {
  margin-bottom: 1em;
  }

.demo-group column {
  margin-right: .5em;
  }

.demo-group row {
  margin-bottom: .5em;
  }

.demo-group .buttons {
  -moz-box-pack: end;
  }


/* labels des jours de la semaine */
.day {
  margin-left: 1em;
  }

.day[disabled] {
  color: #777;
  }

.day:first-child {
  margin-left: 4px;
  }


/* labels colonne de gauche */
.text-prompt {
  padding-top: .25em;
  }


/* boîte d'entrée de la date */
#date-text {
  max-width: 8em;
  }


/* barre d'état */
statusbar {
  width: 100%;
  border: 1px inset -moz-dialog;
  margin: 4px;
  padding: 0px 4px;
  }

#status {
  padding: 4px;
  }

#status[warning] {
  color: red;
  }
</pre></div>
<p>Créez un nouveau fichier texte, <code>script7.js</code>.
Copiez et collez-y le contenu ci-dessous, en vous assurant de faire défiler pour en obtenir l'entièreté :
</p>
<div style="width:48em; height:12em; overflow:auto;"><pre>// Démonstratio de XUL

var dateBox, dayBox, currentDay, status; // éléments

// appelée par window onLoad
function init() {
  dateBox = document.getElementById("date-text")
  dayBox = document.getElementById("day-box")
  status = document.getElementById("status")
  setToday();
  }

// appelée par le bouton Réinitialiser
function clearDate() {
  dateBox.value = ""
  refresh()
  }

// appelée par le bouton aujourd'hui
function setToday() {
  var d = new Date()
  dateBox.value = (d.getMonth() + 1)
    + "/" + d.getDate()
    + "/" + d.getFullYear()
  refresh()
  }

// appelée par la boîte de texte Date
function refresh() {
  var d = dateBox.value
  var theDate = null

  showStatus(null)
  if (d != "") {
    try {
      var a = d.split("/")
      var theDate = new Date(a[2], a[1], a[0] - 1)
      showStatus(theDate)
      }
    catch (ex) {}
    }
  setDay(theDate)
  }

// fonctions internes
function setDay(aDate) {
  if (currentDay) currentDay.setAttribute("disabled", "true")
  if (aDate == null) currentDay = null
  else {
    var d = aDate.getDay()
    currentDay = dayBox.firstChild
    while (d-- &gt; 0) currentDay = currentDay.nextSibling
    currentDay.removeAttribute("disabled")
    }
  dateBox.focus();
  }

function showStatus(aDate) {
  if (aDate == null) {
    status.removeAttribute("warning")
    status.setAttribute("label", "")
    }
  else if (aDate === false || isNaN(aDate.getTime())) {
    status.setAttribute("warning", "true")
    status.setAttribute("label", "Date invalide")
    }
  else {
    status.removeAttribute("warning")
    status.setAttribute("label", aDate.toLocaleDateString())
    }
  }
</pre></div>
<p>Pour voir le résultat exactement tel que prévu, utilisez le thème par défaut dans votre navigateur.
Si vous utilisz un thème différent, il peut changer certains styles de l'interface et faire en sorte que la démonstration aie l'air étrange.
</p><p>Ouvrez le document dans votre navigateur Mozilla et testez l'interface.
</p><p>Ce wiki ne permet pas d'utiliser XUL et JavaScript dans ses pages, il n'est donc pas possible de faire la démonstration ici.
Cela ressemble à ceci :
</p>
<table style="border:2px outset #36b; background-color:threedface; padding:1em;cursor:default; white-space:nowrap; margin:.5em 0;">
<tbody><tr>
<td><p style="font-size:150%;font-weight:bold;margin:0;padding:0;">Démonstration de XUL</p>
<div style="position:relative;border:2px groove threedhighlight;margin-top:1em;">
<p style="float:left;margin:-1em 0 0 .5em;padding:0;background-color:threedface;">
Calculatrice du jour de la semaine</p>
<table style="clear:left;background-color:threedface;margin:.5em;padding-right:.5em;border-spacing:.25em;">
<tbody><tr>
<td style="padding-right:.5em;"><u>D</u>ate :
</td><td style="background-color:white;border:1px solid #000;width:8em;float:left;cursor:text;padding:.15em .25em;">27/06/2005
</td></tr>
<tr>
<td>Day:</td><td style="color:graytext;word-spacing:.5em;">Dimanche <span style="color:#000;">Lundi</span> Mardi Mercredi Jeudi Vendredi Samedi
</td></tr>
<tr>
<td> 
</td><td><div style="float:right;margin-top:.5em;word-spacing:.5em;">
<p><span style="border:2px outset threedface;padding:.25em 1em;"><u>R</u>éinitialiser</span>
<span style="border:2px outset threedface;padding:.25em 1em;"><u>A</u>ujourd'hui</span>
</p>
</div>
</td></tr></tbody></table>
</div>
<div style="border:1px inset threedface;margin-top:1em;">
<p style="margin:0;padding:.25em .5em;">27 juin 2005</p>
</div>
</td></tr></tbody></table>
<p>Remarques à propos de cette démonstration :
</p>
<ul><li> Le document XUL est lié à la feuille de style de la façon habituelle, ainsi qu'au script.
</li><li> Le script n'est pas important dans cette démonstration.
</li><li> Une grande partie du style de ce qui est visible dépend du thème de votre navigateur.
</li></ul>
<p>Examinez la feuille de style du document pour vous assurez que vous comprenez toutes les règles qui y figurent.
S'il y a une règle que vous ne comprenez pas, mettez-la en commentaire et actualisez dans votre navigateur pour voir son effet sur le document.
</p>
<table style="border:1px solid #36b; padding:1em; background-color:#fffff4; margin-bottom:1em;">
<caption style="font-weight:bold; text-align:left;">Challenge
</caption><tbody><tr>
<td> Utilisez l'inspecteur DOM pour examiner la boîte de texte Date. Elle est constituée d'autres éléments qui sont générés par sa liaison XBL.
<p>Découvrez la classe (<i>class</i>) de son élément <code>html:input</code>. Il s'agit de l'élément qui reçoit réellement l'entrée de l'utilisateur.
</p><p>À l'aide de ces informations, ajoutez une règle à la feuille de style qui rend le fond de la boîte Date bleu pâle lorsqu'elle a le focus clavier (mais reste blanche lorsque le focus clavier est ailleurs).
</p>
</td></tr></tbody></table>
<h4 id="Pour_continuer" name="Pour_continuer"> Pour continuer </h4>
<p>Si vous avez eu des difficultés à comprendre cette page, ou si vous avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa <a href="Talk:fr/CSS/Premiers_pas/Interfaces_utilisateur_XUL">page de discussion</a>.
</p><p>Dans cette démonstration, vous voyez les formes rectangulaires standard qui sont communes à la plupart des interfaces utilisateur.
Mozilla gère également un langage graphique spécialisé pour créer des formes, et peut utiliser CSS pour en spécifier le style.
La page suivante en propose une démonstration : <b><a href="fr/CSS/Premiers_pas/Graphiques_SVG">Graphiques SVG</a></b>.
</p>{{ languages( { "en": "en/CSS/Getting_Started/XUL_user_interfaces", "pl": "pl/CSS/Na_pocz\u0105tek/XUL-owe_interfejsy_u\u017cytkownika", "pt": "pt/CSS/Como_come\u00e7ar/Interfaces_de_usu\u00e1rio_XUL" } ) }}
Revenir à cette révision