scroll tabs in flex 3

Question

Hi,
I need to make a tab navigator in flex3. If no. of tabs increases then i need to show scrollbar to navigate over the tabs. I am trying to do this using tabBar. But if no. of tab increases it puts scrollbar around the parent of tabBar and its content. Whereas i need to scroll only tabs not its content like in firefox. Could anybody please suggest me how could i accomplish this.

Thanks in Advance

Answer 1

Ditch the tab navigator.

Use a tabBar to toggle the children of a viewstack, put that tab bar inside a box, set the boxes to a specific width, then the box will give you a scroll bar when the tabs extend beyond the width. You can move/style that scrollbar so you can line everything up right.

By separating the tabBar from the navigator (in this case the view stack) you can put it in a different parent and get the result you're looking for.

As per your comment: I don't have an example but there is something similar here: http://fleksray.org/adobe_flex_components_en.html#Button%20Scrolling%20Canavas

This is how I would do it:

/--------------------------------------------------------------------------------------\
|                                 BOX-A                                                |
|  /--------\/-----------------------------------------------------------\/---------\  |
|  |        ||                                                           ||         |  |
|  |  BOX-B ||                     BOX-C                                 || BOX-D   |  |
|  |        ||                                                           ||         |  |
|  \--------/\-----------------------------------------------------------/\---------/  |
|                                                                                      |
\--------------------------------------------------------------------------------------/

Box B is just big enough for your arrow image, same with box D. Box C contains your tabBar, but turn horizontalscrollpolicy to off. All 3 of these go into Box A which can be a HBox to make layout easier. Add a click event handler to your arrow images to set Box-c's horizontalscrollposition +=20, or -=20 depending on your arrow. (change those numbers to suit you). You can even go the extra mile and set the includeInLayout properties of boxes B and D to false unless your tabBar takes up more than the width of Box C.