Tarih ve saat örneği: Basit analog saat

Flash Player 9 ve üstü, Adobe AIR 1.0 ve üstü

Basit bir analog saat örneği bu iki tarih ve zaman kavramını örnekler.

  • Geçerli tarih ve saati alma ve saat, dakika ve saniye değerlerini ayıklama

  • Uygulamanın hızını ayarlamak için bir Timer öğesini kullanma

    Bu örneğin uygulama dosyalarını edinmek için bkz. www.adobe.com/go/learn_programmingAS3samples_flash_tr . SimpleClock uygulama dosyalarını Samples/SimpleClock klasörü içinde bulabilirsiniz. Uygulama aşağıdaki dosyaları içerir:

    File

    Açıklama

    SimpleClockApp.mxml

    veya

    SimpleClockApp.fla

    Flash (FLA) veya Flex (MXML) içindeki ana uygulama dosyası.

    com/example/programmingas3/simpleclock/SimpleClock.as

    Ana uygulama dosyası.

    com/example/programmingas3/simpleclock/AnalogClockFace.as

    Yuvarlak bir saat yüzü çizer ve saati esas alarak akrep, yelkovan ve saniye göstergesini çizer.

SimpleClock sınıfını tanımlama

Saat örneği basit olsa da, ileride kolayca genişletebilmeniz için basit uygulamaların da organize edilmesi iyi bir fikirdir. Bu nedenle SimpleClock uygulaması, açılış ve zaman saptama görevlerini işlemek için SimpleClock sınıfını kullanır ve sonra da gerçekten zamanı göstermek için de AnalogClockFace adında başka bir sınıfı kullanır.

Aşağıda, SimpleClock sınıfını tanımlayıp başlatan kod yer almaktadır (Flash sürümünde, bunun yerine SimpleClock öğesinin Sprite sınıfını genişlettiğini unutmayın):

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;

Bu sınıf iki önemli özelliğe sahiptir:

  • AnalogClockFace sınıfının bir örneği olan face özelliği

  • Timer sınıfının bir örneği olan ticker özelliği

    SimpleClock sınıfı varsayılan bir yapıcıyı kullanır. initClock() yöntemi gerçek kurulum çalışmasıyla ilgilenerek saat yüzünden başlar ve Timer örneği ilerlemesini başlatır.

Saat yüzünü oluşturma

SimpleClock kodundaki sonraki satırlar, saati görüntülemek için kullanılan saat yüzünü oluşturur:

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

Yüzün boyutu, initClock() yöntemine iletilebilir. Herhangi bir faceSize değeri iletilmezse, varsayılan 200 piksel boyut kullanılır.

Daha sonra uygulama, yüzü başlatır ve DisplayObject sınıfından miras alınan addChild() yöntemini kullanarak bu yüzü görüntüleme listesine ekler. Ve saat yüzünü bir defa görüntülemek için AnalogClockFace.draw() yöntemini çağırarak geçerli saati gösterir.

Zamanlayıcıyı başlatma

Saat yüzü oluşturulduktan sonra, initClock() yöntemi bir zamanlayıcı ayarlar:

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

İlk olarak bu yöntem, saniyede bir defa (her 1000 milisaniyede) olay gönderecek bir Timer örneği başlatır. Timer() yapıcısına herhangi bir repeatCount parametresi iletilmediğinden, Timer sınırsız sayıda yinelemeyi sürdürür.

timer olayı alındığında, SimpleClock.onTick() yöntemi saniyede bir defa çalıştırılır:

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

AnalogClockFace.draw() yöntemi yalnızca saat yüzünü ve akrep, yelkovan ve saniye göstergesini çizer.

Geçerli saati görüntüleme

AnalogClockFace sınıfındaki kodun büyük bir kısmı, saat yüzünün görüntüleme öğelerinin ayarlanmasını kapsar. AnalogClockFace başlatıldığında, dairesel bir anahat çizer, her saat işaretine sayısal bir metin etiketi yerleştirir ve sonra saatteki akrep, yelkovan ve saniye göstergesinin her biri için birer tane olmak üzere üç Shape nesnesi oluşturur.

SimpleClock uygulaması çalışmaya başladıktan sonra, aşağıdaki gibi her saniye AnalogClockFace.draw() yöntemini çağırır:

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

Bu yöntem geçerli saati bir değişkene kaydeder, böylece akrep, yelkovan ve saniye göstergesi çizilirken işlemin ortasında saat değişemez. Ardından aşağıda gösterildiği gibi, akrep, yelkovan ve saniye göstergesini görüntülemek için showTime() yöntemini çağırır:

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

İlk olarak bu yöntem, geçerli zamanın saat, dakika ve saniye değerlerini ayıklar. Daha sonra akrep, yelkovan ve saniye göstergesinin her birinin açısını hesaplamak için bu değerleri kullanır. Saniye göstergesi tam bir dönüşü 60 saniyede gerçekleştirdiğinden, bu gösterge her saniyede 6 derece (360/60) dönüş yapar. Yelkovan da her dakika aynı derece dönüş yapar.

Akrep de her dakika güncellenir, böylece dakikalar ilerledikçe o da aynı ilerlemeyi gösterebilir. Her saatte 30 derece (360/12) dönüş yapmanın yanı sıra her dakika da yarım derece döner (60 dakika/30 derece).