RoundCube 0.1

Fa força temps us vaig donar unes primeres impressions sobre RoundCube, un webmail lliure desenvolupat en PHP i que fa ús freqüent d’AJAX i que transforma l’experiència del concepte Webmail en quelcom força diferent al que és usual.

Posant-me als dia de feeds he vist que el passat dia 4 de Març van treure la seva primera versió estable. Es tracta encara d’una versió 0.1, però té força features:

  • Multilingual capabilities
  • Full support for MIME and HTML messages
  • Compose messages with attachments
  • Multiple sender identities
  • Basic address book
  • Find-as-you-type address book integration
  • Forwarding messages with attachments
  • Create or remove custom message folders
  • Built-in caching for fast mailbox access
  • Support for external SMTP server
  • Searching messages and contacts
  • Spell checking
  • Advanced user interface
  • Unlimited users and messages
  • Complete customization with skins

De moment el gran handicap que l’hi trobo és que no es poden crear filtres als correus d’entrada i per tant tot va a parar a la safata d’entrada, per la resta de característiques i tenint en compte l’optimització que han fet des de la versió 0.1-beta2 pel que fa a peticions HTTP, crec que és una bona alternativa al meu esquirol.

Recorrent un XML amb JavaScript

Un dels objectius d’aquestes vacances era familiaritzar-me amb l’ús de JQuery per tal de poder fer RIA de forma àgil i senzilla i sense haver de carregar macro llibreries com Prototype o Script.aculo.us quan no fos necessari.

Una de les primeres proves que he realitzat, ha estat la petició d’un arxiu XML via AJAX i al posterior lectura del mateix mitjançant l’arbre DOM, realment és força trivial.

Donat un XML com el que segueix:


<items>
	<item>
  		<titol>Element 1</titol>
		<contingut>Contingut element 1</contingut>
	</item>
	<item>
  		<titol>Element 2</titol>
		<contingut>Contingut element 2</contingut>
	</item>
</items>

Teòricament, podem llegir-lo de la següent manera:


url="arxiu.xml";
$.get(url, function(xml){
	$("item",xml).each(function(i){
		alert("Això és el titol del fill " + i + ":" + this.childNodes[0].textContent);
		alert("Això és el contingut del fill " + i + ":" + this.childNodes[1].textContent);
	})
})

Sempre hi ha peros, amb IE sembla que la solució no acaba de funcionar, ja que l’element this.childNodes[0].textContent no està definit i cal afegir un FirstChild al propi element per tal que sàpiga que vols llegir-lo. L’exemple doncs quedarà:


url="arxiu.xml";
$.get(url, function(xml){
	$("item",xml).each(function(i){
		if (this.childNodes[0].textContent == undefined){
			alert("IE - Això és el titol del fill " + i + ":" + this.childNodes[0].firstChild.text);
			alert("IE - Això és el contingut del fill " + i + ":" + this.childNodes[1].firstChild.text);
		} else {
			alert("Això és el titol del fill " + i + ":" + this.childNodes[0].textContent);
			alert("Això és el contingut del fill " + i + ":" + this.childNodes[1].textContent);
		}
	})
})

He provat l’exemple amb Firefox, Opera i IE amb el resultat esperat. Així doncs, mitjançant aquest petit codi, podem fer crides AJAX que retornin un XML i parsejar-lo al navegador.

He penjat l’HTML de l’exemple i l’arxiu XML llegit per si algú vol tafanejar.

Script.aculo.us 1.6.2 i introducció a LaCo

A Ajaxian es fan ressó de l’aparició de la nova versió d’Script.aculo.us, una de les llibreries JavaScript per crear interfícies AJAX més popular. Básicament l’actualització és una bug-fix-only release, és a dir una versió que corregeix forats de les seves predecessores.

També seguint amb AJAX com a tema i Ajaxian com a proveïdor de informació, arribo a un manual sobre LaCo -Late Content-, una llibreria per facilitar l’ús d’AJAX als no programadors.

RoundCube v0.1-beta2

Ahir es va fer pública la versió 0.1-beta 2 del webmail basat en AJAX del que del que parlava no fa massa en un post, anomenat RoundCube.

De moment aquest webmail, que destaca per la seva senzilla instal·lació, suporta les següents features:

  • Multilingual capabilities
  • Full support for MIME and HTML messages
  • Compose messages with attachments
  • Multiple sender identities
  • Basic address book
  • Find-as-you-type address book integration
  • Forwarding messages with attachments
  • Create or remove custom message folders
  • Built-in caching for fast mailbox access
  • Support for external SMTP server
  • Advanced user interface
  • Unlimited users and messages
  • Complete customization with skins

Esperem que ben aviat aparegui la versió estable planificada al RoadMap.

Carregant…

Quan treballes amb AJAX sovint et trobes amb un problema, com a programador i negat en el disseny, que és relativament complexe: com fer la iconeta animada de “carregant…” que surt a qualsevol pàgina web decent que empra AJAX.

ajax loader

En David, a la feina, ahir em va fer topar amb la solució, una pàgina que genera (darrerament només parlo de generadors) les iconetes de forma automàtica a patir dels paràmetres que li facilites: Ajaxload.

Encadenant Ajax.Updater

Qui més qui menys s’ha trobat amb problemes a l’hora d’encadenar crides a l’Ajax.Updater de Prototype. Després de donar-hi unes voltes a la feina, vaig crear una petita funció (força rudimentaria) per encadenar crides de forma senzilla:

La funció és la següent:

function MultipleAjaxUpdater(param,divid,pos) {
   //param = paràmetres a passar al Ajax.Updater
   //divid = divs a actualitzar pel Ajax.Updater
   //pos = crida que estem executant (inicialment = 0)
    var url = 'gestioajax.php';
    var pars = param[pos];
    var div_desti=divid[pos];
        var myAjax = new Ajax.Updater(
        div_desti,
        url,
            {
                evalScripts: 'true',
                method: 'get',
                parameters: pars,
                onComplete: function() {
                    pos = pos + 1;
                    if (pos < param.length)
                        getAjaxMatriu(param,divid,pos);
                }
            }
        );
}

I un exemple de crida podria ser:

        var param = new Array();
       // Parametres a passar al Ajax.Updater de forma seqüencial:
        param[0] = 'action=comentaris&id=213132';
        param[1] = 'action=dades&id=213132';
        param[2] = 'action=tot&id=213132';

        var divid = new Array();
       // Divs a actualitzar pel Ajax.Updater de forma seqüencial:
        divid[0] = "textajax1";
        divid[1] = "textajax2";
        divid[2] = "textajax3";

        MultipleAjaxUpdater(param,divid,0);