jsf - showcase - Propósito de la h: outputLabel y su atributo "para"

primefaces outputlabel style

Question

Aquí hay un extracto de la documentación de la etiqueta <h:outputLabel> :

Representa un elemento de "etiqueta" HTML. Procese el valor actual del componente como texto de etiqueta si se especifica. Si se especifica un atributo "for", busque el componente especificado por el valor del atributo "for" y presente su id de cliente como el valor del atributo "for". Si se especifica el atributo "styleClass", representa su valor como el valor del atributo "class".

Estoy confundido acerca del atributo for . ¿Cual es su propósito?

Answer 1

Es más fácil de entender si aprendes HTML básico primero. JSF se encuentra en el contexto de esta pregunta, es decir, simplemente un generador de código HTML. Hay un excelente tutorial de HTML en htmldog.com . La <label> , según lo generado por <h:outputLabel> , se explica here .

Etiqueta HTML: etiqueta

Etiqueta para un elemento de formulario ( input , área de textarea o select ).

Atributos opcionales

for se puede usar para asociar la etiqueta a un elemento de formulario cuando el valor de for coincide con el valor del atributo id de un elemento.

Ejemplo

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

Por lo tanto, el atributo for debe apuntar al id del componente de entrada que la etiqueta intenta etiquetar . La etiqueta tiene las siguientes ventajas de SEO y usabilidad:

1. Cuenta en texto sobre el elemento de entrada asociado.
2. Enfoca y activa el elemento de entrada asociado cuando se enfoca / hace clic en sí mismo.

Como JSF está en el contexto de esta pregunta simplemente un generador de código HTML, exactamente lo mismo se aplica a los componentes JSF que generan ese HTML también.

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

Los robots de búsqueda encontrarán la etiqueta e indexarán el elemento de entrada asociado como tal. Los lectores de pantalla utilizados por personas con discapacidad visual encontrarán la etiqueta y dirán su contenido por sonido. Los usuarios finales pueden hacer clic en la etiqueta para ver cómo se enfoca la entrada asociada. Las casillas de verificación / botones de radio se seleccionarán al hacer clic en la etiqueta. Las entradas de archivo abrirán el cuadro de diálogo de navegación al hacer clic en la etiqueta. Etcétera.

Se debe tener en cuenta que relativamente muchos tutoriales de JSF de baja calidad están abusando de <h:outputLabel> con el único propósito de imprimir un texto de Hello World como:

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

Este caso de uso particular es por lo tanto incorrecto . En su lugar, se debería haber usado <h:outputText> :

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

O incluso simplemente EL en el texto de la plantilla :

#{bean.message}

Si alguna vez encuentra un tutorial de este tipo que está abusando de <h:outputLabel> esta manera, se recomienda encarecidamente que deje de leerlo y <h:outputLabel> a un recurso más respetado. Esta es una clara indicación de que el autor del tutorial no sabe nada sobre el HTML básico, lo que a su vez es un requisito previo bastante importante antes de aprender JSF. Uno que apenas sabe nada sobre HTML básico seguramente no es un buen profesor de JSF. Nunca se sabe si un recurso de aprendizaje de tan baja calidad continúa en una espiral descendente de enseñanza de malas prácticas y, por lo tanto, es mejor dirigirse a una diferente. Puede encontrar recursos sanos vinculados en la parte inferior de nuestra página wiki JSF y en jsf.zeef.com .