Introducción a JSF con NetBeans Créditos Yann Arthur Nicolas yannart@gmail.com www.merlinsource.com Objetivo Crear una primera aplicacion con JSF utilizando los tags para JSP y un ManagedBean, entender la configuracion básica de el archivo faces config.xml. Prerequisitos Java basico, HTML básico, un IDE que soporte JSF y un contenedor JSP / Servlets. Los pasos son indicados para NetBeans 5 y superior con Tomcat 5. Nota: Como se hizo el tutorial en entorno Linux, las diagonales son "/" para Windows normalmente la barra esta invertida "\" pero el entorno NetBeans permite que bajo Windows se utilice el formato Unix. Qué vamos a hacer? Habrá una pagina principal (index.jsp) que tendrá un enlace a otra (entrada.jsp) con un formulario para poner nuestro nombre. Al pulsar el botón del formulario, se validara si el campo no esta vacío y si el numero de caracteres esta en cierto rango (de 2 a 15). Si la entrada es correcta, se muestra un mensaje de bienvenida con el nombre ingresado, si hay un error, se recarga la pagina con el formulario y se muestra un mensaje especificando el tipo de error.
Proyecto Abrimos NetBeans y creamos un nuevo proyecto: File > New Project Categories > Web > Web Application Aparece la ventana New Web Application Vamos a dejar casi todo como viene por default: Project Name: Hola Project Location: dejar como viene por default o cambiar a cambiar a un directorio particular (ejemplo: /home/yannart/proyectos) Project Folder: se llena solo Source Structure: Java BluePrints Server: Bundled Tomcat (para los que quieran usar Sun Application Server o JBoss, da lo mismo) Java EE Version: J2EE 1.4 (los que utilicen el server de sun pueden usar en 1.5) Context Path: dejar como viene. (/Hola) Ponemos las dos palomas en los checkbox. Pulsamos el botón Next. Ponemos la paloma en el checkbox JavaServer Faces Dejamos en blanco el checkbox de Struts Servlet URL Mapping: dejamos como viene (/faces/*) Ponemos la paloma en el checkbox Validate XML Dejamos en blando el checkbox Verify Objects
Pulsamos el botón Finish. Por fin! =)
JSP Tenemos que crear unos archivos adicionales a los que se generaron al crear el proyecto: entrada.jsp hola.jsp Para esto hacemos clic derecho en la carpeta "Web Pages" de su proyecto y luego "NEW > JSP..." Solo cambiamos el campo JSP File Name: Ponemos la paloma en el checkbox JavaServer Facesentrada Pulse Finish Repita los mismos pasos para crear hola.jsp Podemos borrar el archivo welcomejsf.jsp ya que no se utilizara: clic derecho en el archivo welcomejsf.jsp de la carpeta Web Pages y luego Delete. Ahora va a remplazar el contenido de cada archivo jsp. index.jsp < %@page contenttype="text/html"% > < %@page pageencoding="utf 8"% >
<!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 > tutorial JSF< /title > < /head > < body > < h1 > Bienvenido al tutorial JSF< /h1 > < br/ > < a href="./faces/entrada.jsp" > Dar tu nombre< /a > < /body > < /html > entrada.jsp < % Importa los tags html para jsf % > < %@ taglib uri="http://java.sun.com/jsf/html" prefix="h" % > < % Importa los tags de control para jsf % > < %@ taglib uri="http://java.sun.com/jsf/core" prefix="f" % > < % Utiliza el siguiente archivo de recursos % > < f:loadbundle basename="hola.recursos.mensajes" var="msj"/ > < html > < head > < title > Dar nombre< /title > < /head > < body > < f:view > < h1 > < % Pintamos texto % > < h:outputtext value="#{msj.cabezal}"/ > < /h1 > < p > < % Pintamos mensajes de error % > < h:messages style="color:red"/ > < /p > < % Formulario % > < h:form id="helloform" > < % Pintamos texto % > < h:outputtext value="#{msj.dar_nombre}"/ > < % Campo de texto obligatorio cuyo valor se manda al atributo nombre del Bean personabean % > < h:inputtext value="#{personabean.nombre}" required="true" > < % la entrada debe de tener entre 2 y 15 caracteres % > < f:validatelength minimum="2" maximum="15"/ >
< /h:inputtext > < % boton que ejecuta la accion % > < h:commandbutton action="saluda" value="#{msj.boton}" / > < /h:form > < /f:view > < /body > < /html >
hola.jsp < % Importa los tags html para jsf % > < %@ taglib uri="http://java.sun.com/jsf/html" prefix="h" % > < % Importa los tags de control para jsf % > < %@ taglib uri="http://java.sun.com/jsf/core" prefix="f" % > < % Utiliza el siguiente archivo de recursos % > < f:loadbundle basename="hola.recursos.mensajes" var="msj"/ > < html > < head > < title > Bienvenido< /title > < /head > < body > < f:view > < h1 > < % pintamos textos % > < h:outputtext value="#{msj.signo1}" / > < h:outputtext value="#{msj.saludo1}" / > < % se recupera el valor nombre del Bean personabean % > < h:outputtext value="#{personabean.nombre}" / > < h:outputtext value="#{msj.saludo2}" / > < h:outputtext value="#{msj.signo2}" / > < /h1 > < /f:view > < /body > < /html >
JavaBean File > New File... Categories > JavaBeans Object File Types > JavaBeans Component Boton Next Class Name: PersonaBean Package: hola Botón Finish Remplazamos el contenido del archivo ParsonaBean.java: package hola; import java.beans.*; import java.io.serializable; /** * @author yannart */ public class PersonaBean { private String nombre; public String getnombre() {
} return nombre; } public void setnombre(string nombre) { this.nombre = nombre; }
.properties Creamos el archivo que contendrá los mensajes utilizados en las JSP: File > New File Categories > Other File Tipes > Properties File Botón Next Cambiamos los siguientes campos: File Name: mensajes Folder: src/java/hola/recursos Pulsamos Finish Cambiamos el contenido de este archivo por: #lista de mensajes utilizados en las JSP cabezal=tutorial JSF dar_nombre=por favor escriba su nombre: saludo1=bienvenido saludo2= a JSF boton=saludarte signo1= signo2=!
faces config.xml Ahora solo nos falta remplazar el contenido del archivo faces config.xml de la carpeta Configuration faces: <?xml version="1.0"? > <!DOCTYPE faces config PUBLIC " //Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN" "http://java.sun.com/dtd/web facesconfig_1_1.dtd" > < faces config > < navigation rule > < from view id > /entrada.jsp< /from view id > < navigation case > < from outcome > saluda< /from outcome > < to view id > /hola.jsp< /to view id > < /navigation case > < /navigation rule > < managed bean > < managed bean name > personabean< /managed bean name > < managed bean class > hola.personabean< /managed bean class > < managed bean scope > request< /managed bean scope > < /managed bean > < /faces config >
Ejecución del proyecto Si hicimos todo bien, deberíamos de ejecutar sin problema el proyecto: Run > Run Main Proyect (o pulsamos F6) Algunas capturas de la ventana de navegador: