Sunteți pe pagina 1din 9

GUA DE LABORATORIO 1

JSF

Tecsup

JSF

LABORATORIO Objetivos: Implementar la capa de presentacin con JSF (JavaServer Faces)

Equipos, Materiales, Programas y Recursos:


PC con Sistema Operativo con soporte a Java. IDE para Java Navegador Web (recomendable Firefox) Contenedor de Servlets (recomendable Tomcat)

Introduccin: En la presente sesin, se detalla la implementacin de la capa de presentacin con el framework JSF (JavaServer Faces). JSF es un framework del lado del servidor para crear interfaces en base a componentes utilizado en las aplicaciones Web basadas en Java. Preparacin: El alumno debe haber revisado previamente el texto del curso, as como tambin, las presentaciones dadas en la clase de teora. Procedimiento y Resultados: Poniendo en marcha MyFaces 1. 2. 3. 4. Crear un proyecto Web dinmico en Eclipse. Elegir el Target runtime al Tomcat Elegir en configuracin JavaServer Faces v2.0, y continuar. En la pantalla de JSF Implementation Library, crear una nueva llamada myfaces. Luego elija la carpeta donde desempaquetar la implementacin Apache MyFaces. Agregar los JARs: myfaces-api-2.jar y myfaces-impl-2.jar

Dpto. de Informtica David Rodrguez drodriguez@tecsup.edu.pe

Pg. 1

Tecsup

JSF

EJERCICIO 1 Creando las VISTAS 5. En primer lugar, copiar todas las libreras de Apache MyFaces a la carpeta LIB del proyecto. Tambin se requiere agregar las libreras de JSTL en nuestro proyecto. 6. Modificar el web.xml <welcome-file-list> <welcome-file>faces/login.jsp</welcome-file> </welcome-file-list> 7. Crear la pgina login.jsp. Al momento de crear el JSP, darle a siguiente y elegir: New JavaServer Faces (JSF) Page (html) . Luego, utilizaremos las herramientas grficas que trae el Eclipse. Click derecho al archivo > Abrir con > Web Page Editor.

Cdigo: <%@ 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>Ingreso al Sistema</title> </head> <body> <f:view> <h:form> <table border="1"> <tr> <td>Usuario:</td> <td><h:inputText id="usuario" value="#{loginBean.usuario}"></h:inputText></td> </tr> <tr>
Dpto. de Informtica David Rodrguez drodriguez@tecsup.edu.pe Pg. 2

Tecsup

JSF

<td>Clave:</td> <td><h:inputSecret id="clave" value="#{loginBean.clave}"></h:inputSecret></td> </tr> <tr> <td colspan="2"><h:commandButton value="Enviar" action="#{loginBean.validar}"></h:commandButton><f:verbatim></f:verbatim></td> </tr> <tr> <td colspan="2"><h:outputText value="#{msg_error}"></h:outputText></td> </tr> </table> </h:form> </f:view> </body> </html>

8. Luego creamos la pgina principal.jsp en la carpeta admin.

Dpto. de Informtica David Rodrguez drodriguez@tecsup.edu.pe

Pg. 3

Tecsup

JSF

Cdigo: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF8"%> <%@ 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>Portada</title> </head> <body> <f:view> Bienvenido: <h:outputText value="#{USUARIO_ACTUAL.paterno} #{USUARIO_ACTUAL.materno}"></h:outputText> <br /> <h3>Mantenimientos</h3> <ul> <li><h:form> <h:commandLink action="#{rolBean.listar}"> <h:outputText value="Mantenimiento Roles"></h:outputText> </h:commandLink> </h:form></li> <li><h:form> <h:commandLink action="#{usuarioBean.buscar}"> <h:outputText value="Mantenimiento Usuarios"></h:outputText> </h:commandLink> </h:form></li> <li> <h:form> <h:commandLink action="#{loginBean.salir}"> <h:outputText value="Salir"></h:outputText> </h:commandLink> </h:form></li> </ul> </f:view> </body> </html>

de

de

Dpto. de Informtica David Rodrguez drodriguez@tecsup.edu.pe

Pg. 4

Tecsup

JSF

Configurando el CONTROLADOR 9. Abrir el archivo faces-config.xml y disear el flujo de pginas

Dpto. de Informtica David Rodrguez drodriguez@tecsup.edu.pe

Pg. 5

Tecsup

JSF

Creando el MODELO 10. Crear el paquete trastienda.bean. 11. Crear la clase LoginBean.java dentro de ese paquete. package trastienda.bean; public class LoginBean { private String usuario; private String clave; public String getUsuario() { return usuario; } public void setUsuario(String usuario) { this.usuario = usuario; } public String getClave() { return clave; } public void setClave(String clave) { this.clave = clave; } public String validar() { System.out.println(usuario); System.out.println(clave); return "correcto"; } } 12. Agregar al faces-config.xml la configuracin del bean:

13. Ejecutar el proyecto

Dpto. de Informtica David Rodrguez drodriguez@tecsup.edu.pe

Pg. 6

Tecsup

JSF

EJERCICIO 2 Realizar una calculadora.

Dpto. de Informtica David Rodrguez drodriguez@tecsup.edu.pe

Pg. 7

Tecsup

JSF

EJERCICIO 3 Realizar los mantenimiento de Roles y Usuarios.

Conclusiones: En la presente sesin, se detall la implementacin del framework JSF.

Dpto. de Informtica David Rodrguez drodriguez@tecsup.edu.pe

Pg. 8

S-ar putea să vă placă și