formulario simple con jsf

0

Por admin | Para la categoría de jsf (java server faces) | noticia del 03-02-2010

En este ejemplo se vera como funciona jsf con los formularios, y cual es el ciclo de ejecución de una aplicación web con jsf.

Al trabajar con formularios, no solamente tenemos que trabajar con el aspecto visual, sino también con la parte del modelo de datos y de configuración.

index.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="f"  uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h"  uri="http://java.sun.com/jsf/html"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
 <jsp:forward page="ejercicios.jsf"/>  
 
</body> 
</html>

En jsf, como estamos utilizando páginas jsp, podemos hacer uso de los tags de jsp, en este caso se utiliza jps:forward para hacer un reenvio a la página jsp de ejercicios. Esta página Ejercicios.jsp sigue siendo una página jsp pero en el reenvio utilizamos la extensión jsf. Esto es debido a que hemos configurado el fichero web xml para que responda a las páginas con la extensión jsf.

Ejercicios.jsp

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

 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="f"  uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib prefix="h"  uri="http://java.sun.com/jsf/html" prefix="h"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ejercicios</title>
<link rel="stylesheet" href="css/estilo.css" type="text/css" />
</head>
<body>
<f:view>
  <div id="contenedor">
  <div id="contenido">
 
  <div class="enlace">
  <h:outputLink value="formulario.jsf"><h:outputText value="formulario1"/></h:outputLink>
  </div>
 
  </div>   
 
  <div id="pie">
  <p>www.railsymas.com</p>
  </div>
 
  </div>
 
</f:view>
</body>
</html>

La página ejercicios.jsp ya contiene el contenedor de jsf f:view para mostrar los componentes jsf, un link con outputLink y outputText

Dentro del package beans se crea la clase usuario

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

package beans;
 
public class Usuario {
 
	private String nombre;
 
	public String getNombre() {
		return nombre;
	}
 
	public void setNombre(String nombre) {
		this.nombre = nombre;
	}
 
 
 
}

Esta es la clase que va estar asociada con el formulario, necesitamos crear la clase y configurarla el el fichero faces-config.xml

configuracion del bean

1
2
3
4
5

 <managed-bean>
    <managed-bean-name>usuarioBean</managed-bean-name>
    <managed-bean-class>beans.Usuario</managed-bean-class>
    <managed-bean-scope>request</managed-bean-scope>
    </managed-bean>

campos el bean-name hace el el id utilazado para poder usar el bean, class es el path de la clase bean y scope es el ámbito del bean en este caso por petición

formulario.jsp

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

<%@ page language="java" contentType="text/html; charset=UTF-8"   pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Formulario</title>
<link rel="stylesheet" href="css/estilo.css" type="text/css"/>
</head>
<body>
<f:view>
  <div id="contenedor">
   <div id="contenido">
   <h2> Formulario usuario</h2>
   <h:form styleClass="formulario">
    <h:outputText value="Introduce tu nombre"/>
    <br/>
    <h:inputText value="#{usuarioBean.nombre}"/>
    <br/>
    <br/>   
    <h:commandButton value="enviar" styleClass="boton" action="usuarioaction" />
   </h:form>
   </div>
    <div id="pie">
     <p> www.railsymas.com </p>
     </div>
   </div>
</f:view>
</body>
</html>

Ahora podemos crear un formulario asociado al bean, f:view para ver los componentes jsf, y antes claro los tags jsf
f y h, para core y html. Para introducir datos en el formulario inputText son campos de entrada de datos en jsf, esos datos se guardaran en el bean correspondiente, mediante el name declarado usuarioBean y con el punto accedemos a la propiedad del bean.

Para enviar los datos hacemos uso de commadButton value el valor visual del botón action la acción donde van los datos para ser tramitados y styleClass para hacer uso de una clase de css y modificar el aspecto visual del botón.

1
2
3
4

 <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.jsf</url-pattern>
  </servlet-mapping>

Cofiguración del servlet para jsf y rutas con *.jsf

El fichero de configuración faces-config.xml

1
2
3
4
5
6
7

 <navigation-rule>
    <from-view-id>/formulario.jsp</from-view-id>
    <navigation-case>
    <from-outcome>usuarioaction</from-outcome>
    <to-view-id>/pages/resultadousuario.jsp</to-view-id>    
    </navigation-case>
    </navigation-rule>

Declaración del archivo faces-confing.xml para la acción, estamos indicando que desde una página formulario.jsp se realiza una petición de acción llamada usuarioaction y el resultado se deriva a la vista /pages/resultadousuario.jsp

resultado usuario

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="f"  uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h"  uri="http://java.sun.com/jsf/html"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Resultado Usuario</title>
</head>
<body>
<f:view>
 <h2> <h:outputText value="Bienvenido"/> </h2>
 <h:outputText value="#{usuarioBean.nombre}"/>
</f:view>
</body>
</html>

Mostramos los valores del bean mediante outputText, indicando #{nombrebean.propiedad}

Escribe un comentario