3 pagine in totale: <<Indietro 1 [2] 3 Avanti >>
Utilizzare i namespace
Come anticipato in precedenza, ASP.NET AJAX consente di organizzare i propri tipi lato client all'interno di namespace distinti; poichè JavaScript non prevede nativamente il supporto per questo tipo di funzionalità, anche in questo caso è necessario rivolgersi direttamente all'infrastruttura del framework. Utilizzare i namespace consente, in maniera analoga a .NET, di organizzare le proprie classi in gruppi e di identificare così facendo i propri tipi in maniera univoca, globale: questa pratica, indispensabile nei progetti di una certa dimensione, riduce tra l'altro il rischio di omonimia (name collision) tra tipi appartenenti a pacchetti software differenti.
La registrazione di un nuovo namespace, ovvero la notifica dello stesso al runtime, avviene semplicemente richiamando la funzione Type.registerNamespace(namespacePath), fornendo la stringa con il namespace desiderato. Una volta registrato, il namespace è pronto all'uso e vi si possono creare all'interno nuove classi.
L'esempio di definizione della classe Person potrebbe dunque essere rielaborato affinchè questa appartenga al namespace World.People:
Type.registerNamespace('World.People');
World.People.Person = function() { };
World.People.Person.prototype =
{
sayHello: function() { return 'Hello world!'; }
};
World.People.Person.registerClass('World.People.Person');
var person = new World.People.Person();
alert(person.sayHello()); // Hello world!
Progettazione di un controllo
Lo sviluppatore che si appresta a progettare un controllo custom, sia esso basato su ASP.NET, su Windows Forms o su ASP.NET AJAX, spesso utilizza, almeno nelle prime fasi, unicamente carta e penna. Riversare su di un qualcosa di tangibile - come un foglio di un blocco - ciò che si ha nella propria mente è molto utile in quanto permette di rendersi immediatamente conto delle potenzialità e dei limiti delle proprie soluzioni. Una volta che lo schizzo sulla carta risulta sufficientemente maturo, è possibile trasferirne la struttura principale in termini di layout e funzionalità su di un supporto informatico.
Lo studio di un controllo esistente
Allo scopo di rendere chiaro il funzionamento di ASP.NET AJAX, abbiamo scelto di reimplementare utilizzando questa tecnologia un controllo che Microsoft utilizza nella maggior parte dei propri portali per evidenziare le caratteristiche salienti dei propri prodotti: si tratta di un controllo con vista a tab verticali, che permette di aprire un particolare tab in seguito alla sovrapposizione del puntatore all'etichetta dello stesso.
Poichè l'apertura di un tab non richiede alcun postback nè alcuna attesa evidente, se ne deduce che tale azione non effettua alcun caricamento dei contenuti visualizzati; anzi, questi ultimi sono sempre tutti presenti sul client ed il codice JavaScript che gestisce il controllo si limita a renderne visibile di volta in volta la sola porzione relativa al tab attivo. Infine, il controllo reagisce al mouseover con un piccolo ritardo, cosicchè la visualizzazione di un tab avviene solo se il puntatore rimane nell'area della sua etichetta per più di un certo periodo, stimato in circa 200 millisecondi.
Nel prosieguo questo articolo e il successivo documentano i passaggi richiesti per realizzare un clone di un controllo del tipo appena descritto.
Figura 1 - Il controllo da realizzare
Cercando di ottenere un riscontro visivo quanto più simile a quello del controllo Microsoft, una possibile struttura potrebbe dunque essere quella esposta in figura 2. Una volta definito un layout, che può essere anche frutto di uno studio di un blocco di markup HTML esistente, come nel nostro caso, è possibile iniziare a dare vita al controllo, creando una classe JavaScript che ne gestisca l'aspetto interattivo e si interfacci con gli elementi del DOM che lo compongono.
Figura 2 - Layout del controllo
Implementazione del controllo lato client
Analogamente alla controparte managed, alla base dei controlli client ASP.NET AJAX risiede una gerarchia di tipi, ciascuno dei quali viene impiegato per scopi specifici.
Le classi che derivano da Sys.UI.Control in genere rappresentano un particolare elemento del modello ad oggetti del documento client (DOM), apportando in genere a quest'ultimo nuove funzionalità; uno tra gli esempi più evidenti di questa categoria è il controllo Timer, di cui viene effettuato il rendering mediante un elemento HTML span, ma che chiaramente da tale elemento si discosta molto in termini di funzionalità.
L'obiettivo delle classi derivate da Sys.UI.Behavior, invece, è di estendere un elemento del DOM, senza però modificarne le finalità principali; ad un singolo elemento DOM possono essere applicati, tra l'altro, più behavior distinti: caratteristica che consente l'aggiunta di funzionalità completamente diverse ad un singolo elemento. È possibile, ad esempio, applicare i behavior ConfirmButton ed HoverMenu, entrambi presenti in Ajax Control Toolkit, ad uno stesso pulsante; a tutti gli effetti la maggior parte dei componenti di Ajax Control Toolkit sono dei behavior.
Figura 3 - Architettura lato client
Come si evince facilmente dalla figura che ne illustra l'architettura, sia Sys.UI.Control che Sys.UI.Behavior derivano da Sys.Component, classe che, ricalcando l'obiettivo del tipo managed System.ComponentModel.Component, incapsula tra l'altro la logica di inizializzazione e cleanup dei componenti. Il tipo Sys.Component implementa infatti le interfacce Sys.IDisposable e Sys.INotifyDisposing, utilizzate rispettivamente per consentire agli oggetti di effettuare il cleanup e per consentire l'eventuale notifica dell'inizio di questa attività, scatenando l'evento disposing.
3 pagine in totale: <<Indietro 1 [2] 3 Avanti >>
Attenzione: Questo articolo contiene un allegato
Contenuti dell'articolo
Per inserire un commento, devi registrarti alla nostra community.
Difficoltà
Contenuti
Stampa 
Download
