Configuracin de Eclipse para desarrollo con Rich Faces

Qu es Rich Faces?
Construido sobre el framework de Java Server Faces. Sobre l, implementa unos filtros para permitir peticiones Ajax en la pgina. La singularidad del planteamiento que ofrece es que la peticin Ajax provoca una ejecucin en el servidor y finalmente una renderizacin parcial o total de la pgina del navegador. As, el control de lo que sucede est en el servidor. Richfaces est desarrollado y mantenido por JBoss.

Para qu se usa?
Richfaces es una biblioteca de cdigo abierto basada en Java que permite crear aplicaciones web con Ajax de manera rpida y usando una paleta.

Instalacin de Rich Faces en Eclipse 1) Pre-requisitos

a. JDK b. Eclipse c. Descompresor (Winrar, winZip, 7 Zip, etc)

*Puedes ver la instalacin de estos programas en:

http://www.cjavaperu.com/instalaciones

2) Instalacin
a. Eclipse limpio

b.

Ir a help->install new software, saldr la siguiente ventana

c.

Agregando la siguiente direccin: http://download.jboss.org/jbosstools/updates/development/indigo/ y presionar la tecla enter. Cargara una lista, seleccionamos todo y hacemos click en siguiente.

d.

El proceso demorara hacemos siguiente, de nuevo siguiente. Si sale una pantalla pidiendo confinacin la acepta (esto es porque algunos plugin no han sido certificados) despus del proceso el Eclipse se reiniciara. Tendr que cambiar la perspectiva a web development (si no aparece en la lista, hacer click en OTHER) para poder obtener todas las herramientas que nos ofrece JBoss.

e.

f.

Al final quedara as

3. Ejemplo
Crearemos un ejemplo simple. 1. Ingresaremos a eclipse y creamos un Dynamic Web Project: a. NewOtherWebDynamic Web Project, Next.

b. Agregamos el nombre al proyecto, demoCJAVA y seleccionamos New Runtime

c. Seleccionamos la versin de nuestro servidor, seleccionamos Apache Tomcat v6, o la que tengamos instalada. Puedes ver la configuracin de Tomcat en www.cjavaperu.com/instalaciones

d. Buscamos la ubicacin de Tomcat, finish.

e. Hacemos click en finish.

f. Quedara as. Debemos de tener la perspectiva: Web Development Perspective

g. Ahora agregamos las libreras necesarias para el proyecto. Estas libreras se instalaran en la carpeta lib. En nuestro caso ser: D:\tests\demoCJAVA\WebContent\WEB-INF\lib

h. Ahora modificaremos el web.xml en la pestaa SOURCE con el siguiente cdigo:

1. 2. 3. 4.

<?xml version="1.0" encoding="UTF-8"?> <web-app id="WebApp_ID" version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema -instance" 5. xsi:schemaLocation="http://java.sun.com/xml/ns/ javaee http://java.sun.com/xml/ns/javaee/webapp_2_5.xsd"> 6. <display-name>jsf01</display-name> 7. <context-param> 8. <param-name>javax.faces.CONFIG_FILES</paramname> 9. <param-value>/WEB-INF/facesconfig.xml</param-value> 10. </context-param> 11. <context-param> 12. <paramname>javax.faces.STATE_SAVING_METHOD</par am-name> 13. <param-value>server</param-value> 14. </context-param> 15. <listener> 16. <listenerclass>com.sun.faces.config.ConfigureListener</list ener-class> 17. </listener> 18. <servlet> 19. <servlet-name>Faces Servlet</servlet-name> 20. <servletclass>javax.faces.webapp.FacesServlet</servletclass> 21. <load-on-startup>1</load-on-startup> 22. </servlet> 23. <servlet-mapping> 24. <servlet-name>Faces Servlet</servlet-name> 25. <url-pattern>/faces/*</url-pattern> 26. </servlet-mapping> 27. <welcome-file-list> 28. <welcome-file>faces/index.jsp</welcome-file> 29. </welcome-file-list> 30. </web-app>

i.

Creamos un paquete cjava.MB y una clase AlumnoMB

j.

package cjava.MB; public class AlumnoMB { private String nombre=""; public String getNombre() { a. return nombre; 5. } 6. public void setNombre(String nombre) { a. this.nombre = nombre; 7. } 8. } Creamos el index.jsp (NewJSP File), asignamos el nombre y click en finish. Agregamos el cdigo.

1. 2. 3. 4.

CDIGO

VISTA PREVIA

1. <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> 2. <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%> 3. <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%> 4. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 5. <html> 6. <head> 7. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 8. <title>Primer Ejemplo JSF</title> 9. </head> 10. <body> 11. <f:view> 12. <h:form> 13. <h:outputLabel value="Tu nombre"/> 14. <h:inputText id="txtNombre" value="#{alumnoMB.nombre}" required="true"/> 15. <h:message for="txtNombre"/> 16. <h:commandButton value="Enviar Datos" action="saludar"/> 17. <h:outputText value="Bienvenido #{alumnoMB.nombre}"/> 18. </h:form> 19. </f:view> 20. </body> 21. </html> k. Creamos el faceconfig.xml (NewFace Config), asignamos el nombre y finish. Modificamos el cdigo.

1. <?xml version="1.0"?> 2. <faces-config version="2.0" xmlns="http://java.sun.com/xml/ns/javaee" 3. xmlns:xi="http://www.w3.org/2001/XInclude" 4. xmlns:xsi="http://www.w3.org/2001/XMLSchemainstance" xsi:schemaLocation="http://java.sun.com/xml/ns/jav aee http://java.sun.com/xml/ns/javaee/webfacesconfig_2_0.xsd"> 5. <managed-bean> 6. <managed-bean-name>alumnoMB</managed-beanname> 7. <managed-beanclass>cjava.MB.AlumnoMB</managed-bean-class> 8. <managed-bean-scope>request</managed-beanscope> 9. </managed-bean> 10. <navigation-rule> 11. <from-view-id>/index.jsp</from-view-id> 12. <navigation-case> 13. <from-outcome>saludar</from-outcome> 14. <to-view-id>/saludo.jsp</to-view-id> 15. </navigation-case>

16. </navigation-rule> 17. </faces-config>

Si cambiamos de la pestaa Source a la pestaa de Diagram:

l.

Creamos la pgina saludo.jsp (NewJSP File) y modificamos.

1. <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> 2. <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%> 3. <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%> 4. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 5. <html> 6. <head> 7. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 8. <title>Primer Ejemplo JSF</title> 9. </head> 10. <body> 11. <f:view> 12. <h:form> i. <h:outputText value="Bienvenido #{alumnoMB.nombre}"/> 13. </h:form> 14. </f:view> 15. </body> 16. </html>

m. Al final corremos la aplicacin.

Ahora te toca a ti! Crea tus propias pginas. Recuerda que el cdigo y la base de datos puedes descargarlo en: o http://www.cjavaperu.com/instalaciones/rich

Trabajo realizado por el rea de sistemas de CJAVA

Para consultas, dudas o asistencia tcnica comunicarse al siguiente correo: o o o soporte@cjavaperu.com sistemas@cjavaperu.com www.cjavaperu.com