introducción ajax 4 jsf

13
 11/11/11 Introduccin a Ajax4Jsf  1/13 www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=Ajax4Jsf E-mail: Contraseña: In icio Qui énes somos Tutoriales Formaci n Compar ador de sal ari os Nu est ro libro Char las Más Deseo registrarme He olvidado mis datos de acceso  Enrar Estás en: Ini ci o Tutorial es Introduccin a Ajax4Jsf Catálogo de servicios Autentia DESARROLLADO POR: Juan Alonso Ramos Consultor tecnolgico de desarrollo de proyectos informáticos. Ingeniero Técnico en Informática de Gestin e Ingeniero en Informática, especialidad en Ingeniería del Software Puedes encontrarme en Autentia: Ofrecemos de servicios soporte a desarrollo, factoría y formacin Somos expertos en Java/J2EE Ver tutoriales de Juan Alonso Ramos

Upload: goku-nueve

Post on 11-Jul-2015

449 views

Category:

Documents


0 download

TRANSCRIPT

5/11/2018 Introducción Ajax 4 Jsf - slidepdf.com

http://slidepdf.com/reader/full/introduccion-ajax-4-jsf 1/13

 

11/11/11 Introduccin a Ajax4Jsf  

1/13www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=Ajax4Jsf 

E-mail:

Contraseña:

Inicio Quiénes somos Tutoriales Formacin Comparador de salarios Nuestro libro Charlas Más

Deseo registrarmeHe olvidado mis datos deacceso

 

Enrar 

Estás en:Inicio Tutoriales Introduccin a Ajax4Jsf 

Catálogo de serviciosAutentia

DESARROLLADO POR:

Juan Alonso Ramos

Consultor tecnolgico de desarrollo de proyectosinformáticos.

Ingeniero Técnico en Informática de Gestin eIngeniero en Informática, especialidad en Ingenieríadel Software

Puedes encontrarme en Autentia: Ofrecemos deservicios soporte a desarrollo, factoría y formacin

Somos expertos en Java/J2EE

Ver tutoriales de Juan Alonso Ramos

5/11/2018 Introducción Ajax 4 Jsf - slidepdf.com

http://slidepdf.com/reader/full/introduccion-ajax-4-jsf 2/13

 

11/11/11 Introduccin a Ajax4Jsf  

2/13www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=Ajax4Jsf 

ltimas Noticias

Crónica del eventode Liferay en Madrid

El primer capítulo deTerrakas ya está

online

Ya ha terminado laCAS 2011, ahora

toca pensar cómo me

gustaría que fuera laCAS 2012

Restrospectiva,Carrera de las

empresas 2011

¿Qué ganan losdemás con que tu

vayas a unaconferencia?

Share | Regístrate para votar

Introducción a Ajax4jsf 

ndice de contenidos

1. Introducción2. Etiquetas3. Entorno utizado4. Instalación5. Pruebas6. Conclusión

1. Introducción

Ajax4jsf es una librería open source que se integra totalmente en la arquitectura de JSF y extiende lafuncionalidad de sus etiquetas dotándolas con tecnología Ajax de forma limpia y sin añadir códigoJavascript. Mediante este framework podemos variar el ciclo de vida de una petición JSF, recargardeterminados componentes de la página sin necesidad de recargarla por completo, realizar peticionesal servidor automáticas, control de cualquier evento de usuario, etc. En definitiva Ajax4jsf permitedotar a nuestra aplicación JSF de contenido mucho más profesional con muy poco esfuerzo.

2. Etiquetas

El funcionamiento del framework es sencillo. Mediante sus propias et iquetas se generan eventos queenvían peticiones al contenedor Ajax. Estos eventos se pueden producir por pulsar un botón, unenlace, una región específica de la pantalla, un cambio de estado de un componente, cada ciertotiempo, etc. No nos tendremos que preocupar de crear el código Javascript y el objetoXMLHttpRequest para que envíe la petición al servidor ya que esto lo hará por nosotros elframework. Lo más importante es conocer las distintas etiquetas que contiene, son las siguientes:

<a4j:support> : Etiqueta que se puede añadir a cualquier otra etiqueta JSF para dotarla defuncionalidad Ajax. Permite al componente generar peticiones asíncronas mediante eventos (onclick,onblur, onchange,...) y actualizar campos de un formulario de forma independiente, sin recargar todala página.

41.384Fecha de publicación del tutorial: 2007-04-09

5/11/2018 Introducción Ajax 4 Jsf - slidepdf.com

http://slidepdf.com/reader/full/introduccion-ajax-4-jsf 3/13

 

11/11/11 Introduccin a Ajax4Jsf  

3/13www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=Ajax4Jsf 

Histórico deNOTICIAS

ltimos Tutoriales

Crear gráficas deseries con

JFreeChart

Técnicas básicas conMybatis

CSS3 Media Querieso cómo hacer un

diseño adaptativo segúnel terminal

CSS BrowserSelector o cómo

olvidarnos de los hacksen CSS

Generar hojas decálculo con fórmulas

mediante Apache POI

ltimos Tutoriales delAutor

Migración a ICEfaces2.0

Cómo saber si tunavegador soporta

HTML5 con Modernizr

Introducción aSelenium Grid y TestParalelos con JUnit

<a4j:poll> : Realiza cada cierto tiempo una petición al servidor.

<a4j:commandButton> : Botón de envío de formulario similar a <h:commandButton> de JSF. Laprincipal diferencia es que se puede indicar que únicamente actualice ciertos componentes evitandola recarga de todo el formulario.

<a4j:commandLink>: Comportamiento similar a <a4j:commandButton> pero en un link.

<a4j:htmlCommandLink> : Muy parecida a la anterior etiqueta con pequeñas diferencias en lageneración de links y cuando se utilizan etiquetas <f:param>.

<a4j:region> : Determina un área a decodificar en el servidor después de la petición Ajax.

<a4j:status> : Muestra el estado de la petición Ajax. Hay 2 estados posibles: procesando petición ypetición terminada. Por ejemplo mientras dure el proceso de la llamada al servidor y la evaluación dela petición se puede mostrar el texto " procesando..." y cuando termine la petición y se devuelva larespuesta a la página se cambia el texto por "petición finalizada".

<a4j:form> : Similar al <h:form> con la diferencia de que se puede enviar previamente el contenidoal contenedor Ajax.

<a4j:actionparam> : Etiqueta que combina la funcionalidad de la etiqueta <f:param> y

<f:actionListener>.<a4j:outputPanel> : Se utiliza para agrupar componentes para aplicarles similares propiedades, porejemplo a la hora de actualizar sus valores tras la petición Ajax.

<a4j:ajaListener> : Similar a la propiedad actionListener o valueChangeListener pero con ladiferencia de que la petición se hace al contenedor Ajax.

<a4j:jsFunction> : Se utiliza para pasarle un valor automáticamente a una función Javascript trasrecibirlo del servidor.

<a4j:loadScript> : Inserta en la página las funciones Javascript contenidas en un archivo .js

<a4j:loadStle> : Igual que la anterior etiqueta pero para una hoja de estilos .css<a4j:loadBundle> : Similar al <f:loadBundle> de JSF.

<a4j:log> : Carga en la página una consola que muestra las trazas de los logs que devuelve elcontenedor Ajax.

<a4j:include> : Se utiliza para incluir en la página el contenido de otra de acuerdo a la definición quese haga en las reglas de navegación del faces-config. Es decir la siguiente página a cargar de acuerdoa la navegación especificada se cargaría en la vista actual.

<a4j:repeat> : Etiqueta para iterar sobre una colección y mostrar todos sus campos.

<a4j:keepAlive> : Permite mantener un bean en un estado determinado durante peticiciones.

5/11/2018 Introducción Ajax 4 Jsf - slidepdf.com

http://slidepdf.com/reader/full/introduccion-ajax-4-jsf 4/13

 

11/11/11 Introduccin a Ajax4Jsf  

4/13www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=Ajax4Jsf 

Síguenos através de:

Lanzar test deSelenium 2 en un

navegador remoto

Introducción aSelenium 2 y

WebDriver

Categorías del Tutorial

JSF

Ajax

 

ltimas ofertas deempleo

2011-09-08Comercial - Ventas -MADRID.

2011-09-03Comercial - Ventas -VALENCIA.

2011-08-19

Comercial - Compras- ALICANTE.

<a4j:mediaOutput> : Componente que permite mostrar contenido multimedia como imágenes,vídeos, archivos sonoros, etc.

Para conocer mucho más sobre el framework puedes visitar la documentacin oficial aquí .

3. Entorno utizado

Para las pruebas he utilizado las siguientes herramientas:JDK 5.0

Apache MyFaces 1.1.5Ajax4jsf 1.1.0Eclipse 3.2.1Navegador Mozilla Firefox 2.0

Puedes también utilizar el plugin de eclipse Exadel Studio que incluye soporte para Ajax4jsf (http://www.exadel.com/web/portal/download/es).

4. Instalacin

Partiendo de que se tiene instalada la JDK de Sun y Apache MyFaces nos descargamos el paqueteAjax4Jsf de la web oficial (http://labs.jboss.com/portal/jbossAjax4jsf/downloads ). Abrimos el archivo

comprimido y copiamos los fuentes Ajax4jsf.jar y oscache-2.3.jar en el directorio WEB-INF/lib denuestro proyecto. La librería oscache-2.3.jar se utiliza para añadir al proyecto funcionalidad de cache.

Añadimos al web.xml el siguiente filtro para que todas las peticiones al Faces Servlet pasenpreviamente por el filtro de Ajax4jsf.

view plain print ?

0. <filter 

0. <display-nameAjaxjsf Filter</display-name 

0. <filter-nameAjaxjsf</filter-name 

0. <filter-classorg.ajaxjsf.Filter</filter-class 

0. </filter 0.

0. <filter-mapping 

0. <filter-nameAjaxjsf</filter-name 

0. <servlet-nameFaces Servlet</servlet-name 

0. <dispatcherREQUEST</dispatcher 

. <dispatcherFORWARD</dispatcher 

. <dispatcherINCLUDE</dispatcher 

. </filter-mapping 

En cada página JSP tenemos que incluir la directiva taglib siguiente:

5/11/2018 Introducción Ajax 4 Jsf - slidepdf.com

http://slidepdf.com/reader/full/introduccion-ajax-4-jsf 5/13

 

11/11/11 Introduccin a Ajax4Jsf  

5/13www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=Ajax4Jsf 

2011-07-12

Otras Sin catalogar -MADRID.

2011-07-06

Otras Sin catalogar -LUGO.

view plain print ?

01. <%@ taglib uri"https://Ajax4jsf.dev.java.net/Ajax" prefix"a4j"% 

Si utilizamos páginas XHTML debemos añadir esta otra directiva:

view plain print ?

01. <xmlns:a4jxmlns:a4j"https://Ajax4jsf.dev.java.net/Ajax" 

5. Pruebas

Vamos a hacer una prueba con algunas etiquetas para ver cómo funcionan. Creamos un formulariodonde pedimos el nombre, apellidos y aficiones. En los campos de texto se captura el eventoonkeyup con la etiqueta <a4j:support event="onkeup" ... /> que llama al bean homeBeanrecuperando los valores del formulario. En el caso del nombre y apellidos se convierten los caracteresa maysculas.

También mediante la et iqueta <a4j:status for="inputData"> se muestra una imágen mientras seestá procesando la pet ición y otra imágen cuando la petición está finalizada. Para comprobar las

llamadas al contenedor Ajax se pueden ver las trazas de log mediante la et iqueta

view plain print ?

01. <a4j:log level"ALL" popup

 

"false" width"1000" height"100" / 

Código de la página JSP

view plain print ?

01. <%@page contentType

 

"text/html" pageEncoding

 

"UTF-8"%

 

 

02. <%@ taglib uri"http://java.sun.com/jsf/html" prefix"h" % 03. <%@ taglib uri"http://java.sun.com/jsf/core" prefix"f"%

 

 

04. <%@ taglib uri"https://ajax4jsf.dev.java.net/ajax" prefix"a4j"% 

05.

06. <f:view 

07. <h:form 

08. <h:panelGrid columns"2" 

09. <a4j:region id

 

"inputData" 

10. <h:panelGrid columns"2" 

11. <h:outputText value

 

"Nombre:" / 

12. <h:inputText id

 

"name" value

 

"#{homeBean.name}" 

13. <a4j:support event"onkeyup" reRender"outputName" / 14. </h:inputText 

5/11/2018 Introducción Ajax 4 Jsf - slidepdf.com

http://slidepdf.com/reader/full/introduccion-ajax-4-jsf 6/13

 

11/11/11 Introduccin a Ajax4Jsf  

6/13www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=Ajax4Jsf 

15.

16. <h:outputText value"Apellidos:" / 

17. <h:inputText id"lastName" value"#{homeBean.lastName}" 

18. <a4j:support event"onkeyup" reRender"outputLastname" / 

19. </h:inputText 

20.

21. <h:outputText value"Aficiones:" / 

22. <h:selectManyListbox value"#{homeBean.hobbies}" 

23. <f:selectItems value"#{homeBean.hobbiesItems}"/ 24. <a4j:support event"onchange" reRender"outputHobbies" / 

25. </h:selectManyListbox 

26. </h:panelGrid 

27.

28. <h:panelGrid columns"2" 

29. <h:outputText value

 

"Estado de la peticion: "/ 

30. <a4j:status for"inputData" 

31. <f:facet name

 

"start" 

32. <h:graphicImage value"/img/procesando.jpg" / 

33. </f:facet 

34.35. <f:facet name

 

"stop" 

36. <h:graphicImage value"/img/ok.jpg" / 

37. </f:facet 

38. </a4j:status 

39. </h:panelGrid 

40. </a4j:region 

41.

42. <h:panelGrid columns"2" 

43. <h:outputText value

 

"Has introducido" /<h:outputText value

 

":" / 

44. <h:outputText value

 

"Nombre:" / <h:outputText id"outputName" value

 

"

{homeBean.name}" / 

45. <h:outputText value

 

"Apellidos:" / <h:outputText id

 

"outputLastname" 

{homeBean.lastName}" / 

46. <h:outputText value

 

"Aficiones:" / <h:outputText id

 

"outputHobbies" v

{homeBean.hobbies}"/ 

47. </h:panelGrid 

48. </h:panelGrid 

49.

50. <a4j:log level"ALL" popup"false" width

 

"1000" height"100" / 

51. </h:form 

52. </f:view 

Cdigo del Bean

5/11/2018 Introducción Ajax 4 Jsf - slidepdf.com

http://slidepdf.com/reader/full/introduccion-ajax-4-jsf 7/13

11/11/11 Introduccin a Ajax4Jsf  

7/13www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=Ajax4Jsf 

ie plain print ?

01. package com.tutoriales.ajax4jsf.bean;

02. impo java.util.ArrayList;03. impo java.util.List;

04. impo javax.faces.model.SelectItem;

05. impo org.apache.myfaces.component.html.ext.HtmlSelectManyListbox;

06.07. pblic cla HomeBean {

08.09. piae String name;

10. piae String lastName;

11. piae List<SelectItem hobbiesItems = ne ArrayList<SelectItem();12. piae List<HtmlSelectManyListbox hobbies = ne ArrayList<HtmlSelectManyListbox

();

13.14. pblic HomeBean() {

15. hobbiesItems.add(ne SelectItem("Cine"));

16. hobbiesItems.add(ne SelectItem("Teatro"));17. hobbiesItems.add(ne SelectItem("Television"));

18. hobbiesItems.add(ne SelectItem("Lectura"));

19. hobbiesItems.add(ne SelectItem("Deporte"));20. hobbiesItems.add(ne SelectItem("Fotografia"));

21. hobbiesItems.add(ne SelectItem("Viajes"));

22. }23.

24. pblic List<SelectItem getHobbiesItems() {

25. en hobbiesItems;26. }

27.

28. pblic oid setHobbiesItems(List<SelectItem hobbiesItems) {29. hi.hobbiesItems = hobbiesItems;

30. }

31.32. pblic String getLastName() {

33. en lastName;

34. }35.

36. pblic oid setLastName(String lastName) {

37. hi.lastName = lastName.toUpperCase();38. }

39.

40. pblic String getName() {

 

5/11/2018 Introducción Ajax 4 Jsf - slidepdf.com

http://slidepdf.com/reader/full/introduccion-ajax-4-jsf 8/13

11/11/11 Introduccin a Ajax4Jsf  

8/13www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=Ajax4Jsf 

41. en name;

42. }43.

44. pblic oid setName(String name) {

45. hi.name = name.toUpperCase();46. }

47.

48. pblic List<HtmlSelectManyListbox getHobbies() {

49. en hobbies;50. }

51.52. pblic oid setHobbies(List<HtmlSelectManyListbox hobbies) {

53. hi.hobbies = hobbies;

54. }

Al arrancar la aplicacin se muestra la página de inicio con la imágen de peticin procesada ya queactualmente el contenedor está esperando a que el usuario introduzca algo en el formulario.

 

5/11/2018 Introducción Ajax 4 Jsf - slidepdf.com

http://slidepdf.com/reader/full/introduccion-ajax-4-jsf 9/13

11/11/11 Introduccin a Ajax4Jsf  

9/13www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=Ajax4Jsf 

Introducimos el nombre y vemos cómo se muestra en maysculas en la salida de la derecha.Empezamos a introducir los apellidos y mientras se está procesando la información en el bean, lo quevemos es la imágen procesando.jpg que nos indica que an no hemos recibido la respuesta.

 

5/11/2018 Introducción Ajax 4 Jsf - slidepdf.com

http://slidepdf.com/reader/full/introduccion-ajax-4-jsf 10/13

11/11/11 Introduccin a Ajax4Jsf  

10/13www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=Ajax4Jsf 

Finalmente seleccionamos los valores del listado de aficiones. Podéis ver cmo van saliendo lastrazas que devuelve el contenedor Ajax en la parte inferior.

 

5/11/2018 Introducción Ajax 4 Jsf - slidepdf.com

http://slidepdf.com/reader/full/introduccion-ajax-4-jsf 11/13

11/11/11 Introduccin a Ajax4Jsf  

11/13www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=Ajax4Jsf 

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

6. Conclusin

A menudo es importante utilizar todos los recursos que tenemos a nuestro alcance para conseguir losefectos deseados en nuestras aplicaciones pero hay que tener cuidado a la hora de elegirlas. Siquieres añadir tecnología Ajax a tu aplicacin JSF sin demasiado esfuerzo, este framework estábastante bien ya que resulta muy sencillo de utilizar. Quizá se queda corto en algunas cosas peroparece que en el futuro irán añadiéndole más funcionalidad. Sin duda es una aportacin más almundo open source que siempre es bienvenida.

 

5/11/2018 Introducción Ajax 4 Jsf - slidepdf.com

http://slidepdf.com/reader/full/introduccion-ajax-4-jsf 12/13

11/11/11 Introduccin a Ajax4Jsf  

12/13www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=Ajax4Jsf 

2010-07-14 - 08:33:53

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

Eniar comentario  

(Slo para usuarios registrados)

Registrate y accede a esta y otras ventajas «

COMENTARIOS

WRobero

Hola Juan, déjame contarte que hace poco le perdí el miedo a las JSF y  pues leyendo t tutorial quede fascinado con ajax4jsf cuya fascinación mellevo al encuentro de Richfaces :P (buen sabor de boca jeje..); actualmenteme encuentro desarrollando una aplicación utilizando esté framework y metope con un pequeño problema, el cuál espero me puedas aclarar, tecomento: Usando rich:panelMenuItem junto con ajax4jsf deseo que al momento de elegir alguna opción pues el valor del atributo de la siguiente

etiqueta cambie:

No se si se pueda hacer ya que al momento de actualizar la pagina me saleque el recurso no se encuentra disponible; me percate que en la direccióndel recurso no se encuentra << faces/* >> probé anteponiendo faces/ a larespuesta de mi Bean pero tampoco funciono.Serias tan amable de darme una ayudadita, de antemano gracias y tefelicito por tus tutoriales.

   

5/11/2018 Introducción Ajax 4 Jsf - slidepdf.com

http://slidepdf.com/reader/full/introduccion-ajax-4-jsf 13/13

11/11/11 Introduccin a Ajax4Jsf  

13/13www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=Ajax4Jsf 

Esta obra está l icenciada bajo licencia Creative Commons de Reconocimiento-No comercial-Sin obras derivadas2.5

IMPLSA Impulsores Comunidad Ayuda?

----sin clicks + + + + + + + +

0 personas han traído c licks a esta página

powered by karmacracy

2008-04-03 - 05:39:02 PM Pao

Hola, Realice el ejemplo pero no me funciono, no realia las funcionalidadesque dice que hace.- Bueno.. saludos...

Copyright 2003-2011 All Rights Reserved | Texto legal y condiciones de uso | Banners | Powered by Autentia |Contacto