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

I was experimenting a little with the PopUpAnchor in Spark Flex 4 and came up with a new custom component for ratings. The new component has the following characteristics:

• Show a placeholder-icon that reflects the current rating and serves as an interactive element to open the ratings
• ratings pop up for adjustment
• both the placeholder-icon and the ratings-icons will be gradually filled with color when adjustments are being made
• the icons are defined in FXG
• the icons are not defined in the skin but can be passed as a style for generic use (one skin for different icons and ratings)
• there is colorization of the icons based on styles
• smooth transitions when opening the ratings

Here’s a pseudo city-rating demo that shows variations of the component using different icons and color settings for different ratings.

You’ll find the source at the end of this post. It is (more…)

Here’s a simple rating component done in Flex 4 (Gumbo).

The skin uses two library definitions. One symbol for the active and one for the passive rating. The symbols are then placed in a passive and an active Group. A mask is used to show/hide the active group based on the rating. ActiveGroup/passiveGroup and mask are the required Skin-Parts.

The Component itself manages the rating and pushes this down to the mask by setting its width. The rating is exposed as a bindable property.

The following example usees the component with two different skins.

source is here (SDK 4.0.0.4932)