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.
| 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
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.
| 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 À 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.