From Sencha - Learn

Contents 1 Premessa storica 2 L'introduzione degli eventi 3 Definizione di evento 4 Eventi in Ext 4.1 Eventi DOM 4.2 Eventi JavaScript 5 Come mettersi in attesa di eventi? 6 Come creare una sorgente di eventi? 7 Eventi Personalizzati 8 In Breve 9 Approfondimenti 9.1 Nota del traduttore

Premessa storica

Molto probabilmente molti di quelli che leggeranno questo articolo non ricorderanno i tempi del linguaggio Fortran e dei computer che avevano bisogno di essere nutriti con tonnellate di schede perforate per portare a termine un lavoro.

Lo scopo principale dei computer all'epoca era calcolare qualcosa nel senso letterale del termine; questo non è più vero perché ai giorni nostri i computer vengono usati raramente, nelle scuole o nelle istituzioni scientifiche, per ottenere risultati computazionali.

Come funzionavano le cose all'epoca? Per far in modo che un computer elaborasse un programma bisognava andare con le proprie schede perforate all'unità di inserimento, trovare un cassetto dove queste venivano impilate in modo che un lettore di schede le interpretasse ed il computer potesse far partire il programma.

Il primo compito era quello di chiedere all'utente l'input e, una volta ottenuto il programma computava il risultato, lo stampava e terminava. Facile, un semplice lavoro ad un solo thread.

L'introduzione degli eventi

Con l'avvento delle GUI e del Mouse, lo schema carica-esegui-termina non era più sufficiente perché era necessario un qualche tipo di ciclo infinito che aspettasse le azioni dell'utente (movimenti del mouse e click) per poterle processare ed eseguire le azioni richieste.

Fu subito chiaro che mettere il codice per l'esecuzione delle azioni direttamente in quel ciclo non portava da nessuna parte. Era nata la Programmazione orientata agli eventi.

Definizione di evento

Un evento è un messaggio, una chiamata di funzione, generato da un (pezzo di) programma, la sorgente dell'evento, che avvisa un'altro (pezzo di) programma, il gestore dell'evento, che è successo qualcosa. Gli eventi sono generati in risposta ad azione dell'utente o al cambio dello stato della sua sorgente.

La sorgente dell'evento è indipendente dal gestore ed essa genera eventi anche se nessuno poi li gestirà o addirittura se nessun gestore è stato ancora definito. Il punto di vista del nostro ciclo infinito potrebbe essere: "Adesso informo tutti che l'utente ha appena mosso il mouse alla posizione [x,y] non mi interessa chi è, se c'è qualcuno, che aspetta l'informazione".

Il punto di vista del gestore potrebbe essere: "Fatemi sapere quando l'utente muove il mouse, ho bisogno di fare qualcosa quando succede".

Eventi in Ext

Ci sono due "tipi" di eventi in Ext: quelli DOM e quelli Javascript, detti anche eventi software.

Eventi DOM

I Browser che visualizzano pagine (X)HTML hanno già un loop infinito che monitora le azioni dell'utente e genera eventi se queste azioni si verificano su elementi DOM. Prima di Ext era comune installare gestori di eventi in questo modo:

<div id="mydiv" onclick="alert('Mi hai clickato!')">Clickami</div>

Ext.Element incapsula un elemento DOM insieme agli eventi ad esso correlati e cosi noi possiamo associare lo stesso gestore di eventi in questo modo:

Ext.get('mydiv').on('click', function() {alert('Mi hai clickato!');});

Possiamo dire che gli eventi DOM sono "inoltrari" dal DOM ai loro gestori attraverso Ext.Element.

Eventi JavaScript

Gli elementi del DOM non sono l'unica fonte di eventi; E' abbastanza semplice implementare una logica per la generazione di eventi e gestori di eventi a qualunque oggetto JavaScript. La domanda è: Per cosa ne potrebbe valere la pena?

Immaginiamo di avere un componente complesso come una griglia. Con solo gli elementi DOM a disposizione, la gestione di azioni dell'utente come lo spostamento di una colonna sarebbero estremamente difficili. Bisognerebbe mettere dei gestori su tutti gli elementi DOM, gestire i click del mouse, i suoi movimenti, calcolare quale colonna è la colonna da spostare e dove spostarla etc. Sarebbe molto più semplice se il componente griglia facesse tutto il lavoro sporco per noi e, a lavoro terminato, ci informasse: "l'utente ha spostato la colonna 3 nella posizione 1".

Questo è esattamente quello che fa la griglia: Lancia degli eventi Javascript che informano i potenziali gestori di quello che sta accadendo. La stessa cosa è vera per altri componenti Ext. Eventi di validazione delle form, eventi per il ridimensionamento di un pannello, eventi per l'espansione o la chiusura di un (ramo di) componente Tree, sono solo alcuni esempi di questo tipo di eventi.

Come mettersi in attesa di eventi?

Se avessimo un oggetto di una classe Ext, per esempio Panel, ed avessimo necessità di fare qualcosa quando il pannello viene ridimensionato, dovremmo installare un gestore che implementi l'azione:

// crea il panel
var myPanel = new Ext.Panel({...});
 
// installiamo il gestore dell'evento resize
myPanel.on('resize', function(panel, w, h) {
    alert('Panel ridimensionato a ' + w + 'x' + h);
});

Da questo momento in poi, ogni qualvolta il pannello myPanel verrà ridimensionato la nostra funzione verrà invocata e svolgerà il suo compito.

Come creare una sorgente di eventi?

Le funzionalità riguardanti gli eventi sono implementate nella classe Ext.util.Observable. Per fare in modo che una nostra estensione diventi, o possa diventare, una sorgente di eventi, basta che estensa la classe Ext.util.Observable. E' da notare che estendere una classe che già discende da Observable (Panel, Grid, Form, Tree, etc) rende automaticamente la nostra estensione una sorgente di eventi. Gli eventi lanciati dalla vostra estensione saranno eventi lanciati dalla/e classe/i genitore/i

Eventi Personalizzati

Succederà spesso di aver bisogno di aggiungere un evento non ancora implementato dal framework Ext. Per esempio diciamo di avere due classi, Impiegato e Organigramma, e che è stato implementato il drag&drop per l'assegnazione o la revoca di un impiegato in una posizione. Sarebbe comodo poter lanciare un evento assigned o un evento dismissed, non credete?

in questo esempio creeremo anche un gestore per questi eventi che invia una email ad un impiegato informandolo di ogni cambio delle sue mansioni!

Ecco come fare:

OrgChart = Ext.extend(Ext.Panel, {
    initComponent:function() {
        // Chiamiamo la initComponent della classe madre
        OrgChart.superclass.initComponent.apply(this, arguments);
 
        // aggiungiamo i nostri eventi personalizzati
        this.addEvents('assigned', 'dismissed');
    }
 
    ,assign:function(employee, position) {
        // Facciamo quanto necessario per assegnare un impiegato ad una posizione
 
        // lanciamo l'evento assigned
        this.fireEvent('assigned', this, employee, position);
    }
 
    ,dismiss:function(empoyee, position) {
        // Facciamo quanto necessario per rimuovere un impiegato da una posizione
 
        // lanciamo l'evento dismissed
        this.fireEvent('dismissed', this, employee, position);
    }
});

Nella funzione initComponent informiamo la classe Observable della possibilità d lanciare i nostri nuovi eventi in modo che possa fare i necessari aggiustamenti iniziali.

Nota: Anche se non abbiamo esteso direttamente Observable, Panel (che abbiamo esteso) lo ha già fatto. Notate la genealogia di Panel: Observable -> Component -> BoxComponent -> Container -> Panel.

Nelle funzioni assign e dismiss lanciamo i nostri eventi, dopo aver fatto tutto quello di che dovevamo fare per un'incarico o una dismissione, con una segnatura (parametri) a nostra scelta.

Invocando fireEvent, Observable si assicura che ci siano gestori per l'evento lanciato ed invoca tutti i gestori con gli argomenti specificati nella chiamata a fireEvent. Se non ci sono gestori registrati per quell'evento non viene fatto nulla.

In Breve

• un evento è un messaggio inviato (fired) da una sorgente per informare eventuali gestori che è accaduto qualcosa.
• una sorgente di eventi è un oggetto che può generare eventi
• un gestore di eventi è una funzione che viene invocata quando una sorgente genera un evento del tipo gestito dal gestore
• ci mettiamo in attesa di un evento con la funzione on che installa un gestore di eventi
• per creare una sorgente di eventi estendiamo la classe Observable, addEvents e fireEvent

Divertitevi a lanciare ed gestire eventi!

Approfondimenti

• Lo stesso articolo nel mio blog Potrete commentare questo pezzo.

Nota del traduttore

Ho tradotto listener di un evento con gestore, la traduzione non mi convince del tutto, se qualcuno trovasse un termine più adatto è, ovviamente, il benvenuto

This page was last modified on 24 September 2008, at 19:44. This page has been accessed 7,906 times.