introducción a jsf con netbeans€¦ · introducción a jsf con netbeans créditos yann arthur...
TRANSCRIPT
Introducción a JSF con NetBeans
CréditosYann Arthur Nicolas
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 facesconfig.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="UTF8"% >
< !DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html > < head > < meta httpequiv="ContentType" content="text/html; charset=UTF8" > < 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=!
facesconfig.xmlAhora solo nos falta remplazar el contenido del archivo facesconfig.xml de la carpeta Configuration faces:
< ?xml version="1.0"? > < !DOCTYPE facesconfig PUBLIC "//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN" "http://java.sun.com/dtd/webfacesconfig_1_1.dtd" >
< facesconfig > < navigationrule > < fromviewid > /entrada.jsp< /fromviewid > < navigationcase > < fromoutcome > saluda< /fromoutcome > < toviewid > /hola.jsp< /toviewid > < /navigationcase > < /navigationrule >
< managedbean > < managedbeanname > personaBean< /managedbeanname > < managedbeanclass > hola.PersonaBean< /managedbeanclass > < managedbeanscope > request< /managedbeanscope > < /managedbean > < /facesconfig >
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: