TabBar is a UI component used for switching between different application states. Implemented as a dynamically resizing row of Tab buttons, whose labels are controlled by a DataProvider.
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.
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.
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.
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.
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.
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:
When the change event triggers the
stepperChangeHandler function, we can pass the
value property from the NumericStepper to the
selectedIndex property of the TabBar.
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
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.