Il framework XAJAX Vincenzo Della Mea (PWLS 6.11, 6.12, 6.13) Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 1 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 Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 2 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. Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 3 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 Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 4 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. Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 5 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). Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 6 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)" Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 7 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 Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 8 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"); ?> Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 9 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(); ?> Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 10 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 Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 11 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> Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 12 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 Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 13 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 ’&’. Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 14 Esercizio complesso: codice fiscale •! Faremo una pagina web che calcola il codice fiscale man mano che inseriamo i dati anagrafici (nome, cognome, ecc.). Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 15 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. Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 16 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à. Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 17 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); Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 18 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’, ); ?> Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 19 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); } Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 20 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); } Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto - 21 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)];