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