Curso ajax

Formación J2EE – T&D
Curso de

3
ÍNDICE
 Introducción al fenómeno “Web 2.0”
 Fundamentos técnicos de la tecnología AJAX
 “Old technologies, new tricks”
 Recomendaciones
 Frameworks AJAX para Java
 Conclusiones
© Reservados todos los derechos. El contenido de la presente no puede ser reproducido, ni en todo ni en parte, ni
transmitido, ni registrado por ningún sistema de recuperación de información, en ninguna forma ni por ningún medio,
sin el permiso previo, por escrito, de IT Deusto.

Introducción al
fenómeno “Web 2.0”

5
Introducción al fenómeno “Web 2.0”
 Termino acuñado por Dale Dougherty de O’Really Media en un “brainstorming”
para preparar una presentación.
 Pretende hacer énfasis en el desarrollo y avance sufrido por la tecnología de
programación Web, que está permitiendo que las aplicaciones Web estén
sustituyendo a las aplicaciones de escritorio en muchos usos.
 Desde un punto de vista social, se considera que las aplicaciones “Web 2.0”
serían aquellas que, dada su capacidad de interacción, permiten una mayor
participación de los usuarios y animan a la colaboración entre ellos, y por tanto
a la creación de lo que se llaman “Aplicaciones Sociales”.
 En esta presentación se abordarán este tipo de aplicaciones desde el punto de
vista de la tecnología empleada y no por su funcionalidad o utilidad de cara a la
sociedad.
 En definitiva los dos puntos de vista convergen en que esta nueva generación
de aplicaciones se caracterizan por mejorar y potenciar lo que se denomina
como “User Experience”
 ¿Qué es la “Web 2.0”?

6
 Todas se basan en hacer que el navegador albergue la capa cliente como
una aplicación en si misma, también conocida como RIA (Rich Internet
Application), y no sólo como un mero escaparate de contenido que se
muestra (capa de presentación).
 Principales tecnologías responsables
Java Applet Flex / Laszlo
Ejemplo: ThinkFree Ejemplo: LzPix / LaszloMail

7
 Google:
 Google Maps. GMail, Google Calendar, Writely, Google Spreadsheet, Google
Suggest
 Otros aplicaciones de referencia:
 Netvibes: Pagina de inicio.
 Blinklist: Aplicación de gestión de marcadores (bookmarks) sociales.
 Ejemplos de aplicaciones “Web 2.0” desarrolladas con Ajax
 Ejemplos de aplicaciones “Web 2.0”
 La cantidad de aplicaciones disponible es ingente, tanto de forma gratuita
como de pago y como muestra el siguiente link:
 415 aplicaciones GRATUITAS Web 2.0

Fundamentos
técnicos de la
tecnología AJAX

9
Fundamentos técnicos de la tecnología AJAX
 Son la siglas de Asynchronous Javascript And XML
 En realidad AJAX es un concepto que engloba un conjunto de técnicas
tradicionales en el mundo de la programación Eeb, pero utilizadas de una
forma distinta.
 Estas tecnologías son Javascript, DOM (Document Object Model) y CSS
(Cascading Style Sheets).
 La combinación de estas tres tecnologías se conocía con el nombre de DHTML
(Dynamic HTML).
 El objeto XMLHttpRequest es la piedra angular donde convergen todas estas
técnicas para dar lugar a lo que hoy conocemos como AJAX.
 Fue creado por Microsoft para lo que denominaban “Remote Scripting” y fue
incluido en su librería MSXML.
 El resto de navegadores han incorporado este objeto en el motor Javascript,
convirtiéndolo en un estándar de facto.
 Actualmente se encuentra en proceso de estandarización por el W3C.
 ¿Qué es AJAX?

10
 Introduce el modelo de aplicación Web asíncrona.
 ¿Qué es AJAX?

11
 Ligero
 No hay problemas con clientes que no sean navegadores, como robots de
búsquedas.
 No depende de código propietario, ni plug-ins.
 Su naturaleza abierta hace que la comunidad de desarrolladores Ajax crezca
muy deprisa y por tanto que la oferta de librerías sea enorme y que su
evolución sea igual de rápida.
 Los desarrolladores pueden reutilizar todos sus conocimientos previos en
programación Web.
 Características positivas:

12
 Tiene restricciones en lo que se refiere a conceptos como: capacidades
multimedia, almacenamiento local de datos, gráficos en tiempo real e
interacción con hardware como impresoras o webcams.
 No permite peticiones del tipo Multipart-request para realizar uploads.
 Los efectos visuales no son tan refinados y fluidos como los que se logran
con gráficos vectoriales.
 Las aplicaciones AJAX pueden llegar a ser difíciles de depurar y probar.
 La falta de estandarización.
 El botón “backward” de los navegadores pierde el sentido, ya que este hace
referencia a la última petición no-ajax realizada.
 Es fácil abusar de su uso y saturar el servidor de peticiones.
 Otras que no lo son tanto:

13
 Mozilla Firefox 1.0 and above.
 Netscape version 7.1 and above
 Apple Safari 1.2 and above.
 Microsoft Internet Exporer 5 and above.
 Konqueror.
 Opera 7.6 and above
 Navegadores que soportan el objeto XMLHttpRequest:

14
 Este objeto es el que permite solicitar información de forma asíncrona a un
servidor usando para ello el protocolo HTTP. Actualmente, los navegadores
(excepto Internet Explorer que utiliza el método original) incorporan este
objeto como parte del propio motor.
 En Internet Explorer, el acceso al objeto se realiza como a cualquier otra
biblioteca: mediante la creación de un objeto ActiveX. El resto de los
navegadores sin soporte de ActiveX incorporan el objeto directamente en la
API.
 Esta diferencia obliga a realizar una pequeña comprobación para crear el
objeto:
 El objeto XMLHttpRequest:
// ¿ Existe en la API ?
if (window.XMLHttpRequest) {
// Usar API
http = new XMLHttpRequest();
} else {
// Usar ActiveX (IE)
http = new ActiveXObject("Microsoft.XMLHTTP");
}

15
 Funciones básicas:
 open(método, URL, [asincrono], [usuario], [clave]): Permite abrir un canal de
comunicación con un servidor.
 send(datos): Realiza una petición sobre una conexión ya abierta. Si el parámetro
datos no es nulo, se enviará esa información mediante un método POST al
servidor.
 abort(): Permite cancelar una petición previa.
 Respuestas:
 responseText: Información devuelta por el servidor. Se trata del texto que ha
retornado el servidor.
 responseXML: Es una función equivalente a la anterior pero devuelve un
documento DOM. Sólo es válida si la respuesta es un documento XML
 status: Respuesta del servidor (código HTTP)
 statusText: Respuesta del servidor asociada al status (mensaje de texto)
 onreadystatechange: Sirve para indicar la función (callback) a la que hay que
llamar cuando finalice la descarga de una petición asíncrona (cierto en el tercer
parámetro de open).

16
 Estados de la petición (Ciclo de vida):
 0 - UNINITIALIZED
 1 - LOADING
 2 - LOADED
 3 - INTERACTIVE
 4 - COMPLETE
 Una vez creado el objeto su uso es sencillo:
// Crear el objeto...
http = ...
// Registrar la función de finalización
http.onreadystatechange = targetFunction;
// Abrir la conexión a la página de forma asíncrona
http.open("GET", "http://dirección de datos", true);
// Enviar la petición sin datos adicionales
http.send(null);

17
 En AJAX las peticiones se realizan de forma asíncrona para no bloquear la
interfaz. Cuando se finaliza la descarga de la información, la función
targetFunction es directamente invocada.
function targetFunction() {
// Se comprueba el fin de la carga
if ( http.readyState == 4 ) {
// Descarga correcta (código HTTP 200)
if (http.status == 200) {
// Proceso de datos
} else {
// Ha fallado la descarga:
// mostrar mensaje de error
// (http.statusText)
} // if
} // if
}

“Old technologies,
new tricks”

19
“Old technologies, new tricks”
 Javascript visto por el navegador:
 JAVASCRIPT

20
 Los Frameworks Javascript te hacen:
 Escribir menos código.
 Hacer código más elegante.
 Depurar errores de forma más rápida y sencilla.
 Sufrir menos y odiar menos programar en Javascript.
 Los Frameworks Javascript permiten:
 Concentrarte en tu aplicación
 y no en las particularidades o bugs de los navegadores.
 En definitiva son esenciales para realizar aplicaciones “Cross-browser”
 Frameworks Javascript

21
 Prototype es una librería Javascript escrita por Sam Stephenson.
 Proporciona un framework javascript que se ha convertido en el código
base de la capa cliente en cualquier desarrollo web.
 Prototype
 Funciones de utilidad.
 Ajax Object.
 Extiende la funcionalidad de los tipos de objetos nativos (String p.e.).
 Transparencia en el manejo de eventos.
 Muchas cosas más
 y …
 Una documentación muy pobre.
 Características Prototype

22
…
document.getElementById(‘nombre’).value;
…
 Ejemplos Prototype
 Se convierte en:
…
$F(‘nombre’);
…
 Manejando eventos:
…
Event.observe(‘nombre’,’blur’.
function(){alert(‘Hola ’ + $F(‘nombre’);}
);
…
 Código Javascript clásico:

23
 Documentación Prototype
 Alguna documentación:
 http://wiki.script.aculo.us/scriptaculous/show/Prototype
 http://www.sergiopereira.com/articles/prototype.js.html
 Esquema de funcionalidad:

24
 Prototype como base de otros proyectos

25
 Otro Framework Javascript

26
 Lenguaje formal usado para definir la presentación (“Look & Feel”)de un
documento HTML.
 Actualmente son tan potentes que también permiten definir la disposición
(“Layout”) de los distintos elementos que componen la página (Ver
ZenGarden p.e.).
 Para más información, esta es una web muy recomendable:
 http://meyerweb.com/eric/css/
 CSS (Cascading Style Sheets)
 No usar “display:none” en un fichero css externo.
 Impediría que no podríamos cambiar su valor de forma dinámica y
siempre se quedaría a “none”.
 Lo mejor es usar el atributo style en su lugar:
 Regla de oro usando CSS para aplicaciones Web 2.0
…
<div style=“display: none;”/>…</div>
…

27
 Es la forma de representar un documento HTML y
mostrarlo al motor Javascript de nuestro navegador.
 Actualmente está estandarizado por el W3C y lo
soportan todos los navegadores.
 Los elementos de la página se representan en forma
de árbol.
 Para garantizar que todos los navegadores generan el
mismo árbol DOM es muy recomendable programar las
páginas en XHTML
 DOM (Document Object Model)
<?xml version="1.0" encoding=“ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
…
 Importante asignar un ID unívoco a los elementos que
queramos manejar.

28
 Javascript proporciona una serie de métodos para interactuar con el árbol
DOM:
 document.getElementById(“id”): Devuelve la referencia a un nodo
 document.getElementsByTagName(“elementType”): Devuelve las
referencias a todos los elementos de la página cuya etiqueta se corresponda
con el argumento.
 document.createElement(“elementType”): crea un nuevo elemento en el
documento y del tipo que le especifiquemos.
 document.createTextNode(“texto"): crea un elemento de texto.
 También proporciona métodos para manejar cada unos de los elementos
del árbol:
 element.childNodes(): devuelve los elementos hijos.
 element.appendChild(childElement): añade un elemento al padre.
 Otros…
 Usando Javascript para interactuar con el árbol DOM

29
 Ejemplo
Obtiene un elemento por ID
Obtiene los hijos
Crea un elemento de tipo DIV
Crea un elemento de tipo texto
Añade el elemento de tipo DIV
Añade un elemento de tipo texto

30
 Una es document.getElementById(“elementId”) o en prototype $
(elementId), para obtener el elemento que vamos a manejar.
 Función element.innerHTML():
 Función muy potente que permite asignar a un elemento de una forma muy
simple, nuevo contenido HTML y regenerar el árbol DOM.
 No está estandarizada por el W3C, pero es un estándar de facto.
 Rendimiento muchísimo mayor que usar los métodos de DOM.
 En el ejemplo anterior en elemento <div> y el nodo de texto anidado,
puede añadirse con una sola instrucción:
 Funciones fundamentales para manejar DOM
…
function addListItemUsingInnerHTML(el,text){
el.innerHTML+="<div class='programmed'>"+text+"</div>";
}
…
 Muy recomendable generar HTML en servidor (como siempre) y actualizar el
árbol DOM utilizando esta función.

31
 Javascript tiene más capacidades de Orientación a objetos de las que
suelen conocer y usar.
 Json es una manera de declarar un objeto en Javascript.
 Ejemplo:
 JSON (Javascript Object Notation)
…
var myPet = {
color: 'black',
legCount: 4,
communicate: function(repeatCount){
for(i=0;i<repeatCount;i++)
alert('Woof!');
}
};
…
 En el ejemplo se declaran dos variables y un método.

32
 ¿Cómo se usa?
 JSON (Javascript Object Notation)
…
alert('my pet is ' + myPet.color);
alert('my pet has ' + myPet.legCount + ' legs');
//if you are a dog, bark three times:
myPet.communicate(3);
…
 Más información en:
 http://www.sergiopereira.com/articles/advjs.html

34
Recomendaciones
 Permiten al usuario conocer el estado de la conexión, ya que de otra
forma el usuario no sabe si la petición se ha realizado o no.
 El criterio para que indicador mostrar se base en las variables
“readyState” y “status” del objeto XMLHttpRequest.
 Usando prototype sería algo tan simple como:
 En la pagina HTML:
 En Javascript, para una petición concreta:
 Proporcionar indicadores de actividad
…
new AjaxRequest(‘url’,{
onLoading: function() {$(‘indicator’).show();},
onComplete: function() {$(‘indicator’).hide();}
});
…
…
<img id=“indicator” src=“/img/indicator.gif”/>
…

35
Recomendaciones
 En Javascript, para todas las peticiones:
 Si necesitas generar un indicador de actividad:
 AjaxLoad.info
 Proporcionar indicadores de actividad
…
Ajax.Responders.register({
onCreate: function() {
if($('indicator') && AJax.activeRequestCount > 0) {
Effect.Appear('indicator',{duration: 0.5});
}
},
onComplete: function() {
if($('indicator') && AJax.activeRequestCount == 0) {
Effect.Fade('indicator',{duration: 0.5});
}
}
});
…

36
Recomendaciones
 Si funciona en este navegador te aseguras de cumplir los estándares.
 Para lo que no funcione en otros, habrá que desarrollar un “workaround”
(parche).
 Durante el desarrollo usar Firefox
 FIrebug
 Web developer: Barra de herramientas para el desarrollador Web.
 Venkman Javascript Debugger
 Live HTTP Headers
 Tamper Data: Otra herramienta para las cabeceras.
 Usar también las extensiones de Firefox

37
Recomendaciones
 Incorpora un Javascript debugger.
 Barra de estado con icono que informo si hay algún error en la página.
 Una consola que muestra errores Javascript y CSS.
 Habilita la posibilidad de introducir mensajes de log en nuestro código
Javascript, para que aparezcan en la consola. Adiós a los “alert()”!!;
 Una linea de comandos Javascript. Ya no hace falta usar la barra de
URL.
 Permite espiar el tráfico XMLHttpRequest.
 Inspeccionar HTML, eventos, layout y DOM.
 Mozilla FireBug Debugger

38
Recomendaciones
 Herramientas de Internet Explorar para desarrollar:
 Microsoft Script Debugger.
 Internet Explorer Developer Toolbar.
 Herramientas de Safari para desarrollar:
 Safari Web Inspector
 Probar después para el resto de navegadores que hay que soportar

40
Frameworks AJAX para Java
 Herramientas y Framework de AJAX
 Librerías Javascript del lado cliente
 Remoting via proxy
 AJAX-enabled JSF components
 Wrapper
 Traductor de Java a Javascript/HTML
 Frameworks de aplicaciones Web con extensiones AJAX
 Y otros más.

41
Frameworks AJAX
 Capas de la arquitectura (Lado Cliente)
HTMP Pages, Javascript Event Handlers
UI Widgets &
Components
Proxy
Remoting Abstraction Layer
XMLHttpRequest iFrame
JavaScript
Utilities

42
Frameworks AJAX
 Remoting Abstraction Layer:
 Oculta el manejo del objeto XMLHttpRequest e IFrames
 Proxy:
 Maneja el lado cliente del RPC (Remote Procedure Call) como comunicación.
 Widgets and Components
 Proporciona widgets de UI de uso inmediato como calendario, botones, etc
 Javascript Event Handler
 Proporciona lógica del lado cliente
 Capas de la arquitectura (Lado Cliente)

43
Frameworks AJAX
 Server side technology agnostic
 La tecnología del lado servidor puede ser Java EE, .Net, PHP, Ruby on Rails,
etc.
 Debe ser accesible en tiempo de ejecución tanto localmente como a
través de URL
 No se genera código Javascript dinámico
 Puedes usarlas combinadas en una única aplicación
 Puede que quieras usar widgtes de múltiples librerías.
 Características de las librerías Javascript del lado cliente

44
Frameworks AJAX
 Maneja comunicación asíncrona remota (remoting)
 Oculta el nivel bajo de la operación XMLHttpRequest
 Maneja incompatibilidades de navegadores
 No tienes porqué llenar el código de instrucciones if/else
 Usa IFrame si el navegador no soporta XMLHttpRequest
 Proporciona botones de navegación
 Botones de adelante y atrás
 Índices
 Razones técnicas para usar librerías JavaScript del lado cliente

45
Frameworks AJAX
 Proporciona widgets listas para usar
 Tree, Calendar, Textfield, Button, Split panes, Fisheye, etc.
 Proporciona utilidades DOM listas para usar
 Son más sencillas de usar que las originales DOM APIs
 Proporciona utilidades JavaScript
 Ejemplo: Manejo de tablas, Timer, etc
 Proporciona enlaces de manejo de errores
 Más fácil de añadir manejadores de errores
 Proporciona un manejo de errores más flexible
 DOM node based, Function call based, AOP style

46
Frameworks AJAX
 Proporciona características avanzadas de UI
 Animación
 Drag and drop
 Fade out and Fade in
 …
 Generalmente anima a la programación OO
 Te ayuda a escribir un código Javascript mejor

47
Frameworks AJAX
 Comprobado en el mercado
 Generalmente es de mayor calidad que el tuyo propio
 Establecido en la comunidad de desarrolladores y usuarios
 La comunidad sigue mejorando/añadiendo características
 Es fácil obtener ayuda de los foros de la comunidad
 Fácil de usar
 Sólo debes tenerlas en el directorio raíz de tu aplicación Web o facilitar una
URL
 Tool support
 Los IDE comienzan a integrarlas.
 Razones económicas para usar librerías Javascript del lado cliente

48
Frameworks AJAX
 DOJO Toolkit
 Tiene el apoyo de las mejores empresas (Sun, IBM)
 http://dojotoolkit.com/
 Prototype
 Usada por otras librerías
 http://prototype.conio.net/
 Librerías JavaScript de lado cliente

49
Frameworks AJAX
 Script.aculo.us
 Construida con Prototype
 Conjunto de efectos visuales y controles (Drag & Drop).
 http://script.aculo.us/
 Rico
 Construdia con Prototype
 Ricos componentes AJAX y efectos
 http://openrico.org/
 DHTML Goodies
 Múltiples scripts DHTML y AJAX
 http://www.dhtmlgoodies.com/
 Librerías JavaScript de lado cliente

50
Frameworks AJAX
 Pros
 Puedes usarlas con cualquier tecnología del lado servidor
 Widgets de múltiples fuentes
 Contras
 El desarrollador aún tiene que aprender JavaScript
 Cada librería usa una sintaxis diferente
 Cuando usarlas
 Cuando necesitas trabajar con múltiples tecnologías del lado servidor
 Cuando quieres usar widgets de múltiples fuentes (jMaki ayudará aquí
asumiendo que usas Java EE)
 Pros y contras

51
Frameworks AJAX
 Dojo
 http://archive.dojotoolkit.org/nightly/demos/widget
 Script.aculo.us
 http://wiki.script.aculo.us/scriptaculous/show/Demos
 Rico
 http://openrico.org/rico/demos.page
 DHTML Goodies
 http://www.dhtmlgoodies.com/
 Online Demos:

52
Frameworks AJAX
 Remoting via Proxy (Client & Server)
JavaScript RMI like call
Proxy
Remote Abstraction Layer
XMLHttpRequest iFrame
Java Method
Framework
runtime
Skeleton
HTTP Get/Post

53
Frameworks AJAX
 Similar a los esquemas generales de comunicación RPC
 Permite RMI (Remote Method Invocation) como sintaxis del código
Javascript del lado cliente. (RMI like).
 El framework genera el client stub (Proxy), que es código Javascript y el
código de servidor.
 El framework maneja la organización de parámetros y la devolución de
valores
 Características del Framework “Remoting via Proxy”

54
Frameworks AJAX
 Direct Web Remoting (DWR)
 Diseñado específicamente para las aplicaciones backend de Java
 http://getahead.ltd.uk/dwr
 JSON-RPC
 Lightweight remote procedure call protocol similar a XML-RPC
 http://json-rpc.org/
 Hay implementaciones de lenguaje específico
 JSON-RPC-Java
– http://oss.metaparadigm.com/jsonrpc/
 Implementaciones de Remoting via Proxy

55
Frameworks AJAX
 Pro's
 Permite exponer la interfaz de tu lógica de negocio a Ajaz con un mínimo
esfuerzo
 Te permite usar una sintaxis parecida a RMI en el código Javascript.
 Con's
 Los Hackers pueden ver que métodos de tu sistema que están disponibles.
 Custom converters (mashaller and unmarshaller) han de ser creados para
traducir a objetos Java.
 Cuando usarlo
 Cuando quieres mostrar la capa de lógica de negocio a Ajax con un mínimo
esfuerzo.
 Pro's And Con's

56
Frameworks AJAX
 AJAX-enabled JSF components eliminan toda la complejidad de la
programación AJAX
 El desarrollador no necesita saber Javascript.
 Son los desarrolladores de componentes los que hacen todo el trabajo…que
no es poco.
 Componentes JSF son reusables
 La comunidad JSF esta desarrollando cada vez más componentes.
 AJAX-enabled JSF Components

57
Frameworks AJAX
 Blueprint AJAX-enabled JSF components (open-source)
 http://developers.sun.com/ajax/componentscatalog.jsp
 https://bpcatalog.dev.java.net/ajax/jsf-ajax/
 ajax4jsf (open-source)
 Añade capacidades AJAX a los componentes actuales. https://ajax4jsf.
dev.java.net/
 ICEfaces (ICESoft) - commercial
 http://www.icesoft.com/products/icefaces.html
 DynaFaces (development on-going)
 https://jsf-extensions.dev.java.net/nonav/mvn/slides.html
 Implementaciones

58
Frameworks AJAX
 Pro's
 Poder usar 3rd-party AJAX-enabled JSF components.
 Con's
 Construir tus propios AJAX-enabled JSF no es una tarea trivial.
 Falta de madurez en la plataforma.
 Cuando usarlos
 Cuando quieres construir aplicaciones JSF con AJAX
 Pro's And Con's

59
Frameworks AJAX
 Blueprint AJAX-enabled JSF components
 http://developers.sun.com/ajax/componentscatalog.jsp
 Ajax4jsf
 http://livedemo.exadel.com/vcpDemo/demo.jsf (commercial version based on
open source ajax4jsf)
 ICEFaces
 http://www.icesoft.com/products/demos_icefaces.html
 Running Demos de varias implementaciones JSF/AJAXRunning Demos de varias implementaciones JSF/AJAX

60
Frameworks AJAX
 Javascript Wrapper framework para la plataforma Java
 The name, jMaki, was derived from "j," for Java, and "Maki," a Japanese word
for wrap.
 Orientado a componente o widget.
 Permite usar los widgets que proporcionan otros frameworks o toolkits
AJAX usando JSP y JSF tags.
 jMaki?

61
Frameworks AJAX
 Es un framework que proporciona un wrapper que NO está orientado a
componente, si no a Zonas.
 El wrapper toma la forma de un Filtro.
 Es el menos intrusivo.
 Se integra tanto con JSP como JSF.
 El código Javascript necesario es ínfimo.
 El desarrollador sólo tiene que separar las página en las diferentes zonas
AJAX que necesite y AjaxAnywhere se encarga de refrescar las zonas que
se le indique de forma programática, bien en el lado del cliente como en el
lado del servidor.
 Es la única que realmente es capa de “AJAXizar” cualquier aplicación
JavaEE existente sin que sea un proceso traumático.
 AjaxAnywhere

62
Frameworks AJAX
 jMaki
 https://ajax.dev.java.net/
 AjaxAnywhere
 http://ajaxanywhere.sourceforge.net/
 Wrapper Technology Implementations

63
Frameworks AJAX
 Desarrolla y depura aplicicones AJAX usando tu IDE habitual.
 Cuando despliegas tu aplicación, el compilador GWT traduce el código
Java a código Javascript y HTML.
 Java Code To JavaScript/HTML Translator: GWTJava Code To JavaScript/HTML Translator: GWT

64
Frameworks AJAX
 Pro's
 No necesitas aprender Javascript.
 Es de Google (Good momentum + Good document + Good tutorials +
Comprehensive)
 Con's
 Pierdes el control del código que se genera, pero lo mismo pasa con los
componentes JSF, los tags JSP y los frameworks “Remoting via Proxy”.
 Cuando usarlo
 Muy recomendable cuando el desarrollador tiene experiencia programando
Swing o Swt.
 Pro's And Con's

65
Frameworks AJAX
 GWT Kitchen Sink demo
 http://code.google.com/webtoolkit/documentation/examples/kitchensink/demo.
html
 GWT Dynamic Table example demo
 http://code.google.com/webtoolkit/documentation/examples/dynamictable/dem
o.html
 Demo: Running GWT Online DemosDemo: Running GWT Online Demos

66
Frameworks AJAX
 Backbase
 http://www.backbase.com/
 Wicket
 http://wicket.sourceforge.net/
 Echo2
 http://www.nextapp.com/platform/echo2/echo/
 Shale
 http://struts.apache.org/struts-shale/
 Ruby on Rails
 http://www.rubyonrails.org/
 Otros

67
Frameworks AJAX
 Backbase
 http://www.backbase.com/demos/explorer/#intro.xml[0]
 Echo2
 http://demo.nextapp.com/Demo/app
 Demo: Running Demos from variousWeb App Framework with AJAX SolutionsDemo: Running Demos from variousWeb App Framework with AJAX Solutions

69
CONCLUSIONES
 Las bases de AJAX están asentadas.
 Los mayoría de frameworks están lejos de su versión definitiva.
 La elección depende en gran medida del criterio del desarrollador y sus
conocimientos técnicos.
 ¿Qué framework uso?
 Mi opinión personal
 Los frameworks orientados a componente o widget no tienen sentido, salvo en
casos muy concretos.
 Hoy por hoy creo que AjaxAnywhere es la aproximación más acertada y la que
mejor se acopla a aplicaciones web de gestión de tipo CRUD, tal y como las
desarrollamos ahora.
 EL futuro pasa por definir la capa cliente sin usar HTML (XUL p.e.).
 Por tanto, las aproximaciones de GWT, Backbase o Lazlo son las opciones que
veo con mayor perspectiva de futuro.

70
CONCLUSIONES
 Impartido por Sang Shin, Ingeniero de Sun.
 Inscripción libre hasta el 4 de Agosto de 2006
 Si lo completas te mandan un diploma.
 Más información:
 http://www.javapassion.com/ajaxcodecamp/
 CURSO on-line de Ajax de 10 semanas

71
 Ángel Ruiz Calvo
 E-Mail: aruizc@itdeusto.com
 Presentación realizada por:

Curso ajax

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Similaire à Curso ajax

Similaire à Curso ajax (20)

Curso ajax