Curso ajax

Post on 15-Aug-2015

56 views 0 download

Transcript of Curso ajax

Formación J2EE – T&D

Curso de

ÍNDICE

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

Introducción al fenómeno “Web 2.0”

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

Introducción al fenómeno “Web 2.0”

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

Fundamentos técnicos de la tecnología AJAX

Introduce el modelo de aplicación Web asíncrona.

¿Qué es AJAX?

11

Fundamentos técnicos de la tecnología AJAX

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

Fundamentos técnicos de la tecnología AJAX

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

Fundamentos técnicos de la tecnología AJAX

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

Fundamentos técnicos de la tecnología AJAX

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 APIhttp = new XMLHttpRequest();

} else { // Usar ActiveX (IE)http = new ActiveXObject("Microsoft.XMLHTTP");

}

15

Fundamentos técnicos de la tecnología AJAX

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

El objeto XMLHttpRequest:

16

Fundamentos técnicos de la tecnología AJAX

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:

El objeto XMLHttpRequest:

// Crear el objeto...http = ... // Registrar la función de finalizaciónhttp.onreadystatechange = targetFunction;// Abrir la conexión a la página de forma asíncronahttp.open("GET", "http://dirección de datos", true); // Enviar la petición sin datos adicionaleshttp.send(null);

17

Fundamentos técnicos de la tecnología AJAX

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.

El objeto XMLHttpRequest:

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

“Old technologies, new tricks”

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

“Old technologies, new tricks”

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

“Old technologies, new tricks”

…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

“Old technologies, new tricks”

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

“Old technologies, new tricks”

Prototype como base de otros proyectos

25

“Old technologies, new tricks”

Otro Framework Javascript

26

“Old technologies, new tricks”

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

“Old technologies, new tricks”

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

“Old technologies, new tricks”

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

“Old technologies, new tricks”

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

“Old technologies, new tricks”

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

“Old technologies, new tricks”

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

“Old technologies, new tricks”

¿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

Recomendaciones

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

Frameworks AJAX

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 &

ComponentsProxy

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

Razones técnicas para usar librerías JavaScript del lado cliente

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

Razones técnicas para usar librerías JavaScript del lado cliente

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/demo.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

Conclusiones

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?

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

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

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

71

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

Ángel Ruiz Calvo E-Mail: aruizc@itdeusto.com

Presentación realizada por: