Introducción a JSF con NetBeans

Tamaño: px

Comenzar la demostración a partir de la página:

Download "Introducción a JSF con NetBeans"

Juan Francisco Cordero Vázquez
hace 7 años
Vistas:

1 Introducción a JSF con NetBeans Créditos Yann Arthur Nicolas yannart@gmail.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:

2 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

3 Pulsamos el botón Finish. Por fin! =)

4 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"% >

5 <!DOCTYPE HTML PUBLIC " //W3C//DTD HTML 4.01 Transitional//EN" " > < 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=" prefix="h" % > < % Importa los tags de control para jsf % > < %@ taglib uri=" 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"/ >

6 < /h:inputtext > < % boton que ejecuta la accion % > < h:commandbutton action="saluda" value="#{msj.boton}" / > < /h:form > < /f:view > < /body > < /html >

7 hola.jsp < % Importa los tags html para jsf % > < %@ taglib uri=" prefix="h" % > < % Importa los tags de control para jsf % > < %@ taglib uri=" 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 >

8 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; /** yannart */ public class PersonaBean { private String nombre; public String getnombre() {

9 } return nombre; } public void setnombre(string nombre) { this.nombre = nombre; }

10 .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=!

11 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" " 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 >

12 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:

Documentos relacionados

Qué ofrece Autentia?

Qué ofrece Autentia? Somos su empresa de arquitectura y soporte a desarrollo Java/.Net En cualquier empresa mediana o grande donde exista un departamento de desarrollo informático encontramos un difícil