Este documento describe los pasos para implementar una funcionalidad Ajax utilizando la librería Direct Web Remoting (DWR) en una aplicación Java. Se crea una clase Java que expone un método para buscar hashtags que coincidan con un texto ingresado. Luego se mapea esta clase y método en un archivo de configuración DWR para hacerlos accesibles desde JavaScript. Finalmente, se implementa el código JavaScript para realizar llamadas Ajax al método Java utilizando DWR y mostrar los resultados.

1. Práctica VI: Ajax

2. 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

3. 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.

4. 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

5. 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.

6. 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.

8. 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.

9. 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)

10. 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

11. 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"

12. 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.