Andy Hulstkamp

about creating online experiences

14. March 2009

Skinning and creating custom rating component in Flex 4

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.

Flex Skinning Custom Component

Demo. View source is enabled.

further reading

Working with huge amount of data in Flex 4 (Gumbo)

Findings in how to work with huge amounts of data in Flex 4.

Creating FXG-Library Elements at runtime in Flex 4 (Gumbo)

creating library elements at runtime.