Attributs XUL généraux

Un certain nombre d'attributs sont communs à tous les widgets XUL et peuvent être imaginés comme étant hérités d'une classe de base anonyme. Cette section décrit ces attributs communs.
 
 

id identifie seulement un élément dans un fichier XUL.

<element id="string">

<menu id="file_men">
  <menupopup>
    <menuitem id="new_item" value="New" disabled="true" />
    <menuitem value="Open" />
    <menuitem value="Exit" />
  </menupopup>
</menu>

Tous les widgets XUL peuvent utiliser l'attribut id. Employez id pour accéder et manipuler à des éléments DOM dans XUL. Par exemple, la fonction Javascript suivante recherche le nouvel item de menu ci-dessus, qui peut alors être interrogé sur son état, ses attributs, etc.:

is_new = document.getElementById("new_item");
current_state = is_new.getAttribute("disabled");
if (current_state = true) { ... } 

L'attribut id peut également être employé pour identifier des structures dans les  fichiers de recouvrement (overlay) qui recouvriront l'IU de base définie dans un fichier XUL. Par exemple, quand des sous-arbres tels que des menus sont définis dans un recouvrement et donnent une id (par exemple, id="file_menu") identique à un noeud dans le fichier de base, ces sous-arbres sont interpolés dans la structure de l'interface XUL. Voir les recouvrements pour plus d'information.
 
 

class est un  attribut facultatif utilisé pour nommer des widgets XUL. 

Syntaxe

<element class="string">

Exemple

<box class="borderless">

Notes

L'attribut de classe class fonctionne exactement comme l'attribut de classe dans HTML. Comme dans HTML, l'attribut de classe XUL class correspond au sélecteur de classe dans des définitions de modèle. Par exemple, l'élément <box class="mybox"> reprendra l'information définie dans box.mybox {style statements...} , là où un élément <box> non classé ne le pourra pas. L'attribut class peut être employé pour nommer presque n'importe quel widget XUL. XUL fournit également la capacité d'ajouter des informations de modèle pour tous les éléments d'une classe particulière. En d'autres termes, vous pouvez définir l'information de modèle pour une classe anonyme (cad, .myClass {style statements...}) dans une feuille de style (stylesheet) et n'importe quel élément qui utilise l'attribut class="myClass" prendra ce modèle d'information.

style indique l'information de feuille de style en ligne avec un widget.

<element style="style statement[ ; style statement2; style statement3; ]">

<menu value="Edit" style="background-color:lightblue">

Bien que ce soit un attribut légal pour la plupart des widgets, en général il est préférable d'indiquer toute information de style dans les fichiers .css situés dans le sous-répertoire skin d'un module particulier. Ceci permet à des interfaces d'être  "skinnées" uniformément.
Avertissement:  Quand un modèle est indiqué en ligne, le surplus d'information globale et décisive du style peut être recouverte au détriment de l'aspect global de l'IU.

persist indique quels attributs d'un widget doivent être enregistrés constamment, de sorte qu'ils puissent être rappelés comme préférences utilisateur quand l'application est relancée.

<element persist="attribute1 [ attribute2 attribute3 etc.]">

<window id="main-window" xmlns:html="http://www.w3.org/1999/xhtml"
  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  onload="Startup()"
  onunload="Shutdown()"
  title="&mainWindow.title;" 
  windowtype="navigator:browser"
  align="vertical"
  width="640" height="480"
  x="10" y="10"
  persist="width height x y"
  ondraggesture="return GeneralDrag(event);"> 

Les valeurs persistantes sont seulement séparées par des espaces. L'attribut persist de persistance est souvent employé pour préserver la taille et l'emplacement de la fenêtre racine et d'autres fenêtres positionables et non-modales de XUL. L'exemple ci-dessus préserve respectivement la largeur, la hauteur, la position horizontale et la position verticale sur l'écran. Mais l'attribut persist peut être employé pour faire persister n'importe quel attribut sur n'importe quel élément dans XUL. Les exemples d'autres attributs qui peuvent être persistés incluent l'état des menus (par exemple, validés ou pas), la visibilité de barres d'outils particulières et la taille relative des éléments dans la fenêtre principale.

popup est un  attribut facultatif qui indique l'identification d'un popup associé à l'élément.

<element popup="popup element id">

<menu value="Edit" popup="editor_popup">

Le popup identifié avec cet attribut peut être un menu ou un popup de type fenêtre. Le contenu du sous-arbre de popup est affiché quand l'utilisateur laisse l'élément cliqué. Le popup utilise son propre popupalign et le popupanchor attribue la position du contenu du popup par rapport à l'élément.

popupanchor est un attribut facultatif pour indiquer où le contenu du popup doit être ancré sur l'élément.  

<element popupanchor="none | topleft | topright | bottomleft | bottomright" />

<element id="edit-context"
   popup="editor-popup" popupanchor="topleft"
   popupalign="bottomright" />

L'attribut popupanchor peut être utilisé pour indiquer si le contenu du popup doit être ancré à un des quatre coins de l'objet contenu (par exemple, quand le bouton passe par dessus le contenu). Si omis, aucun ancrage ne se produit. Au lieu de cela le contenu de popup passe directement sous les coordonnées d'événement de la souris. Ce point (directement sous la souris ou attaché à un des quatre coins) s'appelle le point de commencement. 

Par défaut le contenu du popup apparaît avec son point gauche supérieur situé directement sous le point auquel la souris de l'utilisateur descend (sur certains tooltips le contenu est déplacé par la taille du curseur de souris). Le popupanchor fonctionne en même temps que le popupalign pour placer le contenu du popup sur l'élément. La valeur par défaut pour le popupanchor et le popupalign est "none".
 

popupalign est un attribut facultatif pour indiquer quel côté du contenu du popup devra être attaché au popupanchor. 

<element popupalign="none | topleft | topright | bottomleft | bottomright" />

<element id="edit-context"
   popup="editor-popup" popupanchor="topleft"
   popupalign="bottomright" />

L'attribut popupalign peut être utilisé pour indiquer quel coin du contenu de popup est attaché au point de commencement. Si omis, topleft est l'argument par défaut. L'exemple ci-dessous montre comment créer les boutons traditionnels avec les menus associés au clique gauche de la souris qui existent dans le produit Communicator 4.x. Si omis, aucun ancrage ne se produit. Au lieu de cela le contenu du popup passe directement sous les coordonnées de l'événement de souris. Ce point (directement sous la souris ou attaché à un des quatre coins) s'appelle le point de commencement (originating point). 

Par défaut, le contenu du popup apparaît avec son point gauche supérieur situé directement sous le point auquel la souris de l'utilisateur pointe (sur certains tooltips le contenu est déplacé par la taille du curseur de souris). La valeur par défaut pour popupanchor et popupalign est "none".
 
 
 

chromeclass est un attribut facultatif pour indiquer quel type de chrome est chargé.  

<element chromeclass="string">

<splitter id="sidebar-splitter" collapse="before" persist="state hidden" 
    chromeclass="extrachrome" onclick="dumpStats();">>

chromeclass est employé pour étiqueter un élément comme appartenant à une certaine classe des objets chrome, par exemple, "toolbar", "menubar", etc. Il est utilisé comme aide à la méthode window.open, qui prend des indicateurs qui peuvent être utilisés pour montrer/cacher des éléments du chrome, par exemple, des barres d'outils, des barres de menu, etc... Puisque le chrome est totalement configurable en utilisant XUL, une certaine aide doit être fournie à la mise en place de l'implémentation window.open de telle sorte qu'elle sache placer les éléments spécifiques du chrome.  

context est un attribut facultatif pour indiquer quel type de chrome est chargé.  

<element context="string">

<box context="context" flex="100%">

XXX

ondraggesture est un auditeur d'événement pour l'événement draggesture.  draggesture est actionné chaque fois que l'utilisateur semble commencer une exécution de glisse (action de drag-and-drop).

<element ondraggesture="code auditeur d'évènement">

<menu value="Edit" ondraggesture="GetExtraImg()">

Il peut être difficile de détecter des gestes de glisse. L'événement  draggesture est actionné quand l'utilisateur maintient la souris cliquée et la déplace d'une certaine distance sans relever le bouton de la souris. Il appartient au concepteur de l'application de décider si le geste constitue une vraie glisse et s'il faut l'utiliser ou pas. Voir ondragdrop, ondragover, et ondragexit pour plus d'information sur le fonctionnement de drag-and-drop dans XUL.

ondragdrop est un auditeur d'événement pour l'événement dragdrop. 

<element ondragdrop="code auditeur d'évènement">

<toolbar id="PersonalToolbar" chromeclass="toolbar" persist="collapsed" 
  dragdroparea="innermostBox"
    ondraggesture="return BeginDragPersonalToolbar(event);"
    ondragdrop="return DropPersonalToolbar(event);"
    ondragover="return DragOverPersonalToolbar(event);">

Un événement dragdrop du widget est actionné quand l'utilisateur relâche un élément sur ce widget. Voir ondraggesture, ondragover et ondragexit pour plus d'information sur le fonctionnement de drag-and-drop dans XUL.

ondragover est un auditeur d'événement pour l'événement dragover.

<element ondragover="event handler code">

<toolbar id="PersonalToolbar" chromeclass="toolbar" persist="collapsed" 
  dragdroparea="innermostBox"
    ondraggesture="return BeginDragPersonalToolbar(event);"
    ondragdrop="return DropPersonalToolbar(event);"
    ondragover="return DragOverPersonalToolbar(event);">

dragover  dragover est actionné quand un objet est traîné au-dessus d'un élément. Par exemple, si vous traînez un objet au-dessus d'un toolbar avec l'intention de le relâcher sur une fenêtre de signet, l'attribut toolbar du dérouleur d'événement ondragover reçoit l'événement de dragover. Des événements de cette sorte peuvent être employés pour créer des styles pour les widgets avertis du mouvement de glisse au-dessus desquels des éléments sont glissés. Voir ondraggesture, ondragdrop et ondragexit pour plus d'information sur le fonctionnement de drag-and-drop dans XUL.

ondragexit est un auditeur d'événement pour l'événement dragexit. 

<element ondragexit="code auditeur d'évènement">

<menu value="Edit" ondragexit="doDragDone()">

dragexit est actionné quand une exécution de glisse a été terminée. Voir ondraggesture, ondragdrop et ondragover pour plus d'information sur le fonctionnement de drag-and-drop dans XUL.