Clocks

Overview

Included in the Ardisia Component Set are two clock classes: a digital clock ("ClockDigital") and an analog clock ("ClockAnalog").

These components are focused on styling for customization. Also, both are focused on efficiency since clocks consume CPU cycles very often (typically each second), therefore updates should be lightweight and not call layout.

Creating the Clocks Component

Both clocks extend Group and can be added to any container that implements IVisualElementContainer.

Skinning

Initially, both clocks were skinnable. However, so much code ended up in the skin that the convenience of skinning was lost. Also, skinning was forcing redundant code in the host and skin. Therefore, the Clock classes are not skinnable but they support large numbers of styles.

Analog Clock

An analog clock. Supports a very large number of customization styles. See the ASDocs.

Designed to be efficient and only call the full layout algorithm when necessary and not on each tick of the second hand. Expensive vector drawing and display list manipulation are only invoked when necessary.

In short, do not be afraid to use the clock for performance reasons, it is very lightweight.

Digital Clock

A simple digital clock. Text will resize to fit the available space. Can be customized by a large number of properties and styles. See the ASDocs for more information.

To change the text styling for the DigitalClock, use text styles on the clock directly.

clocks|ClockDigital s|Label 
{
    color: blue;
}

This example above would change the digital clock text to blue.

Animations & Effects

The Analog Clock supports animation on the second hand. The duration and easer for the animation can be set. The duration of the animation cannot exceed the updateInterval.

Custom Events

clockStart
ardisia.components.clocks.events.ClockEvent
Dispatched when the clock starts running.

clockStart
ardisia.components.clocks.events.ClockEvent
Dispatched when the clock stops running.

Custom Styles

See the ASDocs.

Example

See the Clocks demo application for example code.

Back To Top