Pagine HTML editabili secondo Microsoft

Tale comportamento non viene realizzato attraverso l’utilizzo di script o codice DHTML, ma semplicemente specializzando alcuni oggetti, in particolare il <DIV> e lo <SPAN>, per fare in modo che rispondano all’intervento dell’utente comportandosi in maniera del tutto simile rispetto ad un editor di testi, ad esempio Wordpad oppure Microsoft Word.

Un oggetto di questo tipo permette di ottenere formattazioni complesse, infatti il suo contenuto può essere modificato in termini di:

– formattazione del testo

• tipo carattere (“Times Roman”,”Arial”, ecc.)
• dimensione
• stile e decoration (grassetto, corsivo, sottolineato, barrato, apice, pedice)
• colore
• colore di sfondo

– formattazione di paragrafo

• gestione rientri
• allineamento
• direzione del testo
• testo in verticale

– elenchi (con qualsiasi numero di livelli)

• elenco numerato
• elenco puntato

– gestione delle selezioni

• selezione testo con il mouse
• selezione parola con doppio click
• selezione paragrafo con triplo click
• selezione da tastiera

– editing di base per HTML

• inserimento controlli
• inserimento Iframes
• inserimento immagini
• inserimento Marquees
• inserimento linee orizzontali
• inserimento link

– rilevazione automatica di link e bookmark
– livelli di undo / redo illimitati
– inserimento del testo in modalità insert o overwrite
– supporto a tutti gli acceleratori di tastiera standard
– supporto alle operazioni di cut/copy/paste con mantenimento della formattazione
– mantenimento della formattazione nelle righe vuote
– posizionamento assoluto degli oggetti
– gestione completa del ridimensionamento degli oggetti
– selezioni multiple
– supporto all’operazione di paste da altre applicazioni (ad es. è possibile inserire una tabella creata in Microsoft Word).

Per rendere editabile un oggetto è sufficiente utilizzare la proprietà contentEditable. E’ possibile inoltre verificare se un oggetto è settato come editabile interrogando la proprietà isContentEditable.

La sintassi è la seguente:

object.contentEditable [= sEditable];

dove sEditable può avere i seguenti valori:

• inherit: valore di default, l’oggetto eredita il valore della proprietà dal suo parent
• false: l’oggetto non può essere editato
• true: l’oggetto può essere editato dall’utente

Ecco un esempio di codice che utilizza la proprietà contentEditable:

<DIV id="oDiv" contentEditable="true"> 
Questa zona della pagina è editabile
</DIV>

Ed ecco un esempio di funzione Javascript che cambia lo stato della proprietà:

<SCRIPT LANGUAGE="JavaScript">
<!--

function cambiaStatoEditable() {
if (oDiv.isContentEditable == true)
{ oDiv.contentEditable = false }
else
{ oDiv.contentEditable = true }
}

// -->
</SCRIPT>

Collegando tale funzione all’evento onclick di un oggetto (ad esempio un bottone) è possibile cambiare dinamicamente la sua proprietà.

<BUTTON onclick="cambiaStatoEditable ()">Cambia stato editing</BUTTON>

Esecuzione di comandi di editing

Per applicare le varie formattazioni al testo, si utilizza il metodo document.execCommand() passandogli come parametro una stringa corrispondente all’ID del comando.

Per far diventare grassetto la selezione attuale alla pressione di un bottone, ad esempio, si utilizza il codice seguente:

<BUTTON UNSELECTABLE TITLE="Bold"
onclick='if (oDiv.isContentEditable==true) document.execCommand("Bold");
oDiv.focus();' >
<B>Bold</B>
</BUTTON>

Utilizzi pratici: editor HTML

Per capire come possa essere utilizzato un oggetto di questo tipo è necessario aggiungere qualche elemento tecnico.

Gli oggetti <DIV> e <SPAN> possiedono la proprietà innerHtml che contiene in ogni istante il codice HTML necessario per creare il codice formattato che viene mostrato all’utente.

Se si legge questo HTML e lo si inserisce, ad esempio, all’interno di un componente <TEXTAREA>, otteniamo lo stesso risultato che otterremmo se l’utente avesse scritto codice HTML nella TEXTAREA stessa.
In pratica siamo in grado di fornire all’utente un buon editor HTML senza scrivere una riga di codice se non la gestione della proprietà contentEditable.

Ecco un esempio di codice che realizza quanto descritto.

<BUTTON UNSELECTABLE
TITLE="Genera codice HTML"
onclick="oTextarea.value=oDiv.innerHTML;oTextarea.focus();"> 

Genera HTML

</BUTTON>

Questo codice genera, nella pagina HTML, un pulsante che all’evento onclick legge la proprietà innerHtml dell’oggetto <DIV>, quello che l’utente può editare, e lo associa alla proprietà value dell’oggetto <TEXTAREA>.
In altre parole prende il codice HTML necessario a produrre un output equivalente a quello che l’utente vede nel <DIV>, e che è editabile, e lo inserisce all’interno di un oggetto <TEXTAREA>.
Se immaginiamo di avere un oggetto <TEXTAREA> nascosto, quindi, è possibile passare da una pagina all’altra il testo “arricchito” con i tag HTML utilizzando un semplice form.
La pagina di destinazione, quella nella action del form, riceve il codice html come parametro della chiamata http, quindi può gestirlo con i metodi tradizionali, ad esempio scrivendolo in un database.
Questo metodo permette quindi di fornire all’utente uno strumento di publishing per un sito scrivendo pochissimo codice, semplicemente utilizzando oggetti già compresi nell’architettura Microsoft.
L’unico vincolo è l’utilizzo, da parte dell’utente, del browser Explorer 5.5 o superiore.

Utilizzi pratici: salvataggio locale

Come è possibile vedere nell’esempio è possibile memorizzare il contenuto del <DIV> utilizzando il pulsante SAVE e ricaricarlo attraverso il pulsante LOAD.

Vediamo come è ottenuto questo comportamento:

Il <DIV> utilizza la proprietà class=”userData” che viene definita nella sezione <HEAD> del file attraverso il codice:

<style> .userData {behavior:url(#default#userdata);} </style>

La proprietà class=”userData” permette di cambiare il comportamento standard dell’elemento HTML cui si riferisce, in particolare viene utilizzato il behavior standard “userData” di Internet Explorer 5.5 che consente di effettuare con semplicità delle operazioni di data persistance. I dati in questo caso vengono memorizzati in un file XML accedibile anche attraverso il DOM.

Ma dove sono fisicamente memorizzati i dati? Il percorso standard per la memorizzazione è

C:\Documents and Settings\utente\Dati applicazioni\Microsoft\Internet Explorer\UserData. 

ed il file di destinazione è un semplice XML contenente, nel caso specifico, la seguente struttura:

<ROOTSTUB content="Questa zona della pagina è &lt;STRONG&gt;editabile&lt;/STRONG&gt; "/> 

come si può vedere si tratta di una conversione in XML della codifica HTML del testo inserito nell’oggetto DIV cui è stata settata la proprietà CLASS e che quindi risponde in maniera opportuna al behavior appropriato.

Conclusioni

Queste nuove funzionalità permettono di pensare in maniera diversa al comportamento delle pagine HTML statiche, che a questo punto acquisiscono potenzialità inaspettate ed aprono nuove strade nello sviluppo di applicazioni per il Web.