uniAjax, nuevo framework para el desarrollo con AJAX

Andreas Kalsch nos trae un nuevo framework para desarrollar aplicaciones con tecnología AJAX, con el principal objetivo de funcionar en el máximo número posible de navegadores. Al igual que otros (por ejemplo Dojo) intenta conseguir esto, usando iframes en lugar de XMLHTTP cuando este no esté disponible.

Para que veais que pinta tiene programar basandose en uniAjax, aqui teneis un ejemplo que simplemente hace una llamada a un script y muestra su salida en un div.

<script type="text/javascript"><!--
             
        // crear el objeto uniAjax :
        ajax = new uniAjax();
         
        /* definir la función que recibe la respuesta de la petición AJAX.
         * parametros:
         * - response: la cadena devuelta (debe ser el parametro 1)
         * - id: indica la id del elemento donde se mostrará la respuesta
         */                         
        takeResponse = function(response, id) {
            if (typeof id != 'undefined')
                document.getElementById(id).innerHTML = response;
        }
    //-->
</script>
     
    <input type="button" value="Insertar en el div 1" onclick="ajax.request({'url': 'response.php', 'func': takeResponse}, 'content1');"/>
    <input type="button" value="Insertar en el div 2" onclick="ajax.request({'url': 'response.php', 'func': takeResponse}, 'content2');"/>
     
    <div id="content1"></div>
     
    <div id="content2"></div> 

Teneis más información en su web: uniAjax.

Envío asíncrono de formularios con AJAX

Una de las principales ventajas de esta tecnología bautizada como AJAX, es la posibilidad de realizar conexiones y transferencia de datos asíncronas. Esta ventaja, tambien podemos usarla para el envío de formularios, consiguiendo así que el navegador no cargue otra página cuando cuando pulsamos el boton submit del formulario, sino que seamos nosotros los que tengamos el control para mostrar el siguiente paso al usuario en la misma página.
Voy a intentar documentar en este post, varios ejemplos de envío de formularios de forma asíncrona tomando como base los toolkits AJAX más conocidos:

Con Dojo Toolkit

Primero creamos la funcion javascript que va a ser llamada cuando se produzca el evento “submit” del formulario:

<script type="text/javascript" src="http://tb.innoa.com/js/dojo/dojo.js"></script>
  <script type="text/javascript">
  dojo.require ("dojo.io.*");

	function dojoForm(form) {
		
		if (document.presForm.email.value != '')
		{
				var kw = {
					mimetype: "text/plain",
					formNode: form,
					load: function(t, txt, e) {
						var formBox = dojo.byId('formBox');
						if (formBox)
							formBox.innerHTML = '<strong>Gracias por contactar con nosotros</strong&g;. Pronto recibirás noticias nuestras ;)';	
					},
					error: function(t, e) {
						alert("Error!... " + e.message);
					}
				};
				dojo.io.bind(kw);
		}
		else
			alert ('Por favor, introduce tu email');
		return false;
	}
  </script<

Un ejemplo de formulario que usara esta función:

<div id="formBox" style="clear:both;">
				<form name="presForm" id="presForm" method="post" action="/enviar/form" onsubmit="try{dojoForm(this)}catch(E){};return false;">
					<label>E-mail: <input type="text" name="email" id="email" /></label>
					<input type="submit" value="Enviar" />
				</form>

			</div>

En este caso, se trata de un formulario para dejar tu email (por ejemplo para apuntarse a una newsletter). Una vez que se pulsa el botón de enviar (o la tecla Enter), se llama a la función javascript “dojoForm” y se produce el envío de forma asíncrona.
Como se puede ver en la función, una vez que se ha finalizado, lo que hacemos es sustituir el formulario por un mensaje para el usuario.

Con Prototype

Creamos la función javascript que enviará el formulario:

<script type="text/javascript"> src="prototype.js"></script>
<script type="text/javascript">
function protoSend(){
var params = Form.serialize($('presForm'));
new Ajax.Updater('formBox', '/enviar/form', {asynchronous:true, parameters:params});
}
</script>

El ejemplo de formulario sería ahora:

<div id="formBox" style="clear:both;">
				<form name="presForm" id="presForm" method="post" action="/enviar/form" onsubmit="protoSend();return false;">
					<label>E-mail: <input type="text" name="email" id="email" /></label>
					<input type="submit" value="Enviar" />
				</form>

			</div>

En este caso, prototype se encargará de mostrar en el div donde estaba el formulario la salida del script que recibe los datos del formulario.

Dojo Editor en acción

Hace poco me encontré ante un problema muy común: la traducción de los textos de una web. Normalmente los que traducen no tienen conocimientos técnicos y suelen manejar ficheros word y similares. Pero suelen tener un problema: al no saber el contexto real de los textos, a veces las traducciones son un poco “raras” (seguro que más de uno sabe a lo que me refiero).

Pues bien, el otro día una vez tenía montada una web en el idioma original (english) y preparado el sistema de traducción (XMLs con cadenas para cada idioma cargados desde PHP), se me ocurrió una idea. ¿Y si el traductor simplemente tuviera que hacer click en el trozo de texto que desea editar y ponerse a escribir? De esta forma estaría viendo el texto en el contexto correcto y en tiempo real… y además… yo podría hacer que el texto que ha escrito se guardase en un XML (ahorrándome un montón de rato y errores haciendo Copy+Paste).

Lo primero que me vino a la cabeza… esto va a ser complicado de implementar, mejor lo dejo. Pero entonces me acordé de que mis amigos de dojo, tienen un widget Editor (ahora Editor2) que de una forma muy sencilla, te permite convertir en editable cualquier texto de la web. Manos a la obra.

Por ejemplo, para este parrafo:
dojo editor

Al hacer click, aparecería:

dojo editor

Veamos un poco de código javascript:

<script type="text/javascript" src="javascript/dojo.js"></script>
<script type="text/javascript">
	dojo.require("dojo.widget.Editor");
	
	editorVisible = false;


	function crearEditor ()
	{
		 
		var editorArgs = {
			items: ["save", "cancel", "|", "formatblock", "|", "insertunorderedlist", "insertorderedlist", "bold", "italic", "underline", "|", "createLink"]
		};
		var editor = dojo.widget.fromScript("Editor", editorArgs, 
										dojo.byId("parrafoEditor"));
										
		editor.saveUrl = 'guardar.php';
		editor.saveArgName = 'textToSave';
		editor.closeOnSave = true;
	}
	
	
	function handleOnClick(evt){
		if (!editorVisible) {
			editorVisible = true;
			crearEditor();
		}
	}

	dojo.event.connect(dojo.byId("parrafoEditor"), "onclick", "handleOnClick");
</script>

Las primeras sentencias, sirven para cargar primero la base del toolkit dojo y luego el código del Editor:

<script type="text/javascript" src="javascript/dojo.js"></script>
<script type="text/javascript">
	dojo.require("dojo.widget.Editor");

Hacer que un nodo HTML sea editable con dojo es muy simple, y lo conseguimos con las siguientes líneas de código:

var editorArgs = {
			items: ["save", "cancel", "|", "formatblock", "|", "insertunorderedlist", "insertorderedlist", "bold", "italic", "underline", "|", "createLink"]
		};
var editor = dojo.widget.fromScript("Editor", editorArgs, 
                 dojo.byId("parrafoEditor"));

La funcion fromScript nos sirve para crear un nuevo widget y acepta tres argumentos:

  1. El tipo de widget (en este caso ‘Editor’)
  2. Los argumentos de creación del widget (en este caso le pasamos los botones que queremos que aparezcan).
  3. El nodo HTML donde queremos que se cree el editor (y cuyo texto va a ser editable). En este caso lo localizamos por su Id “parrafoEditor” usando la funcion dojo.byId

A continuación, una vez creado el widget, terminamos de configurarlo:

editor.saveUrl = 'guardar.php';
editor.saveArgName = 'textToSave';
editor.closeOnSave = true;
  • la variable saveUrl, indica la url que es llamada cuando se pulsa el botón guardar del editor. El contenido del editor se pasa mediante POST.
  • saveArgName será el nombre de la variable POST que llegará a nuestro script de guardar con el contenido del editor.
  • closeOnSave indica al editor si debe deshabilitarse (no seguir permitiendo la edición del texto) una vez que se ha pulsado el botón guardar. En este caso, una vez que se pulsa el botón guardar, no se podrá seguir editando.

Por último, conectamos el evento onclick para activar el modo de edición. O sea, el texto no es editable hasta que se hace click sobre el la primera vez.

function handleOnClick(evt){
		if (!editorVisible) {
			editorVisible = true;
			crearEditor();
		}
	}

dojo.event.connect(dojo.byId("parrafoEditor"), "onclick", "handleOnClick");

Y para que no sea sólo teoría, aquí teneis un sencillo ejemplo.

Podeis encontrar más detalles sobre la edición de textos con el toolkit dojo en su web: Rich text editing with dojo.

Ventanas javascript con Prototype Window Class

Prototype Window

La Clase Prototype Window nos permite crear ventanas dentro de la ventana principal del navegador usando Javascript, con sólo unas líneas de código y un poco de CSS.

Algunas de sus características son:

  • Ventanas redimensionables
  • Minimizar/Maximizar
  • Cuadros de diálogo
  • Aspecto modificable

Su uso es muy sencillo, y bastan unas pocas líneas de javascript:

win = new Window('window_id', {title: "Sample", top:100, left:350})
win.getContent().innerHTML = "<h1>Hello world !!</h1>";
win.setDestroyOnClose();
win.showCenter();

Como su nombre indica, está basada en Prototype y tambien usa algunos efectos
de script.aculo.us.
Además dispone de abundante documentación y ejemplos.

Corrección: Como comenta Sergi, la url correcta es http://prototype-window.xilinus.com/.

Google crea una API AJAX para las búsquedas

Google AJAX Search API

El equipo de Google no para de sacar nuevos productos, a este ritmo nos quitan el trabajo a todos… o todos terminamos trabajando en Google :P.

Lo último que nos traen es muy interesante. Se trata de una API (Application Programming Interface) para acceder a su funcionalidad de búsquedas a traves de programación Javascript+XML (AJAX). De esta forma, los desarrolladores web pueden interactuar con sus servidores realizando peticiones de búsqueda y obteniendo resultados en forma de HTML.

Esta herramienta, que pretende ser una evolución de la API ya existente para las búsquedas, nos va a permitir mostrar en nuestro contenido web resultados de búsquedas en google (o incluso de google maps, google video o google blogs).

El Hello World! con Google Ajax

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

    <title>Hello World - Google AJAX Search API Sample</title>
    <link href="http://www.google.com/uds/css/gsearch.css"
        type="text/css" rel="stylesheet"/>

    <script src="http://www.google.com/uds/api?file=uds.js&amp;v=0.1"
        type="text/javascript"></script>
    <script language="Javascript" type="text/javascript">

    //<![CDATA[

    function OnLoad() {
      // Create a search control
      var searchControl = new GSearchControl();

      // Add in a full set of searchers
      var localSearch = new GlocalSearch();
      searchControl.addSearcher(localSearch);
      searchControl.addSearcher(new GwebSearch());
      searchControl.addSearcher(new GvideoSearch());
      searchControl.addSearcher(new GblogSearch());

      // Set the Local Search center point
      localSearch.setCenterPoint("New York, NY");

      // tell the searcher to draw itself and tell it where to attach
      searchControl.draw(document.getElementById("searchcontrol"));

      // execute an inital search
      searchControl.execute("Ferrari F430");
    }

    //]]>
    </script>
  </head>
  <body onload="OnLoad()">

    <div id="searchcontrol"/>
  </body>
</html>

Google nos ofrece varios ejemplos más de su uso para poder integrar estos resultados en nuestras páginas.

Sin duda Google abre la puerta a un nuevo mundo de posibilidades, tanto positivas como negativas (depende de su uso, como siempre). Seguramente durante los próximos días veamos multitud de ejemplos de uso de esta tecnología.

Por cierto, como nos tiene acostumbrados, Google ha abierto un blog oficial del servicio.

via dirson.

Nueva versión 0.4 de Firebug

Joe Hewitt anuncia en su blog el lanzamiento de la nueva versión de esta extensión para Firefox.
Esta versión trae nuevas características, como por ejemplo la depuración real de Javascript con la posibilidad de establecer puntos de ruptura y la ejecución paso a paso del código.
Sin duda una extensión que merece la pena tener si programas con javascript.

getfirebug.com

Actualizado (01/06/2006) : Video de Joe Hewitt donde habla sobre firebug.

Dojo Toolkit

Mientras más lo uso, más me gusta (aunque tiene sus cosillas). Entre todos los frameworks que he usado, me quedo con el toolkit dojo (sin menospreciar a los otros). En la nueva versión, muchas mejoras y nuevas funcionalidades (como el dojo.storage) que siguen haciéndolo más potente, sin hacerlo más pesado ni más complicado. Definitivamente me gusta como han resuelto muchas de las “debilidades” de Javascript, como puede ser la de los “includes”.

Os pongo un ejemplo de uso en una aplicación que estoy desarrollando.
Imaginemos el caso, muy común, de un formulario en el que se da a elegir al usuario una provincia y una localidad de la misma. Una vez que el usuario elige la provincia, javascript se encarga de completar la siguiente lista con las localidades que tiene la provincia selecionada.

Bien, imaginemos de nuevo que tenemos un servidor que al llamarlo como http://miservidor.com/poblaciones.php?id_provincia=29, nos devuelve un XML tal que este:

<poblaciones>
<item id="24343">Albaicin</item>
<item id="24344">Alcaucin</item>
<item id="24345">Alcorrin</item>
.
.
.
</poblaciones>

Este XML nos servirá para rellenar el control <SELECT> con las poblaciones de la provincia seleccionada. Este sería el código HTML de las listas:

<form ...>
  <select name="provincia" id="provincia" onsubmit="listaPoblaciones(this.value)">
     ...
    <option value="11">Cadiz</option>
    <option value="29">Malaga</option>
     ...
  </select>

  <select name="poblacion" id="poblacion">
      <option>Por favor, elige la provincia</option>
  </select>
</form>

En la primera lista – la de las provincias – hemos capturado el evento “onchange” para llamar a nuestra función javascript que se encargará de realizar todas las operaciones necesarias para llenar la lista de las poblaciones.

Esta sería una posible implementación de esta funcion javascript:

<script type="text/javascript" src="dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.io.*");
dojo.require("dojo.event.*");

function listaPoblaciones (prov)
{
	var feedUrl = 'http://miservidor.com/poblaciones.php?id_provincia=' + prov;
	var lista = 'poblacion';
	
	var bindArgs = {
		url:        feedUrl,
		mimetype:   "text/xml",
		error:      function(type, errObj){},
		load:      function(type, data, evt){
			// hemos recibido el XML correctamente
			
                        // Obtenemos la lista de elementos del XML
			var items = data.getElementsByTagName('item');
			
                        // Obtenemos una referencia a la lista de poblaciones
			var l = document.getElementById(lista);
			if (l){
                                // Borramos todos los elementos que pueda tener la lista...
				while (l.firstChild) {
 					 l.removeChild(l.firstChild);
				}
				// Y la llenamos con los elementos del XML
				for (i = 0; i < items.length; i++)
				{
					var nombre = items[i].firstChild.nodeValue;
					var id = items[i].getAttribute ('id');
					// Creo la entrada de la lista (