Andy Hulstkamp

about creating online experiences

09. July 2009

Customize the Spark TextInput Component in Flex 4 (Gumbo). Adding focus and Transitions.

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)

Flex Spark Text Input

read more

01. July 2009

Custom Spark CheckBox Component in Flex 4 (Gumbo)

Here’s an example of how to enhance the default Spark CheckBox. This example uses a mark for the unchecked states and one for the checked states. Some simple transitions are used to make things a little bit nicer.

Flex Spark Checkbox

read more

18. June 2009

Flex Spark Icon Gradient Button

Here’s an example of a Spark Icon Button done in Flex 4. There are smooth transitions on the background gradient between the up and over states. From the over state to the down state the shadows are removed smoothly. Each button has a different base color.

Flex Icon Gradient Button

Demo. View source is enabled.

read more

15. June 2009

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

When working with huge amounts of data on DataGroup, SkinnableDataContainer and all its Subclasses you will notice degradation in performance. Manipulating Data becomes slower, the UI on the Groups become less responsive, startup suffers, footprint is huge. By default, Felx 4 creates an ItemRenderer for each data-item resulting in this overhead.

The solution is to use virtualization on the layout of the dataGroup. By setting useVirtualLayout=true, ItemRenderers are recycled, the performance will be fine even for 100′000 and more records (depending on complexity).

read more

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

read more