TabPane |
A list of display pages each holding child widgets with colored tabs used to select one active displayed tab page.
TabPane | A list of display pages each holding child widgets with colored tabs used to select one active displayed tab page. |
Private constants | |
TAB_HEIGHT | Height of a tab selector in pixels. |
TAB_MARGIN | Margin used when drawing tabs to separate labels from tab borders. |
TAB_FOCUS_COLOR | Default text color used to emphasize the selected tab pane. |
TAB_NOFOCUS_COLOR | Default text color used for tab panes that are not selected. |
Private data members | |
_color | Base color of tab pane label texts |
_width | Width of the background area onto which tab panes are drawn. |
_height | Height of the background area onto which tab panes are drawn. |
_atTop | Whether tabs are drawn above (true) or below (false) the tab pages. |
_colorFocus | Text color used to emphasize the selected tab pane. |
_colorNoFocus | Text color used for tab panes that are not selected. |
_colors | Associative array of page names and colors. |
_pages | Array of page names in order of appearance. |
Public properties | |
focusCallback | Callback function that is called when the displayed tab page changes. |
selectedPage | Name of the currently selected page (the displayed page with focus). |
Constructor | |
TabPane | Creates a tab pane for holding a number of tab pages. |
Public page methods | |
addPages | Add an array of tab pages similar to the constructor. |
addPage | Add a tab page after any existing tab pages. |
addPageAt | Add a tab page at an indexed position among existing tabs. |
removePages | Remove all tab pages from the tab pane. |
removePage | Remove the named tab page from the tab pane. |
removePageAt | Remove the tab page from the tab pane at the index. |
page | Get the page client area where the application can add display objects and widgets for the tab page. |
pageColor | Get the color value for a named tab page. |
pageIndex | Get the index of a named tab page. |
setFocus | Change focus to a named tab page. |
Private event handlers | |
setFocusHandler | Changes focus to a tab page when the user clicks on its tab. |
Private methods | |
getColor | Gets a bright palette color for a tab page without an application defined color. |
createTab | Creates a tab sprite with a page name label. |
resizeTabs | Resizes the current list of tabs to utilize the width of the tab pane. |
drawTab | Draws a tab with rounded corners. |
resizeText | Centers a tab label text or scales down its font size to fit in the width of a tab. |
removeClientAreaChildren | Removes all display object children from a tab page client area. |
Public static helper | |
createGradientArray | Creates an array of RGB color values that gradually change in hue. |
WidgetInterface | |
active | Sets the state of the widget to active or inactive. |
activate | Activates the widget, adds its event listeners |
disactivate | Disactivates the widget, removes its event listeners |
dispose | Dispose of all resources used or referenced in the instance. |
destructor | Removes used resources, references and graphics |
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.
function focusHandler(gotFocus:Boolean, pageName:String):void
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.
owner | name of registered owner; see WidgetSprite.register |
color | base theme color of tab pane label texts |
width | width of the area onto which the tab pane is drawn |
height | height of the area onto which the tab pane is drawn |
pageNames | initial array of unique page name strings (default null) |
pageColors | array of page color values (default null) |
drawBackground | whether to draw a background or leave it transparent (default true) |
placeTabsAtTop | tabs are placed at the top if true (default) otherwise at the bottom |
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.
pageNames | array of unique tab page name strings |
pageColors | array of tab page color values (default null) |
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.
pageName | unique tab page name |
index | a valid index in the array of tab pages |
color | color of the tab (default 0 for an automatic palette color) |
resize | Resize tabs after adding the page (default true) or leave unchanged (false) |
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.
pageName | name of an existing tab page |
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.
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.
tab | a tab sprite as created by createTab |
tabWidth | the tab width as calculated by resizeTabs |
color | background color of the tab |
index | tab index position |
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.
tab | a tab sprite as created by createTab |
index | tab index position |
tabWidth | the tab width as calculated by resizeTabs |
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.
pageClientArea | client area sprite from a tab page being removed |
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.
startColor | color used as starting point for the gradients |
numColors | number of colors in the returned array |
useNext | if set to true then hues begin after the starting color otherwise the starting color is centered on the scale |
Array of rgb color values
Height of a tab selector in pixels.
private const TAB_HEIGHT: uint
Margin used when drawing tabs to separate labels from tab borders.
private const TAB_MARGIN: uint
Default text color used to emphasize the selected tab pane.
private const TAB_FOCUS_COLOR: uint
Default text color used for tab panes that are not selected.
private const TAB_NOFOCUS_COLOR: uint
Base color of tab pane label texts
private var _color: uint
Width of the background area onto which tab panes are drawn.
private var _width: uint
Height of the background area onto which tab panes are drawn.
private var _height: uint
Whether tabs are drawn above (true) or below (false) the tab pages.
private var _atTop: Boolean
Text color used to emphasize the selected tab pane.
private var _colorFocus: uint
Text color used for tab panes that are not selected.
private var _colorNoFocus: uint
Associative array of page names and colors.
private var _colors: Object
Array of page names in order of appearance.
private var _pages: Array
Callback function that is called when the displayed tab page changes.
public var focusCallback: Function
Name of the currently selected page (the displayed page with focus).
public var selectedPage: String
Creates a tab pane for holding a number of tab pages.
public function TabPane( owner: String, color: uint, width: uint, height: uint, pageNames: Array = null, pageColors: Array = null, drawBackground: Boolean = true, placeTabsAtTop: Boolean = true )
Add an array of tab pages similar to the constructor.
public function addPages( pageNames: Array, pageColors: Array = null ):void
Add a tab page after any existing tab pages.
public function addPage( pageName: String, color: uint = ):void
Add a tab page at an indexed position among existing tabs.
public function addPageAt( pageName: String, index: uint, color: uint = 0, resize: Boolean = true ):void
Remove all tab pages from the tab pane.
public function removePages():void
Remove the named tab page from the tab pane.
public function removePage( pageName: String ):void
Remove the tab page from the tab pane at the index.
public function removePageAt( index: int ):void
Get the page client area where the application can add display objects and widgets for the tab page.
public function page( pageName: String ):Sprite
Get the color value for a named tab page.
public function pageColor( pageName: String ):uint
Get the index of a named tab page.
public function pageIndex( pageName: String ):int
Change focus to a named tab page.
public function setFocus( pageName: String ):void
Changes focus to a tab page when the user clicks on its tab.
private function setFocusHandler( event: MouseEvent ):void
Gets a bright palette color for a tab page without an application defined color.
private function getColor():uint
Creates a tab sprite with a page name label.
private function createTab( pageName: String ):Sprite
Resizes the current list of tabs to utilize the width of the tab pane.
private function resizeTabs():void
Draws a tab with rounded corners.
private function drawTab( tab: Sprite, tabWidth: Number, color: uint, index: uint ):void
Centers a tab label text or scales down its font size to fit in the width of a tab.
private function resizeText( tab: Sprite, index: uint, tabWidth: Number ):void
Removes all display object children from a tab page client area.
private function removeClientAreaChildren( pageClientArea: Sprite ):void
Creates an array of RGB color values that gradually change in hue.
public static function createGradientArray( startColor: uint, numColors: uint, useNext: Boolean = false ):Array
Sets the state of the widget to active or inactive.
public function set active( state: Boolean ):void
Activates the widget, adds its event listeners
private function activate():void
Disactivates the widget, removes its event listeners
private function disactivate():void
Dispose of all resources used or referenced in the instance.
public function dispose():void
Removes used resources, references and graphics
private function destructor():void
Sets all widgets registered to owner to the given state.
public static function setOwnerActive( owner: String, state: Boolean ):void
Register the owner of a widget.
public function register( owner: String ):void