Ci ho messo un po' a decidere come intitolare questo post, e alla fine ho optato per questo titolo alla Wertmuller perchè mi sembra che il succo del post che sto scrivendo sia proprio questo: imparare ad organizzare per bene il codice di scripting che come ho già detto più volte ha la spiacevole abitudine di infestare le pagine.
L'idea che vorrei presentare mi è venuta lavorando con la Microsoft AJAX Library, e in breve è diventata il mio modo standard di approcciare lo sviluppo in Javascript su pagine HTML perchè mi consente di lavorare con una sorta di codebehind in cui ragruppo tutto il codice di scripting. La base per poter raggiungere questo scopo è una classina che mi sono scritto in -Javascript:
Type.registerNamespace('Elite');
Elite.Page = function()
{
this.onload$delegate = Function.createDelegate(
this,
function(eventData)
{ this.load(); });
this.onunload$delegate = Function.createDelegate(
this,
function(eventData)
{ this.unload(); });
window.onload = this.onload$delegate;
window.onunload = this.onunload$delegate;
Elite.Page.initializeBase(this, [window]);
}
Elite.Page.prototype =
{
initialize : function()
{
Elite.Page.callBaseMethod(this, 'initialize');
},
load : function()
{ },
unload : function()
{ },
dispose : function()
{
if (this.onload$delegate) delete this.onload$delegate;
if (this.onunload$delegate) delete this.onunload$delegate;
Elite.Page.callBaseMethod(this, 'dispose');
}
}
}
Elite.Page.registerClass('Elite.Page', Sys.UI.Control);
La classe che ho realizzato dovrà essere utilizzata come base per la classe che rappresenta la pagina. Al suo interno infatti sono stati realizzati una serie di metodi stub che ricalcano il funzionamento normale di una pagina asp.net. Troviamo ad esempio il metodo load() che viene collegato automaticamente all'evento window.onload enaturalmente anche la controparte unload().
Ecco come procedere se si vuole utilizzare questa tecnica in una propria pagina che poniamo si chiami dashboard.aspx:
1) create un file Javascript denominato dashboard.aspx.js. questo consente di tenere i file a scelta in una stessa cartella e reperirli facilmente oppure affiancarli alla pagina e vederli nel solution explorer accanto al codebehind. Al termine dello sviluppo se fate uso del Web Application Project potreste convertire tutti gli script in risorse embedded e caricali con webresource.axd.
2) includere il file javascript contenente la classe Elite.Page (ad esempio page.js). Dato che è obblgatorio fare uso della Microsoft AJAX Library è opportuno mettere la referenza all'interno dello ScriptManager che vi ricordo essere il luogo di elezione per qualsivoglia script.
3) nel file dashboard.asp.js creare una classe che rappresenti la pagina e erediti dalla classe Elite.Page. Ecco un esempio:
Type.registerNamespace('MyApplication');
MyApplication.DashboardPage = function()
{
MyApplication.DashboardPage.initializeBase(this, [window]);
}
MyApplication.DashboardPage.prototype =
{
load : function()
{
this.bSave = $get('bSave');
MyApplication.DashboardPage.callBaseMethod(this, 'load');
}
};
MyApplication.DashboardPage.registerClass('MyApplication.DashboardPage', Elite.Page);
La particolarità di questa classe è di "registrare" il controllo bSave usando $get(). L'evento load() è il posto migliore per questo genere di attività dato che vi si arriva subito dopo che il download e il rendering della pagina è stato effettuato.
4) Inserire mediante ScritpManager.RegisterStartupScript() il codice che istanzia la classe:
var currentPage = $create(MyApplication.DashboardPage, {}, {}, null, null);
Questa chiamata in particolare istanzierà la classe e inizierà il ciclo di vita invocando il metodo initialize. Poi non appena caricata la pagina sarà invocato il metodo load() e di conseguenza la referenza verrà valorizzata con il controllo bSave. Naturalmente a questo punto sarà opportuno agganciare via script gli eventi dei controlli. Vi ricordo che per fare questo è necessario l'uso di Function.createDelegate() che come ho già spiegato tempo fa consente di mantenere il contesto di partenza e quindi di rimanere all'interno della classe.
Rimane solo un problema. Sappiamo tutti che i controlli di ASP.NET hanno un id generato a runtime che può essere semplice o composto. Per questo vi sarà necessario passare come argomenti della classe gli id estratti dai ClientID. In realtà ho un'altra idea in incubazione ma... questo sarà l'argomento di uno dei prossimi post.