Vai ai contenuti

LAU



Home > realizzare > accessibilità: linguaggi di programmazione > Riconfigurazione dinamica del layout (parte I)


Riconfigurazione dinamica del layout (parte I)

Una soluzione "non invasiva" per un layout a due colonne riconfigurabile dinamicamente.

a cura di Mario Picarelli e Paolo Chiaramello | 19 aprile 2006


L'arcinoto e onnipresente trio di pulsanti riportato in figura 1 offre possibilità spesso trascurate nella progettazione di interfacce web.

Questa immagine raffigura le icone di Windows per ripristinare, ingrandire e chiudere una finestraFig. 1
I pulsanti di MS Word: riduci a icona / ridimensiona / chiudi

Queste tre funzionalità possono per esempio agevolare la gestione multipla di finestre o pannelli.

Stiamo leggendo un testo su PC, supponiamo, e vogliamo prendere qualche occasionale appunto digitale: per comodità, potremmo configurare l'area di lavoro in stile simil-frame, affiancando testo e appunti in modo da scorrere i contenuti da una parte e prendere appunti dall'altra.

Una simile attività di lettura/scrittura ha un corrispettivo analogico altrettanto comodo: spesso si accostano fisicamente due documenti per compararli e per spostarsi rapidamente da uno all'altro quando si confrontano copia e originale nel corso di una trascrizione o di una traduzione, per esempio.

Così come è possibile sfogliare le pagine di un libro mentre si prendono appunti sulla facciata di un foglio, è possibile scorrere un documento digitale all'interno di una finestra mentre l'altra rimane fissa.

Ma c'è una differenza: alle prese con supporti cartacei ci è facile abbandonare block notes e penna e immergerci completamente nella lettura, con un PC invece la compresenza di due documenti entro i confini angusti del monitor impone un ridimensionamento tale per cui la finestra degli appunti, superflua e ingombrante se ci si vuole dedicare esclusivamente alla lettura, sottrae inevitabilmente spazio all'altra. Con Microsoft Word, si sa, sarebbe sufficiente ridurre al minimo il frame degli appunti, espandendo al massimo quello dell'articolo.

C'è modo di riprodurre questa funzionalità con un uso combinato di XHTML, CSS e JavaScript, realizzando un layout a pannelli (nel presente articolo ci siamo limitati a una soluzione a soli due pannelli), ciascuno dei quali dotato di tre possibili stati: normale, espanso, ridotto a icona.

Il passaggio progressivo da uno stato all'altro è gestito dai pulsanti raffigurati qui sotto, che mi auguro veicolino in maniera abbastanza intuitiva il concetto di espansione/riduzione:

Questa immagine raffigura i pulsanti per l'espansione e la riduzione progressiva dei pannelliFig. 2
Pulsanti per l'espansione e la riduzione progressiva dei pannelli

L'espansione di un pannello implica la riduzione dell'altro, la riduzione di un pannello implica l'espansione dell'altro: ne consegue che, utilizzando questi pulsanti, è possibile visualizzare contemporaneamente i due pannelli, ma non ci si troverà mai nella condizione di una riduzione a icona di entrambi. Per ovviare a questo inconveniente, è stato previsto un terzo pulsante, simile per aspetto al drastico "chiudi" delle finestre Windows:

Questa immagine raffigura il pulsante per la riduzione a icona di entrambi i pannelliFig. 3
Pulsante per la riduzione a icona di entrambi i pannelli

L'azione di questo pulsante consiste nel ridurre entrambi i pannelli a icona.
Il risultato è questo: layout a due colonne riconfigurabile.

La scrittura del codice osserva una rigorosa separazione di contenuto (XHTML), presentazione (CSS) e azione (JavaScript). Per le ragioni di questa scelta "non invasiva", si prenda visione degli articoli linkati a fondo pagina.

Gli stili gestiti dinamicamente sono:

.visibile{
display: block;
}
.nascosto{
display: none;
}
.espanso{
display: block; 
width: 893px!important; 
width: 900px;
}
.normale0{
display: block; 
width: 541px!important; 
width: 547px;
}
.normale1{
display: block; 
width: 343px!important; 
width: 349px;
}

Le rispettive funzioni sono:

function mostra(id) 
 {document.getElementById(id).className = "visibile";}
function nascondi(id) 
 {document.getElementById(id).className = "nascosto";}
function espandi(id) 
 {document.getElementById(id).className = "espanso";}
function normalizza(id, currentRef) 
 {document.getElementById(id).className = "normale"+currentRef;}

La funzione gestView , riportata di seguito, definisce mediante un costrutto switch/case i possibili stati (currentState) dei pannelli: espanso (case 10), compresso (case 15), entrambi i pannelli compressi (case 20), entrambi i pannelli a dimensioni normali (default).

function gestView(currentRef, currentState){
switch(currentState){
case 10: for(i=0;i<counterButtons;i++){
if(currentRef==i){
mostra("buttonHidden"+i);
mostra(“container”+i);
nascondi("buttonShow"+i);
espandi(“container”+i);
}
else {
mostra("buttonShow"+i);
nascondi("buttonHidden"+i);
nascondi("container"+i);
}
}
break;
case 15: for(i=0;i<counterButtons;i++){
if(currentRef!=i){
mostra("buttonHidden"+i);
mostra("container"+i);
nascondi("buttonShow"+i);
espandi("container"+i);
}
else {
mostra("buttonShow"+i);
nascondi("buttonHidden"+i);
nascondi("container"+i);
}
}
break;
case 20: for(i=0;i<counterButtons;i++){
nascondi("buttonHidden"+i);
mostra("buttonShow"+i);
mostra("action"+i, i);
normalizza("action"+i, i);
nascondi("container"+i);
nascondi("buttonClose");
}
break;
default: for(i=0;i<counterButtons;i++){
mostra("buttonClose");
mostra("buttonHidden"+i);
mostra("buttonShow"+i);
mostra("container"+i);
mostra("action"+i, i);
normalizza("action"+i, i);
normalizza("container"+i, i);
}
break;
}
}

Prendendo visione del sorgente dell'esempio, si noterà che gli identificativi degli elementi XHTML sono dotati di un suffisso numerico che definisce il pannello di appartenenza (dato che i pannelli sono solo due: 0 per il pannello di destra, 1 per il pannello di sinistra).

Le clausole contenute nella funzione gestView sfruttano questa struttura concatenando la parte fissa dell'identificativo di ciascun elemento ( action, buttonShow , eccetera) con un suffisso incrementato ciclicamente ( action 0 , action 1 ... buttonShow 0 , buttonShow 1 ..., eccetera).

Per quanto riguarda il vero e proprio meccanismo "a fisarmonica" di espansione/riduzione progressiva dei pannelli, cliccando sul pulsante "-" viene richiamata la funzione:

function gestViewHidden(){
	var currentButtonRef = this.id.replace("buttonHidden", "");
	if(document.getElementById("buttonShow"+currentButtonRef).className == "visibile")
		gestView(currentButtonRef, 15);
	else
		gestView(currentButtonRef, null);
}

Cliccando sul pulsante "+" viene richiamata la funzione:

function gestViewShow(){
	var currentButtonRef = this.id.replace("buttonShow", "");
	if(document.getElementById("buttonHidden"+currentButtonRef).className == "visibile")
		gestView(currentButtonRef, 10);
	else
		gestView(currentButtonRef, null);}

Cliccando sul pulsante "x" viene richiamata la funzione:

  
function gestViewClose(){
gestView(null, 20);
}

La funzione riportata di seguito, infine, inizializza tutti gli eventi e i default della maschera:

function initializeButtonsStates(){
	var exitWhile = false;
	while(!exitWhile){if(document.getElementById("buttonHidden"+counterButtons)){	
var el = document.getElementById("buttonHidden"+counterButtons);
			el.onclick = gestViewHidden;
			el.value = "-";
			var el = document.getElementById("buttonShow"+counterButtons);
			el.onclick = gestViewShow;
			el.value = "+";
			counterButtons++;
		} else exitWhile = true;
	}
	if(document.getElementById("buttonClose")){	
var el = document.getElementById("buttonClose")
		el.onclick = gestViewClose;
		el.value = "X";
		mostra("buttonClose"); 
	}
	gestView(null, null);
}

Per ulteriori dettagli, si prenda visione dei commenti inclusi nel sorgente.

La soluzione presentata in questo articolo, perfezionabile e tutto sommato abbastanza rudimentale rispetto ai modelli cui si ispira, vuole innanzitutto essere un esempio di come, osservando le funzionalità di tool e software di largo uso, sia possibile trarre spunti utili alla progettazione e alla realizzazione di interfacce web.

torna su

Webografia

L'evoluzione di Javascript [link esterno]
Contiene numerosi rimandi a pagine che trattano dell'uso moderno e non invasivo del JavaScript.

Script in missione di pace
Per un esempio pratico dei vantaggi del JavaScript non invasivo

torna su

[ Torna all’inizio della pagina ]



Sito realizzato dal Laboratorio di Accessibilità e Usabilità del CSI-Piemonte - Privacy, cookies e accessibilità

[ Torna all’inizio della pagina ]

[ Torna all’inizio della pagina ]