Changing the look of a spark component mainly comes down to customizing the skin-class, but there are situations where this might not be enough.

In a project I’m working on, we wanted to have a smooth transition when a text-input gets or loses focus. The default Spark TextInput and the associated skin-class do not have a focused state. (In Flex the FocusManager manages the focus by drawing a border around a component, but we wanted the focus on the skin itself and a transition)

One way to achieve this is to enhance the TextInput Component: (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)