Con questo CODE-IT vogliamo realizzare un meccanismo di personalizzazione simile a quello di Facebook. Per fare questo prenderemo in esame l'oggetto Slider di Mootools. Facendo in modo che le immagini dei pulsanti siano trascinabili, il più sarà fatto, ma vediamo nel dettaglio come realizzare la nostra console.
Innanzitutto andremo ad includere la libreria utile ad utilizzare il framework MooTools. Subito dopo definiremo il layout della nostra pagina all'interno dei tag style. Qui possiamo descrivere gli elemnti html della nostra pagina e i dettagli dei vari oggetti tramite attributo id o class.
#main{
background:#000000;
color:#ffffff;
width:600px;
height:300px;
}
#opacity-area, #width-area, #height-area, #margin-left-area, #padding-area, #margin-top-area{
background:url(img/line.png) 0 8px no-repeat;
height:23px;
width:500px;
margin:0 5px 5px 0;
}
#opacity-slider, #width-slider, #height-slider, #margin-left-slider, #padding-slider, #margin-top-slider{
background:url(img/button.jpg) no-repeat;
width:33px;
height:23px;
cursor:pointer;
}
In particolare decidiamo di personalizzare la zona che sarà modificata dalla nostra console. Le diamo uno sfondo nero grazie all'attributo background, coloriamo le scritte di bianco con l'attributo color, e impostiamo le dimensioni attraverso gli attributi width ed height. Possiamo notare che sul pulsante dello slider, il mouse, presenta una manina e non la classica freccia. Questo e' un effetto che otteniamo grazie all'attributo cursor uguale a pointer.
Subito dopo passiamo a programmare l'aspetto della nostra pagina. Metteremo un grosso div con id uguale a console e inseriremo al suo interno due zone. Per far stare le due parti della console sulla stessa riga, inseriremo un attributo di stile float uguale a left, per la zona di sinistra.
<div id="console" style="width:1224px;height:310px;">
<div style="float:left;width:600px;height:300px;" >
Questa pagina presenta zone simili pertanto il codice risulta ripetitivo. Una semplice conseguenza del design che abbiamo scelto di dare alla nostra pagina è il fatto che questa risulta più rapida da implementare. Ogni elemento che rappresenta un pulsante è simile agli altri, e si divide in tre zone: l'area, lo slider e la label in cui andremo a scrivere l'attuale valore dello slider.
<div style="float:left;width:600px;height:300px;" >
<div id="opacity-area">
<div id="opacity-slider"></div>
</div>
<div>
<strong>Opacity:</strong>
<span id="opacity-label"></span>%
</div>
La zona dello slider è un div vuoto. In questa zona viene collocata l'immagine del bottone grazie alla descrizione dell'elemento nella parte di stile della pagina. Analogamente il div contenente tutta l'area, avrà come sfondo l'immagine della barra su cui si muove il nostro slider.
Una volta collocati tutti gli elementi della nostra pagina possiamo provare a vedere il risultato in un browser e noteremo come gli slider siano tutti logicamente bloccati e come il nostro foglio non sia ancora in grado di presentare le caratteristiche dinamiche che andremo ad inserire grazie al javascript.
Una volta aggiunto il classico evento domready alla finestra possiamo andare a creare il primo oggetto Slider. Una volta compreso questo, gli altri saranno assolutamente identici. Come primo argomento della funzione plugin Slider inseriamo la zona di slinding dell'area, successivamente inseriamo il pulsante, e infine l'attributo steps, che indica la percentuale di spazio su cui si muoverà il nostro slider lungo l'area. Abilitiamo tramite wheel, la sensibilità della rotella centrale del mouse. Se ci si colloca con il mouse sullo Slider, infatti, e si muove la rotella tra i tasti destro e sinistro del nostro mouse, si potrà apprezzare il movimento dell'equalizzatore.
/* opacity slider */
var mySlide = new Slider($('opacity-area'), $('opacity-slider'), {
steps: 100,
wheel: 1,
onChange: function(step){
$('opacity-label').set('html',step);
$('main').setStyle('opacity',step / 100);
}
}).set(100);
Come ultimo argomento della funzione Slider, inseriamo il comportamento che deve assumere la pagina quando cambia la posizione del pulsante, ovvero onChange. Vediamo che viene assegnato un nuovo valore alla label e modificato l'attributo di stile che lega il pulsante al riquadro main, obbiettivo delle nostre personalizzazioni.
A questo punto non ci resta che ripetere le stesse istruzioni anche per gli altri pulsanti della nostra consolle. Possiamo notare come, grazie alla funzione set, collegata al plugin Slider, il pulsante venga collocato nella posizione che preferiamo lungo l'area di scorrimento. Nella pagina degli esempi di MooTools, che si riferisce agli Slider, possiamo vedere delle componenti di codice interessanti. Con una terna di slider che si occupano di intercettare i colori RGB, ovvero red, green e blue, potremmo andare ad integrare il nostro widget con una serie di pulsanti per cambiare i colori di sfondo e del testo.
In conclusione possiamo notare quanto sia semplice impostare una pagina con un alto impatto grafico e che aiuta notevolmente a migliorare la user experience dei nostri utenti. In Facebook, una consolle come questa viene utilizzata per personalizzare i risultati delle notizie collegate ai nostri amici. Analogamente anche nel nostro esempio possiamo capire a che punto si trova lo slider e utilizzarlo di conseguenza.
