miércoles, 28 de abril de 2010

Rich Faces 3.0 con Eclipse y Tomcat


RICH FACES EN ECLIPSE

INSTALACION DE PLUGINS

El ambiente que estoy utilizando es: Eclipse Galileo, JDK1.6, Ubuntu 9.10, Tomcat 6.0.20(instalado y funcionando en eclipse).
Para empezar abrimos Eclipse.

Una vez hecho esto, tenemos que realizar 3 instalaciones o actualizaciones en Eclipse, para esto vamos a Help/Install new Software
En "work with", seleccionamos The Eclipse Project Updates - http://download.eclipse.org/eclipse/updates/3.5, en donde seleccionamos todos los componentes


Una vez instalado/actualizado. tenemos que actualizar BIRT Update Site - http://download.eclipse.org/birt/update-site/2.5


Finalmente tenemos que descargar JBossTools-Update-3.1.0.v201003050540R-H56-GA.zip de
http://downloads.sourceforge.net/jboss/JBossTools-Update-3.1.0.v201003050540R-H56-GA.zip


Para instalar este zip en eclipse tenemos que seleccionar help/Install new Software, luego click en Add. En el nombre ponemos JBoss Tools y en Location apuntamos al zip que descargamos.
Una vez instalado todo esto deberemos reiniciar Eclipse





CONFIGURACION DEL PROYECTO
Para crear un nuevo proyecto, vamos por File/New/Other y creamos un proyecto del tipo JSF.


Le damos un nombre, para este caso el nombre proyectoJSF, el resto lo dejamos igual y damos click en Next.

En la siguiente pantalla en el RunTime seleccionamos Apache Tomcat 6.0. Si no tenemos este RunTime, damos click sobre nuevo y lo creamos.
Al final damos click en Finish.


Tenemos que hacer una configuracion extra para empezar a trabajar con nuestro proyecto, este cambio consiste en agregar librerias. Para esto, descargamos 1.2_14 binary de https://javaserverfaces.dev.java.net/download.html.



Descomprimimos el archivo zip(mojarra-1.2_14-binary.zip)

y copiamos las librerias jsf-api.jar y jsf-impl.jar (que se encuentran en la carpeta lib) en /ProyectoJSF/WebContent/WEB-INF/lib. Luego regresamos a Eclipse, seleccionamos el proyecto y damos click en "Refresh"
Tenemos que instalar el soporte para RichFaces 3.0, para esto damos click con el botón derecho sobre el proyecto seleccionamos Configure/Add Custom Capabilities. de ahi marcamos JBossRichFaces 3.0 y damos click en Finish.






CREACION DEL GUI

Damos doble click sobre faces-config.xml que esta en WebContent/WEB_INF, damos click en view template(que esta junto al area de dibujo) y damos click en el area blanca.



En la ventana que se abre para From View ID: colocamos jsp/primero y en el Template seleccionamos JSFBasePage y damos click en Finish.



Sobre el icono de la pagina que esta en el area de dibujo damos click boton derecho y seleccionamos Open Page.
Abrimos JSF HTML y arrastramos un form dentro de view
Dentro del form arrastramos un input text(de JSF HTML)
Luego arrastramos un command button de JBoss Ajax4Jsf bajo el input text
Finalmente arrastramos un outputText luego del anterior command button



CREACION DE MANAGED BEANS
Damos click con el boton derecho sobre la carpeta source y seleccionamos New/Class. En el package colocamos com.ejemplo y en el name colocamos Saludo y marcamos "Constructors from superclass".


Luego creamos la variable privada de tipo String mensaje con su respectivo get y set



Damos otra vez doble click en faces-config.xml, seleccionamos el tab llamado tree, seleccionamos ManagedBeans y damos click en Add.



Seleccionamos como scope: session y la clase que creamos en el paso anterior, además le damos un nombre a la variable que utilizaremos.




Luego damos click en Next marcamos mensaje y damos click en Finish.


GUI Y MANAGED BEANS
Para unir la GUI al manager beans, lo hacemos por medio de binding. Para esto en primero.jsp damos click sobr el inputtext y en las propiedades bajo attributes buscamos value, damos click el boton(...) De managedbeans, seleccionamos saludo y mensaje. Posterior a esto damos click sobre el outputtext, buscamos la propiedad id y le damos un nombre por ejemplo salida y en el value damos click sobre el boton (...) y de managedbeans, seleccionamos saludo y mensaje. Luego damos click en el command button y seleccionamos la propiedad reRender y damos click sobre el boton(...) de ComponentsIDS seleccionamos salida.

Este el código de primero.jsp

<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

<html>
<head>
<title></title>
</head>
<body>
<f:view>
<h:form>
<h:inputText value="#{saludo.mensaje}"/>
<a4j:commandButton reRender="salida" >
</a4j:commandButton>
<h:outputText value="#{saludo.mensaje}" id="salida"/>
</h:form>
</f:view>
</body>
</html>



EJECUCION DEL PROYECTO.
Para ejecutar el proyecto debemos crear una pagina de indice en nuestra carpeta JSP.Para damos click con el boton derecho y seleccionamos New, luego de JBossToolWeb seleccionamos JSP File. Le ponemos de name "index" y de Template JSPRedirect y damos click en finish. En el codigo del forward colocamos
Para terminar en web.xml(WebContent/WEB_INF) seleccionamos source y agregamos lo siguiente antes de
</web.app>

<welcome-file-list>
<welcome-file>jsp/index.jsp</welcome-file>
</welcome-file-list>


A continuación pongo el código de index.jsp

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head></head>
<body>
<jsp:forward page="/jsp/primero.jsf" />
</body>
</html>


Finalmente ejecutamos le proyecto, dando boton derecho sobre el mismo, seleccionando RUN y luego Tomcat.





ACTION A OTRA PAGINA.
Para este action vamos a crear otro view template desde faces-config.xml. lo vamos a llamar segundo (jsp/segundo)


Una vez hecho esto, creemos la pagina con el siguiente código

Desde faces-config.xml, usemos un conector desde primero a segundo

en saludos creamos la función proceso, con el siguiente código.



Modificamos el boton de primero.jsp a la siguiente forma.

Este es el nuevo código de primero.jsp
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

<html>
<head>
<title></title>
</head>
<body>
<f:view>
<h:form>
<h:inputText value="#{saludo.mensaje}"/>
<a4j:commandButton reRender="salida" action="#{saludo.proceso}" value="CLICK">

</a4j:commandButton>
<h:outputText value="#{saludo.mensaje}" id="salida"/>
</h:form>
</f:view>
</body>
</html>



Este es el código de segundo.jsp
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

<html>
<head>
<title></title>
</head>
<body>
<f:view>
<h:outputText value="#{saludo.mensaje}"/>
</f:view>
</body>
</html>


Ejecutamos el proyecto nuevamente




5 comentarios:

  1. Hola santiago, muy bueno el tuto. Pero me estaba preguntando como trabajar con el API de twitter para un proyecto JSF?? porque lo que he encontrado son ejemplos con aplicaciones de escritorio en java... Seria excelente la ayuda, Gracias

    ResponderEliminar
  2. gracias amigo, excelente la explicación.

    ResponderEliminar
  3. Hola, muy útil la información. Sólo hay una pequeña cosa que no entiendo: ¿Por qué al hacer la redirección hay que poner como página de destino primero.jsf en lugar de primero.jsp, que es el nombre que tiene? Al principio pensé que era un error y puse primero.jsp, pero así no funcionaba. ¿Puede ser por las siguientes líneas del web.xml?
    <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.jsf</url-pattern>
    </servlet-mapping>

    Gracias por el tutorial, está perfectamente explicado.
    Un saludo.

    ResponderEliminar
  4. muy bueno el tutorial..pero sabes algo de implementar richfaces en netbeans?

    ResponderEliminar
  5. men mil gracias, aunque primero lo trate de hacer con eclipse helios(3.6) y me dio mas errores ke windows 95 pero con 3.5 funciona todo jevi :)

    ResponderEliminar