Ejercicios de clase. Clase 7: ejemplo de implementación de composite component con managed bean y AJAX

En el facelet se incluye, como ejemplo, tres veces el composite component con distintas parametrizaciones.

 

Este composite component está formado por tres listas desplegables que representan, de izquierda a derecha: el día, el mes y el año. Se puede configurar para especificar la fecha inicial (por defecto, la actual), el año máximo (por defecto, el actual) y el año mínimo del rango (por defecto, el actual menos 100). Además tiene funcionalidad AJAX, para que al detectar el cambio de un mes o de un año varíe el número de días que despliega la primera lista. Debido a su mayor complejidad, se apoya en un managed bean para implementar toda su lógica.

Descargar ejemplo composite component para representar fechas (proyecto NetBeans para GlassFish)

Ejercicios de clase. Clase 7: AJAX en JSF

Crea un facelet con dos listas desplegables que representen marcas de fabricantes de teléfonos y algunos de sus respectivos modelos. Cuando el usuario cambie la selección del fabricante debe cambiar automáticamente la lista de modelos, sin necesidad de enviar (hacer submit()) sobre el formulario que las contenga, empleando la tecnología AJAX (Asynchronous JavaScript And XML)

1. El usuario genera un evento, por ejemplo, seleccionando un elemento de la lista de compañías. El resultado es una llamada JavaScript.
2. Se crea un objeto XMLHttpRequest, configurado con un parámetro de petición que incluye el identificador del componente que genera el evento y cualquier valor que el usuario pueda haber introducido.
3. El objeto XMLHttpRequest hace una petición asíncrona al servidor Web. Un objeto (concretamente un método listener o escuchador en un JavaBean, en este caso) recibe la petición y la procesa en segundo plano.
4. El objeto que procesó la petición retorna un documento XML, conteniendo toda la información actualizada que necesita recibir el cliente.
5. El objeto XMLHttpRequest recibe los datos XML, los procesa ejecutando automáticamente el método que recibe el resultado (callback) y actualiza el modelo de objetos del documento (DOM) del facelet con los nuevos datos, es decir, con la lista de modelos para la nueva compañía seleccionada.

Solución AJAX (proyecto NetBeans para GlassFish)