Introducción a JSF con NetBeans

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: