Returns the text baseline measurement, in pixels.

Creates each button in the group. A button must be an instance of Button. This factory can be used to change properties on the buttons when they are first created. For instance, if you are skinning Feathers components without a theme, you might use this factory to set skins and other styles on a button.

Optionally, the first button and the last button may be different than the other buttons that are in the middle. Use the firstButtonFactory and/or the lastButtonFactory to customize one or both of these buttons.

This function is expected to have the following signature:

function():Button

The following example skins the buttons using a custom button factory:

group.buttonFactory = function():Button
{
    var button:Button = new Button();
    button.defaultSkin = new Image( texture );
    return button;
};

The default value is null.

See also

Modifies a button, perhaps by changing its label and icons, based on the item from the data provider that the button is meant to represent. The default buttonInitializer function can set the button's label and icons if label and/or any of the Button icon fields (defaultIcon, upIcon, etc.) are present in the item. You can listen to Event.TRIGGERED and Event.CHANGE by passing in functions for each.

This function is expected to have the following signature:

function( button:Button, item:Object ):void

The following example provides a custom button initializer:

group.buttonInitializer = function( button:Button, item:Object ):void
{
    button.label = item.label;
};

See also

An object that stores properties for all of the button group's buttons, and the properties will be passed down to every button when the button group validates. For a list of available properties, refer to feathers.controls.Button.

These properties are shared by every button, so anything that cannot be shared (such as display objects, which cannot be added to multiple parents) should be passed to buttons using the buttonFactory or in the theme.

If the subcomponent has its own subcomponents, their properties can be set too, using attribute @ notation. For example, to set the skin on the thumb which is in a SimpleScrollBar, which is in a List, you can use the following syntax:

list.verticalScrollBarProperties.@thumbProperties.defaultSkin = new Image(texture);

The following example sets some properties on all of the buttons:

group.buttonProperties.horizontalAlign = HorizontalAlign.LEFT;
group.buttonProperties.verticalAlign = VerticalAlign.TOP;

Setting properties in a buttonFactory function instead of using buttonProperties will result in better performance.

The default value is null.

See also

Resets the properties of an individual button, using the item from the data provider that was associated with the button.

This function is expected to have one of the following signatures:

function( tab:Button ):void

function( tab:Button, oldItem:Object ):void

In the following example, a custom button releaser is passed to the button group:

group.buttonReleaser = function( button:Button, oldItem:Object ):void
{
    button.label = null;
};

See also

The value added to the styleNameList of the buttons. This variable is protected so that sub-classes can customize the button style name in their constructors instead of using the default style name defined by DEFAULT_CHILD_STYLE_NAME_BUTTON.

To customize the button style name without subclassing, see customButtonStyleName.

See also

The collection of data to be displayed with buttons.

The following example sets the button group's data provider:

group.dataProvider = new ArrayCollection(
[
    { label: "Yes", triggered: yesButton_triggeredHandler },
    { label: "No", triggered: noButton_triggeredHandler },
    { label: "Cancel", triggered: cancelButton_triggeredHandler },
]);

By default, items in the data provider support the following properties from Button

• label
• defaultIcon
• upIcon
• downIcon
• hoverIcon
• disabledIcon
• defaultSelectedIcon
• selectedUpIcon
• selectedDownIcon
• selectedHoverIcon
• selectedDisabledIcon
• isSelected (only supported by ToggleButton)
• isToggle (only supported by ToggleButton)
• isEnabled
• name

Additionally, you can add the following event listeners:

• Event.TRIGGERED
• Event.CHANGE (only supported by ToggleButton)

Event listeners may have one of the following signatures:

function(event:Event):void

function(event:Event, eventData:Object):void

function(event:Event, eventData:Object, dataProviderItem:Object):void

To use properties and events that are only supported by ToggleButton, you must provide a buttonFactory that returns a ToggleButton instead of a Button.

You can pass a function to the buttonInitializer property that can provide custom logic to interpret each item in the data provider differently. For example, you could use it to support additional properties or events.

The default value is null.

See also

If not null, creates the first button. If the firstButtonFactory is null, then the button group will use the buttonFactory. The first button must be an instance of Button. This factory can be used to change properties on the first button when it is initially created. For instance, if you are skinning Feathers components without a theme, you might use this factory to set skins and other styles on the first button.

This function is expected to have the following signature:

function():Button

The following example skins the first button using a custom factory:

group.firstButtonFactory = function():Button
{
    var button:Button = new Button();
    button.defaultSkin = new Image( texture );
    return button;
};

The default value is null.

See also

The value added to the styleNameList of the first button.

To customize the first button name without subclassing, see customFirstButtonStyleName.

See also

The default IStyleProvider for all ButtonGroup components.

The default value is null.

See also

If not null, creates the last button. If the lastButtonFactory is null, then the button group will use the buttonFactory. The last button must be an instance of Button. This factory can be used to change properties on the last button when it is initially created. For instance, if you are skinning Feathers components without a theme, you might use this factory to set skins and other styles on the last button.

This function is expected to have the following signature:

function():Button

The following example skins the last button using a custom factory:

group.lastButtonFactory = function():Button
{
    var button:Button = new Button();
    button.defaultSkin = new Image( texture );
    return button;
};

The default value is null.

See also

The value added to the styleNameList of the last button.

To customize the last button style name without subclassing, see customLastButtonStyleName.

See also

Constructor.

Dispatched when one of the buttons is triggered. The data property of the event contains the item from the data provider that is associated with the button that was triggered.

The following example listens to Event.TRIGGERED on the button group instead of on individual buttons:

group.dataProvider = new ArrayCollection(
[
    { label: "Yes" },
    { label: "No" },
    { label: "Cancel" },
]);
group.addEventListener( Event.TRIGGERED, function( event:Event, data:Object ):void
{
   trace( "The button with label \"" + data.label + "\" was triggered." );
}

The properties of the event object have the following values:

Determines how the buttons are vertically aligned within the bounds of the button group (on the y-axis).

The following example aligns the group's content to the top:

group.verticalAlign = VerticalAlign.TOP;

The default value is feathers.layout.VerticalAlign.JUSTIFY.

See also

The minimum space, in pixels, between the group's left edge and the group's buttons.

In the following example, the padding on the left edge of the group is set to 20 pixels:

group.paddingLeft = 20;

The default value is 0.

See also

The minimum space, in pixels, between the group's bottom edge and the group's buttons.

In the following example, the padding on the bottom edge of the group is set to 20 pixels:

group.paddingBottom = 20;

The default value is 0.

See also

The minimum space, in pixels, between the group's right edge and the group's buttons.

In the following example, the padding on the right edge of the group is set to 20 pixels:

group.paddingRight = 20;

The default value is 0.

See also

The minimum space, in pixels, between the group's top edge and the group's buttons.

In the following example, the padding on the top edge of the group is set to 20 pixels:

group.paddingTop = 20;

The default value is 0.

See also

Quickly sets all padding properties to the same value. The padding getter always returns the value of paddingTop, but the other padding values may be different.

In the following example, the padding of all sides of the group is set to 20 pixels:

group.padding = 20;

The default value is 0.

See also

Space, in pixels, between the last two buttons. If NaN, the default gap property will be used.

The following example sets the gap between the last and next to last button to a different value than the standard gap:

group.lastGap = 30;
group.gap = 20;

The default value is NaN.

See also

Determines how the buttons are horizontally aligned within the bounds of the button group (on the x-axis).

The following example aligns the group's content to the left:

group.horizontalAlign = HorizontalAlign.LEFT;

The default value is feathers.layout.HorizontalAlign.JUSTIFY.

See also

Space, in pixels, between buttons.

The following example sets the gap used for the button layout to 20 pixels:

group.gap = 20;

The default value is 0.

See also

Space, in pixels, between the first two buttons. If NaN, the default gap property will be used.

The following example sets the gap between the first and second button to a different value than the standard gap:

group.firstGap = 30;
group.gap = 20;

The default value is NaN.

See also

If true, the buttons will be equally sized in the direction of the layout. In other words, if the button group is horizontal, each button will have the same width, and if the button group is vertical, each button will have the same height. If false, the buttons will be sized to their ideal dimensions.

The following example doesn't distribute the button sizes:

group.distributeButtonSizes = false;

The default value is true.

The button group layout is either vertical or horizontal.

If the direction is Direction.HORIZONTAL and distributeButtonSizes is false, the buttons may be displayed in multiple rows, if they won't fit in one row horizontally.

The following example sets the layout direction of the buttons to line them up horizontally:

group.direction = Direction.HORIZONTAL;

Note: The Direction.NONE constant is not supported.

The default value is feathers.layout.Direction.VERTICAL.

See also

A style name to add to the last button in this button group. Typically used by a theme to provide different styles to the last button.

The following example provides a custom last button style name:

group.customLastButtonStyleName = "my-custom-last-button";

In your theme, you can target this sub-component style name to provide different styles than the default:

getStyleProviderForClass( Button ).setFunctionForStyleName( "my-custom-last-button", setCustomLastButtonStyles );

The default value is null.

See also

A style name to add to the first button in this button group. Typically used by a theme to provide different styles to the first button.

The following example provides a custom first button style name:

group.customFirstButtonStyleName = "my-custom-first-button";

In your theme, you can target this sub-component style name to provide different styles than the default:

getStyleProviderForClass( Button ).setFunctionForStyleName( "my-custom-first-button", setCustomFirstButtonStyles );

The default value is null.

See also

A style name to add to all buttons in this button group. Typically used by a theme to provide different styles to different button groups.

The following example provides a custom button style name:

group.customButtonStyleName = "my-custom-button";

In your theme, you can target this sub-component style name to provide different styles than the default:

getStyleProviderForClass( Button ).setFunctionForStyleName( "my-custom-button", setCustomButtonStyles );

The default value is null.

See also

The default value added to the styleNameList of the buttons.

See also