Il framework XAJAX - Dipartimento di Matematica e...

Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 1

Il framework XAJAX

Vincenzo Della Mea

(PWLS 6.11, 6.12, 6.13)


Sommario •  XAJAX

– Principi e API

•  Un esempio semplice: – rivisitazione del cambio di colori dello sfondo

della pagina corrente.

•  Un esempio complesso: – generazione “interattiva” del codice fiscale


XAJAX

•  http://xajaxproject.org/ •  Framework in PHP per lo sviluppo di applicazioni

AJAX: –  generazione automatica delle funzioni Javascript che

ruotano attorno a XmlHttpRequest; –  codice PHP per l’accesso al DOM della pagina

(tradotto ovviamente in Javascript); –  non è richiesta nessuna conoscenza di Javascript.


XAJAX: Oggetti principali

•  xajax_core: –  xajax

–  xajaxRequest –  xajaxResponse

–  xajaxControl –  xajaxPlugin

•  xajax_js: –  DOM, events, CSS, …

•  xajax_controls: validatori (X)HTML, … •  xajax_plugins: GoogleMaps, HTML table


Tipico pattern di utilizzo

•  Solitamente si creano tre file PHP: – un file di configurazione, – un file per la componente lato server, – un file per la componente lato client.

•  Il file di configurazione viene incluso ed utilizzato dagli altri due.


XAJAX: cosa fare •  Configurazione:

–  si include la libreria di classi xajax per mezzo del file xajax.inc.php; –  si dichiara ed istanzia un oggetto xajax; –  si registrano i nomi delle funzioni fornite dal server e chiamate asincronamente

dal client. •  Server:

–  si include la configurazione; –  si definiscono le funzioni registrate in modo che ritornino valori o modifichino

il DOM; –  si elaborano le richieste con apposito metodo processRequest.

•  Client: –  si include la configurazione; –  si genera il codice Javascript ($xajax->printJavascript();); –  si mettono le chiamate alle funzioni registrate (prefisse da xajax_) nei soliti

attributi (corrispondenti agli eventi del DOM).


Un esercizio semplice

•  Rifacciamo l’esercizio dei colori visto introducendo la tecnologia AJAX: – svilupperemo una pagina web con tre campi di

input in cui inseriremo tre numeri per i valori di R,G,B con cui impostare il colore di sfondo della pagina, "

–  Il tutto “asincronamente” (senza ricaricare)"


Preparazione •  Dentro public_html creare una

cartella ajax, e dentro di essa xajax •  Scaricare xajax (standard) dentro xajax e decomprimerla: – wget

http://xajaxproject.org/media/xajax/0.5_final/xajax_0.5_standard.zip

•  Voilà! •  Metteremo i nostri due esercizi dentro

la cartella ajax, includendo il necessario dalla cartella xajax


Configurazione: colori_config.php

<?php //includiamo la classe base require_once ("xajax/xajax_core/xajax.inc.php"); //creiamo un oggetto ajax corrispondente al server $xajax = new xajax("coloriserver2.php"); //tra le variabili di configurazione: dov’è il codice

JS della libreria $xajax->configure('javascript URI','xajax/'); // registro l’unica funzione che servirò $xajax->register(XAJAX_FUNCTION,"ImpostaSfondo"); ?>


Server: coloriserver2.php <? function ImpostaSfondo($r, $g, $b) { $risposta = new xajaxResponse(); $risposta-> assign("descrizione", "innerHTML", "Esadecimale: " . dechex($r). dechex($g).dechex($b));

$risposta->assign("corpo","style.background","rgb($r,$g,$b)");

return $risposta; } require("colori_config.php"); $xajax->processRequest(); ?>


Server: commenti

•  Nella funzione servita creo una risposta, i cui metodi vanno a modificare il DOM: – metodo assign(dove, cosa, valore)

•  Le funzioni registrate sono quelle che intendo chiamare da Javascript, negli attributi!

•  Includo la configurazione. •  Servo le richieste con ProcessRequest


Client: colori2.php <?php require("colori_config.php"); ?> <html><head><title>Colori RGB</title> <?php $xajax->printJavascript(); ?> </head> <body id="corpo"> R: <input type="text" name="R" id="r" value="255" size="3" />

G: <input type="text" name="G" id="g" value="255" size="3" />

B: <input type="text" name="B" id="b" value="255" size="3" />

<input type="button" value="Cambia sfondo" onclick="xajax_ImpostaSfondo(document.getElementById('r').value,document.getElementById('g').value,document.getElementById('b').value);" />

<p id="descrizione"> - </p> </body>

</html>


Client: commenti

•  Deve essere un file PHP perché devo includere del codice Javascript generato automaticamente: – <?php $xajax->printJavascript(); ?>

•  Le funzioni registrate possono essere chiamate ove usuale, con il nome xajax_nomedefinitoinphp


Nota

•  XAJAX 0.5 non è PHP 5 strict! •  Nel caso in cui compaiano i seguenti messaggi:

– Deprecated: Assigning the return value of new by reference is deprecated in … on line 360

– Deprecated: Assigning the return value of new by reference is deprecated in … on line 1305

•  occorre editare il file xajax_core/xajax.inc.php nelle linee indicate (360 e 1305), eliminando il carattere ’&’.


Esercizio complesso: codice fiscale •  Faremo una pagina web che calcola il

codice fiscale man mano che inseriamo i dati anagrafici (nome, cognome, ecc.).


Codice fiscale

•  Cognome: 3 caratteri: prime tre consonanti, se non ce ne sono a sufficienza anche le vocali, se non ce ne sono a sufficienza X.

•  Nome: 3 caratteri: prima terza e quarta consonante se ci sono, se no prime tre, se no come sopra.

•  Sesso e data di nascita: 2 cifre anno, una lettera per il mese (secondo una tabella apposita), 2 cifre per il giorno (+40 per le donne).

•  Comune: 4 caratteri presi da un apposito elenco; la provincia serve per discriminare tra comuni con lo stesso nome.

•  Infine, codice di controllo tipo digest, calcolato su caratteri pari e dispari del codice secondo due diverse tabelle di corrispondenza, diviso 26 -> il resto della divisione è un carattere dell’alfabeto.


Schema dell’applicazione

•  Il server fornirà funzioni separate per ogni parte indipendente del codice fiscale.

•  Il client chiamerà le funzioni in uscita o modifica del contenuto del controllo in cui stiamo scrivendo.

•  I dati specifici per il calcolo del codice fiscale sono ospitati in vettori per comodità.


vettori_codice_fiscale.php��(da /home/vdm/public_html/codicefiscale/…)

<?php //consonanti $consonanti=array

("B","C","D","F","G","H","J","K","L","M","N","P","Q","R","S","T","V","W","X","Y","Z");

//caratteri da non considerare $altricaratteri=array(" ","'","`","\t","!"); //codici mesi $mese= array( "1" => "A”, "2" => "B”, "3" => "C”, "4" => "D”, "5" => "E”, "6" => "H”, "7" => "L",

"8" => "M”, "9" => "P”, "10" => "R”, "11" => "S”, "12" => "T”); //codifica dei caratteri per il calcolo del carattere di controllo $codicedispari=array("0" =>1, "1" =>0,"2" =>5,"3" =>7,…,"Y" =>24,"Z"

=>23); $codicepari=array("0" =>0, "1" =>1,"2" =>2,"3" =>3,…"Y" =>24,"Z" =>25);


codici_comuni.php

<?php //codici dei Comuni e degli Stati esteri $codicecomune= array(

'PD:ABANO BAGNI'=>'A001',

'PD:ABANO TERME'=>'A001',

'CO:ABBADIA'=>'A002',

'TO:ABBADIA'=>'A003', 'TO:ABBADIA ALPINA'=>'A003',

'MI:ABBADIA CERRETO'=>'A004',

…

'TN:LEDRO'=>'M313’,

); ?>


funzioni_codice_fiscale.php/1 <?php require("vettori_codice_fiscale.php"); require("codici_comuni.php"); function cognome($c) { global $consonanti; global $altricaratteri; $c=strtoupper($c); $vettore= str_split($c); $code=""; foreach($vettore as $l) if(in_array($l,$consonanti)) $code .= $l; if(strlen($code)>2) return substr($code,0,3); foreach($vettore as $l)

if(!in_array($l,$consonanti) AND !in_array($l, $altricaratteri)) $code .= $l; if(strlen($code)>2) return substr($code,0,3); else $code .= "XXX";

return substr($code,0,3); }


funzioni_codice_fiscale.php/2 function nome($c) { global $consonanti; global $altricaratteri; $c=strtoupper($c); $vettore= str_split($c); $code=""; foreach($vettore as $l) if(in_array($l,$consonanti)) $code .= $l; if(strlen($code)>3) return substr($code,0,1) . substr

($code,2,2); if(strlen($code)>2) return substr($code,0,3); foreach($vettore as $l)

if(!in_array($l,$consonanti) AND !in_array($l, $altricaratteri)) $code .= $l; if(strlen($code)>2) return substr($code,0,3); else $code .= "XXX";

return substr($code,0,3); }


funzioni_codice_fiscale.php/3

//data di nascita: 01-12-2010, sesso: M o F function datanascita($d, $s) { global $mese; $code=substr($d, 8,2) . $mese[(integer)substr($d,3,2)];

$giorno = substr($d,0,2); if($s=="F") $giorno=$giorno + 40; $code.=$giorno; return $code; }


funzioni_codice_fiscale.php/4

function comune($c, $p) { global $codicecomune; $c=strtoupper($c); $p=strtoupper($p); $code=@$codicecomune[$p.":".$c]; if($code) return $code; else return "XXXX"; }


funzioni_codice_fiscale.php/5 function dispari($n) { return ($n % 2) == 1;

} function controllo ($cf) { global $codicepari, $codicedispari; $cf=strtoupper($cf); $controllo=0; for($i=0;$i<strlen($cf);$i++) { $carattere=substr($cf,$i,1); if(dispari($i+1)) $controllo=$controllo +

$codicedispari[$carattere]; else $controllo=$controllo + $codicepari[$carattere]; }

return chr( ($controllo % 26) + ord("A")); }


funzioni_codice_fiscale.php/ultima function CalcolaCodice($cognome, $nome,$nascita, $sesso, $comune, $provincia) {

$codice= cognome($cognome). nome($nome). datanascita($nascita,$sesso). comune($comune,$provincia);

return $codice . controllo($codice); }


Funzioni: commenti

•  Implementazione non efficientissima, ma compatta.

• str_split: trasforma una stringa in un vettore (di caratteri).

• (integer)$VAL : casting del tipo (stringa-> intero).

• strtoupper($s) : tutto in maiuscolo (per i confronti).


cf_config.php <?php require_once ("xajax/xajax_core/xajax.inc.php"); $xajax = new xajax("cf_ajax_server.php"); $xajax->configure('javascript URI','xajax/'); //$xajax->configure('debug', true); $xajax->register(XAJAX_FUNCTION,"CalcolaCognome"); $xajax->register(XAJAX_FUNCTION,"CalcolaNome"); $xajax->register(XAJAX_FUNCTION,"CalcolaData"); $xajax->register(XAJAX_FUNCTION,"CalcolaComune"); $xajax->register(XAJAX_FUNCTION,"CalcolaControllo"); ?>

Utile per il debug durante lo sviluppo


Client: codicefiscale.php/1

<?php require("cf_config.php"); ?> <html> <head><title>Calcolo codice fiscale con AJAX</title> <?php $xajax->printJavascript(); ?> </head> <body> <h1>Calcolo codice fiscale con AJAX</h1>

<form id="codicefiscale" onChange="xajax_CalcolaControllo(xajax.getFormValues('codicefiscale'));" >


Client: codicefiscale.php/2 Cognome: <input type="text" name="cognome" id="cognome" size="30"

onBlur="xajax_CalcolaCognome(this.value);" /> Nome: <input type="text" name="nome" id="nome" size="30"

onBlur="xajax_CalcolaNome(this.value);" /> <br /> Data di nascita (GG-MM-AAAA): <input type="text" name="data" id="data" size="10"

onBlur="xajax_CalcolaData(this.value, document.getElementById('sesso').value);" />

Sesso: <select name="sesso" id="sesso" onChange= "xajax_CalcolaData(document.getElementById('data').value,

this.value);"> <option selected="selected" value="F">F</option> <option value="M">M</option>

</select><br />


Client: codicefiscale.php/3 Comune: <input type="text" name="comune" id="comune"

size="20" onBlur="xajax_CalcolaComune(document.getElementById('comune').value, document.getElementById('provincia').value);" />

Provincia: <input type="text" name="provincia" id="provincia" size="20" onBlur="xajax_CalcolaComune(document.getElementById('comune').value, document.getElementById('provincia').value);”

</form> <p><strong>Codice fiscale:</strong>

<span id="cf1">---</span> <span id="cf2">---</span> <span id="cf3">-----</span> <span id="cf4">----</span> <span id="cf5">-</span> </p>

</body> </html>


Commenti

•  Il carattere di controllo viene calcolato ogni volta che nel form c’è una modifica: –  anche se di fatto lo è solo se tutti i valori sono non

nulli.

•  I singoli spezzoni di codice sono invece legati ai tag <input> con onblur o onchange.

•  È possibile verificare il funzionamento già fin dall’inserimento della prima funzione nel server, passo passo.


cf_ajax_server.php/1 <?php require("funzioni_codice_fiscale.php"); require("cf_config.php"); function CalcolaCognome($c) { $risposta = new xajaxResponse(); if($c!="") $risposta->assign("cf1", "innerHTML", cognome($c)); else $risposta->assign("cf1", "innerHTML", "---"); return $risposta;

} function CalcolaNome($c) { $risposta = new xajaxResponse(); if($c!="") $risposta->assign("cf2", "innerHTML", nome($c)); else $risposta->assign("cf2", "innerHTML", "---"); return $risposta;

}


cf_ajax_server.php/2 function CalcolaData($d,$s) { $risposta = new xajaxResponse(); if (($d!="") AND ($s!=""))

$risposta->assign("cf3", "innerHTML", datanascita($d,$s));

else $risposta->assign("cf3", "innerHTML", "-----"); return $risposta;

} function CalcolaComune($c,$p) { $risposta = new xajaxResponse(); if(($c!="") AND ($p!="")) $risposta->assign("cf4", "innerHTML", comune($c,$p));

else $risposta->assign("cf4", "innerHTML", "----"); return $risposta;

}


cf_ajax_server.php/3 function CalcolaControllo($form) { $risposta = new xajaxResponse(); extract($form); if(($cognome!="") && ($nome!="") &&($data!="") && ($sesso!="") && ($comune!="") && ($provincia!=""))

$risposta->assign("cf5", "innerHTML", controllo(cognome($cognome). nome($nome). datanascita($data,$sesso). comune($comune,$provincia)));

else $risposta->assign("cf5", "innerHTML", "-"); return $risposta;

} $xajax->processRequest(); ?>


Server: commenti

•  Tutte le funzioni verificano che gli argomenti siano non nulli prima di calcolare lo spezzone di codice: – se gli argomenti sono nulli il codice viene

impostato a ‘----’

– e anche se il comune/provincia non esiste.

•  Tutte le funzioni impostano con il metodo assign la porzione di HTML che le riguarda.


Cosa ci abbiamo guadagnato? •  Non abbiamo scritto codice Javascript. •  Non ci siamo dovuti inventare un protocollo per

chiamare le diverse funzioni –  avremmo dovuto chiamare url diversi, oppure passare

un parametro GET con il nome della funzione + altri per i parametri, da verificare poi nel numero e contenuto in modo diverso per ogni funzione.

•  Abbiamo incorporato nel server delle funzioni che sono usabili anche al di fuori.

Il framework XAJAX - Dipartimento di Matematica e...

Documents

Transcript of Il framework XAJAX - Dipartimento di Matematica e...