JSF2.3 inputText – Ejemplos
Las etiquetas más comues son los campos de entrada, en JSF la etiqueta <h: inputText> se usa para representar un campo de entrada HTML de tipo texto (type = «text»).
Por ejemplo, Si declaramos la etiqueta <h:inputText value=»Hola Mundo!» /> tendremos lo siguiente:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html"> <h:head> <title>Ejemplo InputText!</title> </h:head> <h:body> <h:inputText value="Hola Mundo!" /> </h:body> </html>
El resultado, será el siguiente:
El código HTML generado:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="j_idt2">
<title>Ejemplo InputText!</title>
</head>
<body>
<input type="text" name="j_idt5" value="Hola Mundo!" />
</body>
</html>
La documentación de JSF 2.3 etiqueta inputText está disponible aqui.
Esta etiqueta debe ser utilizada dentro de un formulário. El formulário se declara con la etiqueta <h:form>. Por ejemplo:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html"> <h:head> <title>Ejemplo InputText!</title> </h:head> <h:body> <h:form> <h:inputText value="Hola Mundo!" /> </h:form> </h:body> </html>
El resultado visualmente será el mismo. Si examinamos el código HTML generado:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="j_idt2">
<title>Ejemplo InputText!</title>
</head><body>
<form id="j_idt5" name="j_idt5" method="post"
action="/ejemplo_web_jsf23/inputText.xhtml"
enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt5" value="j_idt5" />
<input type="text" name="j_idt5:j_idt7" value="Hola Mundo!" />
<input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0"
value="6640078970988897799:3315675560271652746" autocomplete="off" />
</form>
</body>
</html>
Observamos que al adicionar la etiqueta <h:form>, esta queda modificada. Y se crean dos etiquetas input de tipo «hidden». Esto lo vamos a detallar más adelante.
Por ahora debemos observar la etiqueta input de tipo «text». El atributo name fue modificado para j_idt5:j_idt7. La primera parte (antes de los dos puntos) se refiere al name de la etiqueta form. Esto quiere decir que el campo input pertenece al formulário con name=»j_idt5″.
Vamos a usar otro ejemplo:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Ejemplo InputText!</title>
</h:head>
<h:body>
<h:form id="form">
<h:inputText id="nombre" maxlength="20"
size="40" style="color:blue">
</h:inputText>
</h:form>
</h:body>
</html>
Visualmente el resultado será el mismo, pero las propiedades cambian. En este ejemplo, la longitud máxima del texto será de 20 caracteres. El tamanho del campo será de 40 caracteres. Y el color del texto será azul.
Examinando el código HTML generado:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="j_idt2">
<title>Ejemplo InputText!</title>
</head>
<body>
<form id="form" name="form" method="post"
action="/ejemplo_web_jsf23/inputText.xhtml"
enctype="application/x-www-form-urlencoded">
<input type="hidden" name="form" value="form" />
<input id="form:nombre" type="text" name="form:nombre"
maxlength="20" size="40" style="color:blue" />
<input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0"
value="2545176359500295845:-1995284098988621826" autocomplete="off" />
</form>
</body>
</html>
Observamos que los códigos aleatorios (ejemplo j_idt5) fueron subtituidos por el valor id (identificador) de las etiquetas. Por ejemplo el input de tipo texto tiene el identificador id=»form:nombre».
HTML5
HTML5 trajo varias novedades, una de estas novedades es el atributo placeholder de los elemento input. Placeholder define un texto de ayuda en un input vacio. Otra novedad es el atributo type del elemento input, que ahora tiene soporte para email, date, datetime e number.
Desde JSF 2.2 existe el soporte para nuevos recursos de HTML5, através de una carateristicas o recurso llamado Pass Through Attributes. Para poder usar tenemos que adicionar un nuevo namespace: xmlns:pt=»http://xmlns.jcp.org/jsf/passthrough
Vamos a definir un ejemplo, de una entrada que sea del tipo email y que tenga un texto de ayuda: «Entre con su Email».
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough" >
<h:head>
<title>Ejemplo InputText!</title>
</h:head>
<h:body>
<h:form id="form">
<h:inputText id="email" maxlength="60"
size="40" pt:type="email"
pt:placeholder="Entre com seu email">
</h:inputText>
</h:form>
</h:body>
</html>
El resultado será el siguiente:
El código HTML generado:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="j_idt2">
<title>Ejemplo InputText!</title>
</head>
<body>
<form id="form" name="form" method="post"
action="/ejemplo_web_jsf23/inputText.xhtml"
enctype="application/x-www-form-urlencoded">
<input type="hidden" name="form" value="form" />
<input id="form:email" name="form:email" maxlength="60"
size="40" placeholder="Entre com seu email" type="email" />
<input type="hidden" name="javax.faces.ViewState"
id="j_id1:javax.faces.ViewState:0"
value="-821338939930781408:-1786995836084470535" autocomplete="off" />
</form>
</body>
</html>
Observamos que fue adicionado placeholder=»Entre com seu email» type=»email».
Excelente tus tutoriales sobre JSF, si pudiera hacer videos de un pequeño curso de crud, te estaria muy agradecido