Ruler Spark Component using dynamic skin parts and custom GraphicElement

Here’s a first version of a simple Ruler component that takes some of the techniques discussed in the couple of previous post into account.

The ruler can be scaled down or up by holding CTRL/SHIFT while clicking and can be moved by holding the ALT-Key and keeping the mouse button pressed. When scaling an animation is applied for smoother transitions. For the labels an array of Strings can be set, each one defining a division on the ruler. The number of subdivisions can be set as well

Simple ruler component. View source is enabled.

Custom GraphicElement to draw tick lines

Instead of using and FXG-Path element a custom GraphicElement has been created to draw the tick lines. This makes for a cleaner and more generic approach when drawing the ruler and reduces overhead when animation is applied while scaling.

Dynamic skin parts for the Labels

For the labels dynamic skin parts are used. Here’s a little recap on how to work with dynamic skin parts.

• Declare a dynamic skin part in the Declarations segment of the skin. Wrap it up in a Component and give the component an id.
• Declare the skin part in the component, referencing it via id in the skin. The type is of mx.core.IFactory.
• To create a dynamic skin part at runtime call createDynamicPartInstance([id of skin part]) from the component. This will return an instance of the desired skin part.
• In the component add this instance to the skin or a group within the skin.
• Optionally add it to an array for dynamically created instances for easier housekeeping.
• Any Listener is best added in partAdded() similar to adding behavior to static skin parts. When adding event listeners do not forget to remove them in partRemoved().
• A dynamic skin part can be removed at runtime by calling removeDynamicPartInstance([id of skin part], instance). You also need to manually remove the instance form the group you’ve added them.

If you need more information on dynamic skin parts, check out this great article by Florian Fesseler.

Follow any responses through RSS 2.0 feed. Leave a response, or trackback from your own site.