• Author / Uploaded
• victor.rodiguez5734

Citation preview

UNIVERSIDAD DE EL SALVADOR FACULTAD MULTIDISCIPLINARIA DE OCCIDENTE DEPARTAMENTO DE INGENIERÍA Y ARQUITECTURA

MATERIA: Administración de Proyectos Informáticos TEMÁTICA AB ORDADA: AJAX DOCENTE: Ing. Francisco Quijano PRESENTAN: Minero Morales, Roberto Orlando Rodríguez Umaña, Víctor Manuel LUGAR Y FECHA: Santa Ana, 31 de octubre de 2009

ÍNDICE

Introducción...............................................................................................................................................3 Objetivos....................................................................................................................................................4 AJAX.........................................................................................................................................................5 1 Antecedentes.....................................................................................................................................5 2 Motivación.........................................................................................................................................6 3 ¿Qué es AJAX?..................................................................................................................................8 4 El modelo de aplicaciones AJAX.......................................................................................................9 5 Elementos de AJAX.........................................................................................................................11 8 Problemas de AJAX.........................................................................................................................19 9 AJAX en Acción..............................................................................................................................21 10 Tecnologías para el desarrollo de aplicaciones web con AJAX....................................................29 11 Ejemplo de uso de AJAX...............................................................................................................32 Conclusiones............................................................................................................................................52 Recomendaciones.....................................................................................................................................53 Anexos.....................................................................................................................................................54 Glosario...............................................................................................................................................54 Bibliografía..............................................................................................................................................55

Ajax

Introducción En momentos con altos índices de desarrollo tecnológico como los actuales, solamente se puede ser competitivo utilizando herramientas óptimas para el desarrollo de aplicaciones que sean capaces de cumplir con las exigencias planteadas. Por otro lado, una de las áreas con más aplicación y demanda al mismo tiempo, es la de las aplicaciones web, que han dejado de ser afiches informativos en línea para pasar a convertirse en herramientas fundamentales para el éxito de muchas empresas, esto debido a que forman parte de su eje empresarial y/u operativo. Basados en esto, podemos decir que como personas dedicadas al desarrollo de aplicaciones tecnológicas orientadas al web, necesitamos ser conocedores de herramientas que nos permitan un desarrollo de aplicaciones más potentes y eficientes, pero de una manera más rápida, sencilla, eficiente, ordenada y extensible. Una de esas herramientas, misma que hoy presentamos, es AJAX. AJAX, provee a los programadores web de toda una gama de oportunidades que permiten el desarrollo de aplicaciones web mucho más eficientes y al mismo tiempo funcionales. Muchos de los sitios web más visitados actualmente a nivel mundial no existieran, o simplemente no presentaran el mismo atractivo si toda su estructura no estuviera fundamentada en AJAX. Con este documento, resultado de investigación a la que sumamos nuestros propios aportes, pretendemos introducir la tecnología de una manera breve pero sin limitarnos a contenido superficial. Así, esperamos que su contenido sea de agrado y utilidad para el lector.

3

Ajax

Objetivos General: •

introducir el uso de AJAX como una herramienta para el desarrollo de aplicaciones web enriquecidas.

Específicos: •

Conocer los indicios de tecnologías anteriores a AJAX, que dieron la pauta para su desarrollo.

•

Crear conciencia sobre la necesidad de utilizar AJAX como tecnología de desarrollo web para cumplir con las exigencias actuales.

•

Entender el modelo de aplicaciones de AJAX y su diferencia con el de las aplicaciones web tradicionales.

•

Conocer los elementos de AJAX y la función que cada uno de ellos desempeña a la hora de concretar su modelo de aplicaciones.

•

Aprender sobre las implementaciones de AJAX a partir del conocimiento de sitios que hacen uso de dicha tecnología.

•

Dar a conocer tecnologías extendidas de AJAX como ICEfaces y Dinamic Faces.

•

Ayudar el uso de la tecnología por medio de un ejemplo didáctico, diseñado para ser sencillo, sin descuidar los aspectos fundamentales para su fácil seguimiento y comprensión.

4

Ajax

AJAX 1

Antecedentes

El término AJAX no fue creado sino hasta el año 2005, sin embargo, el uso de las tecnologías que permiten la existencia de AJAX data de una década atrás, cuando Microsoft tuvo la iniciativa de el desarrollo de Scripting Remoto. Las técnicas para la carga asíncrona de contenidos en una página web, sin requerir recarga completa, se remontan al tiempo del elemento iframe de Internet Explorer (1996) y del elemento layer de Netscape (1997). Ambos tipos de elemento tenían el atributo “src” que podía tomar cualquier dirección URL externa, y cargando una página que contenga JavaScript que manipularan la página paterna, podían lograrse efectos parecidos a los de AJAX. Ya en el año 1998, se introdujo el Microsoft's Remote Scripting, resultando ser un sustituto más elegante para las técnicas de uso de los elementos iframe y layer. Su funcionamiento se basaba en el envío de datos a través de un applet Java que se podía comunicar con el cliente por medio de JavaScript. La comunidad de desarrolladores web trabajó para extender su uso a diferentes navegadores. En el año 2002, se realizó una modificación por parte de la comunidad de usuarios al Microsoft Remote Scripting para reemplazar el applet Java por XMLHttpRequest. A partir de

5

Ajax aquí, XMLHttpRequest se ha venido implementando en la mayoría de navegadores, lo que ha permitido que se vuelva casi un “estándar”. Por esta razón, raras veces se utilizan técnicas alternativas, lo que lleva al apogeo de AJAX.

2

Motivación

Al principio, la web fue destinada a mostrar sólo los documentos HTML. Esto significa que la aplicación web clásica tiene un "ingrese sus datos, enviar la página al servidor, y esperar una respuesta", modelo destinado únicamente para las páginas web. En segundo lugar, existe el problema de la comunicación sincrónica. En la web, la comunicación sincrónica hace que el usuario solicite una página HTML y el navegador envía una petición HTTP a un servidor web en su nombre. El servidor realiza el procesamiento, a continuación, devuelve una respuesta al navegador en forma de una página HTML. El explorador muestra la página HTML solicitada (Figura 1). El navegador siempre inicia las solicitudes, mientras que el servidor web sólo responde a las solicitudes del navegador. El servidor web no inicia peticiones, la comunicación es siempre en una vía. El ciclo de "petición / respuesta" es sincrónica, durante el cual el usuario tiene que esperar.

6

Ajax

Figura 1 – Aplicación Web Tradicional

Como se mencionó, este modelo funciona para navegar por páginas web, pero el desarrollo de aplicaciones web cada vez más complejas hace que este modelo se esté viniendo abajo y que ya no sea adecuado. La primera área en la que se descompone es la del rendimiento, el enfoque de "enter, enviar y esperar" implica tiempo perdido. En segundo lugar, cada vez que se actualiza una página, se está enviando una nueva petición al servidor, esto requiere un procesamiento adicional del servidor, y conduce a un mayor consumo de ancho de banda causado porque la página se actualiza de forma redundante. El problema subyacente es que hay una falta total de comunicación en dos vías en tiempo real. Esta conduce a un escenario lento, poco fiable, ineficiente y de baja productividad de las 7

Ajax aplicaciones web. Usted tiene dos problemas básicos: uno de tener que esperar por una respuesta del servidor y otro que los servidores no sean capaces de iniciar actualizaciones.

3

¿Qué es AJAX?

AJAX es un conjunto de técnicas de programación o un enfoque particular de la programación web. Estas técnicas de programación implica ser capaz de actualizar sin problemas una página web o una sección de una aplicación web con una entrada del servidor, pero sin la necesidad de una actualización inmediata de la página. Esto no significa que el navegador no establece una conexión con el servidor web. Lo que difiere en el modelo de AJAX es que se mueve a la posición en la que se actualiza la página. AJAX son las siglas de Asynchronous JavaScript And XML, es decir, XML y JavaScript Asíncronos, donde el término asíncrono indica que la tecnología se ejecuta en su propio marco temporal. AJAX es un estilo de programación que permite al desarrollador hacer que una página web interactúe con el servidor web que la aloja. Normalmente, una página web solamente dispone de un método para comunicarse con el servidor, que consiste en recargarse a ella misma o cargar otra página. Si se utiliza AJAX, una vez que la página se ha cargado puede ejecutar comandos en el servidor, recibir cualquier información resultante de dichos comandos y mostrarla al usuario sin necesidad de recargarse. 8

Ajax Las ventajas de este tipo de programación saltan a la vista. La velocidad de la interacción es mucho mayor, especialmente en el caso de aquellos sitios que tienen muchos gráficos o contenidos interactivos, puesto que ya no es necesario recargar imágenes o scripts. Las pesadas interfaces actuales se pueden sustituir por sistemas rápidos, reactivos y muchos más eficaces. Para todo tipo de aplicaciones en línea, desde programas de correo, foros y hasta búsquedas en bases de datos, AJAX se ha convertido en el método óptimo para proporcionar al usuario las ventajas de la funcionalidad del servidor. Las aplicaciones nunca habían estado tan cerca del nivel de ejecución de los programas instalados localmente.

4

El modelo de aplicaciones AJAX

El modelo de aplicación AJAX busca producir un mayor rendimiento, con lo que la creación de aplicaciones web sea más eficiente, por medio de una sutil alteración de la forma en que estas funcionan. AJAX introduce la idea de la "actualización parcial de la pantalla” para el modelo de aplicación web. En una aplicación AJAX, sólo los elementos de interfaz de usuario que contienen nueva información será actualizada. El resto de la interfaz de usuario debe permanecer sin cambios. Esto significa que usted no tiene que enviar toda la información y quedarse esperando una respuesta, porque la página anterior ya está en funcionamiento.

9

Ajax Este modelo permite la operación continua de una página web, y también significa que el trabajo realizado en la página no tiene que seguir un patrón predecible. En lugar de un modelo sincrónico, ahora se puede tener un modelo asíncrono. En una aplicación AJAX, el servidor puede dejar una notificación cuando está listo, y el cliente lo recogerá cuando quiere. O bien, el cliente puede hacer peticiones al servidor a intervalos regulares para ver si el servidor está listo, pero puede continuar con otras operaciones al mismo tiempo (Figura 2).

Figura 2 – Modelo de aplicación AJAX

Como resultado, el usuario puede seguir utilizando la aplicación, mientras que el cliente solicita información desde el servidor en segundo plano. Cuando los nuevos datos, finalmente llegan, sólo las partes relacionadas de la interfaz de usuario necesitaran ser actualizadas.

10

Ajax

5

Elementos de AJAX

A continuación se hará un esfuerzo por explicar cómo funciona cada uno de los elementos poco a poco, hasta lograr una comprensión global de AJAX. a) JavaScript JavaScript es una tecnología que permite a los programadores escribir funciones como parte de un archivo HTML. Por lo general se incluye en la sección de la página web, y se ejecuta en el ordenador del usuario. Java Script puede realizar cálculo complejos y mostrar el resultado en la página web. También permite cambiar elementos dentro de una página web en interacción con el usuario. Puede acceder a información del sistema del usuario y mostrar los resultados. Con AJAX, JavaScript puede comunicarse con el servidor web y mostrar la información resultante. La sintaxis de JavaScript es muy similar a la de Java, aunque en sentido estricto, estos dos lenguajes no están relacionados. Sin embargo, al igual que Java, JavaScript utiliza la programación orientada a objetos.

b) XMLHttpRequest Abreviado como XHR, es un objeto que proporciona al programador toda la 11

Ajax funcionalidad necesaria para que el ordenador cliente se comunique con el servidor web. La programación orientada a objetos es un estilo de programación en el que, en lugar de utilizar variables simples, los programas utilizan bloques de información que no sólo pueden almacenar un grupo de valores sino un conjunto de instrucciones, conocidas como métodos. El objeto XHR tiene un conjunto de métodos muy útiles, de los cuales los más importantes son los siguientes:

open (method, URL, async) Este método prepara el objeto para la transmisión de información al servidor. Se puede definir con una serie de tipos, como POST, GET y PUT. La mayor parte del tiempo, se utiliza POST, es el método más utlizado para enviar información a partir de formularios HTML. La URL contiene la aplicación a la que se enviará la información. La propiedad async puede ser true o false. Si es false, indica al objeto que debe esperar a recibir una respuesta del servidor antes de continuar procesando el código JavaScript. Si es true, se puede procesar el código mientras se espera la respuesta del servidor, por ejemplo para mostrar al lector un mensaje “Su petición está siendo procesada...” hasta que el servidor devuelva el resultado.

12

Ajax SetRequestHeader (label, value) Este método permite indicar al objeto qué tipo de texto le enviaremos, especificándolo en el encabezado HTTP. Label suele ser casi siempre “Content-Type”, y se pueden elegir una serie de tipos, incluidos los formatos XML y HTML, o un conjunto de resultados de un formulario.

send (content) Este método transmite información textual al servidor.

Las propiedades siguientes también están asociadas con el objeto XHR: readyState El valor de esta propiedad se modifica en función del estado del objeto XHR: será 0 si no está inicializada, 1 si está abierta, 2 si está enviada, 3 si recibe, 4 si está cargada. Este último valor es el más útil. OnreadyStateChange Esta propiedad provoca una acción cada vez que el readyState del objeto cambia. ResponseText Esta propiedad toma el valor de la información textual que devuelve el servidor. Por 13

Ajax medio de JavaScript, se prepara el objeto XHR con toda la información necesaria, se envia y se recibe los resultados en la propiedad responseText.

c) Aplicación del lado del servidor La aplicación del lado del servidor que podemos utilizar para procesar la información enviada por el XRH, puede ser cualquier aplicación que pueda procesar formularios, desde JSP hasta ASP, desde los servidores Prolog hasta el legendario “potatopowered server”. Las páginas web que utilizan AJAX obtiene resultados prácticamente idénticos independientemente de la aplicación de servidor utilizada. Con AJAX, el servidor puede hacer cualquier cosa para el usuario que le permitan hacer sus aplicaciones como conexiones de bases de datos, búsquedas de imágenes ycualquier cosa que el servidor sea capaz de hacer. También puede exponer el servidor a ataques maliciosos, por lo que es un riesgo que debemos tener en cuenta.

d) CSS (Cascading Style Sheets) CSS es el lenguaje que se utiliza para aplicar reglas de estilo a los documentos HTML, por ejemplo sobre fuentes y posicionamiento. Con una tecnología nueva como AJAX, es esencial presentar correctamente los resultados. Por ese motivo, la práctica común 14

Ajax es utilizar CSS para dar formato a la información que devuelve la responseText.

Cuando JavaScript utiliza el método getElementById para insertar los resultados de una petición AJAX en una página web, utiliza el campo id de un elemento HTML como o , para identificar dónde debe colocarse el texto. También se puede asignar un campo class a cualquier elemento de este tipo, y aplicarle un estilo determinado con ayuda de CSS.

6

¿Cómo funciona?

AJAX es una filosofía, no es un conjunto de aplicaciones ni un lenguaje de programación concreto. El sistema AJAX está compuesto por cuatro elementos: JavaScript, el objeto XMLHttpRequest, una aplicación del lado del servidor y CSS. En pocas palabras, el equipo del cliente ejecuta una serie de comandos JavaScript, incluida una llamada al objeto XMLHttpRequest. Dicho objeto envía información al servidor en un encabezado HTTP, y el servidor procesa la información y ejecuta la acción solicitada. Si es necesario devolver información al equipo cliente, el objeto XMLHttpRequest se encarga de recibirla y mostrarla con la ayuda de JavaScript y CSS (Figura 3).

15

Ajax

Figura 3 – Aplicación Web AJAX

7

¿Por qué usar AJAX?

Una vez se ha entendido como funciona AJAX, ahora vamos a explicar en términos reales, las ventajas de utilizar AJAX para crear aplicaciones web:

Actualización parcial de las páginas Usted no tiene que actualizar toda la información en una página entera, usted puede actualizar sólo las partes de la página que lo requieran. Esto debe permitir que no se

16

Ajax actualice toda la página, que se transfieran menos datos, y mejora el flujo de la experiencia del usuario.

Invisible recuperación de datos Con una aplicación AJAX, aunque en la superficie de la página web parece que no suceda algo, podría ser que su actualización se esté dando detrás de ella.

Actualización constante Porque no es necesario esperar para cargar una página todo el tiempo, y porque AJAX puede recuperar los datos de forma invisible, la aplicación web puede ser constantemente actualizada. Una aplicación de software tradicional como Word o Outlook modifica los menús que muestra o sus opciones, en función de su configuración, o los datos que contiene o de la situación en que se encuentra y no tiene que esperar por un servidor o usuario para realizar una acción antes de que se puede descargar el correo nuevo o aplicar una nueva plantilla. Las técnicas AJAX permiten que las aplicaciones web tiendan a comportarse más como las aplicaciones de escritorio por este motivo.

Interfaz ágil Una interfaz que no tiene que ser cambiada es casi inevitablemente una interfaz de usuario

17

Ajax que es más fácil de usar. AJAX se puede utilizar para modificar partes de la interfaz y por medio de hacer alteraciones sutiles, se podría ayudar al usuario a través de una interfaz o un asistente a acelerar sus procesos.

Arrastrar y soltar La funcionalidad de “arrastrar y soltar” es una de las mejores características de la mayoría de aplicaciones de software de escritorio.Esta funcionalidad no se califica como estrictamente una funcionalidad de AJAX. Es algo que ha sido posible desde hace muchos años en aplicaciones web, incluso antes de la introducción del objeto XMLHttp Request. La mayoría de los desarrolladores optan por el Flash o alguna solución similar de peso pesado en lugar de utilizar el código JavaScript. En la revisión de técnicas de creación de interfaz, AJAX ha introducido la funcionalidad de arrastrar y soltar, que se puede utilizar para gestionar los cambios finales, y luego estos cambios se envían a través de AJAX a el servidor. Por ejemplo, se puede arrastrar varios elementos en la pantalla a nuevas posiciones, y luego cerrar la sesión. Más tarde, cuando vuelva, esos elementos se encuentran en la misma posición.

18

Ajax

8

Problemas de AJAX

Se debe considerar cómo se puede mejorar el uso de sus páginas web y si AJAX es una solución que contribuye a ello. Algunos problemas comunes con AJAX se describen a continuación.

Bajo grado de reacción Tal vez el problema más evidente notado con el AJAX es cuando se utiliza en la teoría para acelerar la interacción, y que en realidad retrasa la página. Si continuamente se utiliza AJAX para enviar los datos al servidor, entonces se podría encontrar que la página se ha ralentizado mucho. De la misma forma, si el servidor devuelve grandes conjuntos de datos para el cliente, el navegador se puede encontrar en una lucha para manejar de manera oportuna la información. En teoría, un motor de búsqueda puede parecer un buen lugar para utilizar AJAX para dividir los datos de modo que no se tenga que recargar la página, por ejemplo cuando se pasa de las páginas 1-10 a las páginas 11-20. En realidad, aun así, sería mucho mejor, utilizar el servidor para cortar el conjunto de datos en trozos pequeños, en lugar de hacer que el navegador intente hacerle frente a una gran cantidad de datos. Inteligencia y buen juicio para aplicar técnicas AJAX son la clave aquí. 19

Ajax

Colapsar el botón Atrás del navegador Las aplicaciones AJAX puede, si no se aplican con prudencia, colapsar el botón Atrás de su navegador. Uno de los principales ejemplos de gran aplicación AJAX es Gmail. Gmail utiliza los botones Atrás y Adelante de manera muy eficaz. Además, hay un montón de sitios web por ahí que no utilizan las técnicas de AJAX que deshabilitar el botón Atrás de todos modos.

Tensión en el navegador Si se empuja toda la carga de procesamiento de datos al navegador, entonces se vuelve más dependiente del navegador y de la máquina del usuario para hacer el tratamiento. Delegar al navegador para procesar una página no es a veces la mejor opción respecto a la espera de un servidor web para obtener la respuesta. De hecho, en algunos casos, podría ser peor si por ejemplo un navegador con Internet Explorer decidiera apropiarse de toda la capacidad de procesamiento para hacer el tratamiento, dejando a toda la máquina colgada.

20

Ajax

9

AJAX en Acción

AJAX es ahora una tecnología bastante difundida, para muestra de ello se presenta un resumen de algunos sitios y tecnologías que la implementan:

– Gmail Gmail, llamado en otros lugares Google Mail (Alemania, Austria y Reino Unido) por problemas legales, es un servicio de correo electrónico gratuito proporcionado por la empresa estadounidense Google a partir del 15 de abril de 2004 y que ha captado la atención de los medios de información por sus innovaciones tecnológicas, su capacidad, y por algunas noticias que alertaban sobre la violación de la privacidad de los usuarios. Tras más de 5 años, el servicio de Gmail, junto con Google Calendar, Google Docs y Google Talk; el 7 de julio de 2009, dejaron su calidad de Beta y pasaron a ser productos terminados.

21

Ajax

– Google Suggest Google Suggest fue presentada en diciembre de 2004, es una herramienta muy útil que nos iba mostrando, según íbamos escribiendo en el recuadro de las palabras de búsqueda, posibles términos junto al número de resultados que nos devolvería. Se trataba de una aplicación fuera del buscador web, pero posteriormente fue integrada dentro de 'www.google.com', la versión internacional de Google, permitiendo así a los usuarios que realizan consultas tener una ayuda mientras teclean. Hay que 22

Ajax tener en cuenta que estas sugerencias son diferentes ya no solo para cada idioma, sino también para cada versión local del buscador.

– Google Maps Google Maps es el nombre de un servicio gratuito de Google. Es un servidor de aplicaciones de mapas en Web. Ofrece imágenes de mapas desplazables, así como 23

Ajax fotos satelitales del mundo entero e incluso la ruta entre diferentes ubicaciones. Desde el 6 de octubre del 2005, Google Maps es parte de Google Local. Es similar a Google Earth, una aplicación Windows/Mac/Linux que ofrece vistas del Globo terráqueo impactantes, pero que no es fácil de integrar a páginas Web. Ofrece, asimismo, la posibilidad de que cualquier propietario de una página Web integre muchas de sus características a su sitio Web.

24

Ajax

– Flickr (flickr.com) Flickr es un sitio web que permite almacenar, ordenar, buscar y compartir fotografías y videos online. Actualmente Flickr cuenta con una importante comunidad de usuarios que comparte las fotografías y videos creados por ellos mismos. Esta comunidad se rige por normas de comportamiento y condiciones de uso que favorecen la buena gestión de los contenidos. La popularidad de Flickr se debe fundamentalmente a su capacidad para administrar imágenes mediante herramientas que permiten al autor etiquetar sus fotografías y explorar y comentar las imágenes de otros usuarios.

25

Ajax

– Amazon (www.Amazon.com) Amazon.com, Inc. es una compañía estadounidense de comercio electrónico con sede en Seattle, Estado de Washington. Su eslogan es and you're done (Traducido al español: «y listo»). Fue una de las primeras grandes compañías en vender bienes a través de Internet. Amazon ha establecido sitios web separados para Canadá, el Reino Unido, Alemania, Austria, Francia, China y Japón, para poder ofrecer los 26

Ajax productos de esos países.

– eBay (www.ebay.com) eBay es un sitio destinado a la subasta de productos a través de Internet. Es uno de los pioneros en este tipo de transacciones, habiendo sido fundado en el año 1995. En eBay se puede comerciar una amplia variedad de productos, el único requisito es ser un usuario registrado.

27

Ajax eBay es una red de subastas por Internet, la mayor que existe por el momento y líder en este mercado. Cualquier persona puede registrarse en la página web de eBay y comprar o vender cualquiera de los artículos disponibles, agrupados en un sistema de categorías.

28

Ajax

10 Tecnologías para el desarrollo de aplicaciones web con AJAX En este sección nos enfocaremos principalmente en hacer un reseña de dos nuevas tecnologías emergentes para el desarrollo web: ICEFaces y Project Dynamic Faces.

ICEFaces

ICEfaces es un marco integrado Ajax de aplicaciones Java que permite a los desarrolladores de aplicaciones Ajax Java EE, crear y desplegar aplicaciones Rich Internet Applications (RIA), en Java puro. ICEfaces es un producto que los desarrolladores pueden utilizar para crear nuevas aplicaciones Java EE Ajax o ampliar las existentes sin costo alguno.

ICEfaces aprovecha los estándares Java EE para el desarrollo de aplicaciones así como las herramientas y entornos de ejecución. Las aplicaciones Rich Enterprise son desarrolladas en Java puro, y bajo un modelo de cliente ligero donde no es requerido utilizar Applets o plugins de navegadores.

29

Ajax Las aplicaciones de ICEfaces son JavaServer Faces (JSF), eso permite aplicar directamente las habilidades de Java EE de los desarrolladores, y estar aislados de realizar cualquier desarrollo relacionado con JavaScript.

Sitio del proyecto: www.icefaces.org

Project Dinamic Faces

Project Dinamic Faces es uno de varios proyectos que son extensiones de la tecnología JavaServer Faces. Es un proyecto innovador que proporciona una manera de añadir funcionalidad AJAX a las aplicaciones web basadas en tecnologías JavaServer Faces.

Este proyecto permite habilitar AJAX en cualquiera de los componentes JavaServer Faces de las aplicaciones web que ya están su uso. Usted no necesita modificar sus componentes para darles el poder de AJAX, así como tampoco es necesario volver a escribir toda su aplicación para añadir la magia de la tecnología AJAX.

Para agregar AJAX a su aplicación, primero debe identificar las partes de las páginas de la aplicación que desea que tenga la funcionalidad de AJAX para actualizar. Como los desarrolladores de la tecnología JavaServer Faces saben que una página JavaServer Faces 30

Ajax está representado por un árbol de los componentes. Con Dynamic Faces, se puede identificar qué componentes del árbol deben beneficiarse de las actualizaciones asincrónicas.

Dynamic Faces se utiliza para actualizar una parte del árbol de componentes que representa una página JavaServer Faces. Por lo tanto, el paradigma de Dinamic Faces es familiar para los desarrolladores de Ajax y de JavaServer Faces.

Más importante aún, Dynamic Faces aprovecha el modelo de componentes JavaServer Faces para que pueda utilizar las capacidades de Ajax de una manera más eficiente. Debido a la naturaleza de colaboración del modelo de componentes, los eventos de tecnología JavaScript en algunos componentes de la página pueden causar cambios asíncronos de cualquier número de otros componentes en la página. Dynamic Faces permite que estos cambios se produzcan como resultado de una sola petición Ajax al servidor más que como resultado de una petición Ajax para cada actualización asincrónica, lo que reduce la carga en el servidor.

Sitio del proyecto: https://jsf-extensions.dev.java.net/

31

Ajax

11 Ejemplo de uso de AJAX Autocomplete

Objetivo Crear una pequeña aplicación web que permita consultar a una base de datos para crear sugerencias de nombres de personas, al digitar una o varias letras en un campo de texto.

Requisitos

Sofware o Recurso NetBeans IDE Java Developet Kit (JDK) JavaServer Faces Components/ Java EE Platform GlassFish Application Server Base de datos de ejemplo

Versión requerida 6.7 Java version 6o5 1.2 with Java EE 5* or 1.1 with J2EE 1.4 V2 Requerida

32

Ajax

Procedimiento Descargando e instalando la librería Project Dynamic Faces Component

Antes de que pueda utilizar los componentes de la libreria Dynamic Faces en su aplicación, debe descargar e instalar la librería. Se puede descargar e instalar desde el Plugin Manager:

1. En la barra de menú principal, seleccione Tool > Plugins

2. Seleccione la pestaña de “Available Plugins” y en la caja de texto “Search” escriba las primeras letras del nombre del plugin, por ejemplo “Dyna…”.

3. Clic en “Install”.

4. En el instalador del IDE de NetBeans, clic en “Next”. 33

Ajax 5. Seleccione el checkbox para aceptar los términos de la licencia y clic en “Install” otra vez.

6. Clic en “Finish”.

7. Clic en “Close” para salir del Plugin Manager.

Creando el Proyecto

En esta sección crearemos el proyecto web usando el framework “Visual Web JSF”. La característica de este framework es el “drag and drop” (arrastra y suelta) como medio para el desarrollo web.

1. En la barra de menú principal, seleccione File > New Proyect.

2. Seleccione Java Web en la categoría y Web Application como tipo de proyecto. Clic en

Next.

34

Ajax

3. En el nombre del proyecto escriba autocomplete y clic en Next.

35

Ajax 4. Seleccione GlassFish V2 en el servidor y clic en Next.

5. Seleccione Visual Web JavaServer Faces como framework para la aplicación web.

36

Ajax 6. Clic en Finish para crear el proyecto.

Agregando la librería de Dinamic Faces

En esta sección, usted agregará la libreria de componentes “Dynamic Faces” a su Entorno de Desarrollo (IDE).

1. En la ventana de Projects, clic derecho sobre el nodo Component Libraries y seleccione Add Component Library.

37

Ajax 2. En el cuadro de diálogo Add Component Library, seleccione Dynamic Faces

Components (0.2) y haga clic en Add Component Library.

Ahora desde el proyecto podemos acceder a la categoria Dynamic Faces en la paleta de componentes.

38

Ajax Diseño de la página

Agregando componentes a la página En este apartado, usted agregará funcionalidad Ajax a los componentes del woodstock.

1. Clic en la pestaña Design para ver el diseño visual de la página.

2. Arrastre y dibuje un componente Label de la Palette que está en la parte superior derecha del diseñador gráfico.

39

Ajax 3. En la ventana Properties del componente label1, ingrese Nombre: para la propiedad

text. 4. Arrastre y dibuje un componente Text Field de la sección Woodstock Basic de la

Palette del diseñador gráfico. Colóquelo a la derecha del componente label. 5. Clic derecho sobre el componente Text Field y seleccione Add Binding Atrribute.

6. Arrastre y dibuje un componente Label de la Palette. Colóquelo debajo del primer componente label.

7. En la ventana Properties del componente label2, ingrese Resultados: para la propiedad text.

8. Arrastre y dibuje un componente Listbox de la Palette. Colóquelo a la derecha del

label2. 9. Clic derecho sobre el componente Listbox y seleccione Add Binding Atrribute.

10. En la barra de herramientas del diseñado gráfico, clic sobre Show Virtual Forms.

40

Ajax

Configurando Transacciones Ajax El componente “Ajax Transaction” incluido en el proyecto Dynamic Faces, le permite configurar visualmente la funcionalidad Ajax en tiempo de diseño, mostrando los diferentes componentes con un borde de colores en el diseñador gráfico. Como minimo, debe especificar los componentes cuya entrada será enviada al servidor cuando se dispare el Ajax Transaction así como los componentes que serán repintados cuando el cliente reciba la respuesta via Ajax.

Los componentes cuya entrada son enviados al servidor, son mostrados con un borde sólido y los componentes que serán repintados son mostrados con un borde punteado.

En esta sección, usted configurará dos “Ajax Transaction”. El primer “Ajax Transaction” se disparará en respuesta al usuario que escribió un texto en el componente TextField. Cuando se dispare el primer “Ajax Transaction”, el TextField enviará su entrada al servidor de manera Asíncrona (via Ajax) y el componente ListBox será repintado cuando el cliente reciba la respuesta Ajax del servidor.

1. Expanda la sección Dynamic Faces de la Palette, arrestre y dibuje un Ajax Transaction dentro de la Page1.

2. En el diseñado gráfico, clic derecho sobre el componente Text Field y seleccione 41

Ajax

Configure Ajax Transactions. El diálogo de las configuraciones de las transacciones Ajax se abrirá.

3. Doble clic sobre el valor de Send Input y cambie el valor a Yes, haga lo mismo para el valor de Re-Render y cambiélo a No.

4. Clic en OK.

5. En el diseñado gráfico, clic derecho sobre el componente Listbox y seleccione

Configure Ajax Transactions. 6. Doble clic sobre el valor de Re-Render y cambie el valor a Yes, haga lo mismo para el valor de Send Input y cambiélo a No.

7. Click en OK.

42

Ajax

Agregando una nueva transacción Ajax En esta sección, usted creará una nueva transacción Ajax para que configure el componente Text Field para un renderizado cuando se devuelva el valor seleccionado en el componente Listbox.

1. En el diseñador gráfico, haga clic derecho sobre el componente Text Field y seleccione Configure Ajax Transactions.

2. En el cuadro de diálogo de Configure Ajax Transactions, clic en New para crear una nueva transacción Ajax.

3. Establezca el valor de Send Input para la ajaxTransaction2 a No y el valor de Re-

render a Yes. Clic en OK.

43

Ajax 4. En el diseñador gráfico, clic derecho sobre el compenente Listbox a seleccione

Configure Ajax Transactions. 5. En el cuadro de diálogo de Configure Ajax Transactions, establezca el valor de Send

Input para la ajaxTransaccion2 a Yes y el valor de Re-Render a No.

Cuando haya finalizado, la Page1 quedará como la figura.

44

Ajax 6. En el diseñador gráfico, seleccione el componente Text Field, y en la ventana de

Properties, agregue el siguiente parámetro a la propiedad onKeyUp. DynaFaces.Tx.fire("ajaxTransaction1", "textField1")

7. Seleccione el componente Listbox, y en la ventana de Properties, agregue el siguiente parámetro a la propiedad onChange. DynaFaces.Tx.fire("ajaxTransaction2", "listbox1")

Conectándose con la base de datos En esta sección, se hará la configuración para establecer la conexión al servidor derby y a la base de datos de ejemplo vir que viene con el IDE.

1. En la ventana Services, clic derecho sobre la conexión jdbc:derby://localhost:1527/vir

[vir on VIR] y luego seleccione Connect.

45

Ajax

Interactuando con la base de datos En esta sección, usted se conectará a la base de datos vir y la enlazará con el IDE. Los componentes JSF 1.2 pueden acceder a los datos de la base de datos y mostrarlos dentro de tu página web.

1. Expanda la conexión a la base de datos vir, busque la base VIR, localice y arrestre la tabla EMPLOYEE a la Page1.

2. En la ventana Navigator, expanda el nodo SessionBean1, clic derecho sobre

employeeRowSet y seleccione Edit SQL Statement. Un editor de SQL se abrirá. 3. En el panel SQL del Editor SQL, reemplace la query existente por la siguiente sentencia. SELECT ALL EMPLOYEE.ID, EMPLOYEE.FIRSTNAME, EMPLOYEE.LASTNAME, EMPLOYEE.EMAIL FROM EMPLOYEE WHERE EMPLOYEE.FIRSTNAME LIKE ?

4. Cierre el Editor SQL.

46

Ajax

5. En la ventana Services, arrestre la tabla EMPLOYEE a la Page1 de nuevo.

6. En el cuadro de diálogo que aparecerá, seleccione Create SessionBean1

employeeRowSet1 y luego haga clic en OK.

47

Ajax 7. En la ventana Navigator, clic derecho sobre employeeRowSet1 y seleccione Edit SQL

Statement. 8. En el panel SQL del Editor SQL, reemplace la query existente por la siguiente sentencia. SELECT ALL EMPLOYEE.ID, EMPLOYEE.FIRSTNAME, EMPLOYEE.LASTNAME, EMPLOYEE.EMAIL FROM EMPLOYEE WHERE EMPLOYEE.ID = ?

9. Cierre el Editor SQL.

10. En el diseñador gráfico, clic derecho sobre el componente Listbox y seleccione Bind to

Data. 11. En el cuadro de diálogo Bind to Data, clic sobre la pestaña Bind to Data Provider y seleccione employeeDataProvider de la lista desplegable.

12. Seleccione employee.id para el Value field y employee.firstname para Display field y luego haga click en OK.

48

Ajax

Agregando código Java En esta sección, usted modificará el código Java existente para que la aplicación funcione correctamente. En el diseñador gráfico, cuando usted hace doble clic en un componente, el editor de código fuente se abre y lo ubica en el código de los eventos del componente. Esto hace fácil la tarea de modificar y agregar nuevo código.

1. Haga doble clic sobre el componente Text Field y reemplace el código por el siguiente.

49

Ajax

2. Clic derecho en cualquier parte del editor de código y seleccione Fix Imports.

3. Clic en la pestaña Design para regresar al diseñador gráfico. Haga doble clic sobre el componente Listbox y reemplace el código por el siguiente.

4. Localice el método prerender y reemplace el código por este otro.

50

Ajax

Ejecutando la aplicación En esta sección, usted correrá el proyecto. En NetBeans, hay varias formas de correr una aplicación. Usted puede hacer clic en el icono

de la barra de herramientas principal, o

hacer clic derecho sobre el proyecto en la ventana Projects y seleccionar la opción Run.

En el navegador ingrese las primeras letras de un nombre. Si un nombre que inicie con las letras se encuentra en la base de datos, el nombre será desplegado en la listbox.

51

Ajax

Conclusiones Luego de la temática abordad en este documento, podemos concluir que:

•

Los requerimientos actuales de rendimiento y funcionalidad para las aplicaciones web, motiva la existencia de tecnologías que faciliten a los programadores el cumplimiento de los mismos.

•

Una de las herramientas que permite a los programadores un mejor desarrollo de aplicaciones web es AJAX.

•

AJAX es una filosofía o una técnica de desarrollo, no un lenguaje de programación. Por lo tanto, se puede utilizar en conjunto con diferentes tecnologías y no requiere plugins.

•

AJAX se basa en el establecimiento de comunicación entre el cliente y el servidor de manera transparente, en lo que pudiéramos llamar modo “backgroud”.

•

ICEfaces y Dynamic Faces, son tecnologías basadas en AJAX, que permiten un desarrollo aún más práctico y natural, permitiendo que las aplicaciones web se asemejen más a las aplicaciones de escritorio.

52

Ajax

Recomendaciones A la finalización de este documento, únicamente nos resta recomendar lo siguiente:

•

Profundizar en los fundamentos teóricos de AJAX. Hay muchos libros que se han escrito para estos fines, y creemos primordial su estudio para tener un conocimiento mucho más fundamentado.

•

Dedicar tiempo para la realización del ejemplo y probar diferentes variantes a fin de entender la funcionalidad de la tecnología.

•

Buscar ejemplos adicionales que permitan un conocimiento práctico extendido de las tecnologías aquí presentadas.

•

Visitar los sitios web de ICEfaces (www.icefaces.org) y Project Dynamic Faces (https://jsf-extensions.dev.java.net/) con la finalidad de obtener más información. En ambos sitios se encuentra una amplia documentación y muchos ejemplos.

•

Indagar sobre las buenas prácticas de desarrollo para el uso correcto de las tecnologías aquí expuestas, evitando así, problemas de eficiencia, portabilidad o seguridad.

•

Animarse a desarrollar sus propias aplicaciones haciendo uso de las tecnologías expuestas. 53

Ajax

Anexos Glosario – Rich Internet Applications (RIA): El término se refiere a un nuevo tipo de aplicaciones con más ventajas que las tradicionales aplicaciones Web. Estas aplicaciones surgen como una combinación de las ventajas que ofrecen las aplicaciones Web y las aplicaciones tradicionales.

– Applets: Componente de una aplicación que se ejecuta en el contexto de otro programa, por ejemplo un navegador Web.

– JavaServer Faces (JSF): Tecnología y framework para aplicaciones Java basadas en web que simplifica el desarrollo de interfaces de usuario (GUIs) en aplicaciones Java Enterprise Edition.

– Derby: Su nombre completo es Apache Derby. El término se refiere a un sistema de gestión de bases de datos escrito en Java que puede ser embebido en aplicaciones Java y utilizado para procesos de transacciones online.

– IDE: Siglas en inglés de Entorno de Desarrollo Integrado. Se refiere a un programa compuesto por un conjunto de herramientas para un desarrollador de aplicaciones. 54

Ajax

Bibliografía Libros: – Ajax Patterns And Best Practices. Christian Gross - Apress. 2006 – Beginning Ajax. Chris Ullman and Lucinda Dykes - Wiley Publishing, Inc. 2007 – Foundations of Ajax. Ryan Asleson and Nathaniel T. Schutta - Apress. 2006 – AJAX, un juego de niños. John Maxwell – KnowWare E.U.R.L.

Sitios: –

http://mundobyte.wordpress.com/2008/11/22/autocompletar-texto-ajax-y-javaserver-faces/ Visitado el 10-oct-09 – 02:40 p.m.

–

http://www.netbeans.org/kb/docs/web/ajax-textfield.html Visitado el 10-oct-09 – 03:00 p.m.

–

http://www.juntadeandalucia.es/xwiki/bin/view/MADEJA/ICEFaces Visitado el 18-oct-09 11:11 am

–

http://www.icefaces.org/main/resources/ Visitado el 18-oct-09 11:17 am

55

Ajax –

http://www.icefaces.org/main/ajax-java/whyicefaces.iface Visitado el 18-oct-09 11:20 am

–

http://www.icefaces.org/main/ajax-java/jsf-ajax.iface Visitado el 18-oct-09 11:21 am

–

https://jsf-extensions.dev.java.net/servlets/ProjectDocumentList? folderID=5580&expandFolder=5580&folderID=0 Visitado el 18-oct-09 – 11:50 a.m.

–

http://blogs.sun.com/branajam/entry/project_dynamic_faces_component_library Visitado el 18-oct-09 – 12:10 p.m.

–

http://java.sun.com/developer/technicalArticles/J2EE/webapp_3/ Visitado el 18-oct-09 – 12:40 p.m.

–

http://weblogs.java.net/blog/2006/08/30/introducing-project-dynamic-faces Visitado el 27-oct-09 – 11:00 a.m.

–

https://jsf-extensions.dev.java.net/ Visitado el 27-oct-09 – 11:20 a.m.

56