ButtonBar

Overview

A ButtonBar and TabBar that supports dragging, closing buttons, and animation.

ButtonBar & TabBar

The Ardisia ButtonBar package includes both a ButtonBar and a TabBar. The differences are primarily visual and for the TabBar the "requireSelection" property must be true.

Creating the ButtonBar Component

The Ardisia ButtonBar and TabBar extends the Flex SDK ButtonBarBase class and can therefore be added to any container that implements IVisualElementContainer.

Using the ButtonBar Component

The Ardisia ButtonBar and TabBar are setup and used the same way as the Flex SDK ButtonBar and TabBar. The differences are detailed below.

Button Dragging

When a button is dragged, the relative positioning of the buttons will change. Dragging can be disabled via listening for the DRAG_STARTING event and calling preventDefault() on the event.

Closable

Buttons can have an optional close icon added to them via the "closableField" property. Set the name of the closable field via the "closableField" property on the button bar (defaults to "closable"). Then, on each data item in the dataProvider used to create a button, add a boolean value to the field to specify whether to make the button closable or not.

See the example below:

<buttonBar:ButtonBar closableField="closable" >
     <buttonBar:dataProvider>
          <s:ArrayCollection>
               <s:DataItem label="Tab A" closable="true"/>
               <s:DataItem label="Tab Button B" closable="true"/>
               <s:DataItem label="Tab But C" closable="true"/>
               <s:DataItem label="Tab Button in ButtonBar D" closable="true"/>
               <s:DataItem label="Tab E" closable="true"/>
          </s:ArrayCollection>
     </buttonBar:dataProvider>
</buttonBar:ButtonBar>

In the example above, the "closableField" on the button bar was "closable" and a boolean value was defined on each data object in the dataProvider.

Closure can be disabled via listening for the BUTTON_CLOSING event and calling preventDefault() on the event.

Animations & Effects

By default, when buttons are shifted during user initiated drags or add/removal, the buttons will animate to their new positions.

Use the "duration" and "easer" properties to control the animations. Set the duration to 0 to skip the animation altogether.

Try a duration of 1000 and a Bounce easer, looks rather cool.

SelectedItem vs. SelectedIndex

The selectedIndex will change as the user rearranges buttons. In other words, if a selected button is moved from its start position, the selectedIndex will update (although no event will dispatch). Keep this in mind if binding to the selectedIndex.

Use the selectedItem property to determine what button is selected since this will not change during user dragging.

Layout

Designed to use a custom layout class; the ButtonBarLayout class in the Ardisia ButtonBar package.

The most relevant consideration with this layout class is whether the "usePreferredWidth" property is true or false. If true, then each button will be laid out according to its preferred width. If false, the layout will attempt to fill the entire available space by setting each button's width as close to each other as possible and fill the available space. For all cases, button width will respect the "maxButtonWidth" value.

If the "usePreferredWidth" property is true, and the buttons will overflow the available space, they will be automatically shrunk proportionally to fit.

Truncation

If the "labelDisplay" skin part is truncated, the button's label will display in a tooltip.

Preferred Width Label Bug

When the label for a button supports truncation, there is a bug getting the correct preferred width after the button is shrunk to the point the truncation ellipsis is hidden. Proper measurement never recovers after the truncation ellipsis is hidden. This isn't an issue when the layout's "usePreferredWidth" property is false because the button's measurements are ignored.

To compensate for this bug, included skins set the labelDisplay skin part to a minWidth so that the truncation ellipsis is never hidden. In the skin's layout, the label is hidden when its width falls below a certain width. This preserves the desired behaviour without triggering the measurement bug.

Item Renderers

The item renderer factory is the ButtonBarButton class in the Ardisia ButtonBar package. Adds support for the closable states.

Accessibility & Focus

Field can be tabbed to and interacted with via the keyboard just like the Flex SDK button bar classes

Selected Custom Events

CLOSE_BUTTON_CLICK
ardisia.components.buttonBar.events.ButtonBarEvent
Dispatched when a ButtonBarButton's closeButtonPart is clicked.

DRAG_STARTING
ardisia.components.buttonBar.events.ButtonBarEvent
Dispatched immediately before a button is dragged. Can be cancelled.

DRAG_START
ardisia.components.buttonBar.events.ButtonBarEvent
Dispatched when a button drag starts.

DRAGGING
ardisia.components.buttonBar.events.ButtonBarEvent
Dispatched while a button is dragging.

DRAG_END
ardisia.components.buttonBar.events.ButtonBarEvent
Dispatched when a drag ends.

BUTTON_CLOSING
ardisia.components.buttonBar.events.ButtonBarEvent
Dispatched when a button is about to be closed via the close button. Can be cancelled.

BUTTON_CLOSE
ardisia.components.buttonBar.events.ButtonBarEvent
Dispatched when a button is closed via the close button.

Themes & Skinning

Skins are provided for the Spark, London, and Stockholm themes.

Example

See the ButtonBar demo application for example code.

Back To Top