La web como Plataforma con Dojo Toolkit

LA WEB COMO PLATAFORMA CON Alex Fuentes http://www.jroller.com/afuentes

Agenda
Presentador
WEB 2.0 , AJAX , RIA,HTML 5
Javascript Engine
Browser – Virtual Machine
Dojo al rescate
Ejemplo I
Dojo + Cometd ( Real Time Solutions )
Ejemplo II
MVC en el Browser

Presentador
Ingeniero Eléctrico ( Telecomunicación y Electrónica )
8 años de Experiencia en el Mundo TI
Miembro Activo del Java User Group Chile
Taller de Dojo + JEE ( Open Community 2008 )
Taller Introduccion a Groovy ( JugDay 2008 )
Charlas

WEB 2.0

WEB 2.0
Aplicaciones que generen colaboración
Une distintas fuentes de información
Creadas para el usuario final
Otra forma de interactuar con el usuario
El usuario genera el contenido
El usuario es el que crea los datos

AJAX Asynchronous JavaScript and XML.

AJAX
Técnica que combina diferentes Tecnologías
Permite comunicaciones asíncronas
Mejora la interacción con el usuario
Tecnologías
XHTML
CSS
DOM ( Document Object Model)
XML ( formato Transferencia )
XMLHttpRequest

RIA Rich Internet Applications

RIA
Aplicaciones Web con el sabor de Aplicaciones Desktop
Rich Controles ( Arboles , Menús desplegables , Grid )
Integración con medios ( Audio y Video)

Ejemplos RIA
Google Docs
Gmail
Wave

HTML 5

HTML 5
HTML5 es la quinta versión de HTML
Canvas TAG y Scalable Vector Graphics (SVG)
Geolocation API
HTML 5 Video tag
HTML 5 sound tag
Web workers
HTML 5 WebSockets

JAVASCRIPT ENGINE

JavaScript Engine
SquirrelFish - Safary
StartMoonkey - Firefox
V8 - Chrome
Futhark - Opera
IE Jscript -IE

NAVEGADORES

Browser
Minimalistas
Simples

BROWSER LA NUEVA VIRTUAL MACHINE

AL RESCATE

Que es Dojo Toolkit ?
Proyecto Open Source nace el 2004 ( AFL y BSD )
Librería modular construida en JavaScript

Porque nace Dojo Toolkit ?
Para resolver las incompatibilidades de los Navegadores
Aumenta la demanda por aplicaciones RIA
Incompatibilidades en el cumplimiento de los estandares por parte de los Navegadores
Hacer mas facil el desarrollo de aplicaciones mas complejas

Características Dojo Toolkit
Construido por paquetes que son utilizados ondemand
Manipulacion de DOM ( Document Object Model )
Efectos ( Fade In , Fade Out )
Manejo de Ajax y Cometd
Manejo de Eventos
Drag and Drop
Componedentes Reutilizables ( dijit = dojo widget )
API Draw 2D and 3D ( gfx )
Graficos ( pie , barra , plot , etc )
Util library

Estructura de Dojo Toolkit
Dojo : Core de framework
Dijit : Todos los componentes reutilizables que permiten la interacción con el usuario
Dojox: Dojo Experimental y de otros proveedores
Util : Librerias utilitarias del Framework

Funcionalidades de Dojo Toolkit
Sistema de Paquetes
dojo Dojo esta organizado en paquetes igual como esta estruturado java Package System/Bootstrap Language Utilities Event System Widget System AJAX Utilities Custom Widget

Dojo API
dojo.require("package.*");
Similar al keyword import de java
Carga dinamica de modulos dojo.require('modulename')
Carga las dependencias necesarias de cada script
Previene la carga recursiva de script
Permite la carga de modulos en cross-domain
Objeto dojo es cargado en forma automatica
XmlHttpRequests Sincronicos
dojo.require("package.*");

Dojo API
dojo
dojo.byId() : Funcion que retorna el nodo del objeto DOM.
dojo.body() : Me retorno el objeto body del documento actual
dojo.fadeIn() : Permite la animacion
dojo.xhr() : Permite el soporte para la comunicacion AJAX
dojo.xhrGet() : Envia un requerimiento HTTP GET al server
dojo.xhrPost() : Envia un requerimiento HTTP POST al server
dojo.query : seleccion de conjunto de Nodos
dojo.place : colocar nodos dentro del DOM
dojo.declare: Declara nuevos componentes
dojo.extend : Permite extender un componente ya creado
dojo.destroy : Permite la destruccion de Nodos
dojo.*

Integrando Dojo <html> ... <script type="text/javascript" src="http://localhost:8080/dojo-release-1.2.3/dojo/dojo.js" djConfig="isDebug: false, parseOnLoad: true" ></script> </html>

Integrando Dojo
Parametros variable dfConfig
ParserOnLoad : variable que permite el parser del DOM Tree , para utilizar el atributo dojoType, para la definicion de Dijit
isDebug : Activa el logging en la aplicacion ( FireBug )

Themes Dojo <html> ...
<style type="text/css"> @import "http://localhost:8080/dojo-release-1.3.2/dijit/themes/tundra/tundra.css"; @import "http://localhost:8080/dojo-release-1.3.2/dojo/resources/dojo.css"; </style> <body class="tundra" > .....

Dojo upload
<script> dojo.addOnLoad(function() { dojo.console(“ready”); }); </script>

Dijit Declarados
<script type="text/javascript"> dojo.require("dijit.dijit"); // optimize: load dijit layer dojo.require("dijit.form.Button"); dojo.require("dojo.parser"); </script> <body> <button id="1467" dojoType="dijit.form.Button" onClick='console.log("clicked simple")'> View </button>
</body>

Dijit Programados
<script type="text/javascript"> dojo.require("dijit.dijit"); // optimize: load dijit layer dojo.require("dijit.form.Button"); dojo.require("dojo.parser"); var widget2 = new dijit.form.Button({ label: "hello!", name: "programmatic" }); widget2.placeAt("buttonContainer"); // place in page </script>

Custom dijit dojo.provide("school.Clock"); .... dojo.declare("school.Clock", [dijit._Widget, dijit._Templated], { templateString: "<div ><span dojoAttachPoint="clock"></span></div>", postCreate : function() { this._update(); }, _update : function(){ var timeVal=dojo.date.locale.format(new Date(), {selector:'time', timePattern: 'HH:mm:ss'}); this.clock.innerHTML = timeVal setTimeout(dojo.hitch(this, "_update"),1000) } } // end school.Clock );

Dojo gfx

DOJO GAME Ejemplo I

COMET + DOJO
( Real Time Solutions )

COMET
Técnica de Long Pooling
Permite al servidor enviar información al cliente
Utilizada por Gmail , Facebook para las funcionalidades de chat.

Bayeux Protocol
Creado para soportar 2 flujos de interacción
Server to Client
Client to server
Client to Client
Protocolo para transportar mensajes asíncronos sobre
HTTP
Utiliza JSON para el intercambio de Mensajes

Dojo + Bayeux Protocol + Jetty
dojo.comet.init
dojo.comet.subcriber
dojo.comet.publish

RICH CONSOLE Ejemplo II

MVC en el Browser Client Side – Server Side

DOJO makes Javascript OOP possible

PREGUNTAS

RECURSOS
Dojo Toolkit
http://www.dojotoolkit.com/
Dojo Campus
http://www.dojocampus.org/
Noticias de mundo ajax
http://www.ajaxian.com
Sitepen
http://www.sitepen.com

http://www.jroller.com	503
http://jroller.com	48
http://www.slideshare.net	46
http://translate.googleusercontent.com	2
http://xss.yandex.net	1
http://yourblog.jroller.com	1
http://www.health.medicbd.com	1

La web como Plataforma con Dojo Toolkit

by Alex Fuentes on Oct 10, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

7 Embeds 602

Statistics

La web como Plataforma con Dojo Toolkit — Presentation Transcript