JSF inputText | Guía y EJEMPLOS- Jcodepoint

Rate this post

El componente h:inputText en JavaServer Faces (JSF) se usa para crear un campo de entrada de texto en una página web. Cuando se envía la página, el código en backend puede procesar el valor ingresado por el usuario en el campo de entrada.

El componente h:inputText también admite la validación y conversión de valores de entrada al tipo de datos deseado. Puede usar validadores y convertidores JSF para asegurarse de que la entrada del usuario esté en el formato correcto.

Si su proyecto requiere de otros tipos de campos de entrada de texto, JSF también cuenta con componentes para áreas de texto y campos de contraseña.

Contenido

Cómo usar JSF inputText

Para crear un campo de texto en un formulario web en JSF utilizamos la etiqueta inputText. Esta etiqueta debe estar ubicada en un <h:form> y al ser procesada la página se renderiza un <input type=»text»> de HTML. La etiqueta debe tener asignados al menos los atributos:

id	si necesitamos hacer referencia al componente. Cuando la página se procesa este atributo se renderiza como el atributo ‘name’ de la etiqueta de HTML.
value	para asignar un valor directamente o haciendo referencia a una variable en el backing bean.

El siguiente código muestra un formulario sencillo con un h:inputtext:

<h:form>
	<h:inputText id="nombre" value="JUAN" />
</h:form>

Al ser procesado se obtiene el siguiente elemento HTML:

<input id="j_idt2:nombre" type="text" name="j_idt2:nombre" value="JUAN">

Notar que los valores de los atributos id y name tienen un prefijo aleatorio seguido del valor que asignamos a id en la etiqueta <h:inputText>. Para que este valor sea descriptivo hay que asignar un id a <h:form>.

<h:form id="customerForm">
	<h:inputText id="nombre" value="JUAN" />
</h:form>

Al ser procesado se obtiene el siguiente HTML:

<input id="customerForm:nombre" type="text" name="customerForm:nombre" value="JUAN">

Para poder manipular el valor del campo de texto desde el Managed Bean correspondiente, necesitamos usar una expresión para hacer referencia al atributo del Bean:

<h:inputText id="nombre" value="#{exampleBean.nombre}" />

Placeholder: JSF inputText y HTML5

Usualmente colocaremos junto a nuestro inputText un label descriptivo con el nombre de dicho campo. Esto podemos hacerlo fácilmente utilizando la etiqueta JSF outputLabel.

Pero en su lugar, podemos optar por utilizar un placeholder. El problema con esta última opción es que el atributo no es soportado por nuestra etiqueta.

Para utilizar atributos de HTML5 que no son soportados por la etiqueta inputText se debe utilizar el namespace passthrough para que al ser procesado por JSF no dé error:

xmlns:p="http://xmlns.jcp.org/jsf/passthrough"

Una vez hecho esto podemos usar passthrough como atributo dentro la etiqueta para agregar el placeholder como sigue:

<h:inputText id="nombre" value="#{exampleBean.nombre}" p:placeholder="Ingrese Nombre" />

O bien utilizando el namespace core:

xmlns:f="http://xmlns.jcp.org/jsf/core"

y agregar el elemento anidado <f:passThroughAttribute>:

<h:inputText id="apellido" value="#{exampleBean.apellido}">
	<f:passThroughAttribute name="placeholder" value="Ingrese Apellido"/>			
</h:inputText>

En ambos casos se obtendrá el mismo resultado:

Ver Proyecto en GitHub

Conclusión

El componente JSF h:inputText es una herramienta poderosa para crear formularios en páginas web en JavaServer Faces. Admite la validación y conversión de valores de entrada al tipo de datos deseado. Se puede modificar con atributos específicos para controlar su comportamiento. Cuando se usa junto con un backing bean, el componente h:inputText puede almacenar valores de entrada del usuario para su posterior procesamiento por parte del código del lado backend. Al utilizar el componente h:inputText junto con otros componentes JSF y etiquetas HTML, los desarrolladores pueden crear interfaces de usuario modernas y dinámicas para sus aplicaciones web Java.