Packagefeathers.controls
Classpublic class TabBar
InheritanceTabBar Inheritance FeathersControl Inheritance starling.display.Sprite
Implements IFocusDisplayObject, ITextBaselineControl

Product Version : Feathers 1.0.0

A line of tabs (vertical or horizontal), where one may be selected at a time.

The following example sets the data provider, selects the second tab, and listens for when the selection changes:

var tabs:TabBar = new TabBar();
tabs.dataProvider = new ArrayCollection(
[
    { label: "One" },
    { label: "Two" },
    { label: "Three" },
]);
tabs.selectedIndex = 1;
tabs.addEventListener( Event.CHANGE, tabs_changeHandler );
this.addChild( tabs );

See also

How to use the Feathers TabBar component


Public Properties
 PropertyDefined By
 InheritedaddedEffect : Function
An optional effect that is activated when the component is added to the stage.
FeathersControl
  baseline : Number
[read-only] Returns the text baseline measurement, in pixels.
TabBar
  dataProvider : IListCollection
The collection of data to be displayed with tabs.
TabBar
 InheriteddefaultTextEditorFactory : Function
[static] A function used by all UI controls that support text editor to create an ITextEditor instance.
FeathersControl
 InheriteddefaultTextRendererFactory : Function
[static] A function used by all UI controls that support text renderers to create an ITextRenderer instance.
FeathersControl
 Inheriteddepth : int
[read-only] The component's depth in the display list, relative to the stage.
FeathersControl
 InheritedeffectsSuspended : Boolean
[read-only] Indicates if effects have been suspended.
FeathersControl
  enabledField : String
The field in the item that determines if the tab is enabled.
TabBar
  enabledFunction : Function
A function used to determine if a specific tab is enabled.
TabBar
 InheritedexplicitHeight : Number
[read-only] The height value explicitly set by passing a value to the height setter or by calling the setSize() function.
FeathersControl
 InheritedexplicitMaxHeight : Number
[read-only] The maximum height value explicitly set by passing a value to the maxHeight setter.
FeathersControl
 InheritedexplicitMaxWidth : Number
[read-only] The maximum width value explicitly set by passing a value to the maxWidth setter.
FeathersControl
 InheritedexplicitMinHeight : Number
[read-only] The minimum height value explicitly set by passing a value to the minHeight setter.
FeathersControl
 InheritedexplicitMinWidth : Number
[read-only] The minimum width value explicitly set by passing a value to the minWidth setter.
FeathersControl
 InheritedexplicitWidth : Number
[read-only] The width value explicitly set by passing a value to the width setter or to the setSize() method.
FeathersControl
  firstTabFactory : Function
If not null, creates the first tab.
TabBar
 InheritedfocusInEffect : Function
An optional effect that is activated when the component receives focus.
FeathersControl
 InheritedfocusManager : IFocusManager
The implementation of this property is provided for convenience, but it cannot be used unless a subclass implements the IFocusDisplayObject interface. The current focus manager for this component.
FeathersControl
 InheritedfocusOutEffect : Function
An optional effect that is activated when the component loses focus.
FeathersControl
 InheritedfocusOwner : IFocusDisplayObject
The implementation of this property is provided for convenience, but it cannot be used unless a subclass implements the IFocusDisplayObject interface. Used for associating focusable display objects that are not direct children with an "owner" focusable display object, such as pop-ups.
FeathersControl
  globalStyleProvider : IStyleProvider
[static] The default IStyleProvider for all TabBar components.
TabBar
 Inheritedheight : Number
[override] The height of the component, in pixels.
FeathersControl
 InheritedhideEffect : Function
An optional effect that is activated when the component is hidden.
FeathersControl
  iconField : String
The field in the item that contains a display object to be displayed as an icon or other graphic next to the label in the tab.
TabBar
  iconFunction : Function
A function used to generate an icon for a specific tab, based on its associated item in the data provider.
TabBar
 InheritedincludeInLayout : Boolean
Determines if the ILayout should use this object or ignore it.
FeathersControl
 InheritedisCreated : Boolean
[read-only] Determines if the component has been initialized and validated for the first time.
FeathersControl
 InheritedisEnabled : Boolean
Indicates whether the control is interactive or not.
FeathersControl
 InheritedisFocusEnabled : Boolean
The implementation of this property is provided for convenience, but it cannot be used unless a subclass implements the IFocusDisplayObject interface. Determines if this component can receive focus.
FeathersControl
 InheritedisInitialized : Boolean
[read-only] Determines if the component has been initialized yet.
FeathersControl
 InheritedisQuickHitAreaEnabled : Boolean
Similar to mouseChildren on the classic display list.
FeathersControl
 InheritedisShowingFocus : Boolean
[read-only] The implementation of this method is provided for convenience, but it cannot be used unless a subclass implements the IFocusDisplayObject interface. Indicates if the showFocus() method has been called on the object when it has focus.
FeathersControl
  labelField : String
The field in the item that contains the label text to be displayed by the tabs.
TabBar
  labelFunction : Function
A function used to generate label text for a specific tab.
TabBar
  lastTabFactory : Function
If not null, creates the last tab.
TabBar
 InheritedlayoutData : ILayoutData
Extra parameters associated with this display object that will be used by the layout algorithm.
FeathersControl
 InheritedmaintainTouchFocus : Boolean
[read-only] The implementation of this method is provided for convenience, but it cannot be used unless a subclass implements the IFocusDisplayObject interface. If true, the display object should remain in focus, even if something else is touched.
FeathersControl
 InheritedmaxHeight : Number
The maximum recommended height to be used for self-measurement and, optionally, by any code that is resizing this component.
FeathersControl
 InheritedmaxWidth : Number
The maximum recommended width to be used for self-measurement and, optionally, by any code that is resizing this component.
FeathersControl
 InheritedminHeight : Number
The minimum recommended height to be used for self-measurement and, optionally, by any code that is resizing this component.
FeathersControl
 InheritedminTouchHeight : Number
If using isQuickHitAreaEnabled, and the hit area's height is smaller than this value, it will be expanded.
FeathersControl
 InheritedminTouchWidth : Number
If using isQuickHitAreaEnabled, and the hit area's width is smaller than this value, it will be expanded.
FeathersControl
 InheritedminWidth : Number
The minimum recommended width to be used for self-measurement and, optionally, by any code that is resizing this component.
FeathersControl
 InheritedmoveEffect : Function
An optional effect that is activated when the component is moved to a new position.
FeathersControl
 InheritednextDownFocus : IFocusDisplayObject
The implementation of this property is provided for convenience, but it cannot be used unless a subclass implements the IFocusDisplayObject interface. The next object that will receive focus when Keyboard.DOWN is pressed at KeyLocation.D_PAD and a focus manager is enabled.
FeathersControl
 InheritednextLeftFocus : IFocusDisplayObject
The implementation of this property is provided for convenience, but it cannot be used unless a subclass implements the IFocusDisplayObject interface. The next object that will receive focus when Keyboard.LEFT is pressed at KeyLocation.D_PAD and a focus manager is enabled.
FeathersControl
 InheritednextRightFocus : IFocusDisplayObject
The implementation of this property is provided for convenience, but it cannot be used unless a subclass implements the IFocusDisplayObject interface. The next object that will receive focus when Keyboard.RIGHT is pressed at KeyLocation.D_PAD and a focus manager is enabled.
FeathersControl
 InheritednextTabFocus : IFocusDisplayObject
The implementation of this property is provided for convenience, but it cannot be used unless a subclass implements the IFocusDisplayObject interface. The next object that will receive focus when the tab key is pressed when a focus manager is enabled.
FeathersControl
 InheritednextUpFocus : IFocusDisplayObject
The implementation of this property is provided for convenience, but it cannot be used unless a subclass implements the IFocusDisplayObject interface. The next object that will receive focus when Keyboard.UP is pressed at KeyLocation.D_PAD and a focus manager is enabled.
FeathersControl
 InheritedpreviousTabFocus : IFocusDisplayObject
The implementation of this property is provided for convenience, but it cannot be used unless a subclass implements the IFocusDisplayObject interface. The previous object that will receive focus when the tab key is pressed while holding shift when a focus manager is enabled.
FeathersControl
 InheritedresizeEffect : Function
An optional effect that is activated when the component is resized with new dimensions.
FeathersControl
  selectedIndex : int
The index of the currently selected tab.
TabBar
  selectedItem : Object
The currently selected item from the data provider.
TabBar
 InheritedshowEffect : Function
An optional effect that is activated when the component is shown.
FeathersControl
 InheritedstyleName : String
The concatenated styleNameList, with values separated by spaces.
FeathersControl
 InheritedstyleNameList : TokenList
[read-only] Contains a list of all "styles" assigned to this control.
FeathersControl
 InheritedstyleProvider : IStyleProvider
When a component initializes, a style provider may be used to set properties that affect the component's visual appearance.
FeathersControl
  tabFactory : Function
Creates each tab.
TabBar
  tabInitializer : Function
Modifies the properties of an individual tab, using an item from the data provider.
TabBar
  tabProperties : Object
An object that stores properties for all of the tab bar's tabs, and the properties will be passed down to every tab when the tab bar validates.
TabBar
  tabReleaser : Function
Resets the properties of an individual tab, using the item from the data provider that was associated with the tab.
TabBar
 InheritedtoolTip : String
Text to display in a tool tip to when hovering over this component, if the ToolTipManager is enabled.
FeathersControl
 Inheritedwidth : Number
[override] The width of the component, in pixels.
FeathersControl
Protected Properties
 PropertyDefined By
 InheritedactualHeight : Number = 0
The final height value that should be used for layout.
FeathersControl
 InheritedactualMinHeight : Number = 0
The final minimum height value that should be used for layout.
FeathersControl
 InheritedactualMinWidth : Number = 0
The final minimum width value that should be used for layout.
FeathersControl
 InheritedactualWidth : Number = 0
The final width value that should be used for layout.
FeathersControl
 InheriteddefaultStyleProvider : IStyleProvider
[read-only] When the FeathersControl constructor is called, the styleProvider property is set to this value.
FeathersControl
  firstTabStyleName : String = "feathers-tab-bar-tab"
The value added to the styleNameList of the first tab.
TabBar
  lastTabStyleName : String = "feathers-tab-bar-tab"
The value added to the styleNameList of the last tab.
TabBar
  tabStyleName : String = "feathers-tab-bar-tab"
The value added to the styleNameList of the tabs.
TabBar
  toggleGroup : ToggleGroup
The toggle group.
TabBar
Public Methods
 MethodDefined By
  
Constructor.
TabBar
 Inherited
getBounds(targetSpace:DisplayObject, resultRect:Rectangle = null):Rectangle
[override] Feathers components use an optimized getBounds() implementation that may sometimes behave differently than regular Starling display objects.
FeathersControl
 Inherited
hideFocus():void
The implementation of this method is provided for convenience, but it cannot be used unless a subclass implements the IFocusDisplayObject interface.
FeathersControl
 Inherited
If the component has not yet initialized, initializes immediately.
FeathersControl
 Inherited
invalidate(flag:String):void
Call this function to tell the UI control that a redraw is pending.
FeathersControl
 Inherited
isInvalid(flag:String = null):Boolean
Indicates whether the control is pending validation or not.
FeathersControl
 Inherited
move(x:Number, y:Number):void
Sets both the x and the y positions of the control in a single function call.
FeathersControl
 Inherited
removeFromParentWithEffect(effect:Function, dispose:Boolean = false):void
Plays an effect before removing the component from its parent.
FeathersControl
 Inherited
Resets the styleProvider property to its default value, which is usually the global style provider for the component.
FeathersControl
 Inherited
Indicates that effects should be re-activated after being suspended.
FeathersControl
  
setSelectedIndexWithAnimation(selectedIndex:int):void
Changes the selectedIndex property, but animates the selectionSkin to the new position, as if the user triggered a tab.
TabBar
  
setSelectedItemWithAnimation(selectedItem:Object):void
Changes the selectedItem property, but animates the selectionSkin to the new position, as if the user triggered a tab.
TabBar
 Inherited
setSize(width:Number, height:Number):void
Sets both the width and the height of the control in a single function call.
FeathersControl
 Inherited
showFocus():void
The implementation of this method is provided for convenience, but it cannot be used unless a subclass implements the IFocusDisplayObject interface.
FeathersControl
 Inherited
Indicates that effects should not be activated temporarily.
FeathersControl
 Inherited
validate():void
Immediately validates the display object, if it is invalid.
FeathersControl
Protected Methods
 MethodDefined By
 Inherited
clearInvalidationFlag(flag:String):void
Clears an invalidation flag.
FeathersControl
  
TabBar
 Inherited
draw():void
Override to customize layout and to adjust properties of children.
FeathersControl
 Inherited
focusInHandler(event:Event):void
Default event handler for FeathersEventType.FOCUS_IN that may be overridden in subclasses to perform additional actions when the component receives focus.
FeathersControl
 Inherited
focusOutHandler(event:Event):void
Default event handler for FeathersEventType.FOCUS_OUT that may be overridden in subclasses to perform additional actions when the component loses focus.
FeathersControl
 Inherited
The next style that is set will not be restricted.
FeathersControl
 Inherited
initialize():void
Called the first time that the UI control is added to the stage, and you should override this function to customize the initialization process.
FeathersControl
 Inherited
processStyleRestriction(key:Object):Boolean
Used by setters for properties that are considered "styles" to determine if the setter has been called directly on the component or from a style provider.
FeathersControl
 Inherited
Updates the focus indicator skin by showing or hiding it and adjusting its position and dimensions.
FeathersControl
 Inherited
saveMeasurements(width:Number, height:Number, minWidth:Number = 0, minHeight:Number = 0):Boolean
Saves the dimensions and minimum dimensions calculated for the component.
FeathersControl
 Inherited
setInvalidationFlag(flag:String):void
Sets an invalidation flag.
FeathersControl
 Inherited
setSizeInternal(width:Number, height:Number, canInvalidate:Boolean):Boolean
Sets the width and height of the control, with the option of invalidating or not.
FeathersControl
Events
 Event Summary Defined By
  Dispatched when the selected tab changes.TabBar
 InheritedDispatched after the component has validated for the first time.FeathersControl
 InheritedDispatched after initialize() has been called, but before the first time that draw() has been called.FeathersControl
 InheritedDispatched when the width or height of the control changes.FeathersControl
  Dispatched when one of the tabs is triggered.TabBar
Styles
 StyleDefined By
  
A style name to add to the first tab in this tab bar.
TabBar
  
A style name to add to the last tab in this tab bar.
TabBar
  
A style name to add to all tabs in this tab bar.
TabBar
  
direction : String
The tab bar layout is either vertical or horizontal.
TabBar
  
If true, the tabs will be equally sized in the direction of the layout.
TabBar
  
firstGap : Number
Space, in pixels, between the first two tabs.
TabBar
 Inherited
focusIndicatorSkin : DisplayObject
If this component supports focus, this optional skin will be displayed above the component when showFocus() is called.
FeathersControl
 Inherited
focusPadding : Number
Quickly sets all focus padding properties to the same value.
FeathersControl
 Inherited
The minimum space, in pixels, between the object's bottom edge and the bottom edge of the focus indicator skin.
FeathersControl
 Inherited
The minimum space, in pixels, between the object's left edge and the left edge of the focus indicator skin.
FeathersControl
 Inherited
The minimum space, in pixels, between the object's right edge and the right edge of the focus indicator skin.
FeathersControl
 Inherited
The minimum space, in pixels, between the object's top edge and the top edge of the focus indicator skin.
FeathersControl
  
gap : Number
Space, in pixels, between tabs.
TabBar
  
Determines how the tabs are horizontally aligned within the bounds of the tab bar (on the x-axis).
TabBar
  
lastGap : Number
Space, in pixels, between the last two tabs.
TabBar
  
padding : Number
Quickly sets all padding properties to the same value.
TabBar
  
paddingBottom : Number
The minimum space, in pixels, between the tab bar's bottom edge and the tabs.
TabBar
  
paddingLeft : Number
The minimum space, in pixels, between the tab bar's left edge and the tabs.
TabBar
  
paddingRight : Number
The minimum space, in pixels, between the tab bar's right edge and the tabs.
TabBar
  
paddingTop : Number
The minimum space, in pixels, between the tab bar's top edge and the tabs.
TabBar
  
The time, in seconds, of the animation that changes the position and size of the selectionSkin skin when the selected tab changes.
TabBar
  
The easing function used for moving and resizing the selectionSkin when the selected tab changes.
TabBar
  
selectionSkin : DisplayObject
A skin displayed over the selected tab.
TabBar
  
verticalAlign : String
Determines how the tabs are vertically aligned within the bounds of the tab bar (on the y-axis).
TabBar
Public Constants
 ConstantDefined By
  DEFAULT_CHILD_STYLE_NAME_TAB : String = "feathers-tab-bar-tab"
[static] The default value added to the styleNameList of the tabs.
TabBar
 InheritedINVALIDATION_FLAG_ALL : String = "all"
[static] Flag to indicate that everything is invalid and should be redrawn.
FeathersControl
 InheritedINVALIDATION_FLAG_DATA : String = "data"
[static] Invalidation flag to indicate that the primary data displayed by the UI control has changed.
FeathersControl
 InheritedINVALIDATION_FLAG_FOCUS : String = "focus"
[static] Invalidation flag to indicate that the focus of the UI control has changed.
FeathersControl
 InheritedINVALIDATION_FLAG_LAYOUT : String = "layout"
[static] Invalidation flag to indicate that the layout of the UI control has changed.
FeathersControl
 InheritedINVALIDATION_FLAG_SCROLL : String = "scroll"
[static] Invalidation flag to indicate that the scroll position of the UI control has changed.
FeathersControl
 InheritedINVALIDATION_FLAG_SELECTED : String = "selected"
[static] Invalidation flag to indicate that the selection of the UI control has changed.
FeathersControl
 InheritedINVALIDATION_FLAG_SIZE : String = "size"
[static] Invalidation flag to indicate that the dimensions of the UI control have changed.
FeathersControl
 InheritedINVALIDATION_FLAG_SKIN : String = "skin"
[static] Invalidation flag to indicate that the skin of the UI control has changed.
FeathersControl
 InheritedINVALIDATION_FLAG_STATE : String = "state"
[static] Invalidation flag to indicate that the state has changed.
FeathersControl
 InheritedINVALIDATION_FLAG_STYLES : String = "styles"
[static] Invalidation flag to indicate that the styles or visual appearance of the UI control has changed.
FeathersControl
Property Detail
baselineproperty
baseline:Number  [read-only]

Returns the text baseline measurement, in pixels.


Implementation
    public function get baseline():Number
dataProviderproperty 
dataProvider:IListCollection

The collection of data to be displayed with tabs. The default tab initializer interprets this data to customize the tabs with various fields available to buttons, including the following:

The following example passes in a data provider:

list.dataProvider = new ArrayCollection(
[
    { label: "General", defaultIcon: new Image( generalTexture ) },
    { label: "Security", defaultIcon: new Image( securityTexture ) },
    { label: "Advanced", defaultIcon: new Image( advancedTexture ) },
]);

The default value is null.


Implementation
    public function get dataProvider():IListCollection
    public function set dataProvider(value:IListCollection):void

See also

enabledFieldproperty 
enabledField:String

The field in the item that determines if the tab is enabled. If the item does not have this field, and a enabledFunction is not defined, then the tab will default to being enabled, unless the tab bar is not enabled. All tabs will always be disabled if the tab bar is disabled.

All of the label fields and functions, ordered by priority:

  1. enabledFunction
  2. enabledField

In the following example, the enabled field is customized:

tabs.enabledField = "isEnabled";

The default value is "enabled".


Implementation
    public function get enabledField():String
    public function set enabledField(value:String):void

See also

enabledFunctionproperty 
enabledFunction:Function

A function used to determine if a specific tab is enabled. If this function is not null, then the enabledField will be ignored.

The function is expected to have the following signature:

function( item:Object ):Boolean

All of the enabled fields and functions, ordered by priority:

  1. enabledFunction
  2. enabledField

In the following example, the enabled function is customized:

tabs.enabledFunction = function( item:Object ):Boolean
{
   return item.isEnabled;
};

The default value is null.


Implementation
    public function get enabledFunction():Function
    public function set enabledFunction(value:Function):void

See also

firstTabFactoryproperty 
firstTabFactory:Function

If not null, creates the first tab. If the firstTabFactory is null, then the tab bar will use the tabFactory. The first tab must be an instance of ToggleButton. This factory can be used to change properties on the first tab 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 tab.

This function is expected to have the following signature:

function():ToggleButton

In the following example, a custom first tab factory is passed to the tab bar:

tabs.firstTabFactory = function():ToggleButton
{
    var tab:ToggleButton = new ToggleButton();
    tab.defaultSkin = new Image( upTexture );
    tab.defaultSelectedSkin = new Image( selectedTexture );
    tab.downSkin = new Image( downTexture );
    return tab;
};

The default value is null.


Implementation
    public function get firstTabFactory():Function
    public function set firstTabFactory(value:Function):void

See also

firstTabStyleNameproperty 
protected var firstTabStyleName:String = "feathers-tab-bar-tab"

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

To customize the first tab name without subclassing, see customFirstTabStyleName.

See also

globalStyleProviderproperty 
public static var globalStyleProvider:IStyleProvider

The default IStyleProvider for all TabBar components.

The default value is null.

See also

iconFieldproperty 
iconField:String

The field in the item that contains a display object to be displayed as an icon or other graphic next to the label in the tab.

Warning: It is your responsibility to dispose all icons included in the data provider and accessed with iconField, or any display objects returned by iconFunction. These display objects will not be disposed when the list is disposed. Not disposing an icon may result in a memory leak.

All of the icon fields and functions, ordered by priority:

  1. iconFunction
  2. iconField

In the following example, the icon field is customized:

tabs.iconField = "photo";

The default value is "icon".


Implementation
    public function get iconField():String
    public function set iconField(value:String):void

See also

iconFunctionproperty 
iconFunction:Function

A function used to generate an icon for a specific tab, based on its associated item in the data provider.

Note: This function may be called more than once for each individual item in the tab bar's data provider. The function should not simply return a new icon every time. This will result in the unnecessary creation and destruction of many icons, which will overwork the garbage collector, hurt performance, and possibly lead to memory leaks. It's better to return a new icon the first time this function is called for a particular item and then return the same icon if that item is passed to this function again.

Warning: It is your responsibility to dispose all icons included in the data provider and accessed with iconField, or any display objects returned by iconFunction. These display objects will not be disposed when the list is disposed. Not disposing an icon may result in a memory leak.

The function is expected to have the following signature:

function( item:Object ):DisplayObject

All of the icon fields and functions, ordered by priority:

  1. iconFunction
  2. iconField

In the following example, the icon function is customized:

var cachedIcons:Dictionary = new Dictionary( true );
tabs.iconFunction = function( item:Object ):DisplayObject
{
   if(item in cachedIcons)
   {
       return cachedIcons[item];
   }
   var icon:Image = new Image( textureAtlas.getTexture( item.textureName ) );
   cachedIcons[item] = icon;
   return icon;
};

The default value is null.


Implementation
    public function get iconFunction():Function
    public function set iconFunction(value:Function):void

See also

labelFieldproperty 
labelField:String

The field in the item that contains the label text to be displayed by the tabs. If the item does not have this field, and a labelFunction is not defined, then the tabs will default to calling toString() on the item.

All of the label fields and functions, ordered by priority:

  1. labelFunction
  2. labelField

In the following example, the label field is customized:

tabs.labelField = "text";

The default value is "label".


Implementation
    public function get labelField():String
    public function set labelField(value:String):void

See also

labelFunctionproperty 
labelFunction:Function

A function used to generate label text for a specific tab. If this function is not null, then the labelField will be ignored.

The function is expected to have the following signature:

function( item:Object ):String

All of the label fields and functions, ordered by priority:

  1. labelFunction
  2. labelField

In the following example, the label function is customized:

tabs.labelFunction = function( item:Object ):String
{
   return item.label + " (" + item.unread + ")";
};

The default value is null.


Implementation
    public function get labelFunction():Function
    public function set labelFunction(value:Function):void

See also

lastTabFactoryproperty 
lastTabFactory:Function

If not null, creates the last tab. If the lastTabFactory is null, then the tab bar will use the tabFactory. The last tab must be an instance of ToggleButton. This factory can be used to change properties on the last tab 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 tab.

This function is expected to have the following signature:

function():ToggleButton

In the following example, a custom last tab factory is passed to the tab bar:

tabs.lastTabFactory = function():ToggleButton
{
    var tab:ToggleButton = new Button();
    tab.defaultSkin = new Image( upTexture );
    tab.defaultSelectedSkin = new Image( selectedTexture );
    tab.downSkin = new Image( downTexture );
    return tab;
};

The default value is null.


Implementation
    public function get lastTabFactory():Function
    public function set lastTabFactory(value:Function):void

See also

lastTabStyleNameproperty 
protected var lastTabStyleName:String = "feathers-tab-bar-tab"

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

To customize the last tab name without subclassing, see customLastTabStyleName.

See also

selectedIndexproperty 
selectedIndex:int

The index of the currently selected tab. Returns -1 if no tab is selected.

In the following example, the tab bar's selected index is changed:

tabs.selectedIndex = 2;

The following example listens for when selection changes and requests the selected index:

function tabs_changeHandler( event:Event ):void
{
    var tabs:TabBar = TabBar( event.currentTarget );
    var index:int = tabs.selectedIndex;
}
tabs.addEventListener( Event.CHANGE, tabs_changeHandler );

The default value is -1.


Implementation
    public function get selectedIndex():int
    public function set selectedIndex(value:int):void

See also

selectedItemproperty 
selectedItem:Object

The currently selected item from the data provider. Returns null if no item is selected.

In the following example, the tab bar's selected item is changed:

tabs.selectedItem = tabs.dataProvider.getItemAt(2);

The following example listens for when selection changes and requests the selected item:

function tabs_changeHandler( event:Event ):void
{
    var tabs:TabBar = TabBar( event.currentTarget );
    var item:Object = tabs.selectedItem;
}
tabs.addEventListener( Event.CHANGE, tabs_changeHandler );

The default value is null.


Implementation
    public function get selectedItem():Object
    public function set selectedItem(value:Object):void

See also

tabFactoryproperty 
tabFactory:Function

Creates each tab. A tab must be an instance of ToggleButton. This factory can be used to change properties on the tabs 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 tab.

Optionally, the first tab and the last tab may be different than the other tabs in the middle. Use the firstTabFactory and/or the lastTabFactory to customize one or both of these tabs.

This function is expected to have the following signature:

function():ToggleButton

In the following example, a custom tab factory is passed to the tab bar:

tabs.tabFactory = function():ToggleButton
{
    var tab:ToggleButton = new ToggleButton();
    tab.defaultSkin = new Image( upTexture );
    tab.defaultSelectedSkin = new Image( selectedTexture );
    tab.downSkin = new Image( downTexture );
    return tab;
};

The default value is null.


Implementation
    public function get tabFactory():Function
    public function set tabFactory(value:Function):void

See also

tabInitializerproperty 
tabInitializer:Function

Modifies the properties of an individual tab, using an item from the data provider. The default initializer will set the tab's label and icons. A custom tab initializer can be provided to update additional properties or to use different field names in the data provider.

This function is expected to have the following signature:

function( tab:ToggleButton, item:Object ):void

In the following example, a custom tab initializer is passed to the tab bar:

tabs.tabInitializer = function( tab:ToggleButton, item:Object ):void
{
    tab.label = item.text;
    tab.defaultIcon = item.icon;
};


Implementation
    public function get tabInitializer():Function
    public function set tabInitializer(value:Function):void

See also

tabPropertiesproperty 
tabProperties:Object

An object that stores properties for all of the tab bar's tabs, and the properties will be passed down to every tab when the tab bar validates. For a list of available properties, refer to feathers.controls.ToggleButton.

These properties are shared by every tab, so anything that cannot be shared (such as display objects, which cannot be added to multiple parents) should be passed to tabs using the tabFactory 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);

Setting properties in a tabFactory function instead of using tabProperties will result in better performance.

In the following example, the tab bar's tab properties are updated:

tabs.tabProperties.iconPosition = RelativePosition.RIGHT;

The default value is null.


Implementation
    public function get tabProperties():Object
    public function set tabProperties(value:Object):void

See also

tabReleaserproperty 
tabReleaser:Function

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

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

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

In the following example, a custom tab releaser is passed to the tab bar:

tabs.tabReleaser = function( tab:ToggleButton, oldItem:Object ):void
{
    tab.label = null;
    tab.defaultIcon = null;
};


Implementation
    public function get tabReleaser():Function
    public function set tabReleaser(value:Function):void

See also

tabStyleNameproperty 
protected var tabStyleName:String = "feathers-tab-bar-tab"

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

To customize the tab style name without subclassing, see customTabStyleName.

See also

toggleGroupproperty 
protected var toggleGroup:ToggleGroup

The toggle group.

Constructor Detail
TabBar()Constructor
public function TabBar()

Constructor.

Method Detail
dataProvider_sortChangeHandler()method
protected function dataProvider_sortChangeHandler(event:Event):void

Parameters

event:Event

setSelectedIndexWithAnimation()method 
public function setSelectedIndexWithAnimation(selectedIndex:int):void

Changes the selectedIndex property, but animates the selectionSkin to the new position, as if the user triggered a tab.

Parameters

selectedIndex:int

See also

setSelectedItemWithAnimation()method 
public function setSelectedItemWithAnimation(selectedItem:Object):void

Changes the selectedItem property, but animates the selectionSkin to the new position, as if the user triggered a tab.

Parameters

selectedItem:Object

See also

Event Detail
change Event
Event Object Type: starling.events.Event
Event.type property = starling.events.Event.CHANGE

Dispatched when the selected tab changes.

The properties of the event object have the following values:

PropertyValue
bubblesfalse
currentTargetThe Object that defines the event listener that handles the event. For example, if you use myButton.addEventListener() to register an event listener, myButton is the value of the currentTarget.
datanull
targetThe Object that dispatched the event; it is not always the Object listening for the event. Use the currentTarget property to always access the Object listening for the event.

See also

triggered Event  
Event Object Type: starling.events.Event
Event.type property = starling.events.Event.TRIGGERED

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

The following example listens to Event.TRIGGERED on the tab bar:

tabs.dataProvider = new ArrayCollection(
[
    { label: "1" },
    { label: "2" },
    { label: "3" },
]);
tabs.addEventListener( Event.TRIGGERED, function( event:Event, data:Object ):void
{
   trace( "The tab with label \"" + data.label + "\" was triggered." );
}

The properties of the event object have the following values:

PropertyValue
bubblesfalse
currentTargetThe Object that defines the event listener that handles the event. For example, if you use myButton.addEventListener() to register an event listener, myButton is the value of the currentTarget.
dataThe item associated with the tab that was triggered.
targetThe Object that dispatched the event; it is not always the Object listening for the event. Use the currentTarget property to always access the Object listening for the event.

Style Detail
verticalAlignstyle
verticalAlign:String

Determines how the tabs are vertically aligned within the bounds of the tab bar (on the y-axis).

The following example aligns the tabs to the top:

tabs.verticalAlign = VerticalAlign.TOP;

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

See also

selectionSkinstyle 
selectionSkin:DisplayObject

A skin displayed over the selected tab. Its position is animated when the selection changes.

The following example passes the tab bar a selection skin:

var skin:Image = new Image(texture)
skin.scale9Grid = new Rectangle(1, 2, 4, 4);
tabs.selectionSkin = skin;

The default value is null.

See also

selectionChangeEasestyle 
selectionChangeEase:Object

The easing function used for moving and resizing the selectionSkin when the selected tab changes.

In the following example, the ease of the animation that moves the selectionSkin is customized:

tabs.selectionChangeEase = Transitions.EASE_IN_OUT;

The default value is starling.animation.Transitions.EASE_OUT.

See also

selectionChangeDurationstyle 
selectionChangeDuration:Number

The time, in seconds, of the animation that changes the position and size of the selectionSkin skin when the selected tab changes.

The following example customizes the duration to 500ms:

tabs.selectionChangeDuration = 0.5;

The default value is 0.25.

See also

paddingLeftstyle 
paddingLeft:Number

The minimum space, in pixels, between the tab bar's left edge and the tabs.

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

tabs.paddingLeft = 20;

The default value is 0.

See also

paddingBottomstyle 
paddingBottom:Number

The minimum space, in pixels, between the tab bar's bottom edge and the tabs.

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

tabs.paddingBottom = 20;

The default value is 0.

See also

paddingRightstyle 
paddingRight:Number

The minimum space, in pixels, between the tab bar's right edge and the tabs.

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

tabs.paddingRight = 20;

The default value is 0.

See also

paddingTopstyle 
paddingTop:Number

The minimum space, in pixels, between the tab bar's top edge and the tabs.

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

tabs.paddingTop = 20;

The default value is 0.

See also

paddingstyle 
padding:Number

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 tab bar is set to 20 pixels:

tabs.padding = 20;

The default value is 0.

See also

lastGapstyle 
lastGap:Number

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

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

tabs.lastGap = 30;
tabs.gap = 20;

The default value is NaN.

See also

horizontalAlignstyle 
horizontalAlign:String

Determines how the tabs are horizontally aligned within the bounds of the tab bar (on the x-axis).

The following example aligns the tabs to the left:

tabs.horizontalAlign = HorizontalAlign.LEFT;

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

See also

gapstyle 
gap:Number

Space, in pixels, between tabs.

In the following example, the tab bar's gap is set to 20 pixels:

tabs.gap = 20;

The default value is 0.

See also

firstGapstyle 
firstGap:Number

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

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

tabs.firstGap = 30;
tabs.gap = 20;

The default value is NaN.

See also

distributeTabSizesstyle 
distributeTabSizes:Boolean

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

The following example aligns the tabs to the middle without distributing them:

tabs.direction = Direction.VERTICAL;
tabs.verticalAlign = VerticalAlign.MIDDLE;
tabs.distributeTabSizes = false;

The default value is true.

directionstyle 
direction:String

The tab bar layout is either vertical or horizontal.

In the following example, the tab bar's direction is set to vertical:

tabs.direction = Direction.VERTICAL;

Note: The Direction.NONE constant is not supported.

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

See also

customTabStyleNamestyle 
customTabStyleName:String

A style name to add to all tabs in this tab bar. Typically used by a theme to provide different styles to different tab bars.

In the following example, a custom tab style name is provided to the tab bar:

tabs.customTabStyleName = "my-custom-tab";

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

getStyleProviderForClass( ToggleButton ).setFunctionForStyleName( "my-custom-tab", setCustomTabStyles );

The default value is null.

See also

customLastTabStyleNamestyle 
customLastTabStyleName:String

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

In the following example, a custom last tab style name is provided to the tab bar:

tabs.customLastTabStyleName = "my-custom-last-tab";

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

getStyleProviderForClass( ToggleButton ).setFunctionForStyleName( "my-custom-last-tab", setCustomLastTabStyles );

The default value is null.

See also

customFirstTabStyleNamestyle 
customFirstTabStyleName:String

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

In the following example, a custom first tab style name is provided to the tab bar:

tabs.customFirstTabStyleName = "my-custom-first-tab";

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

getStyleProviderForClass( ToggleButton ).setFunctionForStyleName( "my-custom-first-tab", setCustomFirstTabStyles );

The default value is null.

See also

Constant Detail
DEFAULT_CHILD_STYLE_NAME_TABConstant
public static const DEFAULT_CHILD_STYLE_NAME_TAB:String = "feathers-tab-bar-tab"

The default value added to the styleNameList of the tabs.

See also