JSF y NetBeans 5.5
La tecnología JSF cada día está más cerca de nosotros y muchos clientes ya
nos contactan para comenzar desarrollos y planes de formación con esta técnica
(combinada con JSTL y UML ).
En Autentia llevamos
meses trabajando con aplicaciones JSF y, aunque a mis compañeros les gusta más
el entorno de desarrollo Eclipse, yo sigo un poco fiel a NetBeans. Siempre me ha
parecido más sencillo e intuitivo y me he animado a probar la beta de la nueva
versión 5.5. Francamente, esta bastante estable y ya viene preparada para el
desarrollo JSF. Como es costumbre, voy a compartir con vosotros unos primeros
pantallazos.
En este tutorial vamos a ver simplemente el aspecto de NetBeans 5.5 y como
crear un par de páginas JSP usando JSF.
Instalamos y arrancamos en entorno.
Después de descargar e instalar el entorno desde
www.netbeans.org
Creamos un nuevo proyecto
Elegimos una aplicación Web
Elegimos el nombre del proyecto y directorio de trabajo Netbeans
Elegimos soporte para JSF
Creamos un nuevo paquete
Y una clase VOContador que vamos a usar para mostrar ejemplos de
funcionalidades básicas en JSF
A la clase recién creada le añadimos una propiedad (con el método get y set)
Elegimos en nombre y tipo (será int)
Vamos a decirle al Framework de JSF (en el fichero faces-config.xml) que
queremos añadir un nuevo Bean gestionado
Definimos el nombre y clase… también el ámbito, lo pondremos
de application ya que queremos que sea un contador global.
La edición del fichero se puede hacer también manualmente faces-config.xml
Editamos la página JSP incluyendo las etiquetas JSF adecuadas para mostrar
una imagen, un texto y el valor de un atributo (tenemos un código completo un
poco más abajo).
Vemos el resultado preliminar
Ahora vamos a introducir ficheros de propiedades con mensajes
internacionalizadas
Creamos un fichero de propiedades y decimos a nuestra página que los use:
|
1 |
<f:loadBundle basename="adictos.mensajes" var="msgs"/> |
Añadimos el código de los mensajes internacionalizados
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<%@page contentType="text/html"%> <%@page pageEncoding="UTF-8"%> <%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%> <%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%> <!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>Home de JSF</title> </head> <body> <f:loadBundle basename="adictos.mensajes" var="msgs"/> <f:view> <h:graphicImage id="image" alt="logo adictos" url="/images/adictos.jpg" > </h:graphicImage> <br> <h1><h:outputText value="Etiqueta JSF" /></h1> Valor del contador <h:outputLabel value="#{Contadores.contador}"/> <h:outputText value="#{msgs.mensaje_principal}"/> </f:view> </body> </html> |
Ahora vamos a complicarlo un poquito más para crear un formulario en la
primera página que invoque a una segunda página, modificando el valor de una
propiedad, nuestro contador de páginas.
Vamos a añadir una regla automática de navegación
Y vemos como queda el código del fichero xml de configuración de
JSF
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?xml version='1.0' encoding='UTF-8'?><!DOCTYPE faces-config PUBLIC"-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN" "http://java.sun.com/dtd/web-facesconfig_1_1.dtd"> <!-- =========== FULL CONFIGURATION FILE ================================== --> <faces-config> <managed-bean> <description> Contador a mostrar en el sistema </description> <managed-bean-name>Contadores</managed-bean-name> <managed-bean-class>adictos.VOContador</managed-bean-class> <managed-bean-scope>application</managed-bean-scope> </managed-bean> <navigation-rule> <from-view-id>/welcomeJSF.jsp</from-view-id> <navigation-case> <from-outcome>siguiente</from-outcome> <to-view-id>/resultadoAccion.jsp</to-view-id> </navigation-case> </navigation-rule> </faces-config> |
Primera página donde actualizamos el contador
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<%@page contentType="text/html"%><%@page pageEncoding="UTF-8"%><%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%> <%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%> <!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>Home de JSF</title> </head> <body> <f:loadBundle basename="adictos.mensajes" var="msgs"/> <f:view> <h:graphicImage id="image" alt="logo adictos" url="/images/adictos.jpg" ></h:graphicImage> <br> <h1><h:outputText value="Etiqueta JSF" /></h1> Valor del contador <h:outputLabel value="#{Contadores.contador}"/> <h:outputText value="#{msgs.mensaje_principal}"/> <br/> <br/> <h:form id="actualizarContador"> <h:inputText id="nuevoContador" value="#{Contadores.contador}"/> <h:commandButton action="siguiente" value="Enviar"/> </h:form> </f:view> </body> </html> |
Página con el resultado
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<%@page contentType="text/html"%> <%@page pageEncoding="UTF-8"%> <%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%> <%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%> <!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>Home de JSF</title> </head><body> <f:loadBundle basename="adictos.mensajes" var="msgs"/> <f:view> <h:graphicImage id="image" alt="logo adictos" url="/images/adictos.jpg" > </h:graphicImage> <br/><br/> Muevo valor del contador (incrementado) = <h:outputText value="#{Contadores.contador}" /> </f:view> </body> </html> |
http://www-128.ibm.com/developerworks/java/library/j-jsf3/index.html
|
1 2 3 4 5 6 7 8 9 10 11 |
<h:form id="actualizarContador"> <h:inputText id="nuevoContador" value="#{Contadores.contador}" immediate="true"> <f:validateLongRange minimum="0" maximum="100"/> </h:inputText> <p> <h:messages style="color: red"/> </p> <h:commandButton action="siguiente" value="Enviar"/> </h:form> |
Conclusiones
NetBeans se ha comportado muy bien aunque para mi gusto, el soporte JSF es
todavía muy limitado ya que hemos echo todo prácticamente a mano. De todas
formas, siendo
realista, en los proyectos reales, lo que se hace es esto, mancharse las
manos ….
