Archive for October, 2010


Ruler Spark Component using dynamic skin parts and custom GraphicElement

October 8, 2010. Posted by Andy Hulstkamp in FXG, flex 4. 2 Comments »
Keywords: , , , ,

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

Spark Ruler Component

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 (more…)


Inspecting and creating a custom Spark GraphicElement

October 7, 2010. Posted by Andy Hulstkamp in Actionscript 3, FXG, flex 4. 1 Comment »
Keywords: , , ,

Mobile Flex Apps are around the corner. Hence it might be a good thing to inspect some of the more light-weighted approaches of Flex to create visual elements and components that can take part in the Spark layout process. In this last example I had a look at SpriteVisualElement.

Now, it’s time for the GraphicElement.

custom flower GraphicElement used in background

Example using custom Graphic Elements. View source is enabled.

The GraphicElement and its subclasses are responsible to draw a significant amount of the Spark components graphics. FXG elements like Rect, Path, Line etc. all derive from GraphicElement.

A GraphicElement is actually neither a DisplayObject nor does it offer any form of interaction. Its super class is the EventDispatcher and it uses an (more…)


Flex Tab Key Navigation for custom Spark PopUp

October 6, 2010. Posted by Andy Hulstkamp in Actionscript 3, flex 4. 5 Comments »

This took me a while to figure out.

In a project I created a custom PopUp, nothing fancy, just a couple of text inputs. When I tried to enable Tab key navigation I set the required properties but Flex would simply ignore tab key navigation to the input fields in the pop up.

The Documentation about the IFocusManager states that a pop up will get its own FocusManager and its own tab loop.

After some tracing I found that my pop up and its child weren’t included in the FocusManager as focus objects. In fact, there was no FocusManager for my pop up at all.

The reason for this is that when the PopUpMangerImpl is about to create and configure the pop up, it checks if the pop up is a IFocusManagerContainer so that focus can be added. (more…)