AJAX+STRUTS Presentación para la asignatura de doctorado: Desarrollo de Aplicaciones para la Web Rosa María Torres de Paz.

Presentación del tema: "AJAX+STRUTS Presentación para la asignatura de doctorado: Desarrollo de Aplicaciones para la Web Rosa María Torres de Paz."— Transcripción de la presentación:

1 AJAX+STRUTS Presentación para la asignatura de doctorado: Desarrollo de Aplicaciones para la Web Rosa María Torres de Paz

2 Objetivos Estudio de Ajax. Utilización de XML como medio de intercambio de datos. Estudio de Struts. Utilización de la mayor independencia y robustez arquitectónica posible. Unificación de ambas tecnologías. Posibilidades dentro de un punto de vista de reutilización. Adaptación de un sistema existente.

3 Localización Web 2.0 Democratización Rich user experience (RIA: Rich Internet Applications) Servicios

4 Evolución Web 1.0 Personal Websites Email/News Groups Popups Web Directories Web Classifieds Terraserver mp3 Web 2.0 Blogging - Roller RSS – Syndication Google Ad Delici.io.us HousingMaps.co m Google Maps Web 1.5 Wikis Discussion Forums Popunders Yahoo Cragislist MapQuest Napster

5 Focalización Rich User Experience * Aplicaciones Web como si de escritorio se trataran * El programa debe responder intuitivamente y rápidamente. * Las respuestas a eventos deben ocurrir naturalmente * AJAX es una de las tecnologías RIA (DHTML, JavaWebStart, etc)

6 AJAX DHTML más Comunicación Asíncrona gracias al objeto XMLHttpRequest. Pros Lleva el concepto RIA tan lejos como puede. Espectacular acogida por parte del mundo empresarial. Desarrollo de varios toolkit y framework. Separación de la presentación y búsqueda de información. Contras Incompatibilidad de browsers. JavaScript es bastante difícil de mantener y depurar. Especial cuidado con la usual navegabilidad.

7 Modelo

8

9 Esquema general

10 Modelo de Interacción:nuestra solución Cart.js Ajax.js Clase servidora 1 2 5 AñadirAlCarrito UpdateCart newXMLHttpReque st getReadyStateHandler var req = newXMLHttpRequest(); req.onreadystatechange = getReadyStateHandler (req, updateCart); 3 req.open("POST","carro.do", true); req.send("action=add&item="+itemCode); 4 responseXmlHandler(req.responseXML); 2’

11 Modelo de Interacción:nuestra solución Cart.js Ajax.js Clase servidora 1 2 5 AñadirAlCarrito UpdateCart newXMLHttpReque st getReadyStateHandler var req = newXMLHttpRequest(); req.onreadystatechange = getReadyStateHandler (req, updateCart); 3 req.open("POST","carro.do", true); req.send("action=add&item="+itemCode); 4 responseXmlHandler(req.responseXML); 2’ function newXMLHttpRequest() { var xmlreq = false; if (window.XMLHttpRequest) { xmlreq = new XMLHttpRequest(); } else if (window.ActiveXObject) { try { xmlreq = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e1) { try { xmlreq = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { xmlreq = false; } } return xmlreq;

12 Modelo de Interacción:nuestra solución Cart.js Ajax.js Clase servidora 1 2 5 AñadirAlCarrito UpdateCart newXMLHttpReque st getReadyStateHandler var req = newXMLHttpRequest(); req.onreadystatechange = getReadyStateHandler (req, updateCart); 3 req.open("POST","carro.do", true); req.send("action=add&item="+itemCode); 4 responseXmlHandler(req.responseXML); 2’ function getReadyStateHandler(req, responseXmlHandler) { return function () { if (req.readyState == 4) { if (req.status == 200) { responseXmlHandler(req.responseXML); } else { alert("HTTP error "+req.status+": "+req.statusText); }

13 Modelo de Interacción:nuestra solución Cart.js Ajax.js Clase servidora 1 2 5 AñadirAlCarrito UpdateCart newXMLHttpReque st getReadyStateHandler var req = newXMLHttpRequest(); req.onreadystatechange = getReadyStateHandler (req, updateCart); 3 req.open("POST","carro.do", true); req.send("action=add&item="+itemCode); 4 responseXmlHandler(req.responseXML); 2’ public String toXml() { StringBuffer xml = new StringBuffer(); xml.append(" \n"); xml.append("<cart generated=\""+System.currentTimeMillis() +"\" total=\""+getCartTotal()+"\">\n"); for (Iterator I = contents.keySet().iterator() ; I.hasNext() ; ) { Productosros item=(Productosros)I.next(); int itemQuantity =((Integer)contents.get(item)).intValue(); xml.append(" \n"); xml.append(" "); xml.append(item.getNombre()); xml.append(" \n"); xml.append(" "); xml.append(itemQuantity); xml.append(" \n"); } xml.append(" \n"); return xml.toString(); }

14 Modelo de Interacción:nuestra solución Cart.js Ajax.js Clase servidora 1 2 5 AñadirAlCarrito UpdateCart newXMLHttpReque st getReadyStateHandler var req = newXMLHttpRequest(); req.onreadystatechange = getReadyStateHandler (req, updateCart); 3 req.open("POST","carro.do", true); req.send("action=add&item="+itemCode); 4 responseXmlHandler(req.responseXML); 2’ function updateCart(cartXML) { var cart = cartXML.getElementsByTagName("cart")[0]; var generated = cart.getAttribute("generated"); if (generated > lastCartUpdate) { lastCartUpdate = generated; //Nos vamos a la capa id="contents" var contents = document.getElementById("contents"); var contents2=document.createElement("ul"); var items = cart.getElementsByTagName("item"); for (var I = 0 ; I < items.length ; I++) { var item = items[I]; var name = item.getElementsByTagName("name")[0].firstChild.nodeValue; var quantity = item.getElementsByTagName("quantity")[0].firstChild.nodeValue; var code=item.getAttribute("code"); var listItem = document.createElement("li"); listItem.appendChild(document.createTextNode(name+" x "+quantity));............................

15 Funciones:Cart.java private HashMap contents=new HashMap(); public void addItem(String itemCode) { Catalog catalog = new Catalog(); if (catalog.containsItem(itemCode)) { Productosros item=catalog.getItem(itemCode); int newQuantity = 1; if (contents.containsKey(item)) { Integer currentQuantity = (Integer)contents.get(item); newQuantity += currentQuantity.intValue(); } contents.put(item, new Integer(newQuantity)); }

16 Objetivos Estudio de Ajax. Utilización de XML como medio de intercambio de datos. Estudio de Struts. Utilización de la mayor independencia y robustez arquitectónica posible. Unificación de ambas tecnologías. Posibilidades dentro de un punto de vista de reutilización. Adaptación de un sistema existente.

17 Struts JAKARTA STRUTS Cavaness, Chuck (Ed. Anaya Multimedia) ISBN: 8441518602. 1ª edición Fecha Publicación: Junio 2005

18 Struts

19 ¿Y ahora? Comprensión y prueba de AJAX Interacción con un servlet ¿Qué posibilidades hay de integración con struts? Estudio y prueba de struts

20 Fuente Using AJAX in Your Struts Application The chances are that if you are reading this article, then you are interested in AJAX's ability to create dynamic web interfaces and would like to know how to add it to a Struts application. What are your options if you want to do this? Wait until the next version of Struts (Shale) incorporates AJAX techniques. For Struts developers starting a new application this is probably the best option. The downside is that this will probably require moving to JavaServer Faces--not a bad thing in itself, but this may entail fundamental changes if you have an existing application. You could move to a new approach, like Direct Web Remoting (DWR) or Ruby on Rails, which are specifically built for AJAX applications. While these are both very impressive frameworks, and are worth taking a look at if you wish to consider web development without Struts, this option would mean rewriting your entire application.Direct Web Remoting (DWR)Ruby on Rails Add AJAX to your existing Struts application. Since AJAX is a technique, not a framework, it is straightforward to add it to Struts. For existing applications where stability (e.g., keeping existing libraries) is important, this option is recommended and is the one we explore in more detail. http://today.java.net/pub/a/today/2005/10/27/sprinkle-ajax-magic-into- struts-webapp.html?page=1

21 Problema Al contrario que el ejemplo, quería XML y sobreescribir la parte afectada de la página Soluciones 1) El action hace un forward a la página jsp que me genera el XML de respuesta............ index.htmlservlet xml html js DOM S C.jsp actionactualiza.jsp html js DOM xml

22 Soluciones 2) Se hace una llamada a un servlet. Mapeo independiente en el web.xml 3) Se consigue la integración realizando un forward null del action Ese action es el “servlet” que maneja la comunicación asíncrona req.open("POST", "CarritoServlet.ajax", true); action *.do CarritoServlet *.ajax

23 Solución action *.do volver

24 Otros aspectos Utilización de Tiles para una mayor independencia de la presentación defaultLayaout.jsp (defino la disposición de la página Fijo una cabecera, contenido y pie)

25 Otros aspectos template.jsp (va a ser la plantilla a utilizar por todas las páginas, se vincula a la página anterior) Templatecliente.jsp diagrama

26 Otros aspectos Utilización de la validación de los formularios con Javascript de la la clase DynaValidatorActionForm. Son además dinámicos. Se realiza con la inserción de un plug-in. struts-config.xml <set-property property="pathnames" value="/WEB-INF/validator-rules.xml,/WEB-INF/validations.xml"/> alta.jsp validations.xml

27 Otros aspectos Realización del modelo de BD y clases JAVA con las herramientas de soporte del JDeveloper. ¿Ver la aplicación?

28 Objetivos Estudio de Ajax. Utilización de XML como medio de intercambio de datos. Estudio de Struts. Utilización de la mayor independencia y robustez arquitectónica posible. Unificación de ambas tecnologías. Posibilidades dentro de un punto de vista de reutilización. Adaptación de un sistema existente.

29 Gracias JAKARTA STRUTS Cavaness, Chuck (Ed. Anaya Multimedia) ISBN: 8441518602. 1ª edición Fecha Publicación: Junio 2005 http://today.java.net/pub/a/today/2005/10/27/sprinkl e-ajax-magic-into-struts-webapp.html?page=1 http://www-128.ibm.com/developerworks/web/library/ j-ajax1/ http://www.adictosaltrabajo.com/tutoriales/tutoriales. php?pagina=strutsb