E-mail:
Contraseña:

DESARROLLADO POR:

Creador y propietario de AdictosAlTrabajo.com, Director General de Autentia S.L., Ingeniero Técnico de Telecomunicaciones y Executive MBA por el Instituto de Empresa 2007. Twitter: @rcanalesmora

Autor del Libro: Informática profesional, las reglas no escritas para triunfar en la empresa

Puedes consultar mi CV y alguna de mis primeras aplicaciones (de los 90) aquí

Fecha de publicación del tutorial: 2006-05-19
37.165

Regístrate para votar

Share |

Pagina nueva 1

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



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

Añadir validaciones de rango

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 auque 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 ....

Anímate y coméntanos lo que pienses sobre este TUTORIAL:

Puedes opinar o comentar cualquier sugerencia que quieras comunicarnos sobre este tutorial; con tu ayuda, podemos ofrecerte un mejor servicio.

Comentarios

arturo
2009-05-10 - 04:05:12 PM
Practico, obviamente este tutorial no es teoria de JSF si no como usar netbeans con el mismo. saludos y sigana si
Pablo
2008-03-31 - 10:12:21 AM
Buenas, He seguido las instrucciones del tutorial para cargar una imagen pero no la carga y no consigo saber por qué. Este es mi codigo <h:graphicImage id="verde" value="verde.gif" url="/Capitulos/verde.gif"/> Donde capitulos es la carpeta de mi proyecto. Gracias de antemano Un saludo
marcelo
2008-01-03 - 12:31:07 AM
No pude obtener los resultados que muestran... solamente veo el contador con valor 1... Tendrian el codigo fuente final para ver donde me equivoque... ? Por ejemplo donde va el codigo de validacion ? y los anteriores bloques...
Fernando
2007-12-18 - 03:39:19 AM
bueno el tutorial pero se podria mejorar en las explicaciones q no son un tanto ejemplificadas para un principante recuerda las imagenes valen mas que mil palabras y has usado buenas imagen pero seria mejor ayudarse con un poco mas de teoria y quedaria perfecto . atte Fernando Cortez estudiante de ingenieria de sistemas
ALEXANDER
2006-12-13 - 10:36:25 AM
Exelente material, pues lo estoy practicando
Fede
2006-12-04 - 09:18:28 AM
Muy bueno el artículo. Sólo tengo un problema y es que no veo por ningún lado la orden de que se incremente el contador (a mi me aparece siempre el mismo valor). ¿Que estoy haciendo mal?. Gracias
Oneyda
2006-10-15 - 04:36:54 AM
Excelente. Quisiera mas como estos. Gracias
Gustavo Rios
2006-09-21 - 03:41:31 PM
esta muy excelente el titorial, lo he revisado etalladamente y me saco de varias dudas, megustaria saber si tiene algunos otros tituriolaes acerca de este tema Java. ya que me gustria aprender mas. Sin mas que decir agradesco de antemano todo. Gracias espero su respuesta.
Jackie Leon Calle
2006-06-21 - 12:06:19 AM
Muy interesante el tema y lo bueno que esta mas actualizado con el netbeans 5.5 pero como se puede hacer lo mismo pero usando base de datos y en postgresql?
Chairas
2006-06-06 - 11:56:23 PM
Muy buen ejemplo para empezar

Catálogo de servicios Autentia

Últimas Noticias

Autentia patrocina un nuevo Coderetreat en Madrid junto con agilismo.es y Eden

Autentia patrocina el Agile Open Spain 2010

Disponibles gratis, para el iPhone, las cartas de Planning Poker tipo cómic de Autentia

XI Charla Autentia - Mule

Comic Flash sobre el Retorno a la Cordura en el Desarrollo Software

Histórico de NOTICIAS

Últimos Tutoriales

Últimos Tutoriales del Autor

Síguenos a través de:

Últimas ofertas de empleo

Fecha de publicación del tutorial: 2006-05-19
37.165

JSF y NetBeans 5.5

Instalamos y arrancamos en entorno.

Conclusiones

» Registrate y accede a esta y otras ventajas «

Comentarios

Últimos Tutoriales

Últimos Tutoriales del Autor

Últimas ofertas de empleo

Fecha de publicación del tutorial: 2006-05-19 37.165

JSF y NetBeans 5.5

Instalamos y arrancamos en entorno.

Conclusiones

Comentarios

Fecha de publicación del tutorial: 2006-05-19
37.165