Práctica VI: Ajax

Equipo de trabajo:

NOMBRE ROL

Carlos Luis Sánchez Product Owner

Carlos Almarcha Scrum Master

Ismael Martín Equipo Scrum

Alberto Gómez Equipo Scrum

Federico Graziano Equipo Scrum

Carlos Larrondo Equipo Scrum

Ignacio Cerezo Equipo Scrum

José Barba Equipo Scrum

Paso 0: Punto de partida y objetivo con la funcionalidad Ajax

El punto de partida es el desarrollo ApitwitterTagV2 de la práctica V sobre "Webservices". Se añade la funcionalidad Ajax por la cual:

Se habilita un combo auxiliar que muestra un listado de Hashtag partiendo de un texto tecleado por el usuario.

Paso 1: Ubicación del código en el repositorio

El código completo con la solución Ajax está disponible en el repositorio: http://62.204.199.127/alef/UNED_2016/J2EE/APITwitterAjax/trunk/APITwitterTagV2

Descargar la aplicación mediante: Subclipse, Tortoise e importar el proyecto ApiTwitterTagV2

Descargar la BBDD apitwitter.sql (ver punto 4.5 Práctica "WebServices?" 2016) y arrancar XAMPP (ver

punto 4.6 Práctica "WebServices?" 2016)

Es necesario disponer de un contenedor de servlets y JSPs. En nuestro caso hemos utilizado Tomcat7.

Lanzamos la aplicación. Hacemos "login" como:

Usuario: juan

Clave: juan

Paso 2: Implementación de la clase Java: "HashtagSearchDWR.java" que va a ser accesible mediante DWR

En HashtagSearchDWR.java se define la clase DWR que se expone en un método para poder buscar hashtags que empiecen por una cadena arbitraria, que se pasa como parámetro. También se crea un método expuesto a DWR, mediante el que un cliente DWR puede solicitar la lista de hashtags que empiezan por "text".

La clase se encuentra en el paquete uned.java2016.apitwitter.dwr.

Dicha clase expone un método para poder buscar hashtag's que empiezan por una cadena arbitraria, que se pasa como parámetro. A parte del constructor por defecto esta clase consta de tres métodos.

protected String[] searchSimilarHashtag(String hashtag, Connection c).

Este método está encargado de realizar la búsqueda de hashtags que empiecen por la cadena 'hashtag' contra la BBDD. Como parámetro de entrada tiene hashtag que contiene la cadena de caracteres de inicio que se quiere buscar, c que es una conexión válida a la BBDD. Como salida devuelve un array con los diferentes hashtags cuyo comienzo coincide con lo que se ha pasado en hashtag como parámetro de entrada.

protected Connection getConnection().

Este método se encarga de obtener una conexión libre del pool en el JNDI jdbc/apitwitterDB, si la conexión es exitosa la devuelve y si no devuelve null.

public String[] getSimilarHashtag(String text).

Método expuesto a DWR mediante el que un cliente DWR puede solicitar la lista de hasthag's que empiezan por el texto 'text', se basa en utilizar los dos métodos anteriores. r.

Paso 3: Incluir libreria DWR y commons-logging

Las librerías necesarias para funcionar con DWR son dos: commons-logging-1.2.jar y dwr.jar. Deben copiarse dentro de la carpeta lib que se haya dentro de WEB-INF. Estas librerías son descargadas al hacer "checkout" del proyecto completo.

Paso 4: Definir el web.inf para setear el invoker

Se añade la definición del servlet DWR y se mapea al web.xml de la aplicación.

Añadimos las siguientes líneas al descriptor de despliegue de la aplicación web (WEB-INF/web.xml). La sección <servlet> necesita ir con alguna sección existente <servlet>, y también con la sección <servlet-mapping>.

<servlet>

<display-name>DWR Servlet</display-name>

<servlet-name>dwr-invoker</servlet-name>

<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>

<init-param>

<param-name>debug</param-name>

<param-value>true</param-value>

</init-param>

</servlet>

<servlet-mapping>

<servlet-name>dwr-invoker</servlet-name>

<url-pattern>/dwr/*</url-pattern>

</servlet-mapping>

(fuente: http://directwebremoting.org/dwr/introduction/getting-started.html)

Paso 5: Crear el archivo de configuración del DWR (dwr.xml)

Con la clase dwr.xml decidimos qué clases "uned.java2016.apitwitter.dwr.HashtagSearchDWR" y métodos "getSimilarHashtag" de java son accesibles a través del javascript. Definimos el método de javascript que vamos a poder usar con DWR. En este caso "HashtagSearchDWR". Con el dwr.xml se permite al javascript acceder a una clase y/o método de Java.

Clase: uned.java2016.apitwitter.dwr.HashtagSearchDWR

Método: getSimilarHashtag

javascript="HashtagSearchDWR" indica el nombre que tendrá el fichero JS, en este caso coincide con el nombre de la clase Java de la que procede, pero no tienen por qué llamarse obligatoriamente igual.

Paso 6: Incluir en la "página web" [ViewIndex?.jsp] los elementos necesarios de DWR para implementar la funcionalidad deseada

Se incluye: engine.js, util.js y el javascript que hemos definido en el dwr.xml.

Definición en ViewIndex?.jsp del fichero javascript que desarrollará la lógica Ajax_DWR: "ViewIndex?.js"

Paso 7: Implementación del fichero javascript [ViewIndex?.js] para las llamadas Ajax con DWR

Después de que esté definido el método de javascript accesible por el DWR y a que método y clase de Java accede, incluimos la lógica en la página web.

Configuramos el javascript en "ViewIndex?.js" para que ejecute las llamadas Ajax DWR. Estas llamadas se realizan mediante componentes de la librería JQueryIU.