4 pagine in totale: <<Indietro 1 [2] 3 4 Avanti >>
Utilizzando createDelegate() è così possibile ultimare la realizzazione del gestore di evento di mouseover ed impostare il timeout desiderato, memorizzato per riferimenti futuri in un membro privato della classe.
// Crea il nuovo timeout
this._activeMouseOverTimeout = window.setTimeout(Function.createDelegate(this, function()
{
// [...]
}), 200);
Il gestore di evento di mouseout ha per contro lo scopo di annullare un eventuale timeout impostato. In questo caso il blocco di codice richiesto è davvero molto semplice:
if (this._activeMouseOverTimeout)
{
window.clearTimeout(this._activeMouseOverTimeout);
this._activeMouseOverTimeout = null;
}
Proprietà ed eventi esposti dal controllo
Nonostante il codice fino a qui visto sia completamente integrato con il modello a componenti di ASP.NET AJAX, in realtà esso non sfrutta due funzionalità importanti offerte da questa infrastruttura: il supporto per la definizione di proprietà (per certi versi simili alle proprietà di .NET) e di eventi. Il framework sfrutta attivamente questi costrutti per colloquiare ed inizializzare le istanze dei componenti quando questi vengono creati, come spiegato più avanti nella prossima sezione.
Definire una proprietà significa sviluppare dei metodi di accesso ad un valore, tipicamente memorizzato tramite un membro privato (per quanto non esista tale concetto in JavaScript); per convenzione il nome del metodo getter di un particolare membro deve essere formato dal nome del membro stesso ed un prefisso costante, pari a get_. Analogamente il metodo setter deve utilizzare il prefisso set_. Come è facilmente intuibile, il primo metodo non attende alcun parametro e restituisce sempre un valore, il secondo attende invece un parametro - il valore da impostare - e non ritorna nulla. All'interno del corpo di entrambi i metodi è naturalmente possibile incapsulare qualsiasi logica.
Tuttavia, poichè la classe Sys.Component implementa l'interfaccia Sys.INotifyPropertyChange, tutte le classi da questa derivate notificano al sistema eventuali cambiamenti relativi ai valori accessibili tramite proprietà; in tal caso il metodo setter deve scatenare l'evento propertyChanged, indicando agli eventuali sottoscrittori il nome della proprietà oggetto della modifica. Sys.Component semplifica questa operazione rendendo disponibile agli sviluppatori il metodo raisePropertyChanged().
Il timeout legato alla visualizzazione del tab attivo, fino a qui cablato nel codice e pari a 200 millisecondi, potrebbe essere un buon candidato per divenire una proprietà del controllo TabViewContainer. Ecco il codice relativo, in seguito alla trasformazione:
// _tabShowTimeout è un membro privato
get_tabShowTimeout: function()
{
return this._tabShowTimeout;
},
set_tabShowTimeout: function(value)
{
this._tabShowTimeout = value;
this.raisePropertyChanged('tabShowTimeout');
}
In maniera simile, fare uso del supporto per gli eventi all'interno dei componenti ASP.NET AJAX significa rendere disponibili due metodi all'interno della definizione di classe del componente: un metodo destinato ad aggiungere gestori di evento ed uno impiegato per rimuovere gestori aggiunti in precedenza. Anche in questo caso entrambi i metodi devono rispettare alcun convenzioni: il nome del primo metodo deve essere composto dal nome dell'evento, prefissato dalla stringa add_. Il prefisso per la rimozione corrisponde invece a remove_. Nonostante il corpo di ambedue i metodi possa di fatto contenere teoricamente qualsiasi blocco di codice, in realtà questo si limita sempre al solo impiego della lista di gestori di evento mantenuta internamente da Sys.Component e ritornata dal metodo get_events(): tale lista consente quindi l'aggiunta di nuovi gestori di evento richiamandone il metodo addHandler() e la successiva rimozione tramite removeHandler().
La funzione get_events() ritorna dietro alle quinte una sorta di dizionario di eventi client (del tipo Sys. EventHandlerList), dove il nome dell'evento funge da chiave; inoltre, come si evince facilmente dalle firme dei due metodi appena esposti, è possibile che più di un gestore sia associato ad uno stesso evento. Il metodo get_handler() di questo oggetto si occupa infatti di creare una funzione anonima in grado di richiamare tutti i gestori aggiunti ad un particolare evento. Tale funzionalità risulta assai simile al concetto di eventi multicast in ambiente managed.
Ecco dunque come può essere creato il codice di supporto per l'evento di cambiamento del tab attivo, nell'esempio denominato tabChanged:
add_tabChanged: function(handler)
{
this.get_events().addHandler('tabChanged', handler);
},
remove_tabChanged: function(handler)
{
this.get_events().removeHandler('tabChanged', handler);
}
Ora che la classe del controllo TabViewContainer ha finalmente preso forma, è opportuno chiarire le modalità secondo cui è possibile impiegare tale tipo all'interno di pagine ASP.NET.
La vita in una pagina HTML
Poichè la classe fin qui sviluppata si avvale unicamente di codice JavaScript che viene eseguito lato client, è evidentemente possibile rinunciare al supporto di ASP.NET e verificarne il funzionamento utilizzando una semplice pagina HTML, corredata di opportuni script che permettano la corretta inizializzazione di ASP.NET AJAX.
Di fatto, una volta inclusi in una pagina HTML gli script della libreria - l'esempio di questo articolo richiede solo MicrosoftAjax.js - e lo script del controllo, è possibile istanziare un qualsiasi componente utilizzando la funzione shortcut $create(), alias del metodo create() di Sys.Component; tale metodo, cuore del modello a componenti client, si occupa di inizializzare un'istanza della classe del componente ed associarvi, come anticipato, l'elemento DOM di riferimento, i valori delle proprietà ed i gestori di evento. Queste due ultime tipologie di dato vengono fornite a create() mediante array associativi, dove la chiave è il nome della proprietà o dell'evento.
Ecco dunque come potrebbe apparire un semplice script di inizializzazione del controllo sviluppato in questo articolo:
$create(Cobisi.TabViewContainer, { tabShowTimeout: 200 }, { tabChanged: onTabChanged }, null, $get("Test"));
La creazione dei componenti deve però avvenire in un preciso momento nel tempo, tipicamente quando il DOM della pagina ospitante è completamente disponibile ed è quindi possibile recuperare gli elementi target utilizzando la funzione scorciatoia $get(): come è noto, questa eventualità si verifica non appena la pagina è stata integralmente caricata dal browser. Al fine di consentire l'inizializzazione del controllo e, più in generale, del modello a componenti di ASP.NET AJAX, è indispensabile inserire il codice di inizializzazione dei componenti all'interno di un blocco generico, richiamato a gestire l'evento init della classe singleton Sys.Application, evento che segnala la fase di inizializzazione dell'intera applicazione client. L'aggiunta di un gestore a questo evento viene normalmente effettuata con un blocco di script inserito come ultimo elemento della pagina HTML.
4 pagine in totale: <<Indietro 1 [2] 3 4 Avanti >>
Attenzione: Questo articolo contiene un allegato
Contenuti dell'articolo
- Pagina 1
- Pagina 2
- Pagina 3
- Pagina 4
Per inserire un commento, devi registrarti alla nostra community.
Difficoltà
Stampa 
Download
