During the past year I’ve posted a couple of custom Gumbo (flex 4 beta) components and skins.

Since they’ve been built on beta sdks, these components might need some adjustments to work with the Flex 4 release sdk.

To save you the work of figuring out what to adjust here are the most requested components updated to Flex 4 release sdk. Click on the images, view source is enabled.

Flex 4 Spark Rating Component. View source enabled. Original post here.

Flex 4 Spark Icon Button based on a generic skin.View source enabled. Original post here.

Flex 4 Spark icon button. View source enabled.Original post here.

Flex 4 Spark custom checkbox. View source enabled. Original post here.

Flex 4 Spark custom knob button. View source enabled. Original post here.

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

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)

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

In this and this post I had a look at skinning components in Flex 4. Here I had a go at creating a simple custom component in Flex 4 (Gumbo) from scratch. The goal was to create a simple knob-button like those found on many softsynths.

The user clicks the button and drags the mouse to adjust the value. The advantage of a knob compared to a slider is that it needs much less screen estate and could be more intuitive in specific contexts to control a value.

click here to view the demo. Full source at the end of this post.

Creating a custom visual component in Flex 4 is similar to the procedure in Flex 3 but states and skins are handled differently (in a much better and cleaner way). Basically we need to (more…)

Here’s a little example of a ToggleButtonSkin that uses some effects to create a subtle chrome-impression when the button is selected.

The gradient is calculated from the backgroundColor-Style of the host component. Then in selected state some Tint and Animate effects are applied to the Strokes that make up the border.

Click here for the example. Needs flash player 10 (beta).

Here’s the source for the (more…)

Today I had a closer look at the new skinning architecture of Gumbo. Here’s a little example that uses a couple of custom slider components. This custom component extends the standard gumbo VSlider by composition and integrates custom skins. click here to see example. Needs flash player 10 (beta rc1).

The Gumbo VSlider expects (more…)

The past few days I was digging a bit into Gumbo (flex 4 beta). I was happy to see that flex 4 will take a lightweight approach regarding components. Components are stripped down to their most basic behavior and there’s now a clean separation between model, controller and view.

This, in combination with an enhanced state architecture and the newly integrated graphics tag library FXG, makes it a snap to create a custom look and feel in flex (especially when CS4 export or thermo integration will be ready)

Here is a little example of a GUI done in Gumbo (flex 4 beta) to wrap up my sound experiments done earlier.

click here. Needs the latest Flash-Player 10 (rc of 091508).

The GUI for the player is straight forward. It uses some FXG-Elements to (more…)