Creating a navigation bar using RadioButtons in Flex 4

I built a small sample application that demonstrates one way of building a navigation bar in Flex 4 that makes it really easy to toggle between different views in an application. This approach uses spark RadioButtons with a very simple custom skin.

The custom skin is simply a rectangle for a background and a SimpleText field. These RadioButtons are then arranged horizontally to create the look of a somewhat standard navigation bar. Each of the main application views corresponds to a state and the RadioButtons are put into a RadioButtonGroup which updates the current state based on the selected RadioButton.

Here is what it looks like:

View Source

This might seem a little bizarre to be using RadioButtons here when something like a ToggleButtonBar might make more sense, but there are some benefits to this approach. With a ToggleButtonBar you are limited to having all of the buttons in the same location, whereas these RadioButtons could be placed anywhere, and each one could have a different skin. So if you wanted to, you could very easily add a couple more RadioButtons to the bottom or left of the application.

This example uses states to define each main view of the application and then uses includeIn to define what content is available in each view. Personally I find this approach the most intuitive in many cases, but you could also use a ViewStack to organize these views. Note that there is currently no Spark equivalent for a ViewStack, but it is planned.

Notice that an immediate itemCreationPolicy is defined on each component that is included in a specific state. This means that the component will be instantiated at startup rather than when the state is entered. You can read more about the concept of deferred instantiation in the spec for the enhanced states syntax.

Note: This sample requires Flex SDK 4.0.0.10957 or higher. You can get the latest SDK builds from opensource.adobe.com.

4 thoughts on “Creating a navigation bar using RadioButtons in Flex 4”

  1. Hi, Thank you for this, its exactly what I need. I tried this, and everything works fine EXCEPT my scroller that is on page1 doesn’t show up on pages 2 and 3, even though I specifically declare my scroller to includeIn the states for page2 and page3. Here is a snippet of my mxml:

    Page1 works beautifully, but no scroller appears on Pages 2 & 3. I’ve even tried separating the scroller into one scroller for each page, but that doesn’t work either. Any thoughts or tips?

  2. @LeRogue – Looks like this blog ate your MXML as it didn’t come through. Could you post your code sample somewhere where I can take a look?

Comments are closed.