Tutorial Dojo

29
Ajax Utilizando Hacer AJAX utilizando L. I. José Alberto López Razo - [email protected] ENLI 2006

description

Introduccion a dojo de javascript

Transcript of Tutorial Dojo

Page 1: Tutorial Dojo

Ajax Utilizando

Hacer AJAX utilizando

L. I. José Alberto López Razo - [email protected] 2006

Page 2: Tutorial Dojo

Ajax Utilizando

www.gruslic.org.mx

Page 3: Tutorial Dojo

Ajax Utilizando

¿Que es?● Dojo es un Toolkit Open Source de javaScript que te ayuda a construir aplicaciones de internet.

● Contiene APIS y Widgets ● Es potente, portable, ligero.● Tiene herramientas de testeo para construir interfaces dinámicas.

● Permite crear widgets rápidamente, transiciones animadas, peticiones Ajax con la mejor potencia y facilidad.

● Soporta bookmarking● Encapsula las molestias “crossbrowser”.● Te ayuda con el DOM.

Page 4: Tutorial Dojo

Ajax Utilizando

Fundación Dojo

● Dojo es licencia dual como AFL y BSD, puedes usarlo en proyectos (L)GPL.

● Patrocinadores y Socios.

● Presidente de la Fundación, líder de proyecto,y creador de Dojo.

Alex Russell Blog - http://alex.dojotoolkit.org/

Page 5: Tutorial Dojo

Ajax Utilizando

Comunidad Dojo

● Sitio principal http://dojotoolkit.org● Sistema de trackeo de bugs http://dojotoolkit.org/trac

● Mailing lists http://dojotoolkit.org/mailman/listinfo/dojo-interest http://dojotoolkit.org/mailman/listinfo/dojo-contributors

● Manual (API documentación) http://manual.dojotoolkit.org/index.html

● Wiki http://dojo.jot.com/

Page 6: Tutorial Dojo

Ajax Utilizando

Sitios usando Dojo

www.youos.com

www.turboajax.com

Page 7: Tutorial Dojo

Ajax Utilizando

Sitios usando Dojo

http://copyleft.com.mx/

http://renkoo.com/

www.sitepen.com

Page 8: Tutorial Dojo

Ajax Utilizando

Capas

Page 9: Tutorial Dojo

Ajax Utilizando

Empezando

Como mínimo tener en website/js/dojo/ :

folder -> src/ dojo.js iframe_history.html

Incluir a dojo en nuestra página.

<script language="JavaScript" type="text/javascript" src="js/dojo/dojo.js"></script>

Page 10: Tutorial Dojo

Ajax Utilizando

Entrada/Salida con dojo.io✔ El paquete dojo.io proporciona código

portable y mecánismos de transporte para XMLHTTP.

✔ dojo.io.bind () es una API de petición asincrónica genérica que involucra múltiples capas de transporte. Es quien hace las peticiones "Ajax" utlizando Dojo.

✔ Las respuestas puede ser:✔ Texto puro (text/plain)✔ H T M L (text/html)✔ Javascript (text/javascript)✔ Xml (text/xml)✔ JSON-RPC (text/json) ✔ ...

Page 11: Tutorial Dojo

Ajax Utilizando

dojo.io.bin() text/plain

Estado inicial

Nuevo texto traido del server

Page 12: Tutorial Dojo

Ajax Utilizando

dojo.io.bin() text/plaindojo.require("dojo.io.*"); //incluimos paquete iofunction display_txt(){ var bindArgs = { //argumentos url: "data.txt", //url del archivo de texto load: function(type, data, evt){ //hacer algo con la

respuesta dojo.byId('cont').innerHTML = data; //alimentar la div

destino } };

dojo.io.bind(bindArgs); //atamos los argumentos y se ejecuta

}<span onclick="display_txt();">Despliega el nuevo texto da click aqui</span>

<div id="cont" class="bigfont"></div>

Mediante un span y su evento onclick activamos la función.

Esta será la div a alimentar.

Función Javascript

Page 13: Tutorial Dojo

Ajax Utilizando

dojo.io.bin() text/html

Zona de links

Div main

Div top

en panels/

main_3.html<p>MAIN 3</p><p><img src="imgs/batman_wp2.gif" width="168" height="119" /> </p>

main_2.html<p>MAIN 2</p><p>texto.....................</p>

top_2.html<p align="center">TOP 2 TEXTO DIFERENTE</p>

top_3.html<p align="center">TOP 3 OTRO TEXTO DIFERENTE</p>

Page 14: Tutorial Dojo

Ajax Utilizando

dojo.io.bin() text/htmldojo.require("dojo.io.*"); //incluimos funciones de dojo.iofunction carga_HTML( URL, destino ){ var dest = destino; //div destino dojo.io.bind({ mimetype: "text/html", //regresará html url: "panels/"+URL, //url a traer load: function( type, data, evt ) { //data = regresa del servidor dojo.byId(dest).innerHTML = data; //alimentamos destino con data }, error: errorHandler //manejador de errores });}

<span onclick="carga_HTML('top_1.html', 'top')">Recarga Top 1 </span><br /><span onclick="carga_HTML('top_2.html', 'top')">Recarga Top 2</span><br /><span onclick="carga_HTML('top_3.html', 'top')">Recarga Top 3</span><br /><span onclick="carga_HTML('main_1.html', 'main')">Recarga Main 1 </span><br /><span onclick="carga_HTML('main_2.html', 'main')">Recarga Main 2</span><br /><span onclick="carga_HTML('main_3.html', 'main')">Recarga Main 3</span><br /><span onclick="carga_HTML('main_4.html', 'main')">Recarga Main 4 </span><br />

Función Javascript

Llamada a la función enviando html a cargar y destino

<div id="top"> </div> ............. <div id="main"> </div>Las divs destino

Page 15: Tutorial Dojo

Ajax Utilizando

dojo.io.bin() text/javascript

1

3

2

El link activa la petición.

El js regresado del server se ejecuta.

Este es un alert local que se despliega con lo regresado por el return del js traido del server.

Page 16: Tutorial Dojo

Ajax Utilizando

dojo.io.bind() text/javascriptfunction Muestravalor( type, evaldObj ) {

alert( "El script regresado\n" + evaldObj );}

function show(){ dojo.io.bind({

mimetype: "text/javascript", //tipo de datos que regresarán

url: "js_return.js", //archivo javascriptload: Muestravalor, //funcion a utilizar al regresar

la respuesta error: function(t, e) { alert("Error!... " + e.message); //manejador de errores

} });}

<a href="#" onclick="show()" >Muestrame el javascript</a>

Función Javascript

Link que activa la función

Page 17: Tutorial Dojo

Ajax Utilizando

dojo.io.bin() text/xml

mor_xml.xml

Page 18: Tutorial Dojo

Ajax Utilizando

dojo.io.bind() text/xmlfunction TraeDatos(val) { // esto llenará los menus var archivo =""; if(val==1) archivo = "mor_xml.xml"; else if(val==2) archivo = "nay_xml.xml"; else if(val==3) archivo = "sin_xml.xml"; var data = { mimetype: "text/xml", // el tipo de datos que regresa será xml url: archivo, // URL del archivo xml load: function(t, xml, e){ // esto maneja los datos que vienen de la URL campo = dojo.byId("municipio"); // El campo a llenar campo.length=0; // Se eliminan los elementos actuales campo.options[0] = new Option('Selecciona Municipio',0); // Colocar la 1a opcion munic = xml.getElementsByTagName('row'); //obtener cada municipio del xml for (i=0; i < munic.length; i++ ){ // Ciclar sobre cada renglon de municipio nombre = munic[i].getElementsByTagName('nombre').item(0).firstChild.data; id = munic[i].getElementsByTagName('id').item(0).firstChild.data; // campo id campo.options[i+1] = new Option(nombre,id); //Insertar la nueva opcion } } } if(val!=0){ dojo.io.bind(data); } return false;}

<select id="entidad" onchange='TraeDatos(this.value)'> ...

<select id="municipio"> ...

Función Javascriptque trae el xml del server.

Selects involucrados

Page 19: Tutorial Dojo

Ajax Utilizando

dojo.io.bin() text/JSON

Imagenes con evento

onmouseoverModelos por cada

marca

Page 20: Tutorial Dojo

Ajax Utilizando

dojo.io.bind() text/JSONfunction trae_modelos(marca) {

var params = new Array();params['marca'] = marca;var bindArgs = {

url: "get_data.php", //url load: llenadiv, //funcion handlererror: function(type, json, evt){alert("error");},mimetype: "text/json", //tipo de respuestacontent: params //params

};dojo.io.bind(bindArgs);

}

function llenadiv(type, json, evt) { for(var key in json.modelos) {

dojo.byId("info").innerHTML= divinfo.innerHTML + "<br/>"+ json.modelos[key].modelo + ":"+ json.modelos[key].cantidad; }}

Función quetrae los datosdel servidor.

Función quemuestra los datos.

Evento quellama a la función

<span onmouseover="hndMouseOver('nissan');" onmouseout="hndMouseOut('nissan')"><img src="imgs/nissan.jpg" /></span>

Page 21: Tutorial Dojo

Ajax Utilizando

dojo.event Las herramientas en dojo.event.* permiten que los desarrolladores tratar cualquier llamada de función (acontecimiento de DOM o de otra manera) como evento el cual pueda ser escuchado.

Usando Dojo, el código puede registrar un “escucha” sobre cualquier acción a través de una API uniforme.

Page 22: Tutorial Dojo

Ajax Utilizando

Muestra dojo.event

Evento onChange

Evento onKeyUp

Page 23: Tutorial Dojo

Ajax Utilizando

dojo.event onChangefunction trackear_onchange(){

var campo = dojo.byId('nom'); //campo a trackearvar ultimo_valor = campo.value; //valor del campovar args = {

mimetype: "text/html", //regresará html url: "trackeador.php?nombre_campo=" + campo.name +

'&ultimo_valor=' + ultimo_valor, //url que devuelve el mensaje load: function( type, data) { //data = html regresado del servidor var dest = campo.name + "_resp"; //div destino dojo.byId(dest).innerHTML = " -> Respuesta del Sevidor: <b>" +

data + "</b>"; //alimentamos la div destino con data }, error: errorHandler //manejador de errores

};dojo.io.bind(args); //atamos la función con los argumentos y ejecutamos}

dojo.addOnLoad( function() { dojo.event.connect(dojo.byId("nom"), "onchange", "trackear_onchange});

Registrar elevento y la función a ejecutar.

Funcionalidad para el evento onchange

<span style="width:150px">Nombre:</span> <input type="text" id="nom" name="nombre">

Campo a trackear

Page 24: Tutorial Dojo

Ajax Utilizando

dojo.event OnKeyUpfunction trackear_onkeyup(){

var campo = dojo.byId('nom2'); //campo a trackearvar ultimo_valor = campo.value; //valor del campovar args = {

mimetype: "text/html", //regresará htmlurl: "trackeador.php?nombre_campo=" + campo.name +

'&ultimo_valor=' + ultimo_valor, //url que devuelve el mensajeload: function( type, data) { //data = regresado del servidor

var dest = campo.name + "_resp"; //div destinodojo.byId(dest).innerHTML = " -> Respuesta del Sevidor:

<b>" + data + "</b>"; //alimentamos la div destino con data},error: errorHandler //manejador de errores

};dojo.io.bind(args); //atamos la función con los argumentos y

ejecutamos}

dojo.addOnLoad(function() {dojo.event.connect(dojo.byId("nom2"), "onkeyup", "trackear_onkeyup");}

);

<span style="width:150px">Nombre:</span><input type="text" id="nom2" name="nombre2">

Registrar elevento y la funcion a ejecutar.

Funcionalidad para el evento onkeyup

Campo a trackear

Page 25: Tutorial Dojo

Ajax Utilizando

Formularios con ajax

El form es enviado asincronamente sin refrescar

toda la pagina y entregaun mensaje de confirmación.

Page 26: Tutorial Dojo

Ajax Utilizando

dojo.event & dojo.io.bind()

submitForm = function(e){ //recibe objeto event e.preventDefault(); //cancela comportamiento normal var conn = { url: "data_processor.php", //url formNode:dojo.byId("frmdata"), //formulario load: function(type, data){

dojo.byId("feedback").innerHTML = data; //nuevo mensajehideform(this.formNode,1); //esconde formulario

},error: function(type, error){ alert(String(type) + "\n" +

String(error)); },method: "POST"};

if(validaform(dojo.byId('frmdata'))){dojo.io.bind(conn); //ejecuta el envío

}}

Funcionalidad para el evento onsubmit

dojo.addOnLoad(function() { dojo.event.connect(dojo.byId("frmdata"), "onsubmit", "submitForm"); });

Función para conectar objeto+evento+handler

Page 27: Tutorial Dojo

Ajax Utilizando

X último:

Un buen look = saber CSS

Efectos visuales = CSS + DOM

Actualizar sin refrescar = saber DOM

Tratar respuestas = saber DOM

Page 28: Tutorial Dojo

Ajax Utilizando

WebMasters

OJO: En estos tiempos están pidiendo desarrollos con nuevas características

incluyendo AJAX

Page 29: Tutorial Dojo

Ajax Utilizando

Gracias!

[email protected]

www.gruslic.org.mx