Curso ajax

71
Formación J2EE – T&D Curso de

Transcript of Curso ajax

Page 1: Curso ajax

Formación J2EE – T&D

Curso de

Page 2: Curso ajax

ÍNDICE

Page 3: Curso ajax

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.

Page 4: Curso ajax

Introducción al fenómeno “Web 2.0”

Page 5: Curso ajax

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”?

Page 6: Curso ajax

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

Page 7: Curso ajax

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

Page 8: Curso ajax

Fundamentos técnicos de la tecnología AJAX

Page 9: Curso 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?

Page 10: Curso ajax

10

Fundamentos técnicos de la tecnología AJAX

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

¿Qué es AJAX?

Page 11: Curso 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:

Page 12: Curso ajax

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:

Page 13: Curso ajax

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:

Page 14: Curso ajax

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");

}

Page 15: Curso ajax

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:

Page 16: Curso ajax

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

Page 17: Curso ajax

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

}

Page 18: Curso ajax

“Old technologies, new tricks”

Page 19: Curso ajax

19

“Old technologies, new tricks”

Javascript visto por el navegador:

JAVASCRIPT

Page 20: Curso ajax

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

Page 21: Curso ajax

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

Page 22: Curso ajax

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:

Page 23: Curso ajax

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:

Page 24: Curso ajax

24

“Old technologies, new tricks”

Prototype como base de otros proyectos

Page 25: Curso ajax

25

“Old technologies, new tricks”

Otro Framework Javascript

Page 26: Curso ajax

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>…

Page 27: Curso ajax

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.

Page 28: Curso ajax

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

Page 29: Curso ajax

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

Page 30: Curso ajax

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.

Page 31: Curso ajax

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.

Page 32: Curso ajax

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

Page 33: Curso ajax

Recomendaciones

Page 34: Curso ajax

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”/>…

Page 35: Curso ajax

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}); } } });…

Page 36: Curso ajax

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

Page 37: Curso ajax

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

Page 38: Curso ajax

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

Page 39: Curso ajax

Frameworks AJAX

Page 40: Curso 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.

Page 41: Curso ajax

41

Frameworks AJAX

Capas de la arquitectura (Lado Cliente)

HTMP Pages, Javascript Event Handlers

UI Widgets &

ComponentsProxy

Remoting Abstraction Layer

XMLHttpRequest iFrame

JavaScript

Utilities

Page 42: Curso ajax

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)

Page 43: Curso ajax

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

Page 44: Curso ajax

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

Page 45: Curso ajax

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

Page 46: Curso ajax

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

Page 47: Curso ajax

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

Page 48: Curso ajax

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

Page 49: Curso ajax

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

Page 50: Curso ajax

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

Page 51: Curso ajax

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:

Page 52: Curso ajax

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

Page 53: Curso ajax

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”

Page 54: Curso ajax

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

Page 55: Curso ajax

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

Page 56: Curso ajax

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

Page 57: Curso ajax

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

Page 58: Curso ajax

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

Page 59: Curso ajax

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

Page 60: Curso 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?

Page 61: Curso ajax

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

Page 62: Curso ajax

62

Frameworks AJAX

jMaki https://ajax.dev.java.net/

AjaxAnywhere http://ajaxanywhere.sourceforge.net/

Wrapper Technology Implementations

Page 63: Curso ajax

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

Page 64: Curso ajax

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

Page 65: Curso ajax

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

Page 66: Curso ajax

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

Page 67: Curso ajax

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

Page 68: Curso ajax

Conclusiones

Page 69: Curso ajax

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.

Page 70: Curso ajax

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.

Page 71: Curso ajax

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: [email protected]

Presentación realizada por: