Przykład z datą i godziną: prosty zegar analogowy

Przykład z zegarem jest prosty, ale dobrą praktyką jest nadawanie właściwej struktury nawet prostym aplikacjom, co ułatwi ich przyszłą rozbudowę. Dlatego w aplikacji SimpleClock zastosowano klasę SimpleClock realizującą zadania przygotowawcze i rejestrującą czas, a także drugą klasę o nazwie AnalogClockFace, która faktycznie rysuje zegar.

Oto kod definiujący i inicjujący klasę SimpleClock (należy zwrócić uwagę, że w wersji dla środowiska Flash SimpleClock rozszerza klasę Sprite class):

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;

Klasa ma dwie ważne właściwości:

• Właściwość face , która jest instancją klasy AnalogClockFace.

• Właściwość ticker , która jest instancją klasy Timer.

  W klasie SimpleClock zastosowano domyślny konstruktor. Metoda initClock() realizuje czynności przygotowawcze, tworząc tarczę zegarową i uruchamiając odmierzanie czasu w instancji Timer.

Następne wiersze w kodzie aplikacji SimpleClock tworzą tarczę zegarową służącą do wyświetlania czasu:

    /** 
     * 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();

Rozmiar tarczy można przekazać do metody initClock() . Jeśli nie zostanie przekazana żadna wartość faceSize , przyjmowany jest domyślny rozmiar 200 pikseli.

Następnie aplikacja inicjuje tarczę i dodaje ją do listy wyświetlania za pomocą metody addChild() odziedziczonej z klasy DisplayObjectContainer. Teraz wywoływana jest metoda AnalogClockFace.draw() w celu jednokrotnego narysowania tarczy z bieżącą godziną.

Po utworzeniu licznika czasu metoda initClock() przygotowuje licznik czasu:

        // 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();

Najpierw metoda tworzy instancję klasy Timer, która będzie wywoływała zdarzenie raz na sekundę (co 1000 milisekund). Ponieważ pominięto drugi parametr, repeatCount , w wywołaniu konstruktora Timer() , licznik czasu będzie działał w nieskończoność.

Metoda SimpleClock.onTick() będzie wykonywana raz na sekundę, każdorazowo po wywołaniu zdarzenia timer :

    public function onTick(event:TimerEvent):void  
    { 
        // updates the clock display 
        face.draw(); 
    }

Metoda AnalogClockFace.draw() po prostu rysuje tarczę i wskazówki zegara.

Większość kodu w klasie AnalogClockFace class ma za zadanie przygotowanie wyświetlanych elementów tarczy zegara. Podczas inicjowania klasy AnalogClockFace rysowany jest okrąg, etykiety tekstowe na znacznikach godzin oraz trzy obiekty Shape reprezentujące wskazówki godzin, minut i sekund.

Po uruchomieniu aplikacja SimpleClock co sekundę wywołuje metodę AnalogClockFace.draw() :

    /** 
     * 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); 
    }

Metoda ta zapisuje bieżący czas w zmiennej, przez co czas nie może zmienić się w trakcie rysowania wskazówek. Następnie wywołuje metodę showTime() w celu wyświetlenia wskazówek, co zilustrowano poniżej:

    /** 
     * 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); 
    }

Metoda ta najpierw wyodrębnia wartości godzin, minut i sekund z bieżącego czasu. Następnie na podstawie tych wartości oblicza kąty poszczególnych wskazówek. Ponieważ wskazówka sekund wykonuje pełny obrót w ciągu 60 sekund, obraca się o 6 stopni w każdej sekundzie (360/60). Wskazówka minut obraca się o taki sam kąt co minutę.

Położenie wskazówki godzin jest aktualizowane co minutę, tak aby odzwierciedlić upływ minut. Wskazówka godzin obraca się o 30 stopni co godzinę (360/12), ale także o pół stopnia co minutę (30 stopni podzielone na 60 minut).