How to use the ButtonBar component

The ButtonBar class displays a set of buttons populated from a data collection.

Live preview of the ButtonBar component

The Basics

Start by creating a ButtonBar control, and add it to the display list.

var buttons = new ButtonBar();
addChild(buttons);

Data provider

To render some data in the button bar, pass in a collection that contains an object for each button.

buttons.dataProvider = new ArrayCollection([
    { text: "A" },
    { text: "B" },
    { text: "C" }
]);

Set the itemToText() method to get the text from each item to display in a button.

buttons.itemToText = function(item:Dynamic):String {
    return item.text;
};

Items in the collection are not required to be simple object literals, like in the example above. Instances of a class are allowed too (and encouraged as a best practice).

Add an event listener for ButtonBarEvent.ITEM_TRIGGER to perform an action when the user clicks or taps a button.

buttons.addEventListener(ButtonBarEvent.ITEM_TRIGGER, buttonBar_itemTriggerHandler);

Check the event's state property in the listener to determine which button was triggered.

function buttonBar_itemTriggerHandler(event:ButtonBarEvent):Void {
    trace("ButtonBar item trigger: " + event.state.text);
}

The state is an instance of theButtonBarItemState class, which includes various properties, such as the button's text, the full item data from the collection, and the index position of the item in the collection.

Add or remove buttons

To add a new button at the end, pass an object to the data provider's add() method.

var newItem = { text: "New Button" };
buttons.dataProvider.add(newItem);

To add a new button at a specific position, pass an object to the data provider's addAt() method.

var newItem = { text: "First Button" };
buttons.dataProvider.addAt(newItem, 0);

In the example above, a new button is added to the beginning.

Similarly, to remove a button, call remove() or removeAt() on the collection.

buttons.dataProvider.removeAt(0);

Styles

The buttons in a ButtonBar component may be styled to change its appearance.

Buttons

The buttons in a ButtonBar component are of type Button. Their appearance may be customized globally in a theme, or they may be customized outside of a theme on an specific, individual button bar.

See How to use the Button component for complete details about which styles are available for the buttons.

Style buttons globally

Use the ButtonBar.CHILD_VARIANT_BUTTON constant in a theme to provide a function that globally styles the buttons in all ButtonBar components.

styleProvider.setStyleFunction(
    Button,
    ButtonBar.CHILD_VARIANT_BUTTON,
    setButtonBar_Button_Styles);

The function should use the following signature.

function setButtonBar_Button_Styles(button:Button):Void {
    // ... set styles here
}

Style buttons in a specific ButtonBar

Customize the buttonRecycler property to customize the styles of the buttons in a specific ButtonBar component.

buttons.buttonRecycler = DisplayObjectRecycler.withFunction(() -> {
    var button = new Button();
    // ... set styles here
    return button;
});