TabPane

A list of display pages each holding child widgets with colored tabs used to select one active displayed tab page.

Summary
TabPaneA list of display pages each holding child widgets with colored tabs used to select one active displayed tab page.
Private constants
TAB_HEIGHTHeight of a tab selector in pixels.
TAB_MARGINMargin used when drawing tabs to separate labels from tab borders.
TAB_FOCUS_COLORDefault text color used to emphasize the selected tab pane.
TAB_NOFOCUS_COLORDefault text color used for tab panes that are not selected.
Private data members
_colorBase color of tab pane label texts
_widthWidth of the background area onto which tab panes are drawn.
_heightHeight of the background area onto which tab panes are drawn.
_atTopWhether tabs are drawn above (true) or below (false) the tab pages.
_colorFocusText color used to emphasize the selected tab pane.
_colorNoFocusText color used for tab panes that are not selected.
_colorsAssociative array of page names and colors.
_pagesArray of page names in order of appearance.
Public properties
focusCallbackCallback function that is called when the displayed tab page changes.
selectedPageName of the currently selected page (the displayed page with focus).
Constructor
TabPaneCreates a tab pane for holding a number of tab pages.
Public page methods
addPagesAdd an array of tab pages similar to the constructor.
addPageAdd a tab page after any existing tab pages.
addPageAtAdd a tab page at an indexed position among existing tabs.
removePagesRemove all tab pages from the tab pane.
removePageRemove the named tab page from the tab pane.
removePageAtRemove the tab page from the tab pane at the index.
pageGet the page client area where the application can add display objects and widgets for the tab page.
pageColorGet the color value for a named tab page.
pageIndexGet the index of a named tab page.
setFocusChange focus to a named tab page.
Private event handlers
setFocusHandlerChanges focus to a tab page when the user clicks on its tab.
Private methods
getColorGets a bright palette color for a tab page without an application defined color.
createTabCreates a tab sprite with a page name label.
resizeTabsResizes the current list of tabs to utilize the width of the tab pane.
drawTabDraws a tab with rounded corners.
resizeTextCenters a tab label text or scales down its font size to fit in the width of a tab.
removeClientAreaChildrenRemoves all display object children from a tab page client area.
Public static helper
createGradientArrayCreates an array of RGB color values that gradually change in hue.
WidgetInterface
activeSets the state of the widget to active or inactive.
activateActivates the widget, adds its event listeners
disactivateDisactivates the widget, removes its event listeners
disposeDispose of all resources used or referenced in the instance.
destructorRemoves used resources, references and graphics

Private constants

TAB_HEIGHT

private const TAB_HEIGHT: uint

Height of a tab selector in pixels.

TAB_MARGIN

private const TAB_MARGIN: uint

Margin used when drawing tabs to separate labels from tab borders.

TAB_FOCUS_COLOR

private const TAB_FOCUS_COLOR: uint

Default text color used to emphasize the selected tab pane.

TAB_NOFOCUS_COLOR

private const TAB_NOFOCUS_COLOR: uint

Default text color used for tab panes that are not selected.

Private data members

_color

private var _color: uint

Base color of tab pane label texts

_width

private var _width: uint

Width of the background area onto which tab panes are drawn.

_height

private var _height: uint

Height of the background area onto which tab panes are drawn.

_atTop

private var _atTop: Boolean

Whether tabs are drawn above (true) or below (false) the tab pages.

_colorFocus

private var _colorFocus: uint

Text color used to emphasize the selected tab pane.

_colorNoFocus

private var _colorNoFocus: uint

Text color used for tab panes that are not selected.

_colors

private var _colors: Object

Associative array of page names and colors.

_pages

private var _pages: Array

Array of page names in order of appearance.

Public properties

focusCallback

public var focusCallback: Function

Callback function that is called when the displayed tab page changes.

The function is called once with the gotFocus argument set to false and the name of the page that looses focus.  And once with gotFocus set to true and the name of the page that is now selected.

Child widgets are automatically activated and disactivated on focus display change.  See WidgetSprite.setOwnerActive.

Callbacks

function focusHandler(gotFocus:Boolean, pageName:String):void

selectedPage

public var selectedPage: String

Name of the currently selected page (the displayed page with focus).

Constructor

TabPane

public function TabPane(owner: String,  
color: uint,  
width: uint,  
height: uint,  
pageNames: Array = null,
pageColors: Array = null,
drawBackground: Boolean = true,
placeTabsAtTop: Boolean = true)

Creates a tab pane for holding a number of tab pages.

Tab pages are not masked.  It is up to the application to place child controls so they do not draw outside the tab page they are placed on.

If the application does not specify the colors for the tabs then colors are selected from the palette in the Color class.  A more low-key color scale can be created with the static helper createGradientArray.  If a tabs color is set to black then it is changed to an automatically selected palette color.

The tab pane does not scroll so the number of tab pages that can be displayed in one tab pane is limited by the width of the tab pane.  The tab labels are automatically reduced in size to make the text fit inside the tabs, which helps when the number of pages is large and the tabs correspondingly small.

Parameters

ownername of registered owner; see WidgetSprite.register
colorbase theme color of tab pane label texts
widthwidth of the area onto which the tab pane is drawn
heightheight of the area onto which the tab pane is drawn
pageNamesinitial array of unique page name strings (default null)
pageColorsarray of page color values (default null)
drawBackgroundwhether to draw a background or leave it transparent (default true)
placeTabsAtToptabs are placed at the top if true (default) otherwise at the bottom

Public page methods

addPages

public function addPages(pageNames: Array,  
pageColors: Array = null):void

Add an array of tab pages similar to the constructor.  The tabs are placed at the end of any existing tabs.

If a pageColors array is given then it must have the same length as the pageNames array.  If it is null then page names are checked against _colors previously defined, so a tab page will get the same color if removed and added repeatedly.  Otherwise a palette selected color is assigned to the tab page.

Parameters

pageNamesarray of unique tab page name strings
pageColorsarray of tab page color values (default null)

See also

addPage, addPageAt, removePages.

addPage

public function addPage(pageName: String,  
color: uint = ):void

Add a tab page after any existing tab pages.

Parameters

pageNameunique tab page name
colorcolor of the tab (default 0 for an automatic palette color)

See also

addPages, addPageAt, removePage.

addPageAt

public function addPageAt(pageName: String,  
index: uint,  
color: uint = 0,
resize: Boolean = true):void

Add a tab page at an indexed position among existing tabs.

Parameters

pageNameunique tab page name
indexa valid index in the array of tab pages
colorcolor of the tab (default 0 for an automatic palette color)
resizeResize tabs after adding the page (default true) or leave unchanged (false)

See also

addPages, addPage, removePageAt.

removePages

public function removePages():void

Remove all tab pages from the tab pane.  Disposes of child widgets and display objects on the tab pages.

removePage

public function removePage(pageName: String):void

Remove the named tab page from the tab pane.  Disposes of child widgets and display objects on the tab page.

Parameters

pageNametab page name

removePageAt

public function removePageAt(index: int):void

Remove the tab page from the tab pane at the index.  Disposes of child widgets and display objects on the tab page.

Parameters

indexvalid tab page index

page

public function page(pageName: String):Sprite

Get the page client area where the application can add display objects and widgets for the tab page.

Parameters

pageNamename of an existing tab page

Returns

Client area sprite

pageColor

public function pageColor(pageName: String):uint

Get the color value for a named tab page.

Parameters

pageNamename of an existing tab page

Returns

RGB color value

pageIndex

public function pageIndex(pageName: String):int

Get the index of a named tab page.

Parameters

pageNamename of a tab page

Returns

page index, -1 if not found

setFocus

public function setFocus(pageName: String):void

Change focus to a named tab page.  The page with focus becomes the currently selected page and is displayed.

Widgets on any previously displayed page are disactivated and the widgets on the selected page activated.  See WidgetSprite.setOwnerActive.

The focusCallback function is called if it is set.

Parameters

pageNamename of an existing tab page

Private event handlers

setFocusHandler

private function setFocusHandler(event: MouseEvent):void

Changes focus to a tab page when the user clicks on its tab.

Parameters

eventa mouse event

Private methods

getColor

private function getColor():uint

Gets a bright palette color for a tab page without an application defined color.  Attempts to differentiate colors on adjacent tabs if called in sequence.

Returns

RGB color value

createTab

private function createTab(pageName: String):Sprite

Creates a tab sprite with a page name label.

Parameters

pageNamename of the tab page

Returns

Tab sprite with label widget child

resizeTabs

private function resizeTabs():void

Resizes the current list of tabs to utilize the width of the tab pane.  The tabs are redrawn with drawTab and label font sizes are resized as needed by resizeText.

drawTab

private function drawTab(tab: Sprite,
tabWidth: Number,
color: uint,
index: uint):void

Draws a tab with rounded corners.  The tab is drawn as a rounded rectangle but the rounded corners facing the page are hidden by the page margin border.

The _atTop state determines whether tabs are drawn above or below the tab page.

Parameters

taba tab sprite as created by createTab
tabWidththe tab width as calculated by resizeTabs
colorbackground color of the tab
indextab index position

resizeText

private function resizeText(tab: Sprite,
index: uint,
tabWidth: Number):void

Centers a tab label text or scales down its font size to fit in the width of a tab.  Adjusts the vertical position depending on whether tabs are drawn above or below the tab page area.

Parameters

taba tab sprite as created by createTab
indextab index position
tabWidththe tab width as calculated by resizeTabs

removeClientAreaChildren

private function removeClientAreaChildren(pageClientArea: Sprite):void

Removes all display object children from a tab page client area.  Display objects that implement WidgetInterface are disposed of.

Parameters

pageClientAreaclient area sprite from a tab page being removed

Public static helper

createGradientArray

public static function createGradientArray(startColor: uint,  
numColors: uint,  
useNext: Boolean = false):Array

Creates an array of RGB color values that gradually change in hue.

The color array is suitable for use by tab pages in a tabpane.  The hues are chosen at 20 degree intervals.  The colors are toned down from the starting color, brightness is set at 50% and saturation is reduced by ten percentage points.

The useNext parameter determines whether the hues are selected in a range around the starting color hue or after it.

Parameters

startColorcolor used as starting point for the gradients
numColorsnumber of colors in the returned array
useNextif set to true then hues begin after the starting color otherwise the starting color is centered on the scale

Returns

Array of rgb color values

WidgetInterface

active

public function set active(state: Boolean):void

Sets the state of the widget to active or inactive.

Parameters

stateTrue to activate, false otherwise.

activate

private function activate():void

Activates the widget, adds its event listeners

disactivate

private function disactivate():void

Disactivates the widget, removes its event listeners

dispose

public function dispose():void

Dispose of all resources used or referenced in the instance.

destructor

private function destructor():void

Removes used resources, references and graphics

Widgets are required to implement this interface.
Base class for widgets to enable/disable event listeners and keep a global tab order of all widgets (provided they are created and registered in tab order.
private const TAB_HEIGHT: uint
Height of a tab selector in pixels.
private const TAB_MARGIN: uint
Margin used when drawing tabs to separate labels from tab borders.
private const TAB_FOCUS_COLOR: uint
Default text color used to emphasize the selected tab pane.
private const TAB_NOFOCUS_COLOR: uint
Default text color used for tab panes that are not selected.
private var _color: uint
Base color of tab pane label texts
private var _width: uint
Width of the background area onto which tab panes are drawn.
private var _height: uint
Height of the background area onto which tab panes are drawn.
private var _atTop: Boolean
Whether tabs are drawn above (true) or below (false) the tab pages.
private var _colorFocus: uint
Text color used to emphasize the selected tab pane.
private var _colorNoFocus: uint
Text color used for tab panes that are not selected.
private var _colors: Object
Associative array of page names and colors.
private var _pages: Array
Array of page names in order of appearance.
public var focusCallback: Function
Callback function that is called when the displayed tab page changes.
public var selectedPage: String
Name of the currently selected page (the displayed page with focus).
public function TabPane(owner: String,  
color: uint,  
width: uint,  
height: uint,  
pageNames: Array = null,
pageColors: Array = null,
drawBackground: Boolean = true,
placeTabsAtTop: Boolean = true)
Creates a tab pane for holding a number of tab pages.
public function addPages(pageNames: Array,  
pageColors: Array = null):void
Add an array of tab pages similar to the constructor.
public function addPage(pageName: String,  
color: uint = ):void
Add a tab page after any existing tab pages.
public function addPageAt(pageName: String,  
index: uint,  
color: uint = 0,
resize: Boolean = true):void
Add a tab page at an indexed position among existing tabs.
public function removePages():void
Remove all tab pages from the tab pane.
public function removePage(pageName: String):void
Remove the named tab page from the tab pane.
public function removePageAt(index: int):void
Remove the tab page from the tab pane at the index.
public function page(pageName: String):Sprite
Get the page client area where the application can add display objects and widgets for the tab page.
public function pageColor(pageName: String):uint
Get the color value for a named tab page.
public function pageIndex(pageName: String):int
Get the index of a named tab page.
public function setFocus(pageName: String):void
Change focus to a named tab page.
private function setFocusHandler(event: MouseEvent):void
Changes focus to a tab page when the user clicks on its tab.
private function getColor():uint
Gets a bright palette color for a tab page without an application defined color.
private function createTab(pageName: String):Sprite
Creates a tab sprite with a page name label.
private function resizeTabs():void
Resizes the current list of tabs to utilize the width of the tab pane.
private function drawTab(tab: Sprite,
tabWidth: Number,
color: uint,
index: uint):void
Draws a tab with rounded corners.
private function resizeText(tab: Sprite,
index: uint,
tabWidth: Number):void
Centers a tab label text or scales down its font size to fit in the width of a tab.
private function removeClientAreaChildren(pageClientArea: Sprite):void
Removes all display object children from a tab page client area.
public static function createGradientArray(startColor: uint,  
numColors: uint,  
useNext: Boolean = false):Array
Creates an array of RGB color values that gradually change in hue.
public function set active(state: Boolean):void
Sets the state of the widget to active or inactive.
private function activate():void
Activates the widget, adds its event listeners
private function disactivate():void
Disactivates the widget, removes its event listeners
public function dispose():void
Dispose of all resources used or referenced in the instance.
private function destructor():void
Removes used resources, references and graphics
public static function setOwnerActive(owner: String,
state: Boolean):void
Sets all widgets registered to owner to the given state.
The Color class provides precomputed palettes and common color names for widgets so they can be presented as a coherent color theme.
public function register(owner: String):void
Register the owner of a widget.
Close