Facelets ejemplo
Creando nuestra plantilla para la aplicación
Una de las novedades es que Facelets ya está integrado dentro del
propio estándar (antes lo podíamos usar pero eramos nosotros los
que nos teníamos que encargar de la integración ya que era un JAR
“de terceros”).
Facelets es un sistema de plantillas que nos va a permitir tanto crear plantillas o layouts de nuestra aplicación, como crear nuestros propios componentes por composición de forma muy sencilla (podemos hacer un componente como la suma/composición de otros componentes más pequeños).
Otra de las ventajas de usar Facelets es que nos libramos de las dichosas JSP, y no es que tenga nada en contra de ellas, pero su ciclo de vida no casa con el del diseño en base a componentes de JSF. Así, a partir de ahora, nos vamos a dedicar a escribir XHTML (es decir ficheros XML bien formados y válidos). Además Facelets procesan estos ficheros más rápido que las clásicas JSP, por lo que todo son ventajas ;)
Estas validaciones se definen con anotaciones en el propio Bean, por lo que habría que mirar el código de la clase
Se ve como estamos validando los atributos para que no sean nulos
y para que tengan un tamaño entre 6 y 128 caracteres.
Ojo, porque existe una limitación y es que aunque indiquemos el
Básicamente lo que vamos ha hacer con esta etiqueta es indicar que otros componentes queremos que se repinten cuando se produzca el evento (al pulsar el botón, al cambiar de valor, ...). Esto lo haremos con el atributo
En el ejemplo, en las líneas 16 y 23 se ve como estamos indicando que queremos repintar el componente que presenta los mensajes de error de la validación. Como el
En la línea 28 vemos como en el
En el ejemplo la página se buscará a la misma altura, pero podemos indicar rutas relativas. Por ejemplo, si la ruta empieza por / estaremos indicando que es relativa al dominio y nombre de aplicación actual.
Example facelets
Facelets es un sistema de plantillas que nos va a permitir tanto crear plantillas o layouts de nuestra aplicación, como crear nuestros propios componentes por composición de forma muy sencilla (podemos hacer un componente como la suma/composición de otros componentes más pequeños).
Otra de las ventajas de usar Facelets es que nos libramos de las dichosas JSP, y no es que tenga nada en contra de ellas, pero su ciclo de vida no casa con el del diseño en base a componentes de JSF. Así, a partir de ahora, nos vamos a dedicar a escribir XHTML (es decir ficheros XML bien formados y válidos). Además Facelets procesan estos ficheros más rápido que las clásicas JSP, por lo que todo son ventajas ;)
4.1. defaultLayout.xhtml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
| <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><h:head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <h:outputStylesheet library="css" name="style.css" /> <title>Autentia JSF 2 Tutorial</title></h:head><h:body><div id="layout"> <div id="top" class="top"> <ui:insert name="top"> <span id="title">Autentia JSF 2 Tutorial</span> <h:graphicImage library="img" name="logoAdictosAlTrabajo.png" alt="Adictos Al Trabajo" height="31" /> </a> </ui:insert> </div> <div id="content"> <h1><ui:insert name="title">??? View title ???</ui:insert></h1> <ui:insert name="content">??? View content ???</ui:insert></div> <div id="bottom"> <ui:insert name="bottom"> <span id="copyright">Esta aplicación se distribuye bajo licencia <a href="http://www.gnu.org/licenses/gpl-3.0-standalone.html">GPL</a></span> <h:graphicImage value="#{resource['img:poweredByAutentia_100x30x72dpi.png']}" /> </a> </ui:insert> </div> </div></h:body></html> |
Creando la página de login
loginView.xhtml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><ui:composition template="./defaultLayout.xhtml"> <ui:define name="title">Login</ui:define> <ui:define name="content"> <h:form> <h:panelGrid columns="3"> <h:outputLabel for="name" value="Nombre" /> <h:inputText id="name" label="Nombre" value="#{loginView.name}"> <f:validateBean /> <f:ajax render="nameError" /> </h:inputText> <h:message id="nameError" for="name" errorClass="error" /> <h:outputLabel for="password" value="Clave" /> <h:inputSecret id="password" label="Clave" value="#{loginView.password}"> <f:validateBean /> <f:ajax render="passwordError" /> </h:inputSecret> <h:message id="passwordError" for="password" errorClass="error" /> </h:panelGrid> <h:commandButton action="listTutorialsView" value="Entrar" /> </h:form> </ui:define></ui:composition></html> |
Validaciones según la JSR-303
En la línea 15 nos encontramos con<f:validateBean
/>. Con esta nueva etiqueta estamos indicando que
queremos usar una validación de Bean, es decir, que queremos usar
una validación basada en la JSR-303.Estas validaciones se definen con anotaciones en el propio Bean, por lo que habría que mirar el código de la clase
LoginView.java
para encontrarnos con:
1
2
3
4
5
6
7
8
9
| ... @NotNull@Size(min = 6, max = 128)private String name;@NotNull@Size(min = 6, max = 128)private String password;... |
Ojo, porque existe una limitación y es que aunque indiquemos el
@NotNull, si queremos que JSF 2 nos haga esta
validación, tendremos que indicar en el componente el atributo
required=”true” como hacíamos con JSF 1.5.3. Soporte para AJAX
JSF 2 ya viene con soporte para AJAX (este está basado en el soporte proporcionado por RichFaces). De esta forma tenemos una nueva etiquetaf:ajax que pondremos en el componente
donde queremos tener comportamiento AJAX; de forma que si la ponemos
en un h:commandButton se disparará al pulsar el botón,
y si la ponemos en un h:inputText se disparará al
cambiar de valor (cuando el input text pierde el foco).Básicamente lo que vamos ha hacer con esta etiqueta es indicar que otros componentes queremos que se repinten cuando se produzca el evento (al pulsar el botón, al cambiar de valor, ...). Esto lo haremos con el atributo
render.En el ejemplo, en las líneas 16 y 23 se ve como estamos indicando que queremos repintar el componente que presenta los mensajes de error de la validación. Como el
f:ajax lo
hemos asociado a un h:inputText, lo que va a ocurrir es
que cuando este campo de entrada pierda el foco, se lanzará un
evento de cambio de valor, se irá al servidor, se hará la
validación de bean según el JSR-303, y si se producen errores estos
se pintarán en el componente h:message indicado (nótese
que con el atributo render de f:ajax se
indican los ids de los componentes que se quieren repintar).5.4. Navegación
Con JSF 2 se simplifica enormemente la navegación. Podemos seguir usando las reglas de navegación en elfaces-config.xml,
pero JSF 2 añade soporte para “Convención frente a
Configuración”.En la línea 28 vemos como en el
h:commandButton, en
el atributo action, indicamos una cadena. Esta no es EL,
por lo que no estamos haciendo referencia a un backbean. Esta cadena
correspondería con el “outcome” que serviría para determinar la
regla de navegación a disparar. Pero como no hemos escrito ninguna
regla de navegación ¿qué es lo que va ha hacer JSF 2? Sencillo,
simplemente se limitará a buscar una página con el mismo nombre y
la extensión .xhtml. Es decir, si en nuestro ejemplo
hemos puesto action=”listTutorialsView”, JSF 2
intentará saltar a la vista listTutorialsView.xhtmlEn el ejemplo la página se buscará a la misma altura, pero podemos indicar rutas relativas. Por ejemplo, si la ruta empieza por / estaremos indicando que es relativa al dominio y nombre de aplicación actual.
Example facelets
Comentarios
Publicar un comentario