4 pagine in totale: <<Indietro 1 2 [3] 4 Avanti >>
Inizializzazione di TooltipBehavior
Alcune variazioni di stato sono scatenate a seguito del verificarsi di alcuni eventi lato client, quali onmouseover e onmouseout dell'elemento target. Inoltre, per posizionare correttamente la tooltip, è necessario anche gestire l'evento onmousemove dell'intero document, tramite il quale ricavare le coordinate del puntatore del mouse.
La sezione ideale per aggiungere degli handler a questi eventi è senza dubbio proprio il metodo initialize, dato che, come abbiamo visto, il framework client ne assicura l'invocazione subito dopo la creazione dell'istanza. Pertanto la versione scritta in precedenza può essere integrata in questo modo:
initialize: function() {
AspitaliaExtender.TooltipBehavior.callBaseMethod(this, 'initialize');
// creazione dei delegate
this._elementOverHandler = Function.createDelegate(this, this._elementOver);
this._elementOutHandler = Function.createDelegate(this, this._elementOut);
this._documentMoveHandler = Function.createDelegate(this, this._documentMove);
// setup degli handler degli eventi
$addHandler(this.get_element(), "mouseover", this._elementOverHandler);
$addHandler(this.get_element(), "mouseout", this._elementOutHandler);
$addHandler(document, "mousemove", this._documentMoveHandler);
// elimino l'eventuale title del target in modo da non mostrare
// la tooltip di sistema
this.get_element().title = '';
}
La prima cosa che salta all'occhio è l'utilizzo del metodo $addHandler per aggiungere gestori ad un determinato evento; si tratta ancora una volta di un metodo della ClientScriptLibrary che presenta alcuni vantaggi determinanti rispetto all'uso diretto degli attributi:
- è piuttosto comodo gestire l'aggiunta (e la rimozione, con $removeHandler) di gestori senza necessità di dover manipolare stringhe, come invece accadrebbe accedendo direttamente, ad esempio, al valore dell'attributo onmouseout modificandone il contenuto;
- i gestori degli eventi ricevono il medesimo tipo di argomento a prescindere dal browser utilizzato dall'utente, il che si rivela una vera e propria manna dal cielo per chi debba costruire applicazioni cross-browser.
Come si nota dallo snippet precedente, il terzo argomento fornito a $addHandler non è direttamente il metodo utilizzato come gestore, ma un delegato creato qualche riga di codice prima tramite la funzione Function.createDelegate(). Si tratta di un passaggio necessario per far sì che, durante l'esecuzione dei gestori stessi, la parola chiave this continui a referenziare l'istanza stessa di TooltipBehavior. Al contrario, in assenza di delegate, a causa delle regole di owning di javascript, esso punterebbe all'elemento che ha scatenato l'evento, rendendo impossibile l'utilizzo di un qualsiasi membro di TooltipBehavior (vedi figura 3).
Figura 3 - Gestione dell'evento con e senza delegate
È buona norma, alla distruzione della classe TooltipBehavior, cancellare le sottoscrizioni agli eventi aggiunte durante la fase di initialize. Ecco perchè, coerentemente con quanto scritto sopra, anche il metodo dispose deve essere modificato come segue:
dispose: function() {
// eliminazione dei gestori inseriti in initialize
$removeHandler(this.get_element(), "mouseover", this._elementOverHandler);
$removeHandler(this.get_element(), "mouseout", this._elementOutHandler);
$removeHandler(document, "mousemove", this._documentMoveHandler);
AspitaliaExtender.TooltipBehavior.callBaseMethod(this, 'dispose');
}
La logica contenuta nei gestori per gli eventi onmouseover e onmouseout è di per sé estremamente semplice; l'astrazione di macchina a stati pensata per TooltipBehavior ci ha infatti consentito di legare tutta la logica di visualizzazione della tooltip al concetto di variazione dello stato. Pertanto, grazie a questa scelta di design, _elementOver, _elementOut e _documentMove non sono altro che trigger per transizioni di stato, caratterizzati da un codice decisamente banale:
// gestori degli eventi
_elementOver : function() {
this.set_currentState(AspitaliaExtender.TooltipState.Showing);
},
_elementOut : function() {
this.set_currentState(AspitaliaExtender.TooltipState.Out);
},
_documentMove : function(args) {
this._mousePosition = { x:args.clientX, y:args.clientY };
if (this.get_currentState() === AspitaliaExtender.TooltipState.Showing)
{
this.set_currentState(AspitaliaExtender.TooltipState.Showing);
}
}
Si noti come il tipo che rappresenta lo stato è un enumerato, concetto nativamente assente in javascript, ma implementabile grazie alle funzionalità aggiuntive messe a disposizione dalla Client Script Library:
AspitaliaExtender.TooltipState = function(){};
AspitaliaExtender.TooltipState.prototype =
{
Out : 0,
Showing : 1,
Showed : 2
}
AspitaliaExtender.TooltipState.registerEnum("AspitaliaExtender.TooltipState");
4 pagine in totale: <<Indietro 1 2 [3] 4 Avanti >>
Attenzione: Questo articolo contiene un allegato
Contenuti dell'articolo
- Galleria fotografica dinamica con ASP.NET AJAX
- Usare Search come un servizio nei tuoi siti e nei tuoi client
- Mappe nel tuo sito con Virtual Earth
- Integrare Windows Live ID, Contacts e Presence API nelle tue applicazioni
- Introduzione ai cloud based service con Windows Live Services
- Tracciare le modifiche ai dati e allineare i datawarehouse con il Change Data Capture in SQL Server 2008
- Le nuove caratteristiche di IIS 7.0 per sviluppatori e sistemisti
Aggiungi un nuovo commento »»»
Per inserire un commento, devi registrarti alla nostra community.
Difficoltà
Stampa 
Download
10annidi.ASPItalia.com: iscriviti alla competizione e vinci fantastici premi ogni mese!