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:
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 220.127.116.1157 or higher. You can get the latest SDK builds from opensource.adobe.com.