날짜 및 시간 예제: 간단한 아날로그 시계

시계 예제는 간단한 프로그램이지만, 아주 간단한 응용 프로그램이라도 나중에 쉽게 확장할 수 있도록 잘 구성하는 것이 좋습니다. 이 예제에서 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 픽셀이 사용됩니다.

그런 다음 응용 프로그램은 해당 문자판을 초기화한 후 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 인스턴스를 인스턴스화합니다. 다른 repeatCount 매개 변수가 Timer() 생성자로 전달되지 않으므로 타이머는 무한정으로 계속 반복됩니다.

timer 이벤트를 수신하면 SimpleClock.onTick() 메서드가 1초에 한 번씩 실행됩니다.

    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)씩 움직이고 매 분마다 0.5도(30도/60분)씩 움직입니다.