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

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