Esempio di data e ora: un semplice orologio analogico

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 di nome AnalogClockFace per visualizzare l'ora.

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

public class SimpleClock extends UIComponent 
{ 
    /** 
     * The time display component. 
     */ 
    private var face:AnalogClockFace; 
     
    /** 
     * The Timer that acts like a heartbeat for the application. 
     */ 
    private var ticker:Timer;

La classe presenta due importanti proprietà:

• La proprietà face , che è un'istanza della classe AnalogClockFace

• La proprietà ticker , che è un'istanza della classe Timer

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

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

    /** 
     * Sets up a SimpleClock instance. 
     */ 
    public function initClock(faceSize:Number = 200)  
    { 
        // creates the clock face and adds it to the display list 
        face = new AnalogClockFace(Math.max(20, faceSize)); 
        face.init(); 
        addChild(face); 
         
        // draws the initial clock display 
        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 DisplayObjectContainer. Successivamente, viene chiamato il metodo AnalogClockFace.draw() per visualizzare una volta il quadrante e l'ora corrente.

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

        // creates a Timer that fires an event once per second 
        ticker = new Timer(1000);  
     
        // designates the onTick() method to handle Timer events 
        ticker.addEventListener(TimerEvent.TIMER, onTick); 
 
        // starts the clock ticking 
        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  
    { 
        // updates the clock display 
        face.draw(); 
    }

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

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:

    /** 
     * Called by the parent container when the display is being drawn. 
     */ 
    public override function draw():void 
    { 
        // stores the current date and time in an instance variable 
        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:

    /** 
     * Displays the given Date/Time in that good old analog clock style. 
     */ 
    public function showTime(time:Date):void  
    { 
        // gets the time values 
        var seconds:uint = time.getSeconds(); 
        var minutes:uint = time.getMinutes(); 
        var hours:uint = time.getHours(); 
 
        // multiplies by 6 to get degrees 
        this.secondHand.rotation = 180 + (seconds * 6); 
        this.minuteHand.rotation = 180 + (minutes * 6); 
 
        // Multiply by 30 to get basic degrees, then 
        // add up to 29.5 degrees (59 * 0.5) 
        // to account for the minutes. 
        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 il trascorrere dei minuti. Essa ruota di 30 gradi ogni ora (360/12), ma anche di mezzo grado ogni minuto (30 gradi diviso 60 minuti).