Introducción a JSF con NetBeans

CréditosYann Arthur Nicolas

yannart@gmail.com

www.merlinsource.com

ObjetivoCrear una primera aplicacion con JSF utilizando los tags para JSP y un ManagedBean, entender la configuracion básica de el archivo faces­config.xml.

PrerequisitosJava 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.

ProyectoAbrimos 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! =) 

JSPTenemos 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 > 

JavaBeanFile ­> 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;         } } 

.propertiesCreamos 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.xmlAhora 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 proyectoSi 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: