Ejemplo de fecha y hora: Un sencillo reloj analógico

El ejemplo del reloj es sencillo, pero es recomendable organizar bien incluso las aplicaciones sencillas para poder ampliarlas fácilmente en el futuro. En ese sentido, la aplicación SimpleClock utiliza la clase SimpleClock para gestionar las tareas de inicio y mantenimiento de hora, y luego utiliza otra clase denominada AnalogClockFace para mostrar realmente la hora.

A continuación se muestra el código que define e inicializa la clase SimpleClock (hay que tener en cuenta que, en la versión de Flash, SimpleClock amplía la clase 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;

La clase tiene dos propiedades importantes:

• La propiedad face, que es una instancia de la clase AnalogClockFace

• La propiedad ticker, que es una instancia de la clase Timer

  La clase SimpleClock utiliza un constructor predeterminado. El método initClock() realiza el trabajo de configuración real, pues crea la esfera del reloj e inicia el tictac de la instancia de Timer.

Las siguientes líneas del código de SimpleClock crean la esfera del reloj que se utiliza para mostrar la 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();

El tamaño de la esfera puede pasarse al método initClock(). Si no se pasa el valor faceSize, se utiliza un tamaño predeterminado de 200 píxeles.

A continuación, la aplicación inicializa la esfera y la añade a la lista de visualización a través del método addChild() heredado de la clase DisplayObjectContainer. Luego llama al método AnalogClockFace.draw() para mostrar la esfera del reloj una vez, con la hora actual.

Después de crear la esfera del reloj, el método initClock() configura un temporizador:

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

En primer lugar, este método crea una instancia de Timer que distribuirá un evento una vez por segundo (cada 1000 milisegundos). Como no se pasa ningún parámetro repeatCount al constructor Timer(), el objeto Timer se repetirá indefinidamente.

El método SimpleClock.onTick() se ejecutará una vez por segundo cuando se reciba el evento timer:

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

El método AnalogClockFace.draw() simplemente dibuja la esfera del reloj y las manecillas.

La mayoría del código de la clase AnalogClockFace se utiliza para configurar los elementos que se visualizan en la esfera del reloj. Cuando se inicializa AnalogClockFace, dibuja un contorno circular, coloca una etiqueta de texto numérico en cada marca de hora y luego crea tres objetos Shape: uno para la manecilla de las horas, otro para la de los minutos y un tercero para la de los segundos.

Cuando se ejecuta la aplicación SimpleClock, llama al método AnalogClockFace.draw() cada segundo, del siguiente 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 guarda la hora actual en una variable, de forma que la hora no puede cambiar mientras se dibujan las manecillas del reloj. Luego llama al método showTime() para mostrar las manecillas, como se muestra a continuación:

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

En primer lugar, este método extrae los valores de las horas, minutos y segundos de la hora actual. Luego utiliza estos valores para calcular el ángulo de cada manecilla. Como la manecilla de los segundos realiza una rotación completa en 60 segundos, gira 6 grados cada segundo (360/60). La manecilla de los minutos gira en la misma medida cada minuto.

La manecilla de las horas se actualiza también cada minuto, de forma que va progresando a medida que pasan los minutos. Gira 30 grados cada hora (360/12), pero también gira medio grado cada minuto (30 grados divididos entre 60 minutos).