venerdì 6 giugno 2008

Mootools. Struttura di una classe

Di Mootools ho già avuto modo parlare, ma essendomi divertito abbastanza con questo framework ultimamente, mi è venuta voglia di approfondire il discorso.

Come al solito, per evitare noiose spiegazioni teoriche partiremo da un esempio concreto e mostreremo (più o meno) passo passo come si crea una (più o meno) semplice classe Mootools.

Prima di proseguire è ben ricordare che le classi Mootools sono molto diverse concettualmente dalle classi a cui siamo abituati in altri linguaggi di programmazione orientati agli oggetti. Una classe Mootools è essa stessa un oggetto (cosa che risulta palese dal semplice fatto che si usa l'istruzione new per crearla), un oggetto che viene utilizzato come prototipo per la creazione di altri oggetti.

Detto questo, da ora in poi parlerò tranquillamente di classi ed istanze nella stessa accezione che questi termini hanno in linguaggi quali C++ o Java. Trattandosi di Javascript, la terminologia non sarà del tutto corretta, ma sarà più facile capirsi.

Anche se si tratta di un esempio, è opportuno cercare di sviluppare qualcosa che abbia una utilità pratica: la classe servirà a presentare sul nostro sito delle informazioni (testo ed eventualmente immagini) con un effetto di scorrimento orizzontale o verticale. Si vedrà come con Mootools sia possibile ottenere degli effetti gradevoli scrivendo relativamente poco codice.

Vediamo innanzi tutto la struttura della classe (i puntini di sospensione racchiusi tra commenti servono da segnaposto per il codice che dovrà essere scritto in seguito)

var QScroller = new Class({
  options: {/* ... */},
  initialize: function(wrapper,options) {
    /* ... */
  },
  load: function() {
    /* ... */
  },
  show: function() {
    /* ... */
  },
  doEffect: function() {
    /* ... */
  },
  stop: function(){
    /* ... */
  },
  play: function() {
    /* ... */
  },
  next: function() {
    /* ... */
  },
  prev: function() {
    /* ... */
  },
  swapSlides: function() {
    /* ... */
  }
});
QScroller.implement(new Options, new Events);

Sono molte righe, ma in realtà si tratta solo di due istruzioni!

Cercare di spiegare esattamente cosa succede a livello di framework sarebbe troppo complesso, accontentiamoci del risultato finale. Una volta eseguito il blocco di codice riportato sopra abbiamo a disposizione una classe QScroller. Le istanze di QScroller possiederanno le proprietà e i metodi definiti nell'oggetto (un oggetto letterale, notate le graffe) che passiamo come argomento alla funzione Class.

Con implement aggiungiamo a QScroller le funzionalità delle classi Options ed Events definite nel framework. In altre parole tutte le proprietà e i metodi di Options ed Events saranno copiati in QScroller che potrà utilizzarli come propri. Cosa questo comporti si vedrà in seguito.

A questo punto tutto quello che abbiamo è uno scheletro vuoto. La prossima volta inizieremo a scrivere il codice dei metodi a partire dalla importante funzione initialize().

L'argomento richiederà alcune 'puntate'. Aggiungo un'etichetta Mootools per dare modo a chi arrivi a metà del discorso di recuperare facilmente tutti gli articoli.

Nessun commento:

Posta un commento

Nota. Solo i membri di questo blog possono postare un commento.