Exemple de date et heure : horloge analogique simple

Si l’exemple d’horloge est simple, il est toujours judicieux de bien organiser les applications de manière à faciliter leur extension future. Dans ce but, l’application SimpleClock utilise la classe SimpleClock pour gérer les tâches de démarrage et de mesure temporelle. Elle se sert ensuite d’une autre classe, AnalogClockFace, pour l’affichage réel de l’heure.

Voici le code qui définit et initialise la classe SimpleClock (vous remarquerez que dans la version Flash, SimpleClock étend la classe Sprite à la place) :

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;

Cette classe possède deux propriétés importantes :

• La propriété face , qui correspond à une occurrence de la classe AnalogClockFace

• La propriété ticker , qui est une occurrence de la classe Timer

  La classe SimpleClock utilise un constructeur par défaut. La méthode initClock() se charge de la véritable configuration, en créant le cadran et en lançant le décompte de l’occurrence de Timer.

Les lignes suivantes du code SimpleClock créent le cadran utilisé pour afficher l’heure :

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

La taille de l’horloge peut être transmise à la méthode initClock() . Si aucune valeur faceSize n’est transmise, la taille par défaut de 200 pixels est utilisée.

L’application initialise ensuite l’horloge et l’ajoute à la liste d’affichage à l’aide de la méthode addChild() héritée de la classe DisplayObjectContainer. Elle appelle enfin la méthode AnalogClockFace.draw() pour afficher une fois le cadran, qui indique l’heure actuelle.

Une fois le cadran créé, la méthode initClock() définit le minuteur :

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

Cette méthode commence par instancier une occurrence de Timer qui va distribuer un événement par seconde (toutes les 1 000 millisecondes). Comme le constructeur Timer() ne reçoit pas de second paramètre repeatCount , l’horloge se reproduit indéfiniment.

La méthode SimpleClock.onTick() s’exécute une fois par seconde après réception de l’événement timer :

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

La méthode AnalogClockFace.draw() dessine simplement le cadran de l’horloge et des aiguilles.

La plupart du code de la classe AnalogClockFace implique la définition des éléments d’affichage du cadran. Lors de son initialisation, AnalogClockFace dessine un contour circulaire, place des libellés numériques pour chaque heure, puis crée trois objets Shape, un pour l’aiguille des heures, un pour celle des minutes et un pour l’aiguille des secondes de l’horloge.

Lorsque l’application SimpleClock s’exécute, elle appelle la méthode AnalogClockFace.draw() toutes les secondes, comme suit :

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

Cette méthode enregistre l’heure actuelle dans une variable, pour que l’heure ne puisse changer pendant le dessin des aiguilles de l’horloge. Elle appelle ensuite la méthode showTime() pour afficher les aiguilles, comme illustré ci-après :

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

Tout d’abord, cette méthode extrait les valeurs des heures, des minutes et des secondes pour l’heure actuelle. Elle utilise ensuite ces valeurs pour calculer l’angle de chaque aiguille. Comme l’aiguille des secondes effectue une rotation complète en 60 secondes, elle tourne de 6 degrés par seconde (360/60). L’aiguille des minutes pivote selon le même angle chaque minute.

L’aiguille des heures se met à jour toutes les minutes également et doit donc progresser à chaque minute. Elle tourne de 30 degrés toutes les heures (360/12), mais pivote également d’un demi-degré toutes les minutes (30 degrés divisés par 60 minutes).