Módulo 7 AJAX JAVA

Introducción a AJAX

Conceptos Generales El fenómeno AJAX ha generado la aparición de un gran número utilidades orientadas a facilitar la utilización de esta nueva tecnología. Dichas utilidades han sido agrupadas en dos grandes categorías: Librerías y Frameworks. Dichas utilidades han sido estandarizadas en cierta medida con la aparición de los patrones de Ajax. En la lista inicial de utilidades, aparecían unos 20 productos orientados a diferentes tecnologías pero la mayoría orientada a un entorno lineal (línea de comando). La gran evolución de AJAX ha permitido la aparición de alrededor de 160 productos actualmente orientados a diversas tecnologías con JAVA o .NET. Pero la pregunta es: ¿Por qué han salido tantas utilidades para tecnologías como Java? Pues sencillamente porque Java y Ajax se complementan muy bien. Mientras AJAX realizar las peticiones entre el Cliente y el Servidor, JAVA da funcionalidad a esas peticiones realizadas por AJAX del lado cliente. Para poder utilizar todas estas herramientas, necesitamos disponer de un servidor de aplicaciones que nos dé soporte a J2EE, como por ejemplo WebSphere, Oracle Application Server, WebLogic, EAServer, Jboss (free). También podríamos utilizar Tomcat, pero sabiendo que no es un servidor de aplicaciones completo J2EE sino solamente un contenedor de Servlets. Para realizar la instalación de Tomcat o JBoss podríamos dirigirnos a cualquiera de las siguientes direcciones web y seguir sus pasos: Tomcat http://www.osmosislatina.com/tomcat/instalacion.htm http://www.desarrolloweb.com/articulos/1613.php http://www.alu.ua.es/j/jhm/cocoon/install1.htm Instalación de JBoss http://javaejb.osmosislatina.com/jboss_windows.htm http://www.osmosislatina.com/jboss/instalacion.htm Tenemos que tener presente que estamos trabajando en un entorno como el que aparece en la gráfica siguiente:

2

Introducción a AJAX

Librerías JavaScript Desde hace bastante tiempo , la comunidad AJAX ha optado facilitar el acceso a esta nueva tecnología y ha desarrollado una serie de librerías en Javascript y Frameworks para poder realizar implementaciones de código de una forma mucho mas rápida y cómoda que su implementación manual. La posibilidad de mejorar el trabajo y rendimiento con estas Librerías es enorme aunque también existen inconvenientes(escasa documentación, librerías demasiados grandes para su incorporación a la página cliente, especificación de las librerías y Frameworks, Soporte inexistente en algunos casos, etc… Actualmente existen multitud de librerías y Frameworks para el diseño y mantenimiento de aplicaciones realizadas en AJAX y cada vez van apareciendo nuevos productos que las incorporan y las redefinen. Por eso, realizaremos un repaso a las librerías más habituales del mercado actual, sin perder de vista donde vamos a estar trabajando, LADO CLIENTE:

Las librerías más extendidas actualmente son :

ProtoType Es la librería Javascript más popular utilizada en AJAX, creada por Sam Stephenson. Librería de bajo nivel, que resuelve muchos de los problemas de compatibilidad entre navegadores y que da soporte a otras librerías de efectos. Se destaca como una librería fácil de usar y muy agradable para el desarrollador. Los pasos de configuración son bastante básicos, únicamente tendremos que declarar la inclusión de nuestro fichero prototype.js en el de nuestra aplicación.

EJEMPLO DE PROGRAMA con PROTOTYPE

3

Introducción a AJAX

<script src="prototype.js" type="text/javascript"> <script language = "javascript"> function obtenerDatos() { var pagina='ejemplo1_datos.txt'; var Objetoajax = new Ajax.Request ( pagina, { method:"get", onComplete: respuesta } ); } function respuesta(Objetoajax) { $("destino").innerHTML = Objetoajax.responseText; }

Mi Primer Programa en AJAX con prototype

Script.aculo.us Es una librería Javascript que permite el uso de controles AJAX, Arrastre y Suelte (drag and drop) y otros efectos visuales en una página WEB. Creada por Thomas Fuchs. Su ocupación está alrededor de 76k, comparada con otras librerías es “pesada” pero es muy completa. Se utiliza normalmente para construir aplicaciones Web 2.0 compatibles con los principales navegadores.

EJEMPLO DE PROGRAMA con Script.aculo.us NOTA: En este ejemplo se muestra un uso muy sencillo de los efectos que se pueden obtener con esta librería; necesitamos incorporar unas librerías y disponer de 4 imágenes para que vayan siendo mostradas. También necesitamos disponer de una CSS creada dentro del código.

4

Introducción a AJAX

<script src="js/prototype.js" type="text/javascript"> <script src="js/scriptaculous.js" type="text/javascript"> <script src="js/simple-slide-show.js" type="text/javascript"> <style> #slide-images{ position:relative; display:block; margin:0px; padding:0px; width:400px; height:300px; overflow:hidden; } #slide-images li{ position:absolute; display:block; list-style-type:none; margin:0px; padding:0px; background-color:#FFFFFF; } #slide-images li img{ display:block; background-color:#FFFFFF; }

Dojo Es un toolkit (Conjunto de herramienta) OPEN SOURCE escrito en javascript compuesto por un conjunto de librerías creadas en imitación al estilo java cuyo principal objetivo es la abstracción del desarrollador con el lenguaje de programación y sus inconvenientes en diversos navegadores.

5

Introducción a AJAX

La característica principal de Dojo es que contiene un sistema de empaquetado inteligente, efectos UI (interface de Usuario), API’s de Drag and Drop, API’s de Widgets, API’s de interacción con AJAX. Dojo es conocido como “el todo en uno” de las bibliotecas javascript.

EJEMPLO DE PROGRAMA con DOJO <script type="text/javascript" src="js/dojo.js"> <script type="text/javascript"> dojo.require("dojo.widget.*"); dojo.require("dojo.widget.Button"); dojo.require("dojo.event.*"); function saludo() { alert('Hola Mundo Ajax Con DOJO!!!'); } function init() { var botonSaludo = dojo.widget.byId('botonSaludo'); dojo.event.connect(botonSaludo, 'onClick', 'saludo') } dojo.addOnLoad(init); Hola Mundo!

YUI ( yahoo User Interface Library ) Conjunto de controles y utilidades escritas en Javascript para construir aplicaciones web usando tecnologías como DOM, DHTML y AJAX. Se caracteriza por introducir varios recursos de utilización de CSS (Hojas de Estilo en Cascada). Todos los componentes de YUI han sido liberados como OPEN SOURCE bajo licencia BSD y son libres para todos los usos. Destaca entre otros sus widget: Rich Text Editor (beta), Base CSS, ImageLoader Utility (experimental)

Uso de TableView con YUI EJEMPLO DE PROGRAMA con YUI

6

Introducción a AJAX

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <style type="text/css"> body { margin:0; padding:0; } <script type="text/javascript" src="yui/build/yahoo-domevent/yahoo-dom-event.js"> <script type="text/javascript" src="yui/build/element/element-beta.js"> <script type="text/javascript" src="yui/build/tabview/tabview.js">

Probando las Pestañas Múltiples con YUI

<script> (function() { var tabView = new YAHOO.widget.TabView('ejemplo'); } ) ();

JQuery Librería de Javascript de tamaño reducido pensada para interactuar con los elementos web de una manera sencilla y práctica. Sus puntos fundamentales son la sencillez y poca extensión de codificación en su empleo, de ahí su gran aceptación actualmente. Su código está aproximadamente en unos 16k. Existe una gran documentación de JQuery ( http://www.visualjquery.com)

7

Introducción a AJAX

Xajax Librería desarrollada en Javascript orientado al trabajo en AJAX con PHP. Uno de sus puntos fuertes es definir qué funciones de código PHP se convierten en funciones AJAX. Dispone de abundante y muy buena documentación y ejemplos. El único inconveniente es conocer el lenguaje PHP para incorporarla correctamente y utilizarla al 100%.

Rico (Rich Internet Aplications) Es una librería de efectos Ajax disponible en OpenRico que permite simplificar el desarrollo de aplicaciones que utilicen tecnología AJAX. Creada para Sabre Airline Solutions con el objetivo de generar un entorno web más interactivo Su sencillez de programación y ser gratuita y de código abierto, ha hecho que esta librería esté en auge. Permite una serie de efectos como el “drag and Drop”, animaciones, efecto acordeón con varios DIV anidados y algunos otros más. Está basada en Prototype

Ajax y Java Todas las librerías de javascript vistas anteriormente trabajan en el cliente, también llamado “Lado Cliente”. Todas las peticiones que se realiza mediante AJAX deben de ser tratadas y respondidas desde el Servidor “Lado Servidor”. Los Frameworks son las herramientas usadas para dar respuesta a estas peticiones de una manera clara, sencilla y “casi” transparente para el desarrollador. Los frameworks referenciados trabajan con JAVA, por lo que el entorno de trabajo deberemos disponer de un Servidor de Aplicaciones que sustente dicha tecnología como puede ser: WebSphere, Oracle Application Server, WebLogic, EAServer, Jboss (free), comentados anteriormente. Todos los entornos que trabajan con AJAX y JAVA comprenden dos partes principales: - Un Servlet (es un programa que se ejecuta en un servidor web y aportan funcionalidades determinadas) ejecutándose en el servidor, que procesa las peticiones y envía las respuestas de vuelta al navegador. - Una librería Javascript ejecutándose en el navegador que envía las peticiones y que permite fácilmente actualizar la página web con la información recuperada.

8

Introducción a AJAX

Los Frameworks más habituales del mercado actualmente son:

JMaki Es una framework que te permite crear aplicaciones web con AJAX utilizando Java, JSP (Java Server Page, es la tecnología para generar páginas web de forma dinámica en el servidor), PHP, JSF (Java Server Faces) Desarrollado por SUN y su intención es la de aprovechar lo mejor de Java y lo mejor de Javascript para crear unos estilos “ricos” en sus widgets. JMaki dispone de muchos widgets propios y de otras librerías como Dojo, Yui, script.aculo, con un interface de programación único para todos y para todas las librerías.

DRW (Direct Web Remoting) DRW permite generar dinámicamente código JavaScript basado en clases Java. Esto permite al desarrollador usar código Java desde JavaScript como si este fuese local al web-browser, cuando en realidad el código Java se ejecuta en el servidor. Su funcionamiento se basa en la característica de JAVA llamada RMI (Java Remote Method Invocation) de ahí su nombre. DRW está compuesto principalmente por 2 parte: -

Clases Java que permiten al código javascript poder recuperar datos usando AJAX.

-

Biblioteca javascript que facilita al desarrollador actualizaciones o modificaciones de la pagina con los datos obtenidos.

A pesar de tener una interface muy amigable y rica, el único inconveniente que presenta es la no compatibilidad con todos los navegadores actuales.

GWT (Google Web Toolkit) Es un framework creado por Google para realizar el desarrollo de aplicaciones Java usando AJAX. El funcionamiento de GWT es sencillo, el desarrollador crea su aplicación en JAVA y éste framework lo traduce a Javascript, elementos AJAX y HTML. La característica más importante de GWT es que es compatible con todos los navegadores por lo que no dependemos del navegador donde hacemos las pruebas de desarrollo de la aplicación.

Echo2 Es un framework basado en su antecesor Echo Web Framework. Permite el desarrollo de aplicaciones Java usando AJAX en web 2.0 Framework OPEN SOURCE bajo licencia GNU LGPL. Permite la creación de forma automática de HTML y Javascript, gestión de mensajes XML entre el cliente y el servidor.

9

Introducción a AJAX

Una de las principales diferencias con GWT, es que en Echo2 todo el código es ejecutado en el servidor mientas que en GWT es ejecutado en el cliente

Implementaciones Remotas ¿Qué Son las implementaciones Remotas? Esencialmente, las implementaciones remotas (Remote Scripting) son la forma de permitir que el código JavaScript del lado del cliente solicite datos del servidor sin necesidad de recargar la página web. Ejemplo de ello tenemos,la creación de una lista de palabras para seleccionar ( Google Suggest ), o podría implicar la creación de una aplicación o interfce mas compleja con posibilidades de navegación y de obtención de imágenes (map.search ) Se dispone ya de un patrón de diseño para hacer este tipo de operaciones (Web Remoting).

Las prácticas de implementaciones remotas son normalmente utilizadas dentro de la creación de aplicaciones web con AJAX como por ejemplo: - Minimizar tiempo de espera en la validación de algún campo concreto. - Automatizar la entrada de los datos recuperados en los formularios. - Volver a escribir el contenido de la página una vez se haya utilizado o no se haya completado correctamente.

Disponemos de diferentes formas de hacer estas implementaciones remotas; habitualmente utilizamos el objeto XMLHttpRequest de forma automática (AJAX), pero también disponemos de otras variantes como son: -

Javascript Remote Scripting (JSRS). Es una técnica de desarrollo web para crear aplicaciones web interactivas mediante el uso de una combinación de: HTML (o XHTML), DOM, JavaScript. Se puede escoger entre diferentes tecnologías, aunque la mayor parte de las ocasiones se usan una etiqueta SCRIPT.

-

Estándar XML-RPC. Es un protocolo de llamada remota que utiliza datos XML y utiliza el protocolo HTTP para su transmisión. Es el antecesor de SOAP (Simple Object Access Protocol. Es un protocolo que define la comunicación entre dos objetos en diferentes procesos por medio de intercambio de datos XML. )

Wrappers Un Wrapper es un componente que es capaz de dar una funcionalidad determinada de una forma muy cómoda y sencilla, ocultando toda su lógica al desarrollador y haciendo transparente su uso. La definición literal de Wrapper es “Envoltorio” y su utilización es bastante amplia; el término se puede referir a: - Wrapper Pattern: Patrón wrapper, donde algunos códigos de programación permite que ciertos elementos trabajen juntos que de no tenerlos no sería posible. - Primitive Wraper Class: es una clase de Java utilizada para poder tratar los datos primitivos (int, boolean, etc.) como objetos (clases Int, Long, etc.)

10

Introducción a AJAX

En nuestro ámbito un wrapper se podría definir como un código encapsulado en Java que ofrece funcionalidades para ser utilizadas en AJAX. Esto es usado en muchísimas utilidades y la mayoría de los frameworks los utilizan y los integran. No tenemos que caer en la tentación de confundir wrapper con gadget. Wrapper: Es un código encapsulado en Java que ofrece múltiples funcionalidades. Gadget: es un componente javascript definido para una funcionalidad concreta y determinada. Por ejemplo, podríamos crear una clase java que envolviese (wrapper) las funcionalidades de cada navegador para así ser totalmente transparente en su utilización posterior.

Software Libre Relacionado ¿Qué entendemos por software libre? “es la denominación del software que, una vez obtenido, puede ser usado, copiado, estudiado, modificado y redistribuido libremente” http://es.wikipedia.org El software libre suele estar disponible gratuitamente aunque también se puede cobrar por su distribución, no así por su contenido. Hay veces que nos encontramos con aplicaciones denominadas “Software Libre” y nos están cobrando por ello y no hay que asociar software libre a "software gratuito" (denominado habitualmente freeware). De forma similar, en el mercado hay productos catalogados como “Software Gratuito”, no pagamos nada por ellos, pero pueden ser libres o no, podremos usarlos pero tendremos que ver sus características o los derechos de modificación y redistribución de dichas versiones modificadas del programa.

Actualmente existen muchas formas de indicar el tipo de características que tiene un producto o aplicación en referencia a su modificación, distribución, utilización, etc…lo más habitual es la utilización de Licencias de tipos específicos para ello, como por ejemplo:

GNU GPL (GNU Public License) GNU (Gnu No es Unix). Desarrolla un sistema operativo tipo Unix completo, con la principal propiedad de ser Software Libre). Licencia Pública General de GNU pretende garantizarle la libertad de compartir y modificar software libre, para asegurar que el software es libre para todos sus usuarios

LGPL (Lesser GNU Public License): Es similar a la anterior la diferencia está en que la licencia Lesser permite su uso dentro de aplicaciones propietarias con licencias comerciales

BSD License (Berkeley Software Distribution): Es una licencia de software perteneciente al grupo de licencias de software libre. Tiene menos restricciones que otras licencias GPL, estando mas cerca del software libre real. Permite su uso en aplicaciones no libres.

MIT License (Massachusetts Institute of Technology): El mensaje básico de esta licencia es "Eres libre para usar este código como quieras.".

11

Introducción a AJAX

Es muy similar a la licencia BSD, salvo que permite algunas cosas especiales como por ejemplo: - El texto de la licencia no tiene copyright, por lo que permite su modificación. - Es totalmente compatible con otras licencias como GNU GPL

ASL (Apache Software License): Esta licencia permite el uso y distribución del código fuente para software libre y software propietario. Requiere la conservación del aviso de copyright.

Tipo de Licencia MIT GPL y LGPL BSD ASL

ProtoType, Script.aculo.us, JQuery JQuery, Xajax, Echo2 Dojo, YUI, JMaki Rico, DWR, GWT

12