Beispiel für Datum und Uhrzeit: Einfache Analoguhr

Dieses Beispiel ist relativ einfach. Es empfiehlt sich jedoch, auch einfache Anwendungen gut zu strukturieren, sodass sie zu einem späteren Zeitpunkt problemlos erweitert werden können. Zu diesem Zweck werden die Start- und Zeitmessungsaufgaben in der Anwendung „SimpleClock“ mit der SimpleClock-Klasse verarbeitet. Zum Anzeigen der Zeit wird eine weitere Klasse, die AnalogClockFace-Klasse, verwendet.

Mit dem folgenden Code wird die SimpleClock-Klasse definiert und initialisiert (beachten Sie, dass SimpleClock in der Flash-Version stattdessen die Sprite-Klasse erweitert):

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;

Die Klasse verfügt über zwei wichtige Eigenschaften:

• face-Eigenschaft (eine Instanz der AnalogClockFace-Klasse)

• ticker-Eigenschaft (eine Instanz der Timer-Klasse)

  Bei der SimpleClock-Klasse wird ein Standardkonstruktor verwendet. Mit der initClock()-Methode wird die Einrichtung vorgenommen, d. h. das Zifferblatt erstellt und die Timer-Instanz gestartet.

Mit den folgenden Zeilen des SimpleClock-Codes wird das Zifferblatt erstellt, mit dem die Zeit angezeigt wird:

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

Die Größe des Zifferblatts kann an die initClock()-Methode übergeben werden. Wenn kein Wert für faceSize angegeben ist, wird die Standardgröße von 200 Pixel verwendet.

Dann wird das Zifferblatt initialisiert und mit der addChild()-Methode, die aus der DisplayObjectContainer-Klasse übernommen wurde, der Anzeigeliste hinzugefügt. Anschließend wird die AnalogClockFace.draw()-Methode aufgerufen, damit das Zifferblatt mit der aktuellen Uhrzeit angezeigt wird.

Nach dem Erstellen des Zifferblatts wird mit der initClock()-Methode ein Timer eingerichtet:

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

Mit dieser Methode wird zunächst eine Timer-Instanz instanziiert, mit der einmal pro Sekunde (alle 1000 Millisekunden) ein Ereignis ausgelöst wird. Da kein zweiter repeatCount-Parameter an den Timer()-Konstruktor übergeben wird, wird der Timer unbegrenzt wiederholt.

Die SimpleClock.onTick()-Methode wird einmal pro Sekunde ausgeführt, wenn ein timer-Ereignis empfangen wird:

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

Mit der AnalogClockFace.draw()-Methode werden das Zifferblatt und die Zeiger gezeichnet.

Mit dem Code der AnalogClockFace-Klasse werden hauptsächlich die Anzeigeelemente des Zifferblatts eingerichtet. Nach dem Initialisieren der AnalogClockFace-Methode werden ein runder Rahmen gezeichnet und für jede Stunde eine numerische Textbeschriftung positioniert. Dann werden drei Shape-Objekte erstellt, jeweils für den Stunden-, den Minuten- und den Sekundenzeiger.

Beim Ausführen der Anwendung „SimpleClock“ wird die AnalogClockFace.draw()-Methode jede Sekunde aufgerufen, wie im Folgenden dargestellt:

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

Mit dieser Methode wird die aktuelle Uhrzeit in einer Variablen gespeichert, sodass sich die Uhrzeit beim Zeichnen der Uhrzeiger nicht ändert. Dann wird die showTime()-Methode aufgerufen, mit der die Uhrzeiger gezeichnet werden:

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

Mit dieser Methode werden zunächst die Werte für die Stunden, Minuten und Sekunden der aktuellen Uhrzeit abgerufen. Anschließend wird mit diesen Werten der Winkel für die einzelnen Uhrzeiger berechnet. Da beim Sekundenzeiger eine volle Umdrehung in 60 Sekunden erfolgt, dreht er sich pro Sekunde um 6 Grad (360/60). Auch der Minutenzeiger dreht sich pro Minute um 6 Grad.

Der Stundenzeiger wird ebenfalls jede Minute aktualisiert, sodass nach jeder Minute eine Änderung festzustellen ist. Er dreht sich pro Stunde um 30 Grad (360/12), jedoch auch pro Minute um 0,5 Grad (30 Grad geteilt durch 60 Minuten).