4 pagine in totale: <<Indietro 1 2 3 [4]
Transizione dello stato e visualizzazione della tooltip
Come già detto, il cuore pulsante di TooltipBehavior è insito nella logica di gestione delle transizioni di stato, presente all'interno del metodo _handleStateTransition richiamato ad ogni invocazione di set_currentState.
// gestione delle transizioni di stato
_handleStateTransition : function(previousState, newState) {
// gestione dell'uscita dallo stato
if (previousState === AspitaliaExtender.TooltipState.Showing)
{
this._showingExit();
}
// gestione dell'ingresso nello stato
if (newState === AspitaliaExtender.TooltipState.Showing)
{
this._showingEnter();
}
else if(newState === AspitaliaExtender.TooltipState.Showed)
{
this._showedEnter();
}
else if(newState === AspitaliaExtender.TooltipState.Out)
{
this._outEnter();
}
}
Come si può notare, esso non fa altro che richiamare i vari gestori di ingresso/uscita da uno stato, che hanno a loro volta il compito di implementare la logica funzionale descritta precedentemente, nel paragrafo relativo al progetto del nostro RichTooltipExtender. Per gestire l'ingresso nello stato Showed, ad esempio, il metodo privato _showedEnter() può essere implementato come segue:
_showedEnter : function() {
this._showTooltip();
var delegate = Function.createDelegate(this, function()
{
this.set_currentState(AspitaliaExtender.TooltipState.Out);
this._showedTimeout = null;
}
);
this._showedTimeout = setInterval(delegate, this.get_hidingTime());
}
In base a quanto detto ad inizio articolo, il metodo in questione ha il compito di visualizzare la tooltip e, successivamente, di schedulare tramite l'istruzione setInterval una migrazione verso lo stato Out appena trascorso il periodo di tempo indicato dalla proprietà hidingTime.
Il metodo _showTooltip è estremamente semplice e si occupa di modificare al volo qualche attributo del DIV utilizzato come contenitore per la Tooltip in modo da renderlo visibile e posizionandolo alle coordinate volute:
_showTooltip : function() {
this._tooltipPanel.style.position = 'absolute';
this._tooltipPanel.style.left = (this._mousePosition.x + 10) + "px";
this._tooltipPanel.style.top = (this._mousePosition.y + 10) + "px";
this._tooltipPanel.innerHTML = this._tooltipHTML;
this._tooltipPanel.style.display = 'block';
}
Conclusioni
Questo articolo si è voluto innanzi tutto dare una dimostrazione di come ASP.NET AJAX metta a disposizione una vera e propria infrastruttura per componentizzare, all'interno di un custom extender, un comportamento lato client che possa essere poi applicato a situazioni eterogenee. Sebbene con tutte le semplificazioni imposte dallo scopo didattico, anche l'esempio mostrato mette in luce la versatilità di questa scelta architetturale. RichTooltipExtender è infatti applicabile ad un gran numero di oggetti target (e quindi di situazioni eterogenee), ad esempio, per mostrare i dettagli di un prodotto in un sito e-commerce, come mostrato in figura 4.
Figura 4 - Un caso di utilizzo di RichTooltip in un sito e-commerce
Realizzare un extender, soprattutto nella sua componente Javascript, non è però tra le imprese più semplici, perchè il codice non è type-safe, perchè il supporto dato dall'intellisense non è lo stesso che si ha a disposizione in C# e anche perchè le classi sono intrinsecamente un po' prolisse. Ma è proprio in situazioni come queste che si evidenzia maggiormente il valore aggiunto che può dare la dovuta attenzione alla fase progettuale. Un domani, infatti, si potrebbe pensare di rendere TooltipBehavior facilmente estendibile a sua volta, magari sollevando un evento client prima di visualizzare la tooltip stessa. Basterebbe modificare leggermente il solo metodo _showTooltip per far sì che, ad esempio, l'utente possa popolare al volo la tooltip invocando, via AJAX, un servizio sul server per recuperare informazioni. Si tratta di un argomento che esula ovviamente dagli scopi di questo articolo, ma rende sicuramente l'idea di come un design ben strutturato fornisca ovvi benefici per tutte le necessità di espandibilità future, mantendo al tempo stesso una buona leggibilità e strutturazione del codice.
4 pagine in totale: <<Indietro 1 2 3 [4]
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!
