MooTools plug-in: Slider

Ora che abbiamo appreso le basi ed i segreti fondamentali del framework tramite la Guida alla versione 1.2, è il momento di passare allo studio dei plug-in ufficiali offerti nativamente dal team di sviluppo di MooTools.

Introduzione ai plug-In

Dalla versione 1.2 in poi, abbiamo una pratica divisione tra componenti "core" e componenti "more". I plug-in fanno tutti parte di questa seconda categoria, rappresentando appunto una sorta di estensione ufficiale. In questo tutorial vedremo come utilizzare Slider, un componente che permette di creare interfacce Web 2.0 e UI molto efficaci. Tramite le istanze della classe Slider, infatti, possiamo ricreare quelle "barre di controllo" tipiche ad esempio dei programmi di riproduzione multimediale che permettono di scorrere velocemente il video o il suono, passare ad una determinata posizione (contrassegnata dai minuti e secondi) o ancora aumentare/diminuire il volume.

In ambiente web la classe Slider può essere utilizzata dunque in molte modalità davvero interessanti che vedremo successivamente nell'articolo.

La classe Slider

Partiamo dalla parte teorica. In sostanza lo Slider di MooTools è costituito da due parti fondamentali: il contenitore ed il knob (lancetta o cursore trascinabile nel contenitore). Trascinando il knob all'interno del nostro contenitore possiamo decidere cosa deve accadere in risposta al movimento nella nostra applicazione. Vediamo come dichiarare un'istanza del costruttore Slider:

var slider = new Slider(element, knob [, options]);

Come detto in precedenza, occorre passare l'elemento che funge da contenitore, l'elemento che rappresenta il knob e opzionalmente l'oggetto options. Tra le proprietà che possiamo impostare nelle opzioni troviamo le seguenti:

• range: un array di valori che rappresentano il limite minimo ed il limite massimo che lo slider può acquistare. Di default è false.
• wheel: se impostato a true permette di muovere il knob addizionalmente tramite la rotella del mouse.
• steps: il numero di step in cui viene suddiviso il contenitore. Di default è 100.
• mode: la modalità dello slider. Può essere 'horizontal' (valore di default) o 'vertical'.
• offset: l'offset di partenza del knob, relativo al contenitore. Di default è 0. Settando questa proprietà ad un valore diverso da 0, il knob potrà essere trascinato al di fuori degli "argini" del contenitore rispettivamente all'inizio ed alla fine.
• snap: se impostato a true abilita lo snapping. Di default è false.

Tra gli eventi che possiamo agganciare alle nostre istanze troviamo invece:

• onChange: scatta quando il precedente valore dello slider viene modificato (ad esempio quando trasciniamo il knob). Questo valore viene passato come parametro.
• onComplete: scatta quando il dragging viene interrotto o completato.
• onTick: scatta quando il knob viene trascinato. La posizione viene passata come unico parametro di questa funzione.

Abbiamo infine a disposizione un unico metodo, set, che permette di impostare lo slider ad un determinato valore, rappresentato dall'argomento passato:

// istanza dello Slider
var slider = new Slider('element', 'knob');

// impostiamo il valore di partenza
slider.set(0);

// registriamo degli eventi per cambiare il valore dello Slider
$('changeValue').addEvent('click', function() {
	slider.set(140);
});

$('changeValueAgain').addEvent('click', function() {
	slider.set(20);
});

Slider in azione #1: Change the border width

È giunta l'ora di vedere cosa possiamo realizzare in pratica con il costruttore Slider. Nel primo esempio denominato "Change the border width" troviamo una semplice rappresentazione di questa classe con cui è possibile modificare la larghezza dei bordi di un elemento unicamente trascinando il knob all'interno dello slider. Vediamo il codice:

window.addEvent('domready', function() {

	var slider = new Slider('slider', 'knob', {
		steps: 50,
		range: [0],
		wheel: true,
		onChange: function(val) {
			$('text').setStyle('border-width', val);
		}
	});

});

Al caricamento della pagina creiamo un'istanza della classe Slider. Gli elementi con id 'slider' e 'knob' sono rispettivamente il contenitore ed il knob. La parte interessante è rappresentata dalle opzioni: è possibile variare l'ampiezza dei bordi anche tramite la rotella del mouse (grazie alla proprietà wheel impostata a true). Inoltre, il valore minimo consentito è 0 (non esiste una larghezza negativa) mentre il valore massimo è 50 (più di 50px di larghezza per un bordo mi pareva eccessivo!).

Slider in azione #2: Colors Fun

In questo secondo e più avanzato esempio ho creato due Slider in modalità verticale. Uno permetterà di cambiare il colore di sfondo della nostra pagina mentre l'altro influirà sul colore di primo piano (entrambi i colori saranno compresi tra due limiti determinati). Vediamo subito il codice:

window.addEvent('domready', function() {

	var colors = {bg: [0, 240, 120], fg: [0, 80, 220]};

	var bgColor = function(color){
		$(document.body).setStyle('background-color', color);
	}
	
	var fgColor = function(color){
		$$(document.body, 'h3').setStyle('color', color);
	}

	var bgSlider = new Slider('slider', 'knob', {
		steps: 255,
		wheel: true,
		mode: 'vertical',
		onChange: function(val) {
			colors['bg'][0] = this.step;
			bgColor(colors['bg']);
		}
	});
	
	var fgSlider = new Slider('slider2', 'knob2', {
		steps: 255,
		wheel: true,
		mode: 'vertical',
		onChange: function(val) {
			colors['fg'][0] = this.step;
			colors['fg'][0] = this.step;
			fgColor(colors['fg']);
		}
	});

});

La variabile colors è un oggetto contenente due array che rappresentano la combinazione di colori in formato esadecimale. Le funzioni bgColor e fgColor permettono rispettivamente di cambiare il valore del colore di sfondo e del colore di primo piano della pagina al variare della posizione dei due knob. Esse verranno richiamate nei rispettivi eventi onChange degli Slider.

Infine, ho dichiarato due istanze della classe Slider, una per controllare il colore di sfondo (bgSlider) ed un'altra per il controllo del colore di primo piano (fgSlider). Ecco ancora la demo in azione.

Download degli esempi

In questo pacchetto è possibile scaricare i due esempi visti precedentemente completi di codice Javascript, HTML e CSS.

Conclusione

In questo tutorial abbiamo imparato come utilizzare il costruttore Slider per creare UI molto efficaci ed accattivanti, in pure sembianze Web 2.0. Ovviamente possiamo usare tutta la nostra fantasia per creare applicazioni interessanti usando questo plug-In. Nelle demo ufficiali ad esempio, troviamo degli ottimi esempi di Slider: nel primo è possibile variare le dimensioni del testo di un paragrafo al variare della posizione del knob, mentre nel secondo e più avanzato, abbiamo a disposizione addirittura tre Slider, ognuno rappresentante uno dei colori principali della scala web: red, green e blue.

Variando la posizione dei rispettivi knob, è possibile ottenere il colore desiderato in una modalità alquanto intuitiva ed originale.