CODEWITHSUNDEEP
apache-flexflex3menuflex4
fred august
fred august

Reputation: 1107

How to implement this pseudo TabNavigation UI in Flex?

enter image description here

I'm trying to implement the above navigation UI in flex. Basically I'd like a bar with two (or more) big buttons (see top picture, buttons one and two). When the user clicks on button one, a set of new buttons (specific to mode one) appear in the lower part of the button strip, and can be selected (see lower left pic). Same happens if you click on button two (see lower right pic). Basically, buttons one and two select their own bar with buttons that can be used to do stuff.

Note: this is not intended to be a hover menu, i.e. the lower buttons are visible until the user selects another higher level button or clicks on the background of the bar.

I thought about using either a spark TabBar or ButtonBar container, but I'm not sure that's the best approach.

thank you for any advice or pointers to examples!

Upvotes: 1

Views: 242

Answers (1)

JeffryHouser
JeffryHouser

Reputation: 39408

Since you tagged this as both flex 3 and Flex 4, I'd recommend using the Flex 4 components for this one.

Use a bunch of tab bars along with skin states of your custom component. Conceptually something like this:

<s:TabBar id="mainTabBar" change="onChange(event)"/>
<s:TabBar id="firstSubBar" includeIn="firstSelected" />
<s:TabBar id="secondSubBar" includeIn="secondSelected" />
<s:TabBar id="thirdSubBar" includeIn="thirdSelected" />

Have a change method something like this:

protected function changeSelection(event:IndexChangeEvent): void {
  invalidateSkinState()
}

And in your getCurrentSkinState() method, do something like this:

override protected getCurrentSkinState():void{
  if(mainTabBar.selectedIndex == 1){
   return "firstSelected";
 } else if(mainTabBar.selectedIndex == 2){
   return "secondSelected";
 } // etc. etc// 

 return super.getCurrentSkinState();
}

There is no reason you can't do something similar w/ the MX TabBar.

Does that help?

Upvotes: 4

Related Questions