Per consentire l'invio di dati al server da parte dell'utente, l'HTML prevede le classiche form. Tuttavia, nel corso degli anni, le esigenze di chi sviluppa applicazioni web e che pertanto fa un uso massiccio di form HTML sono aumentate sempre più. Per un utilizzo avanzato, le classiche form rivelano alcuni limiti spesso aggirati dagli sviluppatori tramite JavaScript e con tecniche server-side. Questo è il motivo che ha indotto il W3C a definire il linguaggio XForms, un linguaggio basato su XML che ha lo scopo di definire form evolute.
HTML Form e XForms
Tra le principali limitazioni delle form classiche ricordiamo l'assenza di un controllo della validità dei dati in input, affidato in genere a JavaScript, l'invio dei dati in maniera non strutturata, la stretta connessione tra dati e loro rappresentazione.
Le XForms si basano su XML sia per definire la loro struttura sia per definire i dati da inviare al server. Esse consentono una separazione tra rappresentazione dei dati e loro presentazione, pur utilizzando XML per entrambi. La rappresentazione di form XForms è indipendente dal dispositivo di rendering: esse possono essere utilizzate per rappresentare le classiche form Web, ma possono essere utilizzate per rappresentare form per applicazioni desktop, per applicazioni WML o per realizzare menu vocali, ad esempio, tramite VoiceXML.
Inoltre, le XForms hanno meccanismi intrinseci di validazione dei dati, la possibilità di salvare i dati come file XML e di recuparare dati da un file XML, di inviare dati ad un'altra XForm, di effettuare calcoli sui dati, etc.
L'approccio XForms
Come abbiamo detto, XForms consente di separare i dati dalla loro presentazione. Questa separazione è derivata dal fatto che una XForm è costituita da due parti:
- XForm Model
- XForm User Interface
L'XForm Model definisce la struttura dei dati e come questi vanno comunicati al server, mentre l'XForm User Interface definisce i controlli di input, ossia come l'utente può interagire con il sistema per inserire i dati.
Gli esempi che faremo nel seguito, fanno riferimento all'utilizzo di XForms all'interno di pagine XHTML. Va sottolineato, però, che attualmente XForms non è supportato nativamente dai browser, anche se esistono alcuni plugin che colmano questa lacuna. Con molta probabilità XForms verrà incluso nel futuro XHTML 2.0.
Per includere XForms all'interno di una pagina XHTML è necessario dichiarare il relativo namespace in corrispondenza del tag <html> della pagina, come nel seguente esempio.
Listato 1. Definizione del namespace per un documento xforms
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xf="http://www.w3.org/2002/xforms">
Da non dimenticare, comunque, che XForms può essere utilizzato anche in contesti estranei al Web.
XForms Model
Abbiamo detto che l'XForms Model definisce i dati e la loro modalità di gestione. In una pagina XHTML questa parte di una XForms viene definita all'interno della sezione <head>. Il seguente esempio mostra la definizione dei dati (nome e cognome di un utente) che verranno inviati al server tramite il metodo HTTP POST:
Listato 2. Definizione dei dati da inviare
<head>
<xf:model>
<xf:instance>
<utente>
<nome/>
<cognome/>
</utente>
</xf:instance>
<xf:submission id="invioDati" method="post" action="elabora.asp"/>
</xf:model>
</head>
Il tag <model> racchiude due elementi: l'elemento <instance>, che specifica una struttura XML che contiene i dati da inviare al server, e l'elemento <submission> che indica il fatto che i dati verranno inviati alla pagina elabora.asp tramite il metodo POST.
XForms User Interface
La parte di XForms che si occupa di gestire l'interazione con l'utente viene inserita all'interno del corpo di una pagina XHTML, senza bisogno di specificare alcun elemento <form>, come avveniva invece per le form classiche. Il seguente è un esempio di XForm User Interface relativo al model appena definito:
Listato 3. Definizione di un'interfaccia XForms
<body>
<xf:input ref="nome"><xf:label>Nome</xf:label></xf:input>
<br/>
<xf:input ref="cognome"><xf:label>Cognome</xf:label></xf:input>
<br/>
<xf:submit submission="invioDati"><xf:label>Invia</xf:label></xf:submit>
</body>
Notiamo tre elementi principali: due <input>, che corrispondono a due caselle di testo per l'inserimento dei valori per nome e cognome, ed un <submit> che rappresenta un pulsante per l'invio dei dati al server.
Ciascun elemento <input> è legato ad un elemento dell'instance definito nel "model" tramite un'espressione XPath assegnata all'attributo ref. Inoltre, ciascun elemento della User Interface contiene al suo interno una <label> che indica, appunto, l'etichetta descrittiva associata al controllo. Questo elemento è obbligatorio.
L'elemento <submit> è legato alla submission definita nell'instance tramite l'omonimo attributo.
Invio dei dati al server
Il risultato dell'invio dei dati sarà un documento XML che rispetta la struttura definita all'interno dell'elemento <instance>. Ad esempio, se l'utente inserisce i valori Mario per il campo nome e Rossi per il cognome, alla pagina elabora.asp verrà inviato il seguente codice XML:
Documento risultante
<utente>
<nome>Mario</nome>
<cognome>Rossi</cognome>
</utente>
Come abbiamo avuto modo di vedere parlando dell'XForm Model, il metodo di invio dei dati al server viene definito tramite l'elemento <submission>. Nell'esempio avevamo riportato il metodo post, che invia i dati sotto forma di documento XML.
Esistono metodi alternativi, alcuni analoghi a quelli delle form HTML, qualcuno nuovo ed interessante. In particolare:
- il metodo get corrisponde all'omonimo metodo delle form HTML
- il metodo form-data-post corrisponde al metodo post delle form HTML con enctype multipart/form-data (la classica codifica pe l'invio di file)
- il metodo put consente di salvare i dati in un file
Inoltre, a differenza delle form HTML, che prevedono l'invio dei dati ad un solo server e con un singolo metodo, le XForms consentono di definire diversi pulsanti di invio ciascuno collegato ad una differente submission e quindi dalla stessa form è possibile inviare dati a server diversi con metodi diversi.
Abbiamo cominciato a prendere confidenza con il modello di gestione dei dati offerto da XForms. Quello che abbiamo visto è, comunque, soltanto un piccolo assaggio di quanto offre questa tecnologia.
Nella prima parte abbiamo introdotto le XForms ed abbiamo avuto modo di apprezzare la loro flessibilità e la potenza rispetto alle classiche form HTML. In realtà le caratteristiche viste sono solo un piccolo assaggio delle potenzialità di questa tecnologia, analizzeremo ora alcune delle funzionalità avanzate di XForms.
Associazioni avanzate
Abbiamo visto che tramite l'attributo ref ed un'espressione XPath è possibile collegare i controlli della XForm User Interface ad un elemento dell'instance definito nell'XForm Model.
XForms prevede un meccanismo alternativo e più flessibile per associare un controllo ad un elemento dell'XForm Model: il bind.
Questo meccanismo è basato sulla presenza di un elemento <bind> nell'instance, come mostra il seguente esempio:
Listato 1. Esempio di bind nell'interfaccia
<head>
<xf:model>
<xf:instance>
<utente>
<nome/>
<cognome/>
</utente>
</xf:instance>
<xf:bind nodeset="/utente/nome" id="nome"/>
<xf:bind nodeset="/utente/cognome" id="cognome"/>
<xf:submission id="invioDati" method="post" action="elabora.asp"/>
</xf:model>
</head>
Il bind consente di definire un'espressione XPath corrispondente all'attributo nodeset ed assegnarle un identificatore. L'identificatore sarà utilizzato come valore dell'attributo bind dei controlli della XForms User Interface:
Listato 2. Definizione del campo nel form
<xf:input bind="nome"><xf:label>Nome</xf:label></xf:input>
Rispetto all'uso dell'attributo ref, il meccanismo del bind consente di rendere indipendente l'XForm User Interface dall'instance dell'XForm Model. Infatti, se cambia la struttura dell'instance dei dati, dobbiamo soltanto modificare il relativo elemento <bind> senza intervenire sui controlli.
Oltre a questo non indifferente vantaggio, il meccanismo del bind consente di definire alcune interessanti proprietà sui dati e sui controlli, come vedremo nel seguito dell'articolo.
Controlli XForms
Uno dei concetti fondamentali di XForms è l'indipendenza della definizione dell'interfaccia utente dal loro rendering. In altre parole, un controllo XForm non ha una rappresentazione predefinita ma può essere considerato un meccanismo di interazione tra l'utente ed il sistema. Ad esempio, anche se l'elemento <input> è generalmente rappresentato come la classica casella di testo, essa può avere una rappresentazione diversa quando l'interfaccia utente non è un'interfaccia grafica, ad esempio quando essa è un'interfaccia vocale.
In sostanza, il significato di un controllo XForm è costituito dalla sua funzione interattiva. In questi termini l'elemento <input> rappresenta un meccanismo per specificare un valore da inviare al server, indipendentemente dalla modalità con cui esso verrà rappresentato nell'ambito della specifica interfaccia utente.
La seguente tabella riassume i principali controlli previsti da XForms:
|
<secret bind="pw"> |
Controllo per l'inserimento nascosto di un valore. Può essere considerato l'analogo del controllo HTML <input type="password" />. |
|
<upload bind="file"> |
Controllo per l'upload di un file. Analogo a <input type="file"> |
|
<textarea bind="testo"> |
Controllo per l'inserimento di testo su più righe. |
|
<select1 bind="colore"> |
Controllo per la selezione di un solo elemento da una lista. |
|
<select bind="colore"> |
Controllo per la selezione di uno o più elementi da una lista. |
|
<range bind="volume" start="1" end="10" step="1"> |
Controllo per la selezione di un valore da un intervallo predefinito. |
|
<output bind="nome"> |
Controllo per la sola visualizzazione di un valore. |
Qualche parola in più a proposito dei controlli <select1> e <select>.
Il controllo <select1> può essere rappresentato in una interfaccia grafica come un gruppo di radio button (<input type="radio">) o come una combo box (<select>). La scelta di come visualizzarlo è demandata al sistema di rendering.
Per quanto riguarda il controllo <select>, esso può essere rappresentato sia come un gruppo di checkbox, che come listbox o menu. È possibile fornire un'indicazione su come rappresentare il controllo tramite l'attributo appearance che può assumere i valori full, compact e minimal.
Validazione dei dati
Un'altra caratteristica utilissima delle XForms è la possibilità di verificare il tipo di dato inserito dall'utente nei controlli di input. Dal momento che XForms sfrutta i tipi di dato definiti da XML Schema, è necessario specificare il relativo namespace, come nell'esempio seguente:
Specificare il namespace
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xf="http://www.w3.org/2002/xforms" xmlns:xs="http://www.w3.org/2001/XMLSchema">
A questo punto possiamo indicare il tipo di dato per ciascun bind dell'instance:
Listato 3. Defnire i tipi di dato per ogni bind
<xf:bind nodeset="/utente/nome" id="nome" type="xs:string"/>
<xf:bind nodeset="/utente/eta" id="eta" type="xs:integer"/>
XForms properties
Altra caratteristica interessante è costituita dalle proprietà, cioè un insieme di attributi dell'elemento <bind> che consentono di impostare vincoli sui controlli. Ad esempio, è possibile impostare l'inserimento obbligatorio di un valore prima di inviare i dati al server tramite l'attributo required, come mostrato nel seguente esempio:
Listato 4. Controllo di "Campo obbligatorio"
<xf:bind nodeset="/utente/nome" id="nome" required="true()"/>
Oppure possiamo impostare un'espressione booleana come vincolo da soddisfare perchè il valore inserito sia considerato valido:
Listato 5. Controllo condizionale su un campo
<xf:bind nodeset="/utente/eta" id="eta" constraint=". > 18"/>
Nell'esempio precedente viene richiesto che il valore dell'elemento eta sia maggiore di 18.
Altra possibilità consiste nell'assegnamento di un valore calcolato a partire da altri valori. Questo risultato può essere ottenuto tramite la proprietà calculate:
Listato 6. Campo risultato di un calcolo
<xf:bind nodeset="/area" id="area" calculate="../lato * ../lato"/>
Sono previste numerose altre proprietà per diversi tipi di vincoli: sola lettura, disabilitazione, ecc.
XForms in pratica e conclusioni
In questa breve panoramica abbiamo avuto modo di vedere le caratteristiche fondamentali di XForms. Anche se le specifiche prevedono altre interessanti funzionalità, come la gestione di eventi, azioni predefinite, funzionamento in modalità wizard, per citarne alcune, già quelle viste in questi due articoli mostrano come la tecnologia XForms sia molto più potente delle classiche form HTML.
Tuttavia la tecnologia XForms non è attualmente supportata dai browser Web, anche se esistono diversi tools che consentono di effettuare qualche esperimento. Tra questi citiamo:
- OpenOffice, che consente di creare documenti di tipo XForms,
- XFormation, un editor visuale per creare e testare XForms,
- FormFaces, un interprete XForms scritto in JavaScript ed eseguibile direttamente sul browser.
Va ancora una volta sottolineato che XForms va al di là della creazione di form per il Web. Questa tecnologia può essere utilizzata per la compilazione interattiva di documenti XML o per la definizione standard di interfacce utente che possono dare origine ad interfacce Windows, Web, WML, VoiceXML, ecc.
Viste le potenzialità è sicuramente è una tecnologia da tenere d'occhio, anche perchè con molta probabilità XForms verrà inclusa nelle specifiche di XHTML 2.0.
