Flex Multiline TabNavigator

Currently, if your label text is too long. The text will be truncated as “…” in the tab. However, there are very few posts talking about how to build a multiline tavnavigator in flex. And the flex API does not provide a style and properties to do such styling. We have to create custom classes.

Step 1: create a custom class extends the original mx.controls.tabclasses.tab class, and break the text of the tab into multiline. The steps are exactly the same as creating a multiline button (Creating multiline button: http://blogs.adobe.com/aharui/2007/04/multiline_buttons.html). It is because tab class itself extends Button class originally.

Step 2: create a custom class extends mx.controls.tabBar. and change the tab class to your custom tab class created in Step 1 by following code. 

navItemFactory = new ClassFactory( CustomTab ); 

Step 3: create a custom class extends mx.containers.tabNavigator and change the tabBar into your custom tabBar class created in Step 2.

override protected function createChildren ():void

{

          if (!tabBar) {

                       tabBar = new CustomTabBar();

                       tabBar.set ….. 

          }

}

It  is really not that easy to have a multiline tabNavigator. ~I will attach the sample source code later.

Reference:

http://www.remotesynthesis.com/post.cfm/using-custom-tab-classes-with-the-flex-tabbar

http://wiki.mediaboxtraining.com/doku.php/tutorials:flex:tabcontrol

http://blogs.adobe.com/aharui/2007/04/multiline_buttons.html

http://www.mail-archive.com/flexcoders@yahoogroups.com/msg106481.html

3 Comments

  • Vivek

    Hi Way,

    I have been trying to do this for a long time but no success, cna you give a concrete example for the implementation, what i could find is TabBar uses ButtonBar to implement the tabs, but not sure how to extend that so that it wraps around the tabs.

    Thanks in advance,

    Vivek

    21 Sep
    Reply
    • Way

      Hi Vivek,

      Actually I have posted the sample source code on another post. If you find any problems, please let me know :)

      http://way.cubeforge.net/blog/2009/04/multiline-tabnavigator-2/

      Way

  • Kritavarman

    Hi Way,

    I am facing problem with the changing skin of Multiline TabNavigator. The CSS that I have applied changes the Multiline TabNavigator back to Single Line in Selected and Disable mode.

    Any Solution for this.

    - Kritavarman

    17 May
    Reply

You must be logged in to post a comment.