Il codice

Passiamo ora alla parte "operativa" dell'articolo, mostrando e commentando il codice necessario al funzionamento della galleria di immagini.

Al caricamento della pagina, più precisamente nell'event-handler dell'evento Load, va inserito il seguente codice:

 
Protected Sub Page_Load(ByVal sender As Object, _ 
  ByVal e As System.EventArgs) Handles Me.Load 
 
  Dim numFiles As Integer 
 
  If Not IsPostBack Then 
    ' Inizializza il contatore delle immagini 
    lblContatore.Text = "1" 
    ' Recupera il numero di immagini 
    numFiles = System.IO.Directory.GetFiles( _ 
      Server.MapPath(CARTELLA_CONTENITORE), "*.jpg").Length 
    ' Salva il dato nella Label 
    lblNumFiles.Text = numFiles.ToString() 
    ' Inizializza l'intervallo di Tick 
    Timer1.Interval = 3000 
    ' Visualizza la prima immagine 
    ImageContainer.ImageUrl = CARTELLA_CONTENITORE & "1.jpg" 
  End If 
 
End Sub 

Questo codice viene eseguito solo se non ci troviamo nel caso di un postback, in quanto esso rappresenta l'inizializzazione delle Label e deve essere eseguito una sola volta. Il valore del contatore viene impostato a uno (lblContatore.Text = "1"), mentre nella Label lblNumFiles viene inserito il numero di file JPG presenti nella cartella contenente le immagini da mostrare (lblNumFiles.Text = numFiles.ToString()).

Il contatore delle visualizzazioni viene incrementato di una unità ogni volta che viene visualizzata un'immagine, cioè ad ogni evento Tick del controllo Timer. Il suo fondamentale supporto sta nel fatto che il suo valore progressivo indica di volta in volta il file da caricare sulla base del fatto che tutti i file JPG che risiedono nella cartella contenitore dovranno essere nominati con numeri interi progressivi a partire da 1 (vedi figura 5, dove la cartella contenitore è quella denominata "SIGEP").

La necessità di dare ai file delle immagini un nome composto da un numero e di nominarli secondo una sequenza di numeri naturali consecutivi deriva dal fatto che il contatore, con cui si conta la sequenza delle immagini, parte da 1 alla prima immagine e via via viene incrementato di una unità; ci troviamo pertanto di fronte alla semplicissima situazione che, avendo nominato i file JPG con numeri progressivi da 1 a n, ad ogni nuovo ciclo il valore contenuto in lblContatore è proprio il nome del file successivo da caricare.

Quanto appena detto apparirà più chiaro passando ad analizzare il secondo ed ultimo blocco di codice che va inserito nell'event-handler dell'evento Tick del controllo Timer.

 
Protected Sub Timer1_Tick(ByVal sender As Object, _ 
  ByVal e As System.EventArgs) Handles Timer1.Tick 
 
  Dim contatore As Integer = CInt(lblContatore.Text) 
  Dim numFiles As Integer = CInt(lblNumFiles.Text) 
 
  ' Riazzera il contatore, se questo è divenuto uguale al numero dei file 
  '  da visualizzare, così ricomincia dalla prima immagine 
  If contatore >= numFiles Then 
  contatore = 0 
  End If 
 
  contatore = contatore + 1 
  lblContatore.Text = contatore.ToString() 
  ImageCOntainer.ImageUrl = CARTELLA_CONTENITORE &  _ 
    lblContatore.Text & ".jpg" 
 
End Sub 

Questo blocco di codice controlla che non siamo giunti alla visualizzazione dell'ultimo file (quello con il numero progressivo più alto), confrontando il valore del numero delle immagini contenuto in lblNumFiles.Text con il numero del contatore contenuto in lblContatore.Text. Se il contatore è arrivato alla fine, cioè è uguale al numero di file presenti nella cartella, allora il contatore viene azzerato per far ripartire la sequenza dall'inizio.

Il codice nell'event-handler aggiorna quindi il valore del contatore incrementandolo di una unità e passa al controllo Image (ImageCOntainer) il percorso della nuova immagine da visualizzare che, come si può osservare, viene di volta in volta assemblato in modo dinamico come stringa. Il nome del file dell'immagine è dato dal contenuto della Label lblContatore (che, come abbiamo detto, contiene un numero da 1 ad n, di volta in volta incrementato) e dalla sua estensione ".jpg".

Esaminando il codice possiamo notare che l'estensione dei file viene passata in modo statico: ".jpg" è infatti una stringa concatenata al percorso della cartella contenitore ed al nome del file. In tal caso dunque questa modalità rende obbligatorio che i file nella galleria dinamica abbiano tutti la stessa estensione. Ulteriori considerazioni in merito al formato dei file sono riportate nelle conclusioni.

Con la creazione di questo blocco di codice all'interno dell'event-handler dell'evento Tick del controllo Timer il modulo di visualizzazione immagini in sequenza è completo.

Conclusioni

La scelta di questa soluzione deriva dalla necessità di creare qualcosa di accattivante che, come abbiamo già avuto modo di dire, spesso può essere realizzato grazie all'ausilio di tecniche di programmazione client-side o con tecniche basate sulla tecnologia Macromedia Flash o affini. Il programmatore con scarsa esperienza o competenze limitate alla tecnologia server-side viene spesso frustrato dal dover usare strumenti che non sente propri. Nel caso della galleria fotografica discussa nell'articolo, il ricorso ad AJAX permette di semplificare l'interazione client-server senza la necessità di dover ricaricare in toto la pagina ad ogni cambio di immagine.

Una critica che può essere immediatamente mossa è relativa alla rigidità della soluzione proposta per ciò che attiene alla tipologia di immagini che devono essere obbligatoriamente tutte dello stesso tipo. Se si ha la necessità di visualizzare immagini di tipo diverso (JPG, GIF. PNG, ecc.) è necessario popolare un array contenente i nomi completi dei file presenti nella cartella contenitore e puntare alla posizione ennesima dell'array per prelevare il nome completo dell'immagine da visualizzare sulla pagina.

Si lascia al lettore la possibilità di intraprendere uno studio rivolto magari a creare una funzione per l'avvio e lo stop della galleria. In questo caso il problema da affrontare riguarda lo stop del Timer, che in prima approssimazione e grossolanamente potrebbe essere gestito con una variabile booleana di controllo che lasci o meno eseguire le istruzioni ad ogni evento di Tick.

Si ricorda infine che i due controlli Label destinati a contenere il numero di file ed il contatore delle immagini visualizzate possono essere sfruttati per mostrare al navigatore le due informazioni: numero di immagini della galleria e numero di immagine in corso di visualizzazione.

Note dell'autore

La soluzione proposta nell'articolo è stata realizzata con Visual Web Developer ed è attualmente in uso presso il sito paneitaliano.it.

Voglio ringraziare lo staff di ASPItalia.com per la pubblicazione del mio articolo e lo staff di paneitaliano.it per il continuo stimolo e sostegno nella ricerca di nuove soluzioni al servizio degli utenti del sito.

Attenzione: Questo articolo contiene un allegato

Contenuti dell'articolo

• Pagina 1
  • Il layout della galleria fotografica
  • Prerequisiti
  • I controlli di base
• Pagina 2
  • I controlli aggiuntivi
• Pagina 3
  • Il codice
  • Conclusioni
  • Note dell'autore

• Nuova build per ASP.NET MVC: Preview 5
• Rilasciata la CTP Preview di ASP.NET 3.5 Extensions
• Cosa c'è in ASP.NET 3.5 Service Pack1
• StringValidatorAttribute ConfigurationProperty e DefaultValue
• #934 - Accedere ai dati usando LinqDataSource
• #952 - Utilizzare le funzionalità di unione dei Javascript di ASP.NET 3.5 SP 1
• Ufficiali Visual Studio 2010 e .NET Framework 4.0
• #962 - Template a gruppi per il controllo ListView
• I tanti modi di scrivere con Linq
• Il DataSet nel web è il male
• Disponibile la ASP.NET 3.5 Extensions CTP Preview
• Il modo più facile per far andare ASP.NET 3.5 sul vostro server

Aggiungi un nuovo commento »»»
Per inserire un commento, devi registrarti alla nostra community.