Tramite l'utilizzo di script Javascript è infatti possibile manipolare le proprietà stilistiche dei vari oggetti per ottenere effetti analoghi ad un interfaccia grafica vera e propria.

Vediamo ad esempio come creare una impaginazione standard su tre colonne con header e footer utilizzando i solo css. L'effetto finale può essere facilmente ottenuto utilizzando i FRAME, ma quanto comporterebbe la manutenzione di diverse pagine ad ogni cambio di link; nel nostro caso invece la pagina utilizzata sarà una sola.

Inoltre faremo in modo anche questa volta di separare il più possibile contenuto (pagina html), stile (foglio css) e elaborazione (file di script JS) in modo da ottimizzare comprensibilità e riusabilità!

Ecco uno screenshot giusto per avere un'idea di quello che vogliamo ottenere, le barre grige saranno trascinabili esattamente come i bordi di una finestra per ridimensionare le proporzioni, lasciando invariata la superficie complessiva dei pannelli.

Abbiamo detto che non vogliamo utilizzare in nessun modo i frame, per cui impiegheremo solo dei campi DIV opportunamente parametrizzati e manipoleremo le loro proprietà tramite javascript.

Proprio per questo motivo il nostro codice HTML risulterà estremamente semplice e minimale:

Come potete notare abbiamo creato un campo DIV per ciascun "box" che vogliamo creare più un div per ciascuno "scrollbar" che vogliamo interporre tra le parti.

Ogni box ha un suo ID univoco che utilizzeremo per manipolarli singolarmente coi Javascript e una CLASS, condivisa tra più oggetti, che utilizzeremo per uniformare l'aspetto grafico coi CSS.

Ecco una versione "base" del CSS che possiamo utilizzare per la grafica:

Abbiamo settato il colore di background ad un azzurrino piuttosto neutro per i box, e abbiamo deciso che le nostre scrollbar avranno il colore "scrollbar" (css prevede dei colori "standard" passati come costati che si adatteranno in base alle vostre impostazioni locali, se quindi avete delle simpatiche finestre fucsia, il browser utilizzerà o stesso colore per rappresentarle.

Sbizzarritevi pure coi colori che più vi piacciono, l'importante è che non tralasciate la clausola position:absolute; che farà si che tutte le misure dei nostri box siano configurate in maniera assoluta rispetto al punto (0,0) ovvero l'angolo superiore sinistro del browser (dell'area di navigazione, non della finestra dell'applicazione) Un altro elemento importante sono le clausole cursor: n-resize; e cursor: e-resize; che faranno si che ogni qual volta il mouse passi sopra una scrollbar, vedrete il puntatore cambiare nella classica icona di resize orizzontale o verticale, un dettaglio che rende molto più intuitivo l'utilizzo della nostra interfaccia!

Ovviamente ricordatevi di inserire il riferimento al css nella clausola STYLE della pagina html!

A questo punto se aprite la vostra pagina nel browser vedrete... un bel niente!

Avendo infatti definito tutti i blocchi con posizione assoluta, è necessario assegnar loro delle dimensioni ragionevoli o ve li troverete tutti accatastati in un angolino del browser.

Potremmo in effetti specificare tutte le misure all'interno del CSS tramite le regole width,height (altezza e larghezza) e top,left (coordinate dell'angolo superiore sinistro del box rispetto al suddetto punto di riferimento) ma lo faremo all'interno del javascript.

La motivazione di questa scelta è molto semplice, all'interno del javascript potremo parametrizzare tali misure e sfruttare una procedura di inizializzazione per applicarla ai nostri elementi. In questa maniera quando vorremo modificare le dimensioni del nostro layout potremo agevolmente modificare le misure all'interno del javascript e la procedura provvederà a riallineare il tutto.

Pertanto creeremo un nuovo file ad esempio con nome "ResizablePane.js" e inizieremo col seguente codice:

Le costanti delle dimensioni

E quindi una funzione che setti i le varie dimensioni utilizzando le variabili di cui sopra (non mi ci stava tutta nello screenshot, mi spiace ma dovrete mettervi voi a ragionare per allineare il tutto, che non fa mai male... )

Come potete capire, lasciare tutte le costanti in cima al file rende decisamente veloce ridimensionare i diversi blocchi a seconda delle diverse esigenze, mentre se l'avessimo fatto nei css avremmo dovuto definire un sacco di regole per i diversi ID dei box e i cambiamenti sarebbero stati decisamente più invasivi e a rischio di errore. Cosi facendo facciamo uno sforzo mentale in più per scrivere correttamente la funzione inizializzatrice, ma una volta fatto non dovremo mai più preoccuparcene.

Per far si che la nostra funzione si carichi quando apriamo la pagina dobbiamo innanzitutto includere il nostro file di script nall'html in maniera analoga a quanto fatto per il css:

infine includere nel tag body la clausola onload come da esempio, in modo tale che appena caricata ala pagina la funzione vena eseguita.

A questo punto, se avete fatto tutto per bene e aprite la pagina nel browser dovrebbe presentarsi esattamente come lo screenshot del prodotto finale, e passando col mouse sulle barre grige dovreste già notare il cambiamento del puntatore.

Ok, l'apparenza è salva! Peccato che adesso di ridimensionare i box ancora non se ne parli! iniziamo ad affrontare l'argomento.

Riflettiamo: l'idea è quella di trascinare un elemento (la barra grigia) da un punto all'altro per generare lo spostamento. Quindi presumibilmente cliccheremo col mouse sulla barra, trascineremo e rilasceremo nel punto in cui vogliamo posizionare il bordo.

Perchè questa precisazione? Molto semplice, perchè javascript consente di catturare determinati eventi compresi quelli del mouse come chiaramente illustrato sul solito sito della W3C

Quindi utilizzeremo un evento sulla pressione del tasto del mouse quando siamo sulle scrollbar e un evento associato al suo rilascio a livello globale, in quanto il click che ci interessa DEVE avvenire sulle barre, ma il rilascio è valido ovunque sullo schermo. Anche in questo caso ci limiteremo ad inserire le chiamate nell'html mentre la funziona vera e propria che gestisce l'azione la scriveremo nel file JS.

Ecco quindi il nostro html nella sua versione finale, nessuna altra modifica sarà più necessaria:

Pulito ed essenziale, in questo modo l'interferenza su quello che sarà il contenuto dei box risulterà assolutamente minimale.

Ora concentriamoci sulla procedura per ridimensionare i nostri box: in pratica dobbiamo memorizzare le coordinate del puntatore del mouse al momento della pressione del tasto (che come abbiamo detto sarà sulla barra di ridimensionamento). Una volta rilasciato il tasto leggeremo le nuove coordinate e facendo la differenza con le precedenti avremo la misura dello spostamento voluto. Ovviamente, siccome i due metodi associati a pressione e rilascio sono separati, per poter memorizzare le coordinate a cavallo del metodo dovremo utilizzare una variabile globale.

Questo è il metodo che assoceremo alla pressione del mouse sulle barre che ridimensionano orizzontalmente. Notate le variabili globali ESTERNE alla funzione: la variabile lr (left-right ), esterna anch'essa che ci permetterà di capire se stiamo spostando la barra a destra o a sinistra.

Un altra precisazione è necessaria per l'if-else contenuto nella funzione. Purtroppo non tutti i browser si comportano nella stessa maniera, sia per quanto riguarda i javascript sia i css, per questo è sempre buona norma, prima si utilizzare funzioni complesse, farsi una ricerchina su Google per essere sicuri di avere la massima compatibilità possibile. In caso un metodo universale non esista bisogna (come in questo caso) ricorrere a delle IF-ELSE per ovviare il problema. In questo caso la variabile in cui è memorizzato l'evento del mouse non è la stessa, quindi la if ci permette di controllare se una delle due esiste, in caso contrario utilizzeremo l'altra (come potete notare anche la sintassi di utilizzo differisce quanto basta)

Ovviamente il metodo per la barra verticale è analogo, anche se essendoci una sola barra verticale, non avremo bisogno della variabile esterna per differenziare, mentre avremo bisogno di una variabile differente per la memorizzazione del punto di partenza.

Il motivo per cui non è possibile utilizzare la stessa variabile per il punto di partenza orizzontale e verticale è molto semplice: la pressione del tasto è un evento locale, ovvero associato alla barra, quindi sappiamo già la provenienza abbiamo distinto i metodi per la barre orizzontali e verticali. Il metodo per il rilascio del pulsante è invece globale, associato all'intera pagina, quindi non sappiamo quale sia la barra di origine, quindi leggeremo entrambe le variabili per capirlo.

Come potete vedere facciamo un controllo sulla start_x ( o start_y ) per vedere in quale caso ci troviamo. Ovviamente ricordatevi di azzerare la variabile una volta completata la procedura o il valore resterà "sporco" all'evento successivo

Una volta azzeccata la casistica corretta dovremo rileggere la nuova posizione del mouse e calcolare la differenza. Dato questo valore basta applicare l'effettivo spostamento a tutti i pannelli interessati (non dimenticatevi che anche le barre vanno spostate ) ed il gioco è fatto. Anche in questo caso lo screenshot è "tagliato" quindi buon ragionamento. Notate soltanto che per lo spostamento orizzontale, avendo due barre abbiamo aggiunto il controllo sulla variabile lr, il cui valore viene valorizzato con l'evento di pressione del bottone e ci permette di capire di quela delle due barre si tratti.

Una volta completato questo semplice esercizio di ragionamento la pagina si può considerare funzionante, per vedere come dovrebbe essere il risultato finito potete fare riferimento a questa pagina 8con un po di abilità dovreste riuscire a recuperare anche i sorgenti

Ovviamente la cosa è ulteriormente migliorabile, aggiungendo qualche controllo di sicurezza che impedisca di "sforare" dai bordi esterni o che permetta di omettere/aggiungere uno o più pannelli senza sollevare eccezioni nel javascript. Insomma potete sbizzarrirvi in mille migliorie e magari spedirmi i vostri risultati per un confronto!