Tabbed Navigation in Flex 4

November 16, 2009By 42 Comments

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="http://ns.adobe.com/mxml/2009"
		 xmlns:s="library://ns.adobe.com/flex/spark"
		 xmlns:mx="library://ns.adobe.com/flex/halo" width="400" height="300">

	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<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:Border>
		</s:NavigatorContent>
		<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:Border>
		</s:NavigatorContent>
		<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..."/>
			</s:Border>
		</s:NavigatorContent>
	</mx:ViewStack>
</s:Application>

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.

Filed in: Flex 4Flex/AIR Tags:

About the Author ()

Comments (42)

Trackback URL | Comments RSS Feed

Sites That Link to this Post

  1. Tabs in Flash Builder - Flashforum | November 8, 2010
  2. S/S BORDER | Kitchen Appliances & Accessories | July 20, 2011
  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?

    • devgirl says:

      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: http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4

      Hope this helps!!
      Holly

  2. Ken Ampel says:

    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?

    thanks

    ken ampel

    • devgirl says:

      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. prasad says:

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

    regards
    prasad

  4. John P says:

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

    • devgirl says:

      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: http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4 – and if you find issues with my sample let me know and I’d be happy to take a look. Thanks! Holly

  5. manish says:

    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?

    • devgirl says:

      Hi Manish, make sure you have the mx namespace defined in the root tag as: xmlns:mx=”library://ns.adobe.com/flex/mx” and not xmlns:mx=”library://ns.adobe.com/flex/halo“, 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. manish says:

    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
    xmlns:fx=”http://ns.adobe.com/mxml/2009″
    xmlns:s=”library://ns.adobe.com/flex/spark”
    xmlns:mx=”library://ns.adobe.com/flex/mx”

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

    • manish says:

      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. manish says:

    on a different note, any idea if there is an upgrade version of
    following example in flex 4.
    http://examples.adobe.com/flex3/devnet/dashboard/main.html
    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.

    • devgirl says:

      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. mrprabu says:

    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,
    mrprabu

    • devgirl says:

      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:itemRenderer>
      			<fx:Component>
      				<s:ButtonBarButton skinClass="skins.CustomTabBarButtonSkin" />
      			</fx:Component>
      		</s:itemRenderer>
      

      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!
      Holly

      • mrprabu says:

        hi thanks for ur help devgirl.. but ur suggestion

        2
        3
        4
        5

        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://ns.adobe.com/flex/spark”;
        @namespace mx “library://ns.adobe.com/flex/halo”;
        mx|TabNavigator.tabnstyle
        {
        selectedTabTextStyleName: selectedText;
        tabStyleName: tabStyle;
        backgroundColor: #83e6b4;
        }
        .selectedText
        {
        upSkin: Embed(source=”assets/images/selected-tab.png”);
        overSkin: Embed(source=”assets/images/selected-tab.png”);
        downSkin: Embed(source=”assets/images/selected-tab.png”);
        }
        .tabStyle
        {
        upSkin: Embed(source=”assets/images/submit-button.png”);
        overSkin: Embed(source=”assets/images/submitbutton.png”);
        downSkin: Embed(source=”assets/images/submit-button.png”);
        }

  9. BigAl says:

    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.

    http://flexwiz.amosl.com/flex/spark-tabs-with-close-button/

  10. Alex says:

    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

    • devgirl says:

      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 http://www.adobe.com/devnet/flex/tourdeflex/web/#docIndex=0;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?

    Thanks!!
    =Dave

  13. Joseph says:

    Is it possible to place the Tabs on the bottom?

    Currently, I want to see if Flex4 can cretae tabs for me positioned on the bottom.

    Currently I can use library://ns.tink.ws/flex/mx for his positionedTabNavigator and yet it looks wonky, cause rounded corners on the tab, rounds the wrong end.

  14. niamath says:

    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.

    • my super user says:

      Hi,
      I was wondering if you found any solution to this multirow missing functionality?
      Thanks!

  16. Hi,

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

  17. mac says:

    how would you disable the tab using your example? I tried enabled and visible did not work separate or together. I have a requirement to not go to the third tab until certain conditions are met. My default I would like it to be not clickable.

    • Chaos7703 says:

      @Mac and those who also found this wanting to disable individual tabs in Flex 4.5 (probably Flex 4 also). I finally figured out a solution. It feels like a hack to me, but Adobe’s not answering the call (this is one of dozens of places I found the question/problem with no answer for Flex 4+) and it’s working for me. Here’s a simplified example. (I really hope that this displays right! ;)



      Then you just call `setTabEnabled(theTabIndex,trueFalse)` in an event handler related to whatever decides why the tab is, or isn’t, enabled.

      I *should* extend the TabBar to support this, but I’ve already spent enough time trying to figure it out.

      Happy Coding =D
      Chaos7703

  18. Ezequias says:

    Could you tell me if it is possible to set this control in a way it could display the tabs like this picture: http://www.functionx.com/msdotnet/forms/tabcontrol8a.gif

    I meant a multiline property or something else.

  19. Vaibhav says:

    Hi,

    I am having similar problem as faced by Manish:

    Could not resolve to a component implementation.

    My declarations are:

    Thank you

  20. Kelvin says:

    can you add the buton to go to tab2 or tab3?

    • Chaos7703 says:

      @Kelvin:
      You can programmatically change tabs like this

      theTabBar.selectedIndex = 0;

      Where 0 is the first tab, 1 is the second, etc.

  21. Mike says:

    What is best practice for using moduleLoader with Tabbar control?

  22. Shannara says:

    Have anyone got this working on Flash Builder 4.6? All it gives is a blank screen …

  23. januani says:

    i found an answer. just put the creationpolicy = “all”
    bye

Leave a Reply