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

For the past couple of days I’ve had a look at creating Spark Icon Buttons. In this post I’ve created an FXG Icon Button with some transitions, leveraging pseudo selectors for states. The Icon was ‘hardcoded’ into the skin. For another Icon I would need to duplicate the skin and introduce another graphic. Not exactly generic. There are other ways to bring graphics into Spark Skins but none of them work with FXG Elements directly.

What I want is:

• work with FXG Graphic Elements for simpler manipulation and scaling
• easily export the FXG-Definitions for the icons from a tool and/or be able to change them in FB directly
• colorize the icons based on a color style-property and do this per state
• change the icons based on a style-property and do this per state
• change icons at runtime
• scaling effect on icon
• have ONE generic skin, so no duplicates for different icons are necessary

Most of the trouble with generic skins comes from the fact that there is no way to access the FXG Library-Definitions at run-time  (as far as I know) - like getting an instance of a symbol in the library, the way we had in flash. Here’s a hack but I’d rather not use it.

After some headaches I finally managed to get a solution I can live with:

Click here for a test.

You’ll find the source at the end of this post.

The solution regarding the work flow mainly comes down to (more…)

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.

The skin uses two additional properties (symbolColorChecked,  symbolColorUnchecked) for the (more…)

This post looked at creating a custom flex 4 component from scratch. The knob button defined there had a min/max-value for the range and the rotation. The user could adjust the value by pressing the knob and then dragging the mouse. Now, we would like to extend the control a bit by adding a text input-field where the value of the knob is reflected. Likewise a value can be entered into the textfield and the rotation of the knob would reflect this.

Instead of extending the knob I decided to create another control that is a composition (more…)