Come già accennato, un CustomExtender è comunque a tutti gli effetti un controllo server, che nella fattispecie eredita dalla classe astratta ExtenderControl e ne ridefinisce i metodi GetScriptReferences e GetScriptDescriptors come segue:

 
[TargetControlType(typeof(Control))] 
public class RichTooltipExtender : ExtenderControl 
{ 
  protected override IEnumerable<ScriptReference> GetScriptReferences() 
  { 
    ScriptReference reference = new ScriptReference(); 
    reference.Path = "TooltipBehavior.js"; 
 
    yield return reference; 
  } 
 
  protected override IEnumerable<ScriptDescriptor> GetScriptDescriptors(Control targetControl) 
  { 
    ScriptBehaviorDescriptor descriptor = 
      new ScriptBehaviorDescriptor( 
        "AspitaliaExtender.TooltipBehavior", 
        targetControl.ClientID); 
 
    yield return descriptor; 
  } 
} 

GetScriptReferences viene utilizzato per restituire una lista dei file contenente il codice Javascript da iniettare. Nel nostro caso abbiamo utilizzato una reference basata sul path, me è anche possibile utilizzare le WebResources.

In GetScriptDescriptors viene invece effettuata una sorta di mapping tra le proprietà dell'oggetto lato server e quello lato client. Nonostante per il momento sia ancora quasi vuoto, svolge già una funzione indispensabile, visto che restituisce un'istanza di ScriptBehaviorDescriptor nella quale è stato indicato il ClientID dell'oggetto target.

A questo punto basta inserire il nostro custom extender in una qualsiasi pagina di esempio ed eseguire il progetto, per verificare che, in maniera del tutto trasparente, l'infrastruttura di ASP.NET AJAX abbia intanto iniettato nella pagina generata un link al file contenente la definizione della classe TooltipBehavior, seguito da uno script di inizializzazione simile al seguente:

 
<asp:Button runat="server" ID="btnSample" Text="Esempio" /> 
<crad:RichTooltipExtender runat="server" ID="extender" TargetControlID="btnSample" /> 
 
... 
 
<script type="text/javascript"> 
//<![CDATA[ 
Sys.Application.initialize(); 
Sys.Application.add_init(function() { 
  $create(AspitaliaExtender.TooltipBehavior, null, null, null, $get("btnSample")); 
}); 
//]]> 
</script> 

Nel codice javascript riportato sopra la funzione $create della Client Script Library crea un'istanza della classe TooltipBehavior e, dopo averne valorizzato opportunamente le proprietà (nel nostro caso con il solo riferimento al pulsante target), ne invoca il metodo initialize.

Aggiunta di proprietà a TooltipBehavior e mapping con proprietà server

Affinché TooltipBehavior funzioni a dovere, c'è bisogno di qualche altro dato che dovrà essere fornito dall'utilizzatore. Ad esempio, è necessario aggiungere una proprietà in cui memorizzare l'istanza del DIV da utilizzare per mostrare la tooltip. In una classe javascript una proprietà è costituita da una coppia di metodi convenzionalmente chiamati get_nomeProptietà e set_nomeProrietà che, esattamente come avviene in C#, si appoggiano ad una variabile privata (il concetto di membro privato è assente in javascript e pertanto si adotta la convenzione di utilizzare per essi il prefisso "_").

 
get_tooltipPanel : function() { 
  return this._tooltipPanel; 
}, 
 
set_tooltipPanel: function(value) { 
  if (this._tooltipPanel !== value) 
  { 
    this._tooltipPanel = value; 
    this.raisePropertyChanged('tooltipPanel'); 
  } 
} 

Chi si occupa di valorizzare tooltipPanel? Normalmente, essendo codice lato client, sarebbe necessario registrare uno script manualmente, ad esempio nel evento Load della nostra pagina. Ma è proprio in casi come questo che è possibile apprezzare tutti i vantaggi dell'astrazione dell'extender control, che altri non è che l'alter-ego sul server della classe presente sul client. Aggiungendo infatti a quest'ultimo una proprietà TargetControlId (che come tale può essere comodamente valorizzata nel markup della pagina aspx), si possono mettere in relazione i due mondi semplicemente agendo sul metodo GetScriptDescriptors, che può essere modificato in questo modo:

 
protected override IEnumerable<ScriptDescriptor> GetScriptDescriptors(Control targetControl) 
{ 
  ScriptBehaviorDescriptor descriptor = 
    new ScriptBehaviorDescriptor( 
      "AspitaliaExtender.TooltipBehavior", 
      targetControl.ClientID); 
 
  descriptor.AddElementProperty("tooltipPanel", 
    this.getClientId(this.TooltipPanelId)); 
 
  yield return descriptor; 
} 

Sarà poi l'infrastruttura di ASP.NET AJAX a farsi carico della corretta inizializzazione della classe client, tenendo conto anche di questo nuovo dato. Allo stesso modo possono essere aggiunte tanto sul behavior client che sul controllo server le proprietà ShowingTime e HidingTime, che rappresentano rispettivamente il tempo di attesa prima che venga visualizzata la tooltip e la durata della sua visualizzazione e che saranno pertanto comodamente impostabili dallo sviluppatore all'interno della pagina ASPX.

In alcuni casi può essere comunque utile sfruttare il concetto di proprietà lato client anche in assenza di una corrispondente proprietà sul server; esse infatti risultano molto comode anche quando, accedendo in lettura o in scrittura ad una variabile, si vogliono compiere delle operazioni particolari. TooltipBehavior, ad esempio, ha la necessità di invocare un gestore del cambio di stato ogni volta in cui subisce variazioni. Per questo motivo anche lo stato, piuttosto che con un semplice campo privato, è gestito con l'ausilio di una proprietà dedicata:

 
get_currentState : function() { 
  return this._currentState; 
}, 
 
set_currentState : function(value) { 
  var previousState = this._currentState; 
  if (value !== this._currentState) 
  { 
    this._currentState = value; 
    this.raisePropertyChanged('currentState'); 
  } 
 
  this._handleStateTransition(previousState, this._currentState); 
} 

Il metodo _handleStateTransition, come si vedrà in seguito, incapsula tutta la logica di visualizzazione e scomparsa della tooltip, da applicarsi ad ogni variazione dello stato corrente secondo il diagramma mostrato in precedenza.

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.