flexlib :: library Documentation | All Packages | All Classes | Index | Frames No Frames |
SuperTabNavigator

Package | flexlib.containers
Class | public class SuperTabNavigator
Inheritance | SuperTabNavigator mx.containers.TabNavigator

The SuperTabNavigator is an extension of the TabNavigator navigation container.

The SuperTabNavigator functions exactly like the TabNavigator, but adds some functionality. Added functionality includes:

- Draggable, re-orderable tabs
- Closable tabs
- Scrolling tab bar if too many tabs are open
- Drop-down list of tabs

These features make the SuperTabNavigator function much more like the tabs in Firefox.

MXML Syntax Show MXML Syntax
Hide MXML Syntax

The `<mx:SuperTabNavigator>` tag inherits all of the tag attributes of the TabNavigator, and adds the following tag attributes:

        <mx:SuperTabNavigator
          Styles
          popupButtonStyleName="Value of the popupButtonStyleName property"
       	  leftButtonStyleName="Value of the leftButtonStyleName property"
       	  rightButtonStyleName="Value of the rightButtonStyleName property"
             Properties
       	  popUpButtonPolicy="on|auto|off"
          startScrollingEvent="MouseEvent.MOUSE_DOWN|MouseEvent.MOUSE_OVER"
       	  stopScrollingEvent="MouseEvent.MOUSE_UP|MouseEvent.MOUSE_OUT"
          scrollSpeed="100"
          dragEnabled="true|false"
          dropEnabled="true|false"
          minTabWidth="60"
             >
            ...
            child tags
            ...
        </mx:SuperTabNavigator>

See also

mx.containers.TabNavigator
flexlib.controls.SuperTabBar

Public Properties

| Property | Defined By
--- | --- | ---
|  | allowTabSqueezing : Boolean Boolean indicating if tab width should be adjusted to try to squeeze all tabs so we don't need scrolling. | SuperTabNavigator
|  | closePolicy : String The close policy for tabs. | SuperTabNavigator
|  | dragEnabled : Boolean Boolean indicating whether or not this SuperTabNavigator allows tabs to be dragged from the tab bar. | SuperTabNavigator
|  | dropEnabled : Boolean Boolean indicating whether or not this SuperTabNavigator allows tabs to be dropped on the tab bar. | SuperTabNavigator
|  | editableTabLabels : Boolean Boolean indicating if tab labels can be edited. | SuperTabNavigator
|  | minTabWidth : Number The minimum tab width allowed to display tabs. | SuperTabNavigator
|  | popUpButtonPolicy : String Either POPUPPOLICY.AUTO, POPUPOLICY_ON, or POPUPPOLICY_OFF. | SuperTabNavigator
|  | POPUPPOLICY_AUTO : String = auto [static] Static variable indicating the Button will be shown if there is more than one tab in the SuperTabNavigator. | SuperTabNavigator
|  | POPUPPOLICY_OFF : String = off [static] Static variable indicating the Button will never be shown to the right of the tab bar. | SuperTabNavigator
|  | POPUPPOLICY_ON : String = on [static] Static variable indicating the Button will always be shown to the right of the tab bar, no matter how many tabs are open. | SuperTabNavigator
|  | scrollSpeed : Number The delay in milliseconds between scrolling the tabs. | SuperTabNavigator
|  | startScrollingEvent : String | SuperTabNavigator
|  | stopScrollingEvent : String | SuperTabNavigator

Public Methods

| Method | Defined By
--- | --- | ---
|  | initialize():void [override] | SuperTabNavigator
|  | setClosePolicyForTab(index:int, value:String):void | SuperTabNavigator
|  | styleChanged(styleProp:String):void [override] | SuperTabNavigator

Protected Methods

| Method | Defined By
--- | --- | ---
|  | createTabBar():SuperTabBar For extensibility, if you want to use a custom extended version of SuperTabBar, you can do so by overriding the createTabBar method and returning an instance of any class that extends SuperTabBar. | SuperTabNavigator
|  | updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void [override] | SuperTabNavigator

Events

| Event | Summary | Defined By
--- | --- | --- | ---
|  | tabClose | Fired when the close button of a tab is clicked. | SuperTabNavigator
|  | tabsReordered |  | SuperTabNavigator

Styles

| Style | Description | Defined By
--- | --- | --- | ---
|  | leftButtonStyleName | Type: String CSS Inheritance: no Name of CSS style declaration that specifies style for button used to control the horizontal scrolling of the tabs. This button appears on the right-most side of the tab bar. The default value is`undefined`. | SuperTabNavigator
|  | popupButtonStyleName | Type: String CSS Inheritance: no Name of CSS style declaration that specifies style for the Button that appears on the right side of the tab bar. The default value is`undefined`. | SuperTabNavigator
|  | rightButtonStyleName | Type: String CSS Inheritance: no Name of CSS style declaration that specifies style for button used to control the horizontal scrolling of the tabs. This button appears on the left-most side of the tab bar. The default value is`undefined`. | SuperTabNavigator

Property Detail

allowTabSqueezing | property

`allowTabSqueezing:Boolean`

Boolean indicating if tab width should be adjusted to try to squeeze all tabs so we don't need scrolling. If true, tabs will be squeezed until they reach the `minTabWidth` value, at which point they scroll. If false, tabs will never be resized smaller than their default widths.

The default value is `true`.

Implementation
`public function get allowTabSqueezing():Boolean`
`public function set allowTabSqueezing(value:Boolean):void`

closePolicy | property |

`closePolicy:String`

The close policy for tabs.

Implementation
`public function get closePolicy():String`
`public function set closePolicy(value:String):void`

See also

flexlib.controls.SuperTabBar

dragEnabled | property |

`dragEnabled:Boolean`

Boolean indicating whether or not this SuperTabNavigator allows tabs to be dragged from the tab bar.

If both dragEnabled and dropEnabled are true then the SuperTabNavigator allows reordering of tabs by drag and drop

The default value is `true`.

Implementation
`public function get dragEnabled():Boolean`
`public function set dragEnabled(value:Boolean):void`

dropEnabled | property |

`dropEnabled:Boolean`

Boolean indicating whether or not this SuperTabNavigator allows tabs to be dropped on the tab bar.

If both dragEnabled and dropEnabled are true then the SuperTabNavigator allows reordering of tabs by drag and drop

The default value is `true`.

Implementation
`public function get dropEnabled():Boolean`
`public function set dropEnabled(value:Boolean):void`

editableTabLabels | property |

`editableTabLabels:Boolean`

Boolean indicating if tab labels can be edited. If true, the user can double click on a tab label and edit the label.

Implementation
`public function get editableTabLabels():Boolean`
`public function set editableTabLabels(value:Boolean):void`

minTabWidth | property |

`minTabWidth:Number`

The minimum tab width allowed to display tabs.

If tabs cannot fit at their default size, then they are shrunk until they reach minTabWidth. If they still cannot fit then they remain at minTabWidth and the SuperTabBar scrolls the tabs.

The default value is `60`.

Implementation
`public function get minTabWidth():Number`
`public function set minTabWidth(value:Number):void`

popUpButtonPolicy | property |

`popUpButtonPolicy:String`

Either POPUPPOLICY.AUTO, POPUPOLICY_ON, or POPUPPOLICY_OFF.

Indicates how the Button to the right of the tabs should be shown. AUTO means the button will be shown if there is more than one tab. ON means it will always be shown, and OFF means it will never be shown.

Implementation
`public function get popUpButtonPolicy():String`
`public function set popUpButtonPolicy(value:String):void`

POPUPPOLICY_AUTO | property |

`public static var POPUPPOLICY_AUTO:String = auto`

Static variable indicating the Button will be shown if there is more than one tab in the SuperTabNavigator. Used to set popUpButtonPolicy.

POPUPPOLICY_OFF | property |

`public static var POPUPPOLICY_OFF:String = off`

Static variable indicating the Button will never be shown to the right of the tab bar. Used to set popUpButtonPolicy.

POPUPPOLICY_ON | property |

`public static var POPUPPOLICY_ON:String = on`

Static variable indicating the Button will always be shown to the right of the tab bar, no matter how many tabs are open. Used to set popUpButtonPolicy.

scrollSpeed | property |

`scrollSpeed:Number`

The delay in milliseconds between scrolling the tabs.

The smaller the number here the faster the scrolling speed.

Implementation
`public function get scrollSpeed():Number`
`public function set scrollSpeed(value:Number):void`

startScrollingEvent | property |

`startScrollingEvent:String`

Implementation
`public function get startScrollingEvent():String`
`public function set startScrollingEvent(value:String):void`

stopScrollingEvent | property |

`stopScrollingEvent:String`

Implementation
`public function get stopScrollingEvent():String`
`public function set stopScrollingEvent(value:String):void`
Method Detail

createTabBar | () | method

`protected function createTabBar():SuperTabBar`

For extensibility, if you want to use a custom extended version of SuperTabBar, you can do so by overriding the `createTabBar` method and returning an instance of any class that extends `SuperTabBar`.

Returns

| `SuperTabBar`

initialize | () | method |

`override public function initialize():void`

setClosePolicyForTab | () | method |

`public function setClosePolicyForTab(index:int, value:String):void`

Parameters

| `index:int`
| `value:String`

styleChanged | () | method |

`override public function styleChanged(styleProp:String):void`

Parameters

| `styleProp:String`

updateDisplayList | () | method |

`override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void`

Parameters

| `unscaledWidth:Number`
| `unscaledHeight:Number`

Event Detail

tabClose | Event

Event Object Type: `flexlib.events.SuperTabEvent`

Fired when the close button of a tab is clicked. To stop the default action, which will remove the child from the collection of children, call event.preventDefault() in your listener.

tabsReordered | Event |

Event Object Type: `flexlib.events.TabReorderEvent`

Mercredi Juillet 4 2012, 09:36 PM +02:00