HtmlStream - Il linguaggio HTML come visualizzatore di istanze nell'insegnamento di linguaggi object oriented

Abstract
Questo articolo descrive una tecnica (con relativa implementazione Java) per coadiuvare un docente di linguaggi di programmazione ad oggetti nel suo compito. La tecnica prevede la generazione automatica di rappresentazioni HTML a partire dalle istanze in memoria. Tali rappresentazioni riprendono il concetto di "cerchiogramma" (vedere testo) usato frequentemente durante le lezioni in aula. In tal modo è possibile mostrare dettagliatamente, ad esempio durante le sessioni di laboratorio, il dualismo classe/istanza, concetto frequentemente difficile da comprendere per chi si avvicina per la prima volta ad un linguaggio ad oggetti.

ripubblicato con l'autorizzazione dell'autore, dai proceedings di DIDAMATICA2000

1. Scopo

Una delle maggiori difficoltà nell'insegnamento di un linguaggio ad oggetti è far capire com'è fatto un oggetto, cosa rappresenta, come viene allocato in memoria e quali sono le sue relazioni con altri oggetti. Insegnare a programmare ad oggetti diventa ancora più difficile quando gli studenti provengono da linguaggi di programmazione procedurale, poiché spesso cercano di "mappare" erroneamente i concetti object-oriented sulla loro esperienza procedurale ^[7].

È importante far comprendere appieno il dualismo classe/istanza, ma è altresì importante far capire la struttura di un oggetto in termini di ereditarietà. Seppur possa sembrare a parole un concetto molto semplice, in pratica le cose non stanno propriamente in questi termini: la grossa difficoltà di questo concetto è dovuta al fatto che gli attributi ereditati non si vedono nel sorgente di una classe (almeno in Java). Generalmente un docente si aiuta disegnando i cosiddetti "cerchiogrammi" per rappresentare la costruzione per somme di attributi di un oggetto. In Figura 1è riportato un esempio di "cerchiogramma": la rappresentazione di un'istanza di classe C con gli attributi correttamente disposti.

È stato ampiamente dimostrato che quando si "vedono" le cose, la comprensione risulta nettamente facilitata, ecco perché abbiamo sviluppato una tecnica di visualizzazione di oggetti usando come strumento d'ausilio un semplice browser. Questo lavoro vuol mostrare come si possa usare il linguaggio HTML (HyperText Markup Language ^[10]) in maniera semplice ed economica - nel senso che non c è bisogno di comprare costosi debugger grafici, che spesso obbligano a possedere hardware potente e/o a collegare i computer in rete tra loro - per rappresentare graficamente un oggetto, usando link ipertestuali per i riferimenti ad altri oggetti e mantenendo l'informazione di derivazione degli attributi (ereditarieta`). Inoltre viene dimostrata una semplice ed estendibile realizzazione per il linguaggio Java. Il software realizzato, chiamato HtmlStream, permette al suo utilizzatore di "stampare un oggetto" passando semplicemente il suo puntatore ad un oggetto apposito (HtmlStream) che lo converte in una pagina HTML. Al giorno d'oggi, per fortuna o per sfortuna, gli studenti hanno molta familiarità con i browser web per cui HtmlStream può fare da ponte fra i linguaggi ad oggetti e la metafora del "clicca e segui il link"perciò pensiamo che così potranno cogliere i concetti basilari della programmazione a oggetti meglio di quando parliamo in aula solamente.

2. Stato dell'arte

Esistono principalmente due categorie di visualizzatori del software ^[8] che si differenziano sostanzialmente per il momento in cui vengono usati: visualizzatori di codice sorgente e di programmi in esecuzione. La prima categoria (chiamata source visualization) viene principalmente usata per avere una visione globale e sintetica di tutto il codice sorgente che concorre a realizzare il prodotto software definitivo. Con essa si producono per esempio grafi di chiamata (sia statistici che ad albero), la "composizione" di una classe, le relazioni di ereditarietà, etc. La seconda categoria (chiamata runtime visualization ) è usata a posteriori della stesura del codice ed ha lo scopo di effettuare il debugging del prodotto. Appartengono a questa categoria i cosiddetti visualizzatori pre e post-mortem: i primi visualizzano lo stato dell'esecuzione di un programma parallelamente all'esecuzione dello stesso, mentre i secondi offrono una visione del comportamento del programma solo al termine dell'esecuzione. Alcuni esempi di entrambe le categorie si possono trovare in ^[4][5] e ^[6]. Al momento, HtmlStream rientra nella categoria del runtime visualization e può essere considerato una sorta di visualizzatore sia pre che post-mortem a seconda dell'utilizzo che ne viene fatto. Infatti HtmlStream produce output durante tutta l'esecuzione di un programma. L'output prodotto viene dirottato su una pagina in formato HTML che può essere visionata sia in fase di esecuzione del programma sia al termine dello stesso.

Prima di sviluppare questo package abbiamo effettuato alcune ricerche allo scopo di trovare programmi già disponibili che effettuassero una visualizzazione a runtime dell'andamento di un programma. L'idea ovviamente non è nuova, e abbiamo riscontrato la presenza di un certo numero di prodotti atti allo scopo. L'analisi effettuata sugli stessi ha rafforzato, però, la nostra convinzione della necessità di un package ad hoc per una serie di ragioni che si possono riassumere nei seguenti punti:

• molti lavori sono orientati alla visualizzazione a runtime pre-mortem, cioè sono essenzialmente dei debugger grafici più o meno attraenti e non lasciano traccia dell'esecuzione del programma;
• alcuni lavori rientrano nella stessa categoria di HtmlStream, generando, però, un file di difficile lettura. In più non viene posta enfasi sulla struttura di un oggetto, sulle relazioni che esso ha con altri oggetti e sugli attributi ereditati;
• pochissimi prodotti sono orientati a Java: la maggior parte viene sviluppata in (e per il) linguaggio C++;
• quelli utilizzabili in Java sono per la maggior parte a pagamento e, soprattutto, sono prodotti IDE (Integrated Development Environment). Non riteniamo opportuno sommare alla difficoltà intrinseca dell'apprendimento di un linguaggio ad oggetti, anche quella derivante dall'apprendimento di un prodotto complesso come un IDE. Basti pensare com'è difficile a volte insegnare a neofiti l'utilizzo di un semplice programma di videoscrittura.

Un discorso a parte va fatto su un unico prodotto (BlueJ ^[3]) creato appositamente per scopi didattici. BlueJ però fornisce, purtroppo, solo una visione parziale sottolineando la differenza tra classe ed istanza ma non enfatizzando le relazioni tra classi. Inoltre BlueJ è un IDE completo.

3. La rappresentazione HTML ottenuta

Usando HtmlStream all'interno del proprio codice sorgente, è possibile a runtime "stampare" lo stato di un qualsiasi oggetto caratterizzato dalle relazioni che esso ha con le classi in termini di attributi diretti e attributi ereditati. La stampa viene effettuata su file in formato HTML e presenta una struttura come quella riportata nella tabella sottostante. Il tag TABLE (standard del linguaggio HTML) è risultato essere il più idoneo per rappresentare gli attribuiti di un oggetto: una riga per i nomi e un'altra riga per i rispettivi valori. Se un attributo è un oggetto di tipo classe, allora il valore è un hyperlink che porta, sempre nella stessa pagina HTML, ad un altro oggetto strutturato in maniera analoga. Quando un oggetto eredita attributi da un'altra classe ci è sembrato opportuno creare una tabella nella tabella in cui viene ripetuta la struttura tabellare sopra descritta. Questa ci è parsa la soluzione visiva che più si avvicina all'idea del cerchiogramma usata. Per esempio supponiamo di avere un'istanza della classe AnotherAgainMyClass rappresentata in forma "classica" dal cerchiogramma in Figura 2. Da tale diagramma si evince che la classe di appartenenza dell'istanza eredita dalla classe AnotherMyClass,la quale a sua volta eredita da DefaultHtmlizable. Usando HtmlStream, si avrà una rappresentazione dell'oggetto e delle sue relazioni di ereditarietà come mostrato in Figura 3. In questo esempio l'oggetto da "stampare" non possiede attributi complessi e quindi non sono presenti hyperlink all'interno del file HTML generato dall'HtmlStream. Se un oggetto è complesso (contiene cioè reference attributes ), il file HTML generato diventa a sua volta più complesso poiché contiene le TABLE di ciascun oggetto. Ciò che lega le TABLE tra di loro sono gli hyperlink come mostrato nella Figura 4. In tale figura si nota come un reference attribute è rappresentato da un hyperlink che, quando attivato, porta alla TABLE corrispondente dell'oggetto (sempre nella stessa pagina). In questo modo sulla stessa pagina è possibile avere più oggetti tutti collegati fra loro da hyperlink (come succede in memoria) e tutti facilmente raggiungibili seguendo gli hyperlink stessi.

Questa rappresentazione dovrebbe essere relativamente familiare a chi è abituato ai simboli usati in UML (Unified Modeling Language ^[9]). La differenza di fondo fra le due rappresentazioni è che UML permette di rappresentare le relazioni statiche fra classi nel diagramma delle classi, mentre HtmlStream permette di visualizzare lo stato della memoria di un oggetto e le relazioni fra gli oggetti a runtime a prescindere dai metodi che una classe pubblica. I metodi non erano per noi rilevanti visto lo scopo con cui è stato realizzato HtlmStream: permettere una visione grafica facile da comprendere della parte informativa di ciascun oggetto comprendendo anche le informazioni derivate. Infatti con HtlmStream ogni istanza si porta dietro tutti gli attributi (compresi quelli ereditati) ignorando i metodi. L'esempio di Figura 4 si riferisce a istanze create a partire dal seguente (parziale) diagramma delle classi UML accostato all'HTML corrispondente

4. Modalità di utilizzo

HtmlStream è un package che contiene classi e interfacce scritte in Java. Il punto di forza di questa soluzione implementativa consiste nel fatto che la libreria standard di Java è costituita proprio da un insieme di package. Imparare ad utilizzare i package fa parte dell'iter che gli studenti devono compiere e quindi lo sforzo loro richiesto per usare HtmlStream è praticamente nullo.

Dopo aver scaricato il package HtmlStream ^[2], le operazioni che permettono di stampare un oggetto e tutte le sue relazioni sono davvero minime:

• far si che la classe d'appartenenza dell'oggetto da "stampare" implementi l'interfaccia HtmlizableI;
• creare un'istanza dell'oggetto HtmlStream;
• passare il reference dell'oggetto da stampare ad HtmlStream attraverso il metodo grow();
• stampare l'HtmlStream, ad esempio con l'istruzione System.out.println(hStream).

Di seguito sono riportate alcune linee di codice permettono la "stampa" di un oggetto: È possibile usare HtmlStream anche per aggiungere (si potrebbe dire "accodare") altri oggettisuccessivamente: Quest'ultimo esempio motiva l'esistenza della classe HtmlStream, tale classe infatti serve per convertire/stampare più oggetti in tempi diversi. L'uso è molto simile a quello di una coda di stampa, dove la fase di accodamento è separata da quella di stampa effettiva. L'utente/discente medio dovrà sottostare ad un vincolo (non eccessivamente limitante in sede didattica): quello di poter stampare solo oggetti "stampabili". In questo ambiente di "htmlizzazione" un oggetto e`stampabile se implementa l'interfaccia HtmlizableI. Stampando a video un HtmlStream, si otterrà del testo HTML, cosicché redirigendo l'output del programma su un file si vedrà qualcosa di simile alla schermata di Figura 4.

Come già detto in precedenza, è necessario che un oggetto sia "htmlizzabile" per poter esserestampato da HtmlStream. Per rendere "htmlizzabile" un oggetto si hanno essenzialmente due possibilità:

• L'oggetto implementa direttamente l'interfaccia HtmlizableI. In questo modo è il programmatore a dover implementare i metodi public String toHtml() , public HtmlStream grow(HtmlStream hs) e public String toPureString() necessari all'interazione con l'HtmlStream. In questo modo, sebbene più complicato, almeno viene risparmiata l'ereditarietà singola di Java per altre funzionalità.
• L'oggetto eredita da DefaultHtmlizable (classe fornita insieme al package). In questo modo l'oggetto è automaticamente "htmlizzabile" senza alcuno sforzo implementativo, però non è più possibile estendere (almeno in Java) altre classi.

Un piccolo difetto di questo meccanismo è che gli oggetti già disponibili nelle librerie del JDK (Java Development Kit, l'ambiente di sviluppo/runtime standard di Sun) non sono di per sé "htmlizzabili". Per stampare in HTML un oggetto di libreria bisognerà costruire degli incaspulatori (wrapper) che li rendano HtmlizableI.

5. Commenti finali e sviluppi

HtmlStream è stato utilizzato per il momento solo in alcuni corsi aziendali, con discenti provenienti da altri linguaggi di programmazione, e il ritorno è stato positivo. Lo strumento ci ha permesso di "far toccare con mano" ai discenti l'esperienza di creare oggetti vedendo effettivamente come vengono "allocati". Non abbiamo ancora sperimentato la tecnica in un corso con discenti senza precedenti conoscenze di programmazione.

Due brevi note sulla implementazione e sulle possibili evoluzioni:

• All'inizio del lavoro era stata ipotizzata una soluzione che prevedeva l'utilizzo di XML come formato di uscita. Però abbiamo pensato di posporla fino a che non saranno disponibili strumenti di visualizzazione altrettanto evoluti di quelli per HTML.
• Il meccanismo attualmente implementato è essenzialmente statico: in qualche punto del codice viene stampato un oggetto che può successivamente essere viualizzato con un browser. Nulla vieterebbe però di mantenere delle informazioni storiche sul cambiamento di stato dell'oggetto nel tempo. Stiamo pensando ad un possibile formato per rappresentare la storicizzazione di un oggetto.

Informazioni sull'autore

Andrea Trentini, laureato in Scienze dell'Informazione, è attualmente ricercatore presso l'Università Statale di Milano. Da molti anni ricopre incarichi di docenza e ricerca accademica nell'ambito delle applicazioni di Network Programming e dei Sistemi di Gestione della Didattica. Le sue esperienze più significative si sono sviluppate nell'area della progettazione a oggetti in UML con particolare riferimento alle applicazioni Java in rete. È autore di numerose pubblicazioni in ambito informatico e ha partecipato in qualità di coordinatore e formatore a progetti promossi dal Fondo Sociale Europeo.

È possibile consultare l'elenco degli articoli scritti da Andrea Trentini.

Altri articoli sul tema Linguaggi / Java.

Risorse

1. Il package completo di HtmlStream.
   http://www.siforge.org/articles/2003/03/htmlstream/htmlstream.zip (27Kb)
2. Home page di HtmlStream.
   http://www.sal.disco.unimib.it/~atrent/Htmlstream.html
3. BlueJ, IDE (Integrated Development Environment) orientato all'insegnamento
   http://www.bluej.org/
4. Area di ricerca del professor Stasko e colleghi, articoli disponibili.
   http://www.cc.gatech.edu
5. An effective web based Software Visualization learning environment - Domingue, J. and Mulholland, P. - Journalof Visual Languages and Computing, 9 (5), 485-508 (1998)
   
6. Using Software to Teach Computer Programming: Past, Present and Future. - Mulholland, P. and Eisenstadt, M. -In J. Stasko, J. Domingue, M. Brown and B. Price (Eds.), Software Visualization: Programming as a mutli-media experience. MIT Press: Cambridge, MA (1998)
   
7. Top-Down Teaching: Object-Oriented Programming in CS1 - R. Decker, St. Hirsfield - ACM SIGCSE 1993, pp270-273
   
8. A Principled Taxonomy of Software Visualization - Blaine A. Price, Human Cognition Research Lab, The OpenUniversity, Milton Keynes MK7 6AA, Britain - Ronald M. Baecker, Dynamic Graphics Project, CSRI, University of Toronto, Toronto, ON M5S 1A1, Canada - Ian S. Small, Advanced Technology Group, Apple Computer, Inc.,Cupertino, CA 95014, USA - Journal of Visual Languages and Computing 4(3):211-266.
   
9. La documentazione su UML è scaricabile dal sito ufficiale del Object Management Group.
   http://www.omg.org
10. La documentazione su HTML è scaricabile dal sito ufficiale del W3 Consortium.
    http://www.w3.org/