Пример даты и времени: простые аналоговые часы

Пример с часами очень прост, но полезно уметь грамотно работать и с простыми приложениями, чтобы в будущем понимать, как их можно усложнить и усовершенствовать. В приложении 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;

У этого класса есть два важных свойства:

• свойство face , являющееся экземпляром класса AnalogClockFace;

• свойство ticker , являющееся экземпляром класса Timer.

  Класс SimpleClock использует конструктор по умолчанию. Метод initClock() отвечает за установку: создает циферблат и запускает экземпляр Timer.

В следующих строках кода SimpleClock создается циферблат для отображения времени:

    /** 
     * 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 пикселов.

Затем приложение инициализирует циферблат и добавляет его к списку отображения с помощью метода addChild() , наследуемого от класса DisplayObjectContainer. Далее вызывается метод 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();

Сначала этот метод создает экземпляр Timer, который будет отправлять событие каждую секунду (каждые 1000 миллисекунд). Так как конструктору Timer() не передается второй параметр repeatCount , Timer будет многократно повторяться.

Метод SimpleClock.onTick() будет выполняться раз в секунду при получении события timer :

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

Метод AnalogClockFace.draw() просто рисует циферблат и стрелки.

Подавляющая часть кода в классе AnalogClockFace отвечает за создание на циферблате отображаемых элементов. При инициализации класса AnalogClockFace рисуется круг, внутри него рядом с каждой часовой меткой пишется число, а затем создаются три объекта Shape: один для часовой стрелки, один для минутной и один для секундной.

После запуска приложения SimpleClock каждую секунду вызывается метод 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); 
    }

Этот метод сохраняет значение текущего времени в переменной, чтобы время не изменилось в процессе отрисовки стрелок часов. Затем вызывается метод 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); 
    }

Сначала этот метод извлекает значения часов, минут и секунд текущего времени. Затем эти значения используются для расчета угла каждой из стрелок. Так как секундная стрелка делает полный оборот за 60 секунд, ее угол каждую секунду меняется на 6 градусов (360/60). Минутная стрелка каждую минуту смещается на одинаковое количество градусов.

Часовая стрелка тоже меняет свое положение каждую минуту, чтобы отражать ход времени. Каждый час она смещается на 30 градусов (360/12), а каждую минуту — на полградуса (делим 30 градусов на 60 минут).