Framework Ajax: ComfortASP.NET

Una libreria poco intrusiva per aggiornare o scrivere rapidamente applicazioni “Web 2.0”

In un precedente articolo abbiamo già presentato ComfortAsp. In particolare abbiamo osservato che questa libreria si annovera tra quelle utili ad introdurre funzionalità di tipo Ajax in applicazioni Web già sviluppate.

David Zeiss, lo sviluppatore di ComfortAsp ha definito la sua soluzione “non intrusiva”. A differenza di altre librerie come Ajax.NET o di Anthem.NET, infatti, permette di implementare le funzionalità tipiche di Ajax nelle proprie applicazioni senza scrivere troppo codice, quindi senza modificarle troppo.

In questo articolo cercheremo di comprenderne il funzionamento esaminando alcuni esempi, ciascuno dei quali dedicato ad un componente della libreria, e approfondendo, quando è necessario, i punti essenziali.

Quasi tutti gli esempi che faremo nel corso dell’articolo si possono ritrovare nell’archivio allegato.

Installazione

La procedura di installazione è analoga a quella di qualsiasi altro componente nella piattaforma ASP.NET

Scaricare le libreria

Scarichiamo la libreria dal sito web ne estraiamo i file sul desktop.

Nota: la dll viene fornita in quattro versioni: demo (per .NET 1.1 e .NET 2) e DLL per la produzione (per .NET 1.1 e .NET 2), le due versioni sono identiche ma la Demo presenta nella finestra un link alla Home Page e la ComfortAsp_TransferBar)

Creare riferimenti nel progetto

Creiamo un nuovo sito web su Visual Studio o VWD (File>Nuovo Sito Web) e in “Esplora soluzioni” e aggiungiamo un riferimento (tasto destro sul progetto). Quindi selezioniamo dalla tab “Sfoglia” la dll di ComfortAsp. La libreria sarà copiata nella cartella Bin del progetto.

Aggiungere i controlli nella casella degli strumenti

Clicchiamo col tasto destro nella “Casella degli strumenti” per aggiungere una nuova scheda (“Aggiungi scheda”) che chiamiamo “ComfortASP.NET”, poi clicchiamo col destro sulla scheda appena creata e selezioniamo “Scegli elementi”. Usiamo il pulsante “Sfoglia” per aprire il file “ComfortASP.dll” dalla cartella Bin.

Figura 1. I controlli aggiunti I controlli aggiunti

Nota: è necessario aggiungere l’HttpHandler nel web.config

<configuration>
<system.web>
…
<httpHandlers>
  <add verb=”POST,GET” path=”NomePAgina.aspx” type=”ComfortASP.HttpHandlerFactory, ComfortASP” />
</httpHandlers>
…
<system.web>
<configuration>

Primo esempio

Qualsiasi componente di ComfortAsp che inseriamo nella WebForm deve essere accompagnato dal ComfortASP_Manager. Prima di esaminarne le proprietà essenziali cerchiamo di intuirne il funzionamento con un esempio: vogliamo ottenere il caricamento di un’immagine (a caso) con la pressione di un bottone.

Iniziamo portando sulla Web Form un controllo ComfortASP_Manager, un controllo Image ed un bottone.

Listato 1. Immagine casuale: Web Form

…
<form id=”form1″ runat=”server”>
<div>
  <asp:Image ID=”Image1″ runat=”server” />
  <asp:Button ID=”Button1″ runat=”server” Text=”Button” OnClick=”Button1_Click” />
  <cc1:ComfortASP_Manager ID=”ComfortASP_Manager1″ runat=”server”></cc1:ComfortASP_Manager>
</div>
</form>
…

Nel codice sottostante ereditiamo la pagina dalla classe ComfortASP_Page (che a sua volta eredita da Page) e nella Page_Load impostiamo HiddenFormPostBack = true che permette alla libreria di intercettare il postback della pagina in modo del tutto invisibile al programmatore.

Listato 2. Immagine casuale: Code behind

// La classe ComfortASP_Page eredita dalla superclasse Page
public partial class primo_esempio : ComfortASP.ComfortASP_Page
{
  protected void Page_Load(object sender, EventArgs e)
  {
    this.HiddenFormPostBack = true;
  }

  protected void Button1_Click(object sender, EventArgs e)
  {
    // assegna una immagine “random”
    Image1.ImageUrl = “~/img/img”+ (new Random()).Next(1,3).ToString()+”.gif”;
  }
}

L’effetto finale è quello di una interazione che modifica l’immagine senza ricaricare la pagina.

Nota: impostando la proprietà HiddenFormPostBack è possibile disabilitare o abilitare le funzionalità Ajax della pagina

Proprietà essenziali di ComfortASP_Manager

Generali
AJAXBrowsersMinVersion È la lista dei browser supportati; qualora questa proprietà sia lasciata vuota la proprietà HiddenFormPostBack è disabilitata
AutoFocusEventTarget Imposta il Focus su un elemento selezionato; nota che, se stai lavorando con ASP.NET 2 la proprietà SetFocus() di molti controlli svolge la medesima funzionalità!
DoAsyncPostBack Questa proprietà impostata su True fa si che il Postback venga innescato nel momento in cui avviene l’evento: ovviamente la pagina non viene ricaricata ma i dati non sono aggiornati subito lasciando il browser bloccato
HiddenRequestTimeout Qualora la risposta dal Server tardi ad arrivare è possibile impostare un timeout in secondi: allo scadere un alert chiede se volete annullare o inviare ancora la richiesta
HiddenRequestTimeoutText Il testo da impostare per l’alert della proprietà HiddenRequestTimeout al posto di quello predefinito

<cc1:ComfortASP_Manager ID=”ComfortASP_Manager1″ runat=”server”
  CustomLoadIconPath=”img/smile.jpg”
  HiddenRequestTimeout=’5′
  HiddenRequestTimeoutText=’Il Server è occupato!Prova ancora’>
</cc1:ComfortASP_Manager>

IEMemoryLeakWorkaround IE almeno sino alla versione 6, soffre di un poco noto bug che causa un notevole consumo di memoria e che viene innescato qualora nella medesima sessione di navigazione la medesima pagina venga ricaricata decine di volte; per prevenire tutto questo è necessario impostare la proprietà su True; in pagina ricche di controlli questa impostazione può creare però decadimenti di perfomances
LimitSessionUsageMB Se lo stato dell’applicazione è mantenuto InProc è possibile settare in megabytes la dimensione della sessione
PersistViewStateInSession In ASP.NET 1.1 impostando questa proprietà su True lo stato Viewstate viene memorizzato nelle Session; la versione 2 di .NET rende questa funzionalità disponibile nativamente attraverso la proprietà SessionPageStatePersister
Compressione dei dati inviati tra Server e Browser
HTTPCompression Impostando questa proprietà su True è possibile comprimere nel formato .gzip i dati scambiati tra Client e Server riducendo il volume del traffico tra client e server
CompressionLevel È possibile impostare il livello di compressione dei dati inviati attraverso un intero compreso tra 1 (valore che indica la massima velocità) e 9 (che indica la maggiore compressione)
Immagini
AutoPreloadEqualImages IE (almeno sino alla versione 6) ha la cattiva abitudine di caricare tutte le immagini uguali di una pagina singolarmente, anche se provengono dal medesimo URL; ComfortASP, attraverso questa proprietà, scopre tutte le immagini identiche e le pre-carica in maniera più razionale
PreloadImageList imposta un elenco di immagini predefinite che possono pre-caricate; questa funzionalità NON può essere impostata se la pagina viene configurata nel file web.config
Form
DisableFormWhilePostBack Quando il postback ‘invisibile’ tipico di Ajax è in corso può essere utile disabilitare temporaneamente ogni inserimento di dati da parte dell’utente
AutoSubmitOnReturn Una volta premuto il tasto Invio tipicamente la pagina viene pre-caricata ma esistono pagine nel quale è previsto un invio implicito; è necessario quindi disabilitare il tipico comportamento della libreria impostando la proprietà su False
JavaScript
DebugClientScripts È possibile impostare questa istruzione per effettuare il debugging di ogni script presente nella pagina; qualora lo script sia incluso (<script src=…/>) bisogna utilizzare DebugRefClientScripts
CachePageScripts Aggiorna in maniera trasparente al visitatore gli script della pagina
Progress Panel
ProgressPanelControlID È possibile legare ad un controllo della pagina questo ‘effetto speciale’ che crea una dissolvenza mentre nella pagina viene innescato un Hidden Postback

<asp:Image ID=”Image1″ runat=”server”
  ImageUrl=”~/img/img2.jpg”/>

<cc1:comfortasp_manager
  id=”ComfortASP_Manager1″ runat=”server”
  progresspanelcontrolid=”Image1″>
</cc1:comfortasp_manager>

Splash Bitmap
CustomLoadIconPath Quando la pagina si sta ricaricando lentamente viene visualizzata un’immagine per avvertire l’utente che qualcosa accade; per impostare l’URL dell’immagine è necessario utilizzare un percorso virtuale; è anche possibile programmare la posizione dell’immagine nella pagina

<cc1:ComfortASP_Manager ID=”ComfortASP_Manager1″ runat=”server”
    CustomLoadIconPath=”img/smile.jpg”
    HiddenRequestTimeout=”5″
    HiddenRequestTimeoutText=”Il Server è occupato!Prova ancora”>
</cc1:ComfortASP_Manager>

Visualizza tutte le proprietà

ComfortAsp_TransferBar

La versione demo di questa libreria presenta in alto a sinistra un link e la “Transfer bar”: una barretta colorata utile, in fase di test, per misurare il volume di dati trasmesso durante il Postback ed apprezzare la gestione delle transazioni di ComfortAsp.

Dati trasferiti
Dati compressi
Dati trasmessi da ComfortAsp

Uno strumento più accurato per questo genere di misure è Fiddler.

ComfortASP_PanelUpdater

Per impostazione predefinita il postback avviene aggiornando in maniera trasparente tutta la pagina; se volessimo aggiornare solo un’area della pagina, ovvero creare un “Update selettivo”, possiamo utilizzare il PanelUpdater collocandolo all’interno di un componente Panel di ASP.NET.

<cc1:ComfortASP_PanelUpdater ID=”ComfortASP_PanelUpdater1″ runat=”server”></cc1:ComfortASP_PanelUpdater>

Esaminiamo due attributi interessanti di questo controllo:

  • TimerIntervalUpdate permette l’impostazione di un periodo in millisecondi dopo il quale la pagina viene aggiornata
  • UpdateOnForeignTimer è una proprietà booleana che se impostata a true permette di aggiornare diversi Panel autonomamente

ComfortASP_TextBoxNameChange

Una delle funzionalità tipicamente implemenate con Ajax è quella della casella di testo con completamento automatico. ComfortAsp non offre questo controllo “di serie” ma si può costruire una funzionalità del genere utilizzando un componente che intercetta ogni inserimento testuale e lo rende programmabile; il “TexBoxNameChange” appunto.

<cc1:ComfortASP_ClientEventTextChange ID=”ComfortASP_ClientEventTextChange1″ runat=”server”></cc1:ComfortASP_ClientEventTextChange>

Le proprietà:

  • TextBoxID lega il controllo al relativo textbox
  • TextlenghtFirstEvent imposta il numero di caratteri che devono essere digitati prima che venga innescato l’evento TextChanged

Una volta scatenato l’evento possiamo gestirlo e popolare la lista.

protected void ComfortASP_TextBoxNameChange_TextChanged(object sender, EventArgs e)
{
  // Inserisci qui il codice per l’azione
}

Conclusioni

Nel codice in allegato si possono trovare alcuni esempi dei controlli menzionati nell’articolo ed un esempio GridView/DetailsView che implementa ComfortAsp pronto per essere studiato e ripreso. Altre caratteristiche rendono ComfortASP.NET una libreria di sicuro interesse, anche se alcuni problemi sono causati dalla versione non ancora stabilizzata.

I Video di HTML.it

Come applicare l’effetto vetro rotto ad un’immagine – parte 2

In questa seconda parte del video miglioreremo l’effetto “vetro rotto” applicato alla nostra immagine: per aumentare l’opacità del vetro e […]