日付と時刻の例：単純なアナログ時計

この時計のように単純なアプリケーションであっても、構造をわかりやすく整理しておけば、後で容易に拡張できて便利です。そこで、この SimpleClock アプリケーションの場合は SimpleClock クラスで起動時とタイマー制御の処理を扱い、時刻を実際に表示する処理には別の AnalogClockFace というクラスを使用しています。

次のコードでは、SimpleClock クラスの定義と初期化を行います（Flash バージョンでは、代わって SimpleClock が 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;

このクラスには、2 つの重要なプロパティがあります。

• face プロパティ: AnalogClockFace クラスのインスタンス

• ticker プロパティ: Timer クラスのインスタンス

  SimpleClock クラスではデフォルトのコンストラクターを使用します。 initClock() メソッドでは実際のセットアップ処理を担当し、文字盤を作成して Timer インスタンスの動作を開始します。

次のコードでは、時刻の表示に使用する文字盤を作成します。

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

initClock() メソッドに対して、文字盤のサイズを指定できます。faceSize の値を指定しない場合、デフォルト値の 200 ピクセルが使用されます。

次に、このアプリケーションでは文字盤を初期化し、DisplayObjectContainer クラスから継承した addChild() メソッドを使用して表示リストに文字盤を追加します。さらに、いったん現在の時刻で盤面を表示するために AnalogClockFace.draw() メソッドを呼び出します。

文字盤を作成した後は、initClock() メソッドでタイマーをセットアップします。

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

このメソッドは、1 秒（1000 ミリ秒）ごとにイベントを送出する Timer インスタンスを最初に作成します。 第 2 パラメーターの repeatCount を Timer() コンストラクターに渡していないので、この Timer はイベントの送出を無期限に繰り返します。

SimpleClock.onTick() メソッドは、timer イベントを受け取って 1 秒ごとに実行されます。

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

AnalogClockFace.draw() メソッドは、単に時計の盤面と針を描画します。

AnalogClockFace クラスのコードのほとんどは、時計の盤面を構成する表示要素のセットアップに関するものです。AnalogClockFace が初期化される際には、丸い輪郭を描き、個々の定時目盛りの位置にテキストラベルで数字を配置し、さらに、時針、分針、秒針を表す 3 つの Shape オブジェクトを作成します。

SimpleClock アプリケーションが動作し始めた後は、次のように AnalogClockFace.draw() メソッドが 1 秒ごとに呼び出されます。

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

このメソッドは、時計の針を描画している間に時刻が変化しないように、現在時刻を変数に保存します。それから、次のように showTime() メソッドを呼び出して針を表示します。

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

このメソッドでは、最初に現在時刻の時、分、秒それぞれの値を抽出し、 それらに基づいて 3 本の針の角度を計算します。 秒針は 60 秒で 1 周するので、1 秒につき 6 度（360/60）だけ進むことになります。 分針も 1 分につきこれと同じ角度だけ進みます。

分針が進むにつれて、時針も少しずつ動きます。 時針は 1 時間につき 30 度（360/12）だけ進みますが、その間も 1 分につき 0.5 度（30 度 / 60 分）ずつ変化していきます。