Tabbed Navigation in Flex 4

If you didn’t know it already, the philosophy behind Flex 4 is ‘pay as you go’ for performance reasons. The goal was to reduce overhead and create lightweight components as a rule, so many things we were used to in Flex 3 are no longer included out of the box and it now requires some modification to the approach we take in building our apps. I recently created a Tour de Flex sample showing how you can do tabbed navigation with Flex 4 and wanted to share a simple example here too with a bit of explanation. One big benefit from my point of view is to be able to control the look and feel of my tabbed navigation quickly and easily with the new Flex 4 skinning model. For instance I could easily change the tab button borders, add icons to them etc with this approach.

We would implement the same tabbed navigation in Flex 4 by using the Spark TabBar control with a ViewStack. The best way to show this is by example:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="" 
		 xmlns:mx="library://" width="400" height="300">
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	<s:TabBar id="tabs" left="8" y="2" dataProvider="{vs}"/>
	<mx:ViewStack id="vs" width="95%" height="85%" left="8" y="23">
		<s:NavigatorContent label="Tab 1"  width="100%" height="100%">
			<s:Border width="100%" height="100%" borderWeight="2" cornerRadius="3" dropShadowVisible="true">
				<s:Label left="3" top="5" text="This is my first tab..."/>
		<s:NavigatorContent label="Tab 2"  width="100%" height="100%">
			<s:Border width="100%" height="100%" borderWeight="2" cornerRadius="3" dropShadowVisible="true">
				<s:Label left="3" top="5" text="This is my second tab..."/>
		<s:NavigatorContent label="Tab 3"  width="100%" height="100%">
			<s:Border width="100%" height="100%" borderWeight="2" cornerRadius="3" dropShadowVisible="true">
				<s:Label left="3" top="5" text="This is my third tab..."/>

Here is a screenshot of the above code running:

Picture 11

This is just a very simple example of how you can achieve a similar look to the Flex 3 TabNavigator, but now if you want to change the look of the tabs you can just apply a new custom TabBarSkin via the skinClass property on the TabBar control:

<s:TabBar" id="tabs" left="8" y="2" dataprovider="{vs}" 2="skinClass="skins.MyTabBarSkin"/>

If you want to change the look of the tab bar buttons themselves then you would also need a custom TabBarButtonSkin that would be referred to from the dataGroup within MyTabBarSkin.mxml. I created a couple of more sophisticated examples showing this within Tour de Flex, and the custom skin classes are included. The second sample called ‘Custom Tabs’ shows how you can add an icon to the tabs as well. These samples can be found under the Flex 4 category (under Groups/Containers) or here in the Tour de Flex web version if you’d like to see more.


28 Responses to “Tabbed Navigation in Flex 4”

  1. Excellent tutorial.

    I cannot find the Spark TabBar in the latest beta (2). Which version of the SDK are you using in this example?

    • Oh thanks Garth for pointing this out! The TabBar is a new Spark component as of about a week ago. I am using build 11566 for this particular sample. If you’re looking at Flex 4 samples in Tour de Flex, I note it at the top of the sample if it’s a build other than the beta 2 SDK. It should say something like: .

      You can download the Flex 4 nightly builds post beta 2 here:

      Hope this helps!!

  2. Thanks for the post.
    I have added a cancel icon to each tab in my tab bar, using VBox for a container and the .icon item to set the icon.

    I’m not sure how to code this so that when just the icon in the tab is clicked, the tab and its container will close. I’ve looked in the examples on line and in Tour de Flex and haven’t found an example yet (perhaps I jsut missed it).

    Can you provide an example, or point to one?


    ken ampel

    • I’m really sorry I just noticed that I somehow missed your question here Ken, did you end up figuring out how to do what you were trying to accomplish? I apologize again for not helping sooner, thanks! Holly

  3. hey thanks for the example. i think i can use it for skinning.


  4. Why would we want to download a post-latest beta? This is clearly deprecated. Thanks for the effort though.

    • Hi John, perhaps you misunderstood, these samples are actually based on a code release that came out AFTER the Flex 4 Beta 2 release (via a nightly download), so it would not be deprecated from the Beta 2 SDK, it would be more current. If you want something even more current you can always get the latest nightly download from here: – and if you find issues with my sample let me know and I’d be happy to take a look. Thanks! Holly

  5. I am getting could not resolve mx:ViewStack to a component implementation.
    and I am using flex_sdk_4.0.0.13518??
    can you suggest anything?

    • Hi Manish, make sure you have the mx namespace defined in the root tag as: xmlns:mx=”library://” and not xmlns:mx=”library://“, they changed it recently. Let me know if this was the problem. I did try out the same SDK you are using and it worked fine. I’m guessing it’s the namespace issue… Thanks! Holly

  6. thanks for your reply

    i was hoping it to be just that … but now its showing could not resolve s:border

    this is what i have

    I tried using older builds thats available, tried few but still no luck.

    • it worked when i changed Border to Bordercontainer, strange they keep removing and chainging names..
      they should provide a list of changes with every build..
      however its beta so no complains…

  7. on a different note, any idea if there is an upgrade version of
    following example in flex 4.
    the above example was really helpful in learning diffrent aspects of flex programming.
    I am trying to migrate but stuck with so many altered classes deprecated syntaxes.

    • Hi Manish! I’m glad that you were able to get past your issues. I didn’t respond fast enough before I saw that you had figured it out :).

      As far as the dashboard example… Yes, I do know that there is a version of this being worked on very soon that will come from Adobe Devnet. I’ll try to remember to update this post with the link at that time. Thanks! Holly

  8. Hi,

    i have issues in tabnavigator in flex 4. I cannot style selected tab in flex4. I cannot use skin to selected tab. Is there any way?

    Thanks in advance,

    • Hi, you can change the style of the tab by using a custom TabBarButtonSkin and referring to that from your custom TabBarSkin. For instance, in the TabBarSkin it would have something like this:

      				<s:ButtonBarButton skinClass="skins.CustomTabBarButtonSkin" />

      Then in that CustomTabBarButtonSkin you can style your tab to your desire. You can find the TabBarButtonSkin.mxml currently in the source code within the Flex SDK and copy that to make it easier and faster.

      Hope this helps!

      • hi thanks for ur help devgirl.. but ur suggestion


        is not working in my code.. i mentioned my sample code below.. in that code i cannot customize selected tab’s style.. if i use any style, default style only displayed.. Im looking for ur reply.. thanks in advance..

        @namespace s “library://”;
        @namespace mx “library://”;
        selectedTabTextStyleName: selectedText;
        tabStyleName: tabStyle;
        backgroundColor: #83e6b4;
        upSkin: Embed(source=”assets/images/selected-tab.png”);
        overSkin: Embed(source=”assets/images/selected-tab.png”);
        downSkin: Embed(source=”assets/images/selected-tab.png”);
        upSkin: Embed(source=”assets/images/submit-button.png”);
        overSkin: Embed(source=”assets/images/submitbutton.png”);
        downSkin: Embed(source=”assets/images/submit-button.png”);

  9. Hi,

    Here’s an example for a TabBar that uses tabs with optional close button, similar to SuperTab only based on the spark tab navigator.

  10. Hi Devgirl,

    I am experienced with skinning and know how to change the nuances that affect the visual design. After doing some profiling I noticed my new Panel skins are using up more resources that I would like. To get around this waste of resources I would like to modify the DEFAULT skin for all Panel components since they will all look the same.

    I have located the default skin in my application directory (C:\Program Files\Adobe\Adobe Flash Builder 4\sdks\4.0.0\frameworks\projects\spark\src\spark\skins\spark), but when I save this skin it does not apply to my project.

    How can I modify the default panel skin and see the changes reflected in my project? Thanks for any help!

    – Alex

    • Hi Alex! Great question. I haven’t tried this myself, but I would imagine you would need to include your version of the skin in the sparkskins.swc library file (if you’re using the Merged into Code build option), or the sparkskins.swz file if you’re using RSLs and replace the framework one in your application’s library path with your version of it. I would probably try the Merged into Code option first which would use the swc file in your library path, otherwise you need to be sure to recompile your code with your version of RSL specified (the swz file). I hope this makes sense, please let me know how it goes!! Holly

  11. Ka Wing Says:

    Hi devgirl,

    I am learning Flex 4. I got a question. How do you set the tabwidth in spark tabbar? The mx version has that attribute.
    Thanks for your help.

  12. Dave Meurer Says:

    Hi Ken, Big Al, & devgirl –

    I’m trying to figure out the same thing – a cancel button on a tab bar.

    I almost had it, but for some reason my Graphic wasn’t clickable while in the button. In other words, it looks like you can’t add a button on top of another button.

    I did see the flexwiz approach, but I was hoping for something involving less parts – like just a couple tweaks of the Custom Tabs example at;illustIndex=0;sampleId=31625

    For example, here is what I have in my CustomTabBarButtonSkin:

    Unfortunately, the s:Graphic is not clickable inside the button… is there a super property I can set that will enable the graphic to be above/outside the container button?


  13. […] </s:NavigatorContent> </mx:ViewStack> </s:Application> Das Tutorial ist von hier: Tabbed Navigation in Flex 4 Devgirl's Weblog Jedenfalls mekkert er bei mir in Zeile 11: Description Resource Path Location Type […]

  14. Hi,
    How to stop moving to other tab while it need to satisfy certain conditions using TabBar.
    I have a application with tabbar while in first tab i have a form. while i tried to move to other tab without saving the values of form user has to alert the user before moving to other tab.

  15. Gastón Quittner Says:

    Hey there, I was wondering if there was some way to ‘wrap’ the tab menu and force it to be multirow in case there are too many tabs.

    My tab menu is dynamic depending on a previous selection, so when there are too many tabs it just goes out of the screen. I don’t know how to force it to an specific width, so it will take more rows when needed.

  16. Hi,

    if we use Tab navigator instead of Tab bar can we apply skin on the that?

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: