Spesso in un'applicazione web per creare qualcosa di accattivante o qualcosa che possa soddisfare le peculiari esigenze del caso, bisogna ricorrere a "sotterfugi/escamotage" quali l'aggiunta di file SWF (Flash) o script lato client oppure ad altri moduli realizzati con linguaggi di programmazione diversi da quello correntemente in uso nell'applicazione di base. La conseguenza è quella di aggiungere ulteriore lavoro al fine di rendere compatibile il dialogo tra due o più elementi differenti tra loro (passaggio di variabili, serializzazione, gestione dello stato, ecc.), il che, per chi non è esperto, rende difficile la manipolazione del codice ed il relativo assemblaggio dei vari elementi disomogenei tra loro.

Una situazione simile la si riscontra di frequente nei casi in cui, per motivi puramente estetici (grafica accattivante), si rende necessario l'affiancamento di elementi grafici creati con Flash alle applicazioni create con tecnologie differenti (ASP, ASPX, ecc.). In questi casi spesso è necessario che l'elemento "ospite", modulo/filmato realizzato con Flash o con altri linquaggi di programmazione, debba dialogare con l'applicazione di base (trasferimento di dati e valori), pena l'impossibilità di utilizzo del diverso componente.

Grazie all'avvento di ASP.NET AJAX tutto ciò è ora un po' più semplice grazie al fatto che questa nuova tecnologia mette a disposizione del programmatore una serie di elementi e di strumenti che, oltre a migliorare il dialogo tra client e server grazie alla possibilità di operare postback asincroni (con un conseguente miglioramento della velocità di elaborazione dei dati), offre una serie di nuovi controlli che vanno a tutto vantaggio dell'effetto grafico, dando alla tecnologia server side quel tanto in più che occorre per spogliarla dell'ingombrante veste di tecnologia incapace di prestazioni grafico-visive all'altezza di tecnologie basate sull'elaborazione client side.

In quest'articolo affrontiamo l'argomento tramite un caso di utilizzo pratico di ASP.NET AJAX attraverso la realizzazione di una galleria fotografica dinamica. Nel corso dell'articolo avremo modo di dimostrare come sia possibile dare smalto e brillantezza alle pagine tipicamente server side con uno sforzo relativamente ridotto.

Il layout della galleria fotografica

La galleria fotografica si presenta all'utente finale come un box in cui le immagini scorrono in sequenza ad intervalli regolari come se si trattasse di un filmato. Le dimensioni del box contenitore possono essere regolate in funzione della dimensione standard delle immagini che vi scorrono, in modo da evitare spiacevoli effetti di sgranatura o perdita delle proporzioni dell'immagine che di volta in volta viene visualizzata. Si consiglia quindi di usare immagini omogenee tra di loro in termini di dimensioni. Occorre peraltro ricordare che il peso dei file influenza la velocità di caricamento delle immagini con un conseguente effetto sulla qualità del prodotto realizzato e offerto all'utente.

Il modulo di visualizzazione di immagini presentato nel'articolo è strutturato in modo che la visualizzazione in sequenza delle immagini parta in automatico al caricamento della pagina, senza lasciare all'utente finale alcuna incombenza per l'avvio della visualizzazione.

Prerequisiti

Per poter implementare il modulo di visualizzazione della galleria fotografica è necessario l'ausilio di AJAX, che per gli utenti che utilizzano la versione 2.0 del .NET Framework va installato a parte. Per l'installazione delle estensioni AJAX per ASP.NET 2.0 è possibile consultare direttamente il sito di ASP.NET.

Per chi invece utilizza la versione 3.5 del .NET Framework, non c'è alcun bisogno di ulteriori installazioni, dal momento che ASP.NET AJAX è già incluso in ASP.NET 3.5.

I controlli di base

Dopo esserci accertati di disporre degli strumenti necessari per implementare la galleria, possiamo procedere a costruire la pagina inserendo in essa i controlli necessari e creando nella cartella root del sito web in cui il modulo risiederà, la cartella destinata a contenere i file delle immagini che scorreranno nella galleria.

Per avviare la creazione della pagina destinata a contenere la galleria occorre eseguire i seguenti passi:

• creare una cartella destinata a contenere i file e alla quale si punterà per la visualizzazione in sequenza delle immagini in essa contenute. La collocazione fisica della cartella contenitore non è influenzata da alcun vincolo, pertanto la si può creare sia nella root principale, sia in sub-cartelle di quest'ultima. Allo stesso modo, anche il nome da dare alla cartella non è sottoposto ad alcun vincolo;
• creare una pagina ASPX destinata alla visualizzazione della galleria dinamica di immagini.

Nella pagina ASPX in questione aggiungiamo i seguenti controlli:

• un controllo ScriptManager;
• un controllo UpdatePanel;
• un controllo Timer (questo è il motore del sistema di visualizzazione);
• un controllo Image, il classico "contenitore" di immagini.

Procedura di creazione della pagina

Sfruttando il designer di Visual Studio, è possibile trascinare i vari controlli sulla pagina nell'ordine descritto di seguito.

Passo 1: selezionare il controllo ScriptManager e trascinarlo sulla pagina (figura 1).

Passo 2: selezionare il controllo UpdatePanel e trascinarlo nella pagina, posizionandolo al di sotto del controllo ScriptManager (figura 2).