Part of the FXG 1.0 specification in Flex 4 makes it possible to define elements inside a library. The elements can then be re-used in a FXG document:
I was experimenting a little with the PopUpAnchor in Spark Flex 4 and came up with a new custom component for ratings.
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)
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.
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.
Demo. View source is enabled.
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).
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.