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"); 

Attenzione: Questo articolo contiene un allegato

Contenuti dell'articolo

• Pagina 1
  • Il progetto sulla carta
  • Primi passi nel mondo della programmazione OO in Javascript
• Pagina 2
  • Aggiunta di proprietà a TooltipBehavior e mapping con proprietà server
• Pagina 3
  • Inizializzazione di TooltipBehavior
• Pagina 4
  • Transizione dello stato e visualizzazione della tooltip
  • Conclusioni

• L'object model di Microsoft SharePoint - Seconda parte
• L'object model di Microsoft SharePoint - Prima parte
• La gestione dello stato da ASP.NET 1.x ad ASP.NET 3.5
• Routing e dynamic data control di ASP.NET 3.5 SP1
• I nuovi controlli di ASP.NET 3.5: LinqDataSource, ListView e DataPager
• 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

Aggiungi un nuovo commento »»»
Per inserire un commento, devi registrarti alla nostra community.