Using TabBar in Flash CS3

In Getting Started, we created a simple TabBar with three tabs. Let's reuse the TabBar we created, and bind the its selectedIndex property to the value property of a NumericStepper component.

First, let's move the source code from the previous example into a class. This class should be used as the Document Class in our FLA file. Please be sure that the TabBar component appears in your library, or your project will not run correctly.

package { import flash.display.MovieClip; import fl.data.DataProvider; import com.yahoo.astra.fl.controls.TabBar; public class TabBarNumericStepper extends MovieClip { public function TabBarNumericStepper() { var tabData:Array = [ "Tab 1", "Tab 2", "Tab 3" ]; this.tabBar = new TabBar(); this.tabBar.dataProvider = new DataProvider( tabData ); this.tabBar.selectedIndex = 0; this.tabBar.move(10, 10); this.addChild( this.tabBar ); } private var tabBar:TabBar; } }

Next, let's add a NumericStepper component. Drag the component from the Components panel into your library. We're going to insantiate it in ActionScript like we did with the TabBar, but its certainly possible to drag it onto the stage instead. To begin, declare the NumericStepper instance under the tabBar variable declaration.

private var stepper:NumericStepper;

The following code will instantiate the NumericStepper. It should appear after the the call to addChild() when we added the TabBar to the display list.

this.stepper = new NumericStepper(); this.stepper.minimum = -1; this.stepper.maximum = 2; this.stepper.value = 0; this.stepper.stepSize = 1; this.stepper.move( 10, 50 ); this.addChild(this.stepper);

After we create the NumericStepper, we set its minimum and maximum values to match the range of indices that may be selected on the TabBar, we set the initial value to zero, and we tell the NumericStepper that it should increment or decrement its value by one when the up or down buttons are clicked.

Now, we want each component to react when a value changes on the other. Let's start by listening for the change event from the TabBar instance.

this.tabBar.addEventListener( Event.CHANGE, tabBarChangeHandler );

Though it doesn't exist, because we haven't written it yet, the function named tabBarChangeHandler will be called when the selectedIndex value changes on our TabBar. Let's create this function now. private function tabBarChangeHandler( event:Event ):void { var index:int = ( event.currentTarget as TabBar ).selectedIndex; this.stepper.value = index; }

We simply pass the selectedIndex value from the TabBar to the value property of the NumericStepper. Let's complete this example by setting up a similar function to change the TabBar's index when the value property changes on the NumericStepper. Like before, we need to listen for a change event, but it originates from the NumericStepper this time:

this.stepper.addEventListener( Event.CHANGE, stepperChangeHandler );

When the change event triggers the stepperChangeHandler function, we can pass the value property from the NumericStepper to the selectedIndex property of the TabBar.

private function stepperChangeHandler( event:Event ):void { var value:int = ( event.currentTarget as NumericStepper ).value; this.tabBar.selectedIndex = value; }

Run the example, and you'll discover that by changing either component, the other will show the new value as well.

Example: TabBar with NumericStepper

Download the FLA file and the ActionScript file.

For additional information, please take a look at the Examples section for functional demonstrations and the ActionScript 3.0 Class Reference for full details on every property, method, and style available to the TabBar component.