web-dev-qa-db-fra.com

Objectif de h: outputLabel et de son attribut "for"

Voici un extrait de le <h:outputLabel> documentation des balises :

Rend un élément HTML "label". Rendre la valeur actuelle du composant sous forme de texte d'étiquette si elle est spécifiée. Si un attribut "for" est spécifié, recherchez le composant spécifié par la valeur de l'attribut "for" et affichez son ID client comme valeur de l'attribut "for". Si l'attribut "styleClass" est spécifié, restituez sa valeur comme la valeur de l'attribut "class".

Je suis confus à propos de l'attribut for. Quel est son objectif?

jsflabel
19
ThiepLV

Il est plus facile à comprendre si vous apprenez d'abord le HTML de base. JSF est dans le contexte de cette question à savoir simplement un générateur de code HTML. Il y a un excellent tutoriel HTML sur htmldog.com . Le <label>, tel que généré par <h:outputLabel>, est expliqué ici .

Balise HTML: étiquette

Libellé d'un élément de formulaire (input, textarea ou select).

Attributs facultatifs

for peut être utilisé pour associer l'étiquette à un élément de formulaire lorsque la valeur de for correspond à la valeur de l'attribut id d'un élément.

Exemple

<label for="email">Email address</label>
<input type="text" name="email" id="email" />

Ainsi, l'attribut for doit pointer vers le id du composant d'entrée auquel l'étiquette est destinée label. L'étiquette présente les avantages suivants en termes de référencement et de convivialité:

  1. Il raconte en texte l'élément d'entrée associé.
  2. Il concentre et active l'élément d'entrée associé lorsqu'il est lui-même focalisé/cliqué.

Comme JSF est dans le contexte de cette question simplement un générateur de code HTML, exactement la même chose s'applique aux composants JSF générant également ce code HTML.

<h:outputLabel for="email">Email address</h:outputLabel>
<h:inputText id="email" />

Les robots de recherche trouveront l'étiquette et indexeront l'élément d'entrée associé en tant que tel. Les lecteurs d'écran utilisés par les personnes malvoyantes trouveront l'étiquette et indiqueront son contenu par le son. Les utilisateurs finaux peuvent cliquer sur l'étiquette pour voir l'entrée associée se concentrer. Les cases à cocher/boutons radio seront sélectionnées lorsque vous cliquez sur l'étiquette. Les entrées de fichier ouvriront la boîte de dialogue de navigation lorsque vous cliquez sur l'étiquette. Etc.

Il convient de noter que relativement beaucoup de didacticiels JSF de faible qualité sont abusants le <h:outputLabel> dans le seul but d'imprimer du texte Hello World comme ceci:

<h:outputLabel value="#{bean.message}" />

Ce cas d'utilisation particulier est donc faux . Au lieu de cela, un <h:outputText> aurait dû être utilisé:

<h:outputText value="#{bean.message}" />

Ou même juste EL dans le texte du modèle :

#{bean.message}

Si vous rencontrez un tel didacticiel qui abuse du <h:outputLabel> de cette façon, il est fortement recommandé d'arrêter de le lire et de se diriger vers une ressource plus respectueuse de soi. C'est une forte indication que l'auteur du tutoriel ne sait rien du HTML de base alors que c'est à son tour une condition préalable assez importante avant d'apprendre JSF. Celui qui ne connaît presque rien du HTML de base n'est sûrement pas un bon professeur JSF. On ne sait jamais si une ressource d'apprentissage de si faible qualité continue dans une spirale descendante d'enseigner les mauvaises pratiques et il est donc préférable de se diriger vers une autre. Vous pouvez trouver des ressources sensées liées au bas de notre page wiki JSF et à jsf.zeef.com .

52
BalusC