TabPaneNavigator

Overview

The TabPaneNavigator component is a tab bar combined with a viewstack that enables uses to navigate child content. All child elements are Ardisia Pane containers. Panes that are children of the TabPaneNavigator can be dragged out of the viewstack and floated. Floated Panes can also be dragged in and docked to the navigator.

Fully supports the API for the Ardisia Buttonbar and the Viewstack, including deferred instantiation.

Creating the TabPaneNavigator Component

The TabPaneNavigator extends the Ardisia Viewstack class and can therefore be added to any container that implements IVisualElementContainer.

Using the TabPaneNavigator Component

At its core, the TabPaneNavigator is a viewstack that accepts only Pane components as children and uses a hard-wired tab bar to navigate the Panes. Therefore, read the docs on the Ardisia ViewStack, the Ardisia TabBar, and the Ardisia Pane components for questions regarding their usage.

More specific to the TabPaneNavigator is that all direct children must be Pane container components.

Docking

Floated Panes will "dock" to the TabPaneNavigator component when they are being dragged and the mouse is over the tab bar skin part of the TabPaneNavigator. When they dock, the Pane content will be added to the viewstack, selected, and a tab will be created to select the new content.

When a floated Pane is being dragged and the mouse is over the TabPaneNavigator but not over the tab bar skin part, the Pane components "alphaOverPaneNavigator" style will be applied and the alpha of the Pane will be adjusted.

Preventing A Dock

Preventing a Pane component from docking can be accomplished in one of three ways: (A) the Pane's "canBeDocked" property is false, (B) the DOCKING event dispatched by the TabPaneNavigator is cancelled, or (C) the DRAG_ENTER event is cancelled when the Pane is initially dragged over the Pane navigator.

Un-Docking

To drag a Pane out of the TabPaneNavigator and float it ("un-docked"), a tab must be dragged and during the drag the mouse must leave the tab bar by more than the number of pixels defined by the "unDockThreshold" property.

Preventing a Pane component from being un-docked can be accomplished in one of two ways: (A) the Pane's "canBeFloated" property is false, or (B) the UN_DOCKING event dispatched by the TabPaneNavigator is cancelled.

Closing

If the Pane's "canBeClosed" property is true, by default the tab bar skin part of the TabPaneNavigator will display a close icon to enable closing.

You can also remove all the panes and tabs via the removeAll() method.

Icons

If the Pane has an icon defined, then the icon will be displayed in the Pane's tab in the tab bar when the Pane is docked to the TabPaneNavigator.

Selected Custom Events

DRAG_ENTER
ardisia.components.paneNavigators.events.PaneNavigatorEvent
Dispatched when a Pane is dragged over this Pane navigator.
Cancel to prevent the Pane from docking to this navigator.

DRAG_EXIT
ardisia.components.paneNavigators.events.PaneNavigatorEvent
Dispatched when a dragged Pane is dragged out of this Pane navigator.

DOCKING
ardisia.components.paneNavigators.events.PaneNavigatorEvent
Dispatched when a floated Pane is about to be docked to the navigator.
Can be cancelled to cancel the dock.

DOCKED
ardisia.components.paneNavigators.events.PaneNavigatorEvent
Dispatched when a floated Pane has been docked to the navigator.

UN_DOCKING
ardisia.components.paneNavigators.events.PaneNavigatorEvent
Dispatched when a Pane is about to be un-docked from the navigator and floated.
Can be cancelled to prevent the un-docking

UN_DOCKED
ardisia.components.paneNavigators.events.PaneNavigatorEvent
Dispatched when a Pane has been un-docked from the navigator and floated.

Themes & Skinning

Skins are provided for the Spark, London, and Stockholm themes.

Example

See the TabPaneNavigator demo application for example code.

Back To Top