Voorbeeld van datum en tijd: eenvoudige analoge klok

Het klokvoorbeeld is eenvoudig, maar het is een goed idee om zelfs eenvoudige toepassingen goed in te delen zodat u deze later eenvoudig kunt uitbreiden. Daarom gebruikt de toepassing SimpleClock de klasse SimpleClock om taken voor het opstarten en het bijhouden van de tijd te verwerken en de klasse AnalogClockFace voor het weergeven van de tijd.

Hier volgt de code waarmee de klasse SimpleClock wordt gedefinieerd en geïnitialiseerd (in de Flash-versie breidt SimpleClock de klasse Sprite uit):

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;

De klasse heeft twee belangrijke eigenschappen:

• De eigenschap face, een instantie van de klasse AnalogClockFace

• De eigenschap ticker, een instantie van de klasse Timer

  De klasse SimpleClock gebruikt een eenvoudige standaardconstructor. Met de methode initClock() wordt de wijzerplaat gemaakt en wordt de instantie Timer gestart.

Met de volgende regels in de code van SimpleClock wordt de wijzerplaat gemaakt die wordt gebruikt om de tijd weer te geven:

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

De grootte van de wijzerplaat kan worden doorgegeven in de methode initClock(). Als er geen waarde voor faceSize wordt doorgegeven, wordt een standaardgrootte van 200 pixels gebruikt.

De wijzerplaat wordt vervolgens door de toepassing geïnitialiseerd en toegevoegd aan het weergaveoverzicht met de methode addChild(), die is overgenomen van de klasse DisplayObjectContainer. Vervolgens wordt de methode AnalogClockFace.draw() aangeroepen om de klok één keer met de huidige tijd weer te geven.

Wanneer de wijzerplaat is gemaakt, stelt de methode initClock() een timer in:

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

Eerst wordt met deze methode een instantie Timer gemaakt die één keer per seconde een gebeurtenis verzendt (elke 1000 milliseconden). Aangezien er geen tweede parameter repeatCount is doorgegeven aan de constructor Timer(), wordt de timer doorlopend herhaald.

De methode SimpleClock.onTick() wordt één keer per seconde uitgevoerd wanneer de gebeurtenis timer wordt ontvangen:

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

Met de methode AnalogClockFace.draw() worden alleen de wijzerplaat en de wijzers getekend.

De meeste code in de klasse AnalogClockFace heeft betrekking op het instellen van de weergave-elementen van de klok. Wanneer de AnalogClockFace wordt geïnitialiseerd, wordt er een cirkelomtrek getekend, wordt er een numerieke tekstlabel op elke uurmarkering opgenomen en worden er drie objecten Shape gemaakt: één voor de uurwijzer, één voor de minuutwijzer en één voor de secondewijzer op de klok.

Wanneer de toepassing SimpleClock wordt uitgevoerd, wordt elke seconde de methode AnalogClockFace.draw() aangeroepen, op de volgende manier:

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

Met deze methode wordt de huidige tijd in een variabele opgeslagen zodat de tijd niet kan worden gewijzigd terwijl de wijzers van de klok worden getekend. Vervolgens wordt de methode showTime() aangeroepen om de wijzers weer te geven, zoals hieronder wordt aangegeven:

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

Met deze methode worden eerst de waarden voor de uren, minuten en seconden van de huidige tijd geëxtraheerd. Vervolgens worden deze waarden gebruikt om de hoek voor elke wijzer te berekenen. Aangezien de secondewijzer in 60 seconden volledig rond gaat, wordt deze elke seconde zes graden verplaatst (360/60). De minuutwijzer draait elke minuut dezelfde hoeveelheid.

De uurwijzer wordt elke minuut bijgewerkt. Deze wordt elk uur 30 graden (360/12) gedraaid en dus elke minuut een halve graad (30 graden gedeeld door 60 minuten).