7.4 Focus et Selection

Cette section va décrire comment manipuler le focus et la sélection des éléments.

Eléments focalisés

L'élément focalisé est l'élément qui reçoit les évènements d'entrée. Si il y a trois boîtes de texte sur une fenêtre, celle qui détient le focus et celle dans laquelle l'utilisateur peut taper du texte. Seul un élément peut détenir le focus à la fois.

L'utilisateur peut changer le focus en cliquant sur un élément avec la souris ou en appuyant sur la touche Tab (tabulation). Quand on appuie sur la touche tabulation, le focus est passé à l'élément suivant. Pour revenir en arrière, il est possible d'appuyer sur les touches Maj (shift) et Tab simultanément.

Vous pouvez changer l'ordre dans lequel les élément seront focalisés quand l'utilisateur appuiera sur la touche Tab en ajoutant un attribut tabindex à un élément. Cet attribut doit être défini comme un nombre. Quand l'utilisateur appuiera sur la touche Tab, le focus changera pour l'élément avec l'index de tabulation consécutif le plus haut. Cela implique que vous pouvez ordonner les éléments en définissant des indices pour les éléments dans une séquence. Toutefois, vous n'aurez normalement pas à définir l'attribut tabindex. Dans ce cas, un appui sur la touche tabulation définira le focus sur l'élement affiché suivant. Vous avez seulement besoin de définir des indices de tabulation si vous voulez utiliser un ordre différent. Voici un exemple :

Exemple 7.4.1: Source Voir

<button label="Button 1" tabindex="2"/>
<button label="Button 2" tabindex="1"/>
<button label="Button 3" tabindex="3"/>

L'évènement focus est utilisé pour indiquer quand un élément obtient le focus. L'évènement blur (NdT : ou "flou") est utilisé pour indiquer quand un élément perd le focus. Vous pouvez réagir aux changements de focus en ajoutant un attribut onfocus ou onblur à un élément. Ils fonctionnent de la même façon que leur homologues HTML. Vous pouvez utiliser ces évènements pour mettre un élément en surbrillance ou afficher un texte dans la barre d'état. L'exemple suivant peut s'appliquer à une fonction de gestion des évènements de focus.

Exemple 7.4.2 : Source Voir

<script>

function displayFocus()
{
  var elem=document.getElementById('sbar');
  elem.setAttribute('value','Enter your phone number.');
}

</script>

<textbox id="tbox1"/>
<textbox id="tbox2" onfocus="displayFocus();"/>
<description id="sbar" value=""/>

L'évènement focus, quand il a lieu, va appeler la fonction displayFocus. Cette fonction va changer la valeur de l'étiquette texte. Nous pourrions développer cet exemple pour effacer le texte quand l'évènement blur a lieu. Généralement vous utiliserez les évènements focus et blur pour mettre à jour certaine parties de votre interface quand l'utilisateur sélectionne des éléments. Par exemple, vous pouvez mettre à jour un total quand l'utilisateur entre des valeurs dans d'autres champs, ou utiliser les évènements de focus pour vérifier certaines valeurs. N'affichez pas de boîte de messages pendant un évènement focus ou blur, car cela pourrait distraire l'utilisateur et est un mauvais design d'interface graphique.

Vous pouvez aussi ajouter des gestionnaires d'évènements dynamiquement en utilisant la fonction DOM addEventListener. Vous pouvez l'utiliser pour n'importe quel élément et type d'évènement. Elle prend trois paramètres, le type d'évènement, une fonction à exécuter quand l'évènement a lieu et un booléen indiquant si il faut capturer ou non l'évènement.

L'élément ayant le focus est pris en charge par un objet appelé répartiteur de commandes, et dont il ne peut y avoir qu'une instance par fenêtre. Le répartiteur de commandes garde trace de l'objet qui a le focus pendant que l'utilisateur se sert de l'interface. Le répartiteur de commandes a d'autres rôles, qui seront abordés plus tard dans la section des commandes. Pour le moment, nous allons nous intéresser à quelques fontions relatives au focus du répartiteur de commandes.

Vous pouvez récupérer le répartiteur de commandes d'une fenêtre en utilisant la propriété commandDispatcher du document. A partir de là, vous pouver obtenir l'élément focalisé avec la propriété focusedElement du répartiteur. L'exemple ci-dessous illustre ce cas.

Exemple 7.4.3: Source Voir

<window id="focus-example" title="Focus Example"
        onload="init();"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<script>
function init()
{
  addEventListener("focus",setFocusedElement,true);
}

function setFocusedElement()
{
  var focused = document.commandDispatcher.focusedElement;
  document.getElementById("focused").value = focused.tagName;
}
</script>

<hbox>
  <label control="username" value="User Name:"/>
  <textbox id="username"/>
</hbox>

<button label="Hello"/>
<checkbox label="Remember This Decision"/>

<label id="focused" value="-No focus-"/>

</window>

Dans cet exemple, un gestionnaire d'évènement de focus est attaché à la fenêtre. Nous voulons utiliser un gestionnaire de capture d'évènements, donc la méthode addEventListener doit être utilisée. Elle associe un gestionnaire de capture d'évènements à la fenêtre qui appelera la méthode setFocusedElement. Cette méthode prend l'élément focalisé du répartiteur de commandes et modifie une étiquette avec le nom de sa balise. Quand l'élément focalisé change, l'étiquette montre le nom de l'élément. Voici quelques choses à noter. Premièrement, quand la boîte de texte est focalisée, la propriété nom est 'html:input', et non 'textbox' comme on aurait pu s'y attendre. C'est parce que les boîtes de texte XUL sont implémentées avec le composant HTML input, donc l'évènement focus est en fait reçu pour cet élément. Deuxièmement, un clic sur l'étiquette de la boîte de texte change le focus vers la boîte de texte. C'est parce que l'étiquette possède un attribut control qui pointe vers l'id de la boîte de texte. Enfin, l'autre étiquette qui affiche la propriété nom n'a pas d'attribut control, donc un clic dessus n'affecte pas l'élément focalisé. Seuls les éléments focalisables peuvent être focalisés.

Si vous créez des éléments personnalisés, vous pourriez avoir besoin de décider si un élément peut prendre le focus ou non. Pour cela, vous pouvez utiliser la propriété de style spéciale -moz-user-focus. Cette propriété détermine si un élément peut être focalisé ou non. Par exemple, vous pourriez rendre une étiquette focalisable, comme dans l'exemple ci-dessous.

Exemple 7.4.4: Source Voir

<label id="focused" style="-moz-user-focus: normal;"
          onkeypress="alert('Label Focused');" value="Focus Me"/>

La propriété de style est reglée à normal. Vous pouvez aussi la définir à ignore pour désactiver le focus pour un élément. Toutefois, cela ne doit pas être utilisé pour désactiver un élément, l'attribut ou la propriété disabled doit être utilisée dans ce cas, car elle a été conçue pour. Une fois que l'étiquette dans l'exemple est focalisée, elle peut réagir aux évènements du clavier. Evidemment, l'étiquette ne donne aucune indication comme quoi elle est focalisée, car elle n'est normalement pas prévue pour.

Il existe plusieurs façons de changer l'élément focalisé. La plus simple est d'appeler la méthode focus de l'élément XUL que vous voulez focaliser. La méthode blur peut être utilisée afin d'enlever le focus d'un élément. L'exemple suivant met en oeuvre ces principes:

Exemple 7.4.5: Source Voir

<textbox id="addr"/>

<button label="Focus" oncommand="document.getElementById('addr').focus()"/>

Sinon, vous pouvez utiliser les méthodes advanceFocus et rewindFocus du répartiteur de commandes. Ces méthodes changent le focus respectivement vers le suivant ou le précédent élément de la séquence. C'est ce qui se passe quand l'utilisateur appuie sur Tab ou Maj+Tab.

Pour les boîtes de texte, un attribut spécial, focused est ajouté quand l'élément obtient le focus. Vous pouvez vérifier la présence de cet attribut pour déterminer si l'élément a le focus, soit depuis un script, soit depuis une feuille de styles. Il aura la valeur true si la boîte de texte a le focus, et le cas échéant l'attribut ne sera pas présent.

Sélection de texte

Lorsque vous travaillez avec une boîte de texte, vous pouvez récupérer uniquement le texte que l'utilisateur a sélectionné. Ou alors vous pouvez changer la sélection.

Les boîtes de texte XUL offrent une possibilité de récupérer et de modifier une sélection. La plus simple et de sélectionner tout le texte de la boîte. Cela implique l'utilisation de la méthode select de la boîte de texte.

tbox.select();

Toutefois, vous pouvez aussi sélectionner seulement une partie du texte. Pour faire cela utilisez la fonction setSelectionRange. Elle prend deux paramètres, le premier est le caractère de départ et le second le caractère suivant le dernier que vous voulez sélectionner. Les valeurs commencent à zéro, donc le premier caractère est 0, le second 1 et ainsi de suite.

tbox.setSelectionRange(4,8);

Cet exemple ca sélectionner le cinquième caractère affiché, ainsi que le sixième, le septième et le huitième. Si il n'y avait que six caractères présents dans le champ, seulement le cinquième et le sixième auraient été sélectionnés. Il n'y aurait pas d'erreur.

Si vous utilisez la même valeur pour les deux paramètres, le début et la fin de la sélection changent à la même position. Cela revient à changer la position du curseur dans la boîte de texte. Par exemple, la ligne ci-dessous peut être utilisée pour bouger au début du texte.

tbox.setSelectionRange(0,0);

Vous pouvez récupérer la sélection en utilisant les propriétés selectionStart et selectionEnd. Ces propriétés sont définies respectivement au début et à la fin de la sélection. Si les deux sont définies à la même valeur, aucun texte n'est sélectionné, mais les valeurs seront définies à la position du curseur. Une fois que vous avez les valeur de début et de fin, vous pouvez récupérer la section de chaîne du texte.

Vous pouvez récupérer et modifier le contenu de la boîte de texte en utilisant la propriété value.

Une autre propriété utile des boîtes de texte est la propriété textLength, qui contient le nombre total de caractères dans le champ.

Sélection d'autres éléments

Plusieurs autres éléments fournissent des méthodes afin de récupérer l'élément sélectionné dans ceux-ci. Les boîtes de listes, les menu de listes et les boîtes d'onglets fournissent une propriété selectedIndex que vous pouvez utiliser pour obtenir l'index de l'élement sélectionné dans le menu, ou de l'onglet sélectionné.

Si vous assignez une valeur à la propriété selectedIndex, l'élément sélectionné est changé.

---

Nous avons vu comment obtenir et définir les sélections pour les boîtes de texte. La prochaine fois, nous découvrirons comment obtenir et définir les sélections pour les arbres.