Introduccion a Java Server Faces usando NetBeans
Autor: Yann Arthur Nicolas
Fecha de Creación: 14/Noviembre/2006
Objetivo: Creear 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
con Tomcat 5.
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.
Entonces aquí vamos
Creando el proyecto en NetBeans 4.1 y
superior:
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 (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 boton Finish. Por fin
Luego tenemos que crear unos archivos
adicionales:
entrada.jsp
hola.jsp
Para esto haga clic derecho en la carpeta Web Pages de su proyecto y
luego NEW -> JSP…
Solo cambie el campo JSP File Name: entrada
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 por los siguientes:
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>
Ahora tenemos
que crear el JavaBean:
File -> New File …
Categories -> JavaBeans Object
File Types -> JavaBeans Component
Boton Next
Class Name: PersonaBean
Package: hola
Boton Finish
Remplazar el contenido del archivo ParsonaBean.java por:
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;
}
}
Ahora creamos el
archivo que contendra los mensajes utilizados en las JSP:
File -> New File
Categories -> Other
File Tipes -> Properties File
Boton 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=!
Ahora solo 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>
El archivo web.xml es el siguiente:
?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<context-param>
<param-name>com.sun.faces.verifyObjects</param-name>
<param-value>false</param-value>
</context-param>
<context-param>
<param-name>com.sun.faces.validateXml</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</param-value>
</context-param>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>
index.jsp
</welcome-file>
</welcome-file-list>
</web-app>
Ejecutamos el proyecto:
Run -> Run Main Proyect (o pulsamos F6)
Happy Hacking.
now I’ll be in touch..
emm… informative.
any updates coming ?