Esempio: Orologio analogico semplice -- Flash CS3

L'esempio di un orologio analogico semplice illustra due dei concetti relativi a data e ora discussi in questo capitolo:

Per ottenere i file dell'applicazione per questo esempio, accedere all'indirizzo www.adobe.com/go/learn_programmingAS3samples_flash_it. I file dell'applicazione SimpleClock si trovano nella cartella Samples/SimpleClock. L'applicazione è costituita dai seguenti file:

File	Descrizione
SimpleClockApp.mxml o SimpleClockApp.fla	Il file principale dell'applicazione in Flash (FLA) o Flex (MXML)
com/example/programmingas3/simpleclock/SimpleClock.as	File dell'applicazione principale.
com/example/programmingas3/simpleclock/AnalogClockFace.as	Consente di disegnare il quadrante di un orologio con lancette per ore, minuti e secondi.

Sezioni

Definizione della classe SimpleClock

L'esempio dell'orologio è molto semplice, tuttavia risulta molto efficace organizzare bene anche applicazioni banali, in modo da poterle espandere senza difficoltà in futuro. A tale scopo, l'applicazione SimpleClock impiega la classe SimpleClock per gestire attività di avvio e gestione del tempo e un'altra classe chiamata AnalogClockFace per visualizzare l'ora.

Il codice seguente consente di definire e inizializzare la classe SimpleClock (si noti che, nella versione Flash, SimpleClock estende invece la classe Sprite):

public class SimpleClock extends UIComponent
{
    /**
     * Componente per la visualizzazione dell'ora.
     */
    private var face:AnalogClockFace;
    
    /**
     * Timer che scandisce il tempo dell'applicazione.
     */
    private var ticker:Timer;

La classe SimpleClock impiega una funzione di costruzione predefinita. Il metodo initClock() si occupa del lavoro di impostazione vero e proprio, in quanto crea il quadrante dell'orologio e avvia il conteggio dell'istanza Timer.

Creazione del quadrante dell'orologio

Nelle righe di codice SimpleClock seguenti viene creato il quadrante dell'orologio utilizzato per visualizzare l'ora:

    /**
     * Imposta un'istanza SimpleClock.
     */
    public function initClock(faceSize:Number = 200) 
    {
        // Crea il quadrante dell'orologio e lo aggiunge all'elenco di visualizzazione
        face = new AnalogClockFace(Math.max(20, faceSize));
        face.init();
        addChild(face);
        
        // Disegna la visualizzazione iniziale dell'orologio
        face.draw();

Le dimensioni del quadrante possono essere trasmesse al metodo initClock(). Se non viene trasmesso alcun valore faceSize, viene utilizzata la dimensione predefinita di 200 pixel.

Quindi, l'applicazione inizializza il quadrante e lo aggiunge all'elenco di visualizzazione utilizzando il metodo addChild() ereditato dalla classe DisplayObject. Successivamente, viene chiamato il metodo AnalogClockFace.draw() per visualizzare una volta il quadrante e l'ora corrente.

Avvio del timer

Dopo aver creato il quadrante dell'orologio, il metodo initClock() imposta un timer:

        // Crea un Timer che attiva un evento al secondo
        ticker = new Timer(1000); 
    
        // Designa il metodo onTick() per la gestione degli eventi Timer
        ticker.addEventListener(TimerEvent.TIMER, onTick);

        // Avvia il conteggio dell'orologio
        ticker.start();

Per prima cosa viene creata un'istanza di Timer che invia un evento una volta al secondo (ogni 1000 millesimi di secondo). Poiché alla funzione di costruzione Timer() non viene trasmesso nessun secondo parametro repeatCount, il Timer continuerà a ripetere l'operazione all'infinito.

Il metodo SimpleClock.onTick() verrà eseguito una volta al secondo quando viene ricevuto l'evento timer:

    public function onTick(event:TimerEvent):void 
    {
        // Aggiorna la visualizzazione dell'orologio
        face.draw();
    }

Il metodo AnalogClockFace.draw() disegna semplicemente il quadrante e le lancette dell'orologio.

Visualizzazione dell'ora corrente

La maggior parte del codice della classe AnalogClockFace consente di impostare gli elementi visivi dell'orologio. Quando il metodo AnalogClockFace viene inizializzato, viene disegnata una forma circolare con un'etichetta di testo numerica in corrispondenza di ogni ora, quindi vengono creati tre oggetti Shape, uno per ogni lancetta, quella delle ore, dei minuti e dei secondi.

Una volta eseguita, l'applicazione SimpleClock chiama il metodo AnalogClockFace.draw() ogni secondo, come indicato di seguito:

    /**
     * Chiamato dal contenitore principale quando il quadrante viene disegnato.
     */
    public override function draw():void
    {
        // Memorizza la data e l'ora corrente in una variabile di istanza
        currentTime = new Date();
        showTime(currentTime);
    }

Questo metodo consente di salvare l'ora corrente in una variabile, di modo che l'ora non venga modificata nella fase di disegno delle lancette. Quindi viene chiamato il metodo showTime() per visualizzare le lancette, come riportato di seguito:

    /**
     * Visualizza data e ora nell'orologio analogico.
     */
    public function showTime(time:Date):void 
    {
        // Determina i valori di ora
        var seconds:uint = time.getSeconds();
        var minutes:uint = time.getMinutes();
        var hours:uint = time.getHours();

        // Moltiplica per 6 per determinare i gradi
        this.secondHand.rotation = 180 + (seconds * 6);
        this.minuteHand.rotation = 180 + (minutes * 6);

        // Moltiplica per 30 per determinare i gradi base, quindi
        // aggiungi 29,5 gradi (59 * 0,5)
        // per calcolare i minuti.
        this.hourHand.rotation = 180 + (hours * 30) + (minutes * 0.5);
    }

In primo luogo, questo metodo consente di estrarre i valori di ore, minuti e secondi dell'ora corrente. Quindi impiega questi valori per calcolare l'angolo di ogni lancetta. Poiché la lancetta dei secondi effettua una rotazione completa in 60 secondi, essa ruota di 6 gradi al secondo (360/60). La lancetta dei minuti effettua la stessa rotazione ogni minuto.

Anche la lancetta delle ore viene aggiornata ogni minuto, in modo che avanzi di un grado con trascorrere dei minuti. Essa ruota di 30 gradi ogni ora (360/12), ma anche di mezzo grado ogni minuto (30 gradi diviso 60 minuti).