PDF de programación - Introducción a JSF con Netbeans

Introducción a JSF con NetBeans

Créditos
Yann Arthur Nicolas
[email protected]
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: