JSF
(JavaServer Faces)
Para qué sirve?
Java
Server Faces (JSF) es un framework de aplicaciones web basado en Java
dedicado a simplificar la integración de desarrollo de interfaces de
usuario basadas en web. JavaServer Faces es una
tecnología de visualización estandarizada, que se ha formalizado en una
especificación a través de Java Community Process.
Java Server Faces nos sirve para conectarnos a base de datos, manejar sistemas de plantillas, validadores, trabajando con desarrollos limpios y con código realmente efectivo, JSF es un framework utilizado mayormente en las empresas especificamente en las empresas asociadas en el mundo de las finanzas y nos entrega una capa de seguridad bastante alto, entre otros.
Instalación y Configuración
Las versiones con las que podrás usar JSF son:
Ciclo de vida de JSF
- Restaurar la vista ( restore view ). En este paso se obtiene el árbol de componentes correspondiente a la vista JSF de la petición. Si se ha generado antes se recupera, y si es la primera vez que el usuario visita la página, se genera a partir de la descripción JSF.
- Aplicar los valores de la petición ( apply request values ). Una vez obtenido el árbol de componentes, se procesan todos los valores asociados a los mismos. Se convierten todos los datos de la petición a tipos de datos Java y, para aquellos que tienen la propiedad inmediate a cierta, se validan, adelantándose a la siguiente fase.
- Procesar las validaciones ( process validations ). Se validan todos los datos. Si existe algún error, se encola un mensaje de error y se termina el ciclo de vida, saltando al último paso (renderizar respuesta).
- Actualizar los valores del modelo ( update model values ). Cuando se llega a esta fase, todos los valores se han procesado y se han validado. Se actualizan entonces las propiedades de los beans gestionados asociados a los componentes.
- Invocar a la aplicación ( invoke application) . Cuando se llega a esta fase, todas las propiedades de los beans asociados a componentes de entrada ( input ) se han actualizado. Se llama en este momento a la acción seleccionada por el usuario.
- Renderizar la respuesta ( render response ).
Patrón MVC (Modelo Vista Controlador)
Ejemplo:
- Vista : Toda la vista de la aplicación se implementa con un único fichero JSF, el fichero calculator.xhtml . En él se definen varios componentes, organizados en dos elementos de tipo h:form . El primero contiene la calculadora propiamente dicha: los campos para los números, la operación, el botón para calcular el resultado y el resultado propiamente dicho. Al final se añade un enlace con una acción para activar el cambio de operación. El segundo elemento es la lista de operaciones y el botón para confirmar el cambio de la operación activa. Este componente y el enlace para activarlo se ocultan y se muestran, dependiendo del estado de la interfaz. Veremos cómo se consigue este efecto.
- Modelo . Se utiliza un único bean, llamado calculatorBean , en el que se han definido las propiedades firstNumber , secondNumber , operation y result . Además, se utiliza la clase CalculatorBO que implementa la "lógica de negocio" y que es con la que que realizamos finalmente la operación.
- Controlador . El controlador es un objeto de la clase CalculatorController que tiene la responsabilidad de realizar la operación entre los dos números y actualizar el bean con el resultado y también de guardar y modificar las propiedades que determinan la visibilidad de los componentes. El controlador debe tener acceso al bean calculatorBean que define el modelo. Para eso se define en el controlador la propiedad numbers que se inicializa con el bean calculatorBean en el fichero de configuración faces-config.xml
Fichero calculator.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
41
42
43
44
45
46
47
48
49
50
51
52
| <h:head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><LINK href="<%=request.getContextPath()%>/css/mystyle.css" rel="stylesheet" type="text/css"><title>Calculadora</title></h:head><h:body> <h1>Calculadora</h1> <h:form> <h:panelGrid columns="3"> <h:outputLabel value="Primer número"/> <h:inputText id="firstNumber" value="#{calculatorBean.firstNumber}" required="true"/> <h:message for="firstNumber"/> <h:outputLabel value="Segundo número"/> <h:inputText id="secondNumber" value="#{calculatorBean.secondNumber}" required="true"/> <h:message for="secondNumber" /> <h:outputLabel value="Operación"/> <h:outputLabel value="#{calculatorBean.operation}" styleClass="strong"/> <h:outputLabel value=""/> </h:panelGrid> <h:commandButton value="Calcular" action="#{calculatorController.doOperation}"/> <h:outputText value="Resultado: #{calculatorBean.result}"/><br/> <p></p> <h:commandLink rendered="#{calculatorController.newOperationCommandRendered}" action="#{calculatorController.doNewOperation}" value="Cambiar operación"/> </h:form><br/> <p></p> <h:form rendered="#{calculatorController.selectOperationFormRendered}"> <h:selectOneListbox value="#{calculatorBean.operation}"> <f:selectItem itemValue="+" itemLabel="suma"/> <f:selectItem itemValue="-" itemLabel="resta"/> <f:selectItem itemValue="*" itemLabel="multiplicación"/> <f:selectItem itemValue="/" itemLabel="división"/> </h:selectOneListbox><br/> <h:commandButton action="#{calculatorController.doSelectOperation}" value="Selecciona operación"/> </h:form></h:body></html> |
Comparativa entre las etiquetas de formulario de JSF vs. Formulario HTML
JSF/HTML
Código con JSF
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"> <h:head> <title>Ejemplo JSF 2.2</title> </h:head> <h:body> <h3>JSF 2.2 Ejemplo formulario - index.xhtml</h3> <h:form> <h:inputText value="#{holaBean.nombre}"></h:inputText> <h:commandButton value="Bienvenido" action="bienvenido"></h:commandButton> </h:form> </h:body></html> Código con HTML
<FORM action="http://algunsitio.com/prog/usuarionuevo" method="post">
<P>
<LABEL for="nombre">Nombre: </LABEL>
<INPUT type="text" id="nombre"><BR>
<LABEL for="apellido">Apellido: </LABEL>
<INPUT type="text" id="apellido"><BR>
<LABEL for="email">email: </LABEL>
<INPUT type="text" id="email"><BR>
<INPUT type="radio" name="sexo" value="Varón"> Varón<BR>
<INPUT type="radio" name="sexo" value="Mujer"> Mujer<BR>
<INPUT type="submit" value="Enviar"> <INPUT type="reset">
</P>
</FORM>
¿Qué es un facelets?
Tiene como objetivo facilitar las tareas relacionadas con la presentación. Permite realizar el diseño de la web de forma libre y posteriormente asociarle componentes JSF específicos. De esta manera se consigue una menor dependencia del lenguaje y se dota al diseñador de más libertad.
Los Facelets han sido creados para reemplazar a las jsp’s como mecanismo para declarar vistas. Es un lenguaje ligero de declaración de
páginas para la construcción de vistas JavaServer Faces usando
plantillas de estilo HTML y la creación de árboles de componentes. Con
las siguientes características:
- Usa XHTML para la creación de páginas web
- Soporta la librería de etiquetas de facelets, además de Jsf y JSTL
- Soporta expresiones EL
- Plantillas para páginas y componentes
- Reutilización de código, por el uso de plantillas y la composición de componentes
- Muy rápido de compilar y renderizar, con validaciones en tiempo de compilación
Uso de las siguientes etiquetas de facelets:
c:ForEach
Es una etiqueta usada comúnmente, ya que itera sobre una colección de objetos.
Atributos
| Atributo | Descripción | Necesario | Defecto |
|---|---|---|---|
| items | Información para recorrer | No | Ninguna |
| begin | Elemento para empezar (0 = primer ítem, 1 = segundo elemento, ...) | No | 0 |
| end | Elemento para terminar con (0 = primer elemento, 1 = segundo elemento, ...) | No | último elemento |
| step | Procesar cada paso artículos | No | 1 |
| var | Nombre de la variable para exponer el elemento actual | No | Ninguna |
| varStatus | Nombre de la variable para exponer el estado de bucle | No | Ninguna |
<%@ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix = "c" %>
<html>
<head>
<title><c:forEach> Tag Example</title>
</head>
<body>
<c:forEach var = "i" begin = "1" end = "5">
Item <c:out value = "${i}"/><p>
</c:forEach>
</body>
</html>
Lo que mostrara en nuestro navegador sera lo siguiente:
Item 1
Item 2
Item 3
Item 4
Item 5
h:panelGrid
La etiqueta 'h: panel' muestra un elemento HTML de "tabla".
<h:panelGrid id = "panel" columns = "2" border = "1"
cellpadding = "10" cellspacing = "1">
<f:facet name = "header">
<h:outputText value = "Login"/>
</f:facet>
<h:outputLabel value = "Username" />
<h:inputText />
<h:outputLabel value = "Password" />
<h:inputSecret />
<f:facet name = "footer">
<h:panelGroup style = "display:block; text-align:center">
<h:commandButton id = "submit" value = "Submit" />
</h:panelGroup>
</f:facet>
</h:panelGrid>
Salida Renderizada
<table id = "j_idt10:panel" border = "1" cellpadding = "10" cellspacing = "1">
<thead>
<tr><th colspan = "2" scope = "colgroup">Login</th></tr>
</thead>
<tfoot>
<tr>
<td colspan = "2">
<span style = "display:block; text-align:center">
<input id = "j_idt10:submit" type = "submit"
name = "j_idt10:submit" value = "Submit" />
</span>
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td><label>Username</label></td>
<td><input type = "text" name = "j_idt10:j_idt17" /></td>
</tr>
<tr>
<td><label>Password</label></td>
<td><input type = "password" name = "j_idt10:j_idt21" value = "" /></td>
</tr>
</tbody>
</table>
Integración a XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>JSF Tutorial!</title>
</head>
<body>
<h2>h:panelGrid example</h2>
<hr />
<h:form>
<h:panelGrid id = "panel" columns = "2" border = "1"
cellpadding = "10" cellspacing = "1">
<f:facet name = "header">
<h:outputText value = "Login"/>
</f:facet>
<h:outputLabel value = "Username" />
<h:inputText />
<h:outputLabel value = "Password" />
<h:inputSecret />
<f:facet name = "footer">
<h:panelGroup style = "display:block; text-align:center">
<h:commandButton id = "submit" value = "Submit" />
</h:panelGroup>
</f:facet>
</h:panelGrid>
</h:form>
</body>
</html>
h:selectOneMenu
La etiqueta h: selectOneMenu representa un elemento de entrada HTML del tipo "select" con tamaño no especificado.Validación en JSF.
<h:selectOneMenu value = "#{userData.data}">
<f:selectItem itemValue = "1" itemLabel = "Item 1" />
<f:selectItem itemValue = "2" itemLabel = "Item 2" />
</h:selectOneMenu>
Validación en JSF
JSF viene con algunos validadores habituales de campos. Por ejemplo, si
queremos que un número esté dentro de un rango, podemos poner el
siguiente código html en nuestro formulario.<h:form>
<h:inputText id="idNumero2" required="true">
<f:validateLongRange minimum="-10" maximum="10"></f:validateLongRange>
</h:inputText>
<h:commandButton action="bien.xhtml" value="Enviar">
</h:commandButton>
<h:message for="idNumero2"></h:message>
</h:form>
Validadores Disponibles
- f:validateBean
- f:validateDoubleRange
- f:validateLength
- f:validateLongRange
- f:validateRegex
- f:validateRequired
AJAX, crear un ejemplo
- JAX significa Asynchronous JavaScript y XML.
- Ajax es una técnica para utilizar HTTPXMLObject de JavaScript para enviar datos al servidor y recibir datos desde el servidor de forma asíncrona.
- Así, utilizando la técnica Ajax, Javascript intercambia datos con código de servidor, actualizaciones partes de página Web sin tener que recargar la página entera.
<f:ajax execute="input-component-name" render="output-component-name" />
Ejemplo
<?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">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:tp="http://java.sun.com/jsf/composite/tutorialspoint">
<h:head>
<title>JSF tutorial</title>
</h:head>
<h:body>
<h2>Ajax Example</h2>
<h:form>
<h:inputText id="inputName" value="#{userData.name}"></h:inputText>
<h:commandButton value="Show Message">
<f:ajax execute="inputName" render="outputMessage" />
</h:commandButton>
<h2><h:outputText id="outputMessage"
value="#{userData.welcomeMessage !=null ?
userData.welcomeMessage : ''}"
/></h2>
</h:form>
</h:body>
</html>
POJO (Plain old Java object)
Puede crear
aplicaciones EJB con posibilidades de persistencia mediante beans de empresa y entidades creadas a partid de objetos
POJO.
La complejidad de la infraestructura
Java 2 Enterprise Edition
solía ser un gran inconveniente para su adopción. La especificación
Java EE 5 buscaba una
experiencia de desarrollo más simple, convirtiendo los objetos POJO en la base de su diseño. El modelo de programación
POJO le permite realizar pruebas unitarias fuera del servidor de aplicaciones, facilitando todo el proceso de
programación.
Objeto POJO simple
public class Test {
String name;
/**
* Esto es un constructor para un objeto de prueba.
**/
public Test(){
name = "Jane";
}
}
Convirtiendo un POJO en un bean de sesión
@Stateless
String class Test {
String name;
/**
* Esto es un constructor para un objeto de prueba.
**/
public Test () {
name = "jane";
}
}
Nota: En una aplicación real este objeto necesita lógica de negocio adicional.
Referencias:
No hay comentarios:
Publicar un comentario