Joan a 09:46, 16 gen 2009

2009-01-16T09:46:48Z

Pàgina nova

(aquest apunt està extret de l'extint bloc de Socrathos, del novembre de 2007)

Bé, ja sóc un Form Master, i crec que puc donar una lliçó magistral sobre formularis.

Primer de tot enumero totes les tecnologies que giren al voltant dels formularis, tal com crec que s'han de fer a la Web2.0: CSS, Javascript, AJAX. Total independència del disseny (CSS), el contingut (el formulari pròpiament) i el comportament del formulari (els events fets amb Javascript), i un llenguatge de script (ASP, PHP) per processar el formulari.

'''Primer''' de tot, amb CSS s'ha de buscar un disseny atractiu, que fàcilment puguis modificar la longitud dels label i de les caixes de text i els combo. Que el formulari s'autoexpliqui (per ex, labels amb negreta per als camps obligatoris, text sombrejat allà on funcionarà el botó de cerca,...). Vaja, en definitiva, currar-se un CSS

'''Segon'''. Els events no estan definits dins un formulari, sino en un fitxer Javascript extern. De manera que independitzem el disseny del formulari del seu comportament.

Tots aquests són els events associats al formulari d'usuaris:
<pre>
nou_event2(document.forms[0].foto, "change",File1ToFile2,'arxiu2','arxiu');
nou_event1(document.forms[0].nom, "change",checkmaj,document.forms[0].nom);
nou_event1(document.forms[0].cognoms, "change",checkmaj,document.forms[0].cognoms);
nou_event1(document.forms[0].extensio, "change",EsNumero,document.forms[0].extensio);
nou_event1(document.forms[0].extensio, "keyup",EsNumero,document.forms[0].extensio);
nou_event2(document.forms[0].nom, "keydown",textCounter,document.forms[0].nom,50);
nou_event2(document.forms[0].cognoms, "keydown",textCounter,document.forms[0].cognoms,50);
nou_event2(document.forms[0].login, "keydown",textCounter,document.forms[0].login,20);
nou_event2(document.forms[0].pwd1, "keydown",textCounter,document.forms[0].pwd1,20);
nou_event2(document.forms[0].mail, "keydown",textCounter,document.forms[0].mail,50);
nou_event1(document.forms[0].data_naix, "change",EsDataDDMMYYYY,document.forms[0].data_naix);
nou_event1(document.forms[0].foto2, "keyup",NoToquis,document.forms[0].foto2);
nou_event2(document.forms[0].mail, "change",EsMail,document.forms[0].mail);
nou_event3(document.getElementById("infopng"), "mouseover",displayInfoFor,'infopng','info',250);
nou_event2(document.getElementById("infopng"), "mouseout",hideInfoFor,'infopng','info');
</pre>
i la funció que cridem:
<pre>
function nou_event2(element, event, funcio, param1,param2) {
if (element.addEventListener) {
element.addEventListener(event, function(){funcio(param1,param2)}, false);
}
else
{
element.attachEvent("on"+event, function(){funcio(param1,param2)});
}
}
</pre>

Elegant, no?

'''Tercer'''. Biblioteca de funcions útils per al control de formularis. Per exemple:
<pre>
function textCounter(element,maxlimit){
if (element.value.length > maxlimit) // if too long...trim it!
element.value = element.value.substring(0, maxlimit);
}
</pre>

d'aquesta manera puc eliminar la propietat size en els formularis. Amb aquestes funcions i els events associats faig una primera criba d'errors o de regles que imposo sobre els formularis: no escriure en majúscules, que el nif sigui correcte, que el mail sigui correcte, que les dates, telèfons,CP,... tinguin el format correcte,...

'''Quart'''.
Segon control d'errors, amb Javascript. El formulari, quan es processa, s'envia a una funció de javascript. Aquí puc controlar que els camps obligatoris no estiguin buits, que els passwords coincideixin, i altres regles del joc que es poden definir.

Me'n descuidava. Tot això del Javascript ve perquè deleguem en el navegador client el control de tota aquesta funcionalitat, i així ens evitem enviar al servidor tota una sèrie de dades que segurament encara no són vàlides per a ser processades.
Per tant, la feina, per al client!! (qui avui en dia no té una maquinorra de 1 o 2 Gb de RAM), i el servidor web, com menys el molestis, millor.

'''Cinquè''': AJAX (paraula màgica)

Un cop s'executa el Javascript, faig una crida asincrona a un fitxer de script (ASP, PHP) que és el que processarà les dades (les ficarà a la base de dades o el que sigui...). Mentrestant, la pàgina em mostra la típica icona de 'processant...', i aquí no es mou res! totes les capes estan al seu lloc.
Per tant, importantíssim, només envio al servidor les dades que s'han de processar. Tota la resta: html, capçalera, menú desplegable, capes diverses, està ''quieto i parao''. Com ha de ser: s'ha acabat enviar al servidor tota la pàgina web completa.

Bé, ens hem quedat en el moment en què s'estan processant les dades. Això pot trigar des d'unes mil.lèssimes fins a uns minuts, depenent de la feina que estem fent amb les dades.

Quan acaba la cosa? S'ha de mirar la propietat ''readyState'' de l'objecte ''xmlHttp'', objecte que representa la crida asíncrona.
<pre>
if (xmlHttp.readyState==4) {
oDiv.innerHTML=xmlHttp.responseText;
if (vfuncio=="nou_accio" vfuncio=="esborrar_accio") {
document.getElementById("contingut2").innerHTML="";
}
}
else {
document.getElementById(vcapa).innerHTML='loading.gif';
}
</pre>
aquí veiem com quan es processa el formulari se'ns mostra la icona ajax-loader.gif, i quan ha acabat la feina el resultat ''xmlHttp.responseText'' es pinta sobre la capa en qüestió, en aquest cas ''contingut2''.

Interessant, no?

Història d'un formulari - Historial de revisió

Joan a 09:46, 16 gen 2009