Exemplo de data e hora: relógio analógico simples

O exemplo do relógio é simples, mas é uma boa idéia para organizar até mesmo aplicativos simples que podem ser expandidos com facilidade no futuro. Para tanto, o aplicativo SimpleClock usa a classe SimpleClock para manipular as tarefas de inicialização e controle de tempo e usa outra classe chamada AnalogClockFace para exibir realmente a hora.

Veja o código que define e inicializa a classe SimpleClock (observe que, na versão Flash, SimpleClock estende a classe 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;

A classe tem duas propriedades importantes:

• A propriedade face, que é uma ocorrência da classe AnalogClockFace

• A propriedade ticker, que é uma ocorrência da classe Timer

  A classe SimpleClock usa um construtor padrão. O método initClock() realiza o trabalho de configuração real, criando a superfície do relógio e iniciando o acionamento da ocorrência de Timer.

As próximas linhas do código SimpleClock criam a superfície do relógio que é usada para exibir a hora:

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

O tamanho da superfície pode ser transmitido para o método initClock(). Se nenhum valor de faceSize for transmitido, será usado o tamanho padrão de 200 pixels.

Em seguida, o aplicativo inicializa a face e adiciona-a à lista de exibição utilizando o método addChild() herdado da classe DisplayObjectContainer. O método AnalogClockFace.draw() é chamado para exibir a superfície do relógio uma vez, mostrando a hora atual.

Assim que a superfície do relógio é criada, o método initClock() configura um timer:

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

Primeiro, esse método percorre uma ocorrência de Timer que enviará um evento por segundo (a cada 1000 milissegundos). Como nenhum outro parâmetro repeatCount é transmitido para o construtor Timer(), o Timer será repetido indefinidamente.

O método SimpleClock.onTick() será executado uma vez por segundo quando o evento timer for recebido:

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

O método AnalogClockFace.draw() simplesmente desenha a superfície e os ponteiros do relógio.

A maior parte do código na classe AnalogClockFace envolve a configuração dos elementos de exibição da superfície do relógio. Ao ser inicializado, o AnalogClockFace desenha um contorno circular, coloca um rótulo de texto numérico em cada marcação de hora e cria três objetos Shape, um para cada ponteiro do relógio (horas, minutos e segundos).

Assim que o aplicativo SimpleClock é executado, o método AnalogClockFace.draw() é chamado a cada segundo do seguinte modo:

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

Este método salva a hora atual em uma variável para que o horário não mude no meio do desenho dos ponteiros do relógio. Em seguida, o método showTime() é chamado para exibir os ponteiros do seguinte modo:

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

Primeiro, este método extrai os valores para horas, minutos e segundos do horário atual. Depois, esses valores são usados para calcular o ângulo de cada ponteiro. Como faz uma rotação completa em 60 segundos, o ponteiro dos segundos gira 6 graus a cada segundo (360/60). O ponteiro dos minutos gira do mesmo modo em cada minuto.

O ponteiro das horas também é atualizado a cada minuto e pode avançar um pouco à medida que os minutos passam. Ele gira 30 graus por hora (360/12), mas também gira meio grau por minuto (30 graus dividido por 60 minutos).