SIRENE Client Device Module `e composto da numerosi file scritti in Javascript, alcuni in CSS ed uno soltanto in HTML5. Il file scritto in HTML, Sirene.html, realizza l’impostazione gerarchica degli oggetti, visibili e non, che verranno inseriti nel documento. In SIRENE ogni oggetto, ad eccezione di quelli nel file HTML, viene creato in Javascript ed inserito nel documento HTML in modalit`a dinamica, ovvero creato dinamicamente. Ogni oggetto ha un suo tipo che specifica in maniera univoca il tipo di oggetto, le modalit`a di funzionamento dell’oggetto, le modalit`a per ottenere l’accesso a quell’oggetto e le modalit`a di gestione dell’oggetto, nonch´e le modalit`a di visualizzazione di quell’oggetto. Questo tipo di dato viene me- morizzato nell’attributo custom HTML e DOM Tipo HTML. Questo `e impostato all’inizio, ovvero quando viene istanziato l’oggetto, e reso immediatamente non scrivibile, non cancellabile, non modificabile, non enumerabile e non configurabi- le. `E stato necessario creare questo attributo in quanto le pagine HTML possono essere facilmente modificabili usando alcune funzionalit`a dei web browser messe a disposizione per gli sviluppatori, oltre ad avere una corretta gestione e cono- scenza di ogni singolo elemento, creato dinamicamente, all’interno del documento HTML. Queste funzionalit`a dei web browser per sviluppatori permettono di mo- dificare facilmente il contenuto HTML di una pagina web. `E quindi possibile che qualche utente malintenzionato voglia modificare alcuni comportamenti degli og- getti in una pagina web per diffondere a tutti i client un comportamento anomalo. SIRENE non permette questa possibilit`a. Il comportamento e la gestione degli oggetti avviene attraverso una perfetta corrispondenza dell’attributo Tipo HTML e non viene permessa la modifica a livello DOM, infatti anche se un utente pro- vasse a modificare il Tipo HTML a livello HTML, al primo tentativo di utilizzo dell’oggetto SIRENE reimposta automaticamente il corretto valore dell’attributo poich´e ogni oggetto viene controllato a livello DOM e, se il valore tra il modello DOM e quello HTML differisce, allora questo viene reimpostato al valore originario producendo una reinizializzazione dell’oggetto. Questo viene realizzato attraver- so il corretto uso di due funzioni sviluppate in Javascript: “Setta Elemento” e “Prendi Tipo HTML”. Ogni volta che si crea un oggetto HTML esso viene subito passato come parametro alla funzione Setta Elemento che rende perma- nenti il suo tipo, gli eventi e le funzionalit`a ad esso associati, mentre quando si vuole ottenere il tipo di oggetto HTML, per eseguire alcune azioni sull’oggetto e sul sistema, si passa l’elemento HTML alla funzione Prendi Tipo HTML che recupera il corretto valore del tipo di oggetto e lo setta nuovamente, se necessa- rio. Inoltre, quando un utente inizia a seguire una lezione gi`a avviata, SIRENE recupera tutto l’HTML della lezione e imposta il corretto Tipo HTML per tutti gli oggetti della lezione rendendoli permanenti. Non `e dunque possibile modifica- re in alcun modo il tipo di oggetto e le loro funzionalit`a e gestioni. La funzione
Setta Elemento `e di notevole importanza in quanto risolve anche il seguente pro- blema: quando un utente si collega (o ricollega) per la prima volta ad una lezione, egli riceve tutto il codice HTML aggiornato della lezione, e riceve anche gli oggetti Canvas. Questi oggetti per essere visualizzati devono essere “disegnati”, infatti non basta semplicemente inserire l’oggetto nella pagina web ma essi devono essere necessariamente disegnati tramite l’uso di Javascript in ogni browser. La funzione Setta Elemento risolve questo problema, e nel paragrafo B.8 se ne discuter`a la soluzione.
La maggioranza degli oggetti utilizzati in SIRENE sono composti da 3 tipi di elementi visuali HTML: div, span e Canvas. Gli elementi div si prestano bene a realizzare contenitori di altri oggetti HTML, mentre gli elementi di tipo span vengono utilizzati anche come contenitori ma come elementi che possono essere accostati, nella stessa posizione orizzontale, ad altri elementi (diversamente dagli oggetti div i quali si spostano verticalmente, nel loro comportamento grafico di default, e non si accostano ad altri elementi HTML). Gli oggetti Canvas invece possono essere manipolati graficamente, realizzando grafici anche complessi, tra- mite le funzioni Javascript. Ad ogni oggetto creato in SIRENE viene impostato l’attributo id in maniera univoca. Generalmente in SIRENE, l’id `e una stringa realizzata per concatenazione da 3 elementi: il Tipo HTML, il momento di quando viene realizzata l’azione in SIRENE e il nome dell’utente che realizza l’azione di creazione, dove il momento `e il valore del tempo, in formato timestamp, del server di SIRENE di quando riceve il messaggio di creazione di un oggetto (ad esempio un nuovo progetto). In questa maniera, ogni Client Device pu`o autonomamente creare lo stesso oggetto con lo stesso id, oltre che con gli stessi attributi. Questo permette a tutti i client di SIRENE di poter eseguire le stesse azioni sugli stessi oggetti contemporaneamente e di ottenere tramite Javascript l’accesso allo stesso elemento grazie all’id.
Generalmente, negli oggetti HTML l’attributo classname definisce la classe di for- mattazione (visualizzazione) dello stile grafico dell’oggetto. In SIRENE il tipo di oggetto e il tipo di classname tipicamente coincidono. La valorizzazione dell’at- tributo classname non ha effetto negli elementi Canvas, poich´e questi vengono normalmente disegnati tramite l’uso di Javascript, che disegna l’oggetto Canvas manipolando il suo “contesto”. Questa caratteristica non dipende da SIRENE. Per utilizzare i valori delle classi CSS negli oggetti Canvas `e possibile utilizzare una funzione Javascript chiamata “getComputedStyle” che ricevere come para- metro l’elemento Canvas HTML e ottiene tutti gli attributi valorizzati nella classe CSS sotto forma di attributi di un oggetto stesso. Ad esempio
in questo caso, style `e l’oggetto che ricevere tutti gli attributi della classe del- l’elemento HTML elemento. Si potr`a accedere ai singoli attributi valorizzati come nel seguente esempio:
width = parseInt(style.width);
cos`ı facendo `e possibile modificare, parzialmente, lo stile grafico di una Canvas tramite CSS.
Il file che contiene tutta la struttura HTML della pagina web di Sirene `e Sire- ne.html.
Mentre i files Javascript che realizzano le funzionalit`a del Client Device sono 15:
• Eventi.js • Azioni.js • Rete.js • Gestione Forme.js • Forme.js • Gestione Assegnazioni.js • Gestione Codice.js • Gestione Espressioni.js • Gestione For.js • Gestione Progetto.js • Gestione Scheda Array.js • Gestione Schede.js • Gestione Terminale.js • Menu.js
• Comuni.js
• Assegnazione.CSS • Comune.CSS • Espressione.CSS • Forme.CSS • Gestione For.CSS • Menu.CSS • Progetto.CSS • Schede.CSS
Nel seguito del capitolo si discuter`a dei file, e delle loro funzioni pi`u importanti, che compongono il Client Device di SIRENE.