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:
<f:loadBundle basename="adictos.mensajes" var="msgs"/>
Añadimos el código de los mensajes internacionalizados
<%@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
<?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
<%@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
<%@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
<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 ….
