Olympe SDK

Class: TabPanel

olympe.ui.std. TabPanel

A TabPanel is a container that can have multiple views, only one being visible at any given time. Each of these views is associated with a tab at the top of the panel, clicking on a tab switches the panel to the view associated with that tab.

Example:

const panel = new olympe.ui.std.TabPanel(size)
    .setTabTitleSelectedBackgroundColor(olympe.df.Color.lightGray())
    .setTabTitleSelectedTextColor(olympe.df.Color.black());
const l1 = new olympe.ui.std.AbsoluteLayout(size);
var lbl = new olympe.ui.std.Label()
    .setText('Hello World');
l1.appendChild(lbl, 'lbl');
panel.appendTabWithTitle('1', 'Tab 1', l1);
const l2 = new olympe.ui.std.AbsoluteLayout(size);
lbl = new olympe.ui.std.Label(panel.getContentDimension())
    .setText("Content Frame")
    .setTextHorizontalAlign(olympe.ui.common.HorizontalAlign.CENTER)
    .setTextVerticalAlign(olympe.ui.common.VerticalAlign.MIDDLE);
l2.appendChild(lbl, 'lbl');
panel.appendTabWithTitle('2', 'Tab 2', l2);
const l3 = new olympe.ui.std.AbsoluteLayout(size);
lbl = new olympe.ui.std.Label()
    .setText("Third Panel");
l3.appendChild(lbl, 'lbl');
panel.appendTabWithTitle('3', 'Tab 3', l3);
panel.selectTab('2);

Would create a panel with 3 tabs, with the second one selected by default:

TabPanel

new TabPanel(dimension [, themeClass])

Creates an instance of TabPanel.

Parameters:
Name Type Argument Description
dimension olympe.df.PVector2

The dimension (w, h) of the panel.
themeClass olympe.df.POString | string <optional>

The theme class.

Extends

Methods

<protected> _appendChild(child, childId, options)

Append a child to a layer.

Parameters:
Name Type Argument Description
child olympe.df.Proxy.<olympe.ui.std.DockableElement> | olympe.ui.std.DockableElement
childId string

ID of the child (must be unique in this layer)
options * <repeatable>

Can be used if this method is overridden
Inherited From:
Overrides:

<protected> _removeAllChildren()

Inherited From:
Overrides:

<protected> _removeChild(childId)

Remove a child from this layer.

Parameters:
Name Type Description
childId string

ID of the child to remove
Inherited From:
Overrides:

<abstract> appendChild(child, id, options)

Parameters:
Name Type Argument Description
child olympe.df.Proxy.<olympe.ui.std.DockableElement> | olympe.ui.std.DockableElement
id string
options * <repeatable>
Inherited From:
Overrides:
Returns:
Type
olympe.ui.std.Layer

appendTabWithTitle(id, tabName, tabContent)

Adds a tab to the panel, giving it a unique ID, a title and a content (usually another container like a layout).

Parameters:
Name Type Description
id string

The ID for that tab.
tabName olympe.df.POString | string

The title to display in the tab.
tabContent olympe.ui.std.DockableElement

The content associated with that tab.
Returns:

This TabPanel.

Type
olympe.ui.std.TabPanel

authorizeOverflow()

Authorize the children of this layer to overflow the layer's borders

Inherited From:
Overrides:
Returns:

this

Type
olympe.ui.std.Layer

changeContent(id, newTabContent)

Replaces the content associated with the specified the tab.

Parameters:
Name Type Description
id string

The ID of the tab.
newTabContent olympe.ui.std.DockableElement

The new content.
Returns:

This TabPanel.

Type
olympe.ui.std.TabPanel

getContentDimension()

Gets the dimension of the content.

Returns:

The dimension.

Type
olympe.df.PVector2

getCurrentSelectedTabId()

Gets the ID of the tab currently selected.

Returns:

The ID of the tab.

Type
olympe.df.OString

getFocus()

Checks whether this Element has the focus.

Warning: Focus may not be applicable on some elements, depending on the platform.

Inherited From:
Overrides:
Returns:

true if Element has focus.

Type
olympe.df.POBoolean

<protected> getGestureEvent()

Gets the gesture event manager attached to this element

Inherited From:
Overrides:
Returns:
Type
olympe.ui.events.GestureEventManager

getHeight()

Gets the height of this element.

Inherited From:
Overrides:
See:
Returns:

the height of this element.

Type
olympe.df.PONumber

getHTMLElement()

Return the DOM HTMLElement if exists (may be null)

Inherited From:
Overrides:
Returns:
Type
Element

<protected> getMouseEvent()

Gets the mouse event manager attached to this element.

Inherited From:
Overrides:
Returns:

the mouse event manager.

Type
olympe.ui.events.MouseEventManager

getParent()

Gets the parent, or container, of this element.

Inherited From:
Overrides:
Returns:

the parent of this element.

Type
olympe.ui.std.Element | olympe.df.Proxy

getPosition()

Gets the position (x,y) for this element.

Inherited From:
Overrides:
Returns:

Position of this element.

Type
olympe.df.PVector2

getSize()

Gets the number of tabs.

Returns:

size Number of tabs.

Type
olympe.df.PONumber

getUIProxyDockableElement()

Note: needs to be public because it is called by RootElement !

Inherited From:
Overrides:
Returns:

The proxy element from the UI thread

Type
olympe.uiapi.std.DockableElement

<protected> getUIProxyElement()

Returns the native UI element associated with this Element.

Inherited From:
Overrides:
Returns:

The proxy element from the UI thread.

Type
olympe.uiapi.std.Element

<protected> getUIProxyLayer()

Inherited From:
Overrides:
Returns:

Proxified UI object Layer

Type
olympe.uiapi.std.Layer

getWidth()

Gets the width of this element.

Inherited From:
Overrides:
See:
Returns:

the width of this element.

Type
olympe.df.PONumber

getX()

Gets the x coordinate of the position of this element.

Inherited From:
Overrides:
See:
Returns:

the x coordinate for this element.

Type
olympe.df.PONumber

getY()

Gets the y coordinate of the position of this element.

Inherited From:
Overrides:
See:
Returns:

the y coordinate for this element.

Type
olympe.df.PONumber

isHidden()

Checks whether this Element is hidden.

Inherited From:
Overrides:
Returns:

true is this element is hidden.

Type
olympe.df.POBoolean

offSelectionChanged(id)

Unregisters a callback previously registered by olympe.ui.std.TabPanel#onSelectionChanged.

Parameters:
Name Type Description
id string

The ID of the callback.

onSelectionChanged(callbackFunc [, id])

Registers a callback to be called when the selection changes.

Parameters:
Name Type Argument Description
callbackFunc olympe.ui.std.TabPanel.OnSelectionChanged

The function to call.
id string <optional>

The ID for this callback. A unique one will be generated if omitted.
Returns:

The ID of the callback.

Type
string

refreshSize()

Refresh component internal size

Inherited From:
Overrides:

<abstract> removeChild(id)

Parameters:
Name Type Description
id string
Inherited From:
Overrides:
Returns:
Type
olympe.ui.std.Layer

removeTab(id)

Removes the specified tab and its associated content.

Parameters:
Name Type Description
id string

The ID of the tab.
Returns:

This TabPanel.

Type
olympe.ui.std.TabPanel

removeTooltip()

Removes the tooltip from this element.

Inherited From:
Overrides:
Returns:

This element.

Type
olympe.ui.std.Element

selectTab(id)

Changes the tab selection to the specified one, making its associated content visible.

Parameters:
Name Type Description
id string

The ID of the tab.
Returns:

This TabPanel.

Type
olympe.ui.std.TabPanel

setAccelerated(accelerated)

Sets whether this DockableElement movements should be calculated by the GPU.

Note: This function doesn't guarantee that the implementation will support GPU acceleration.

Parameters:
Name Type Description
accelerated olympe.df.POBoolean | olympe.df.Node | boolean

true if this DockableElement movements should be calculated by the GPU.
Inherited From:
Overrides:
Returns:

This DockableElement.

Type
olympe.ui.std.DockableElement

setBackgroundColor(color)

Sets the background color for this Element.

Parameters:
Name Type Description
color olympe.df.Proxy | olympe.df.Node | olympe.df.Color

The background color.
Inherited From:
Overrides:
Returns:

this Element.

Type
olympe.ui.std.Element

setBackgroundImage(url [, sizingMode] [, positioningMode] [, size] [, position])

Sets the background image for this Element.

Notes:

  • The size is ignored if the sizing mode is not set to MANUAL.
  • The position is ignored if the positioning mode is not set to MANUAL.
Parameters:
Name Type Argument Default Description
url olympe.df.POString | olympe.df.Node | string

URL for the image.
sizingMode olympe.ui.common.BackgroundImageSize | olympe.df.Proxy | olympe.df.Node <optional>
 AUTO

The sizing mode for the image.
positioningMode olympe.ui.common.BackgroundImagePosition | olympe.df.Proxy | olympe.df.Node <optional>
 TOPLEFT

The positioning mode for this image.
size olympe.df.Vector2 | olympe.df.Proxy | olympe.df.Node <optional>

Size, in pixel.
position olympe.df.Vector2 | olympe.df.Proxy | olympe.df.Node <optional>

Position of the image, in pixel. (0,0) if omitted.
Inherited From:
Overrides:
Returns:

this Element.

Type
olympe.ui.std.Element

setBackgroundImagePosition(position)

Sets the background image position for this Element.

Parameters:
Name Type Description
position olympe.df.Vector2 | olympe.df.Proxy | olympe.df.Node

The position.
Inherited From:
Overrides:
Returns:

this Element.

Type
olympe.ui.std.Element

setBackgroundImagePositionMode(positionMode)

Sets the position mode for the background image of this Element.

Parameters:
Name Type Description
positionMode olympe.ui.common.BackgroundImagePosition | olympe.df.Proxy | olympe.df.Node

The positioning mode for this image.
Inherited From:
Overrides:
Returns:

this Element.

Type
olympe.ui.std.Element

setBackgroundImageSize(size)

Sets the background image size for the this Element.

Parameters:
Name Type Description
size olympe.df.Vector2 | olympe.df.Proxy | olympe.df.Node

The image size, in pixels.
Inherited From:
Overrides:
Returns:

this Element.

Type
olympe.ui.std.Element

setBackgroundImageSizeMode(sizeMode)

Sets the sizing mode for the background image of this Element.

Parameters:
Name Type Description
sizeMode olympe.ui.common.BackgroundImageSize | olympe.df.Proxy | olympe.df.Node

The sizing mode.
Inherited From:
Overrides:
Returns:

this Element.

Type
olympe.ui.std.Element

setBackgroundImageSrc(src)

Sets the URL (or source) for the background image.

Parameters:
Name Type Description
src olympe.df.POString | olympe.df.Node | string

URL for the image.
Inherited From:
Overrides:
Returns:

this Element.

Type
olympe.ui.std.Element

setBlur()

Removes focus from this Element.

Warnings:

  • Focus may not be applicable on some elements, depending on the platform.
  • Elements not inside a container (screen, etc.) can't get the focus.
Inherited From:
Overrides:
Returns:

this Element.

Type
olympe.ui.std.Element

setBorder(width, color)

Sets the border width & color for this element. a width of 0 means no visible border.

Parameters:
Name Type Description
width olympe.df.ONumber | number | olympe.df.Node | olympe.df.Proxy

the width, in pixels, for the border
color olympe.df.Color | olympe.df.Node | olympe.df.Proxy

the color for the border
Inherited From:
Overrides:
Returns:

This DockableElement.

Type
olympe.ui.std.DockableElement

setBorderColor(color)

Set the border color on this element.

Parameters:
Name Type Description
color olympe.df.Color | olympe.df.Proxy.<olympe.df.Color>
Inherited From:
Overrides:
Returns:
Type
olympe.ui.std.DockableElement

setBorderWidth(width)

Set the border width on this element. a width of 0 means no visible border.

Parameters:
Name Type Description
width number | olympe.df.PONumber
Inherited From:
Overrides:
Returns:
Type
olympe.ui.std.DockableElement

setContentBorderColor(contentBorderColor)

Sets the color for the content frame border.

Parameters:
Name Type Description
contentBorderColor olympe.df.PColor

The border color.
Returns:

This TabPanel.

Type
olympe.ui.std.TabPanel

setContentBorderWidth(contentBorderWidth)

Sets the width of the border around the content frame.

Parameters:
Name Type Description
contentBorderWidth olympe.df.PONumber | number

The border width.
Returns:

This TabPanel.

Type
olympe.ui.std.TabPanel

setContextMenuEnabled(enabled)

Enable/disable context menu on this element.

Parameters:
Name Type Description
enabled boolean

true to enable the context menu, false to disable it.
Inherited From:
Overrides:
Returns:

this Element.

Type
olympe.ui.std.Element

setCornerRadius(radius)

Sets the rounded corner radius (in pixels) for this element.

Parameters:
Name Type Description
radius olympe.df.PONumber | olympe.df.Node | number

Radius in pixels.
Inherited From:
Overrides:
Returns:

this DockableElement.

Type
olympe.ui.std.DockableElement

setDimension(dimension)

Sets the dimension (width, height) for this element.

Parameters:
Name Type Description
dimension olympe.df.Vector2 | olympe.df.Proxy | olympe.df.Node

Dimension of this element.
Inherited From:
Overrides:
Returns:

This DockableElement.

Type
olympe.ui.std.DockableElement

setFocus()

Gives the focus to this Element.

Warnings:

  • Focus may not be applicable on some elements, depending on the platform.
  • Elements not inside a container (screen, etc.) can't get the focus.
Inherited From:
Overrides:
Returns:

this Element.

Type
olympe.ui.std.Element

setHidden(hidden)

Sets whether this Element is hidden or not. A hidden element will not appear on the screen.

Parameters:
Name Type Description
hidden olympe.df.POBoolean | boolean | olympe.df.Node

true if content must be hidden, false otherwise.
Inherited From:
Overrides:
Returns:

this Element.

Type
olympe.ui.std.Element

setIgnoreUserInteraction( [ignore])

Disables mouse events for this element. However, mouse events will target its descendants unless they are manually set to also ignore user interactions.

Parameters:
Name Type Argument Default Description
ignore boolean | olympe.df.POBoolean <optional>
 false

ignore true to make this element ignore mouse events and pass them to its children.
Inherited From:
Overrides:
Returns:

this Element.

Type
olympe.ui.std.Element

setOpacity(opacity)

Sets the opacity, or alpha channel, for this Element. This is a float value between 0 and 1. 0 being transparent and 1 being opaque.

Parameters:
Name Type Description
opacity olympe.df.ONumber | number | olympe.df.Proxy | olympe.df.Node

the opacity (between 0 and 1).
Inherited From:
Overrides:
Returns:

this Element.

Type
olympe.ui.std.Element

setParent(parent)

Sets the parent of this element.

Important: This method must be called when this element is added to a container or layout.

Parameters:
Name Type Description
parent olympe.df.Proxy.<olympe.ui.std.Element> | olympe.ui.std.Element

The parent for this element.
Inherited From:
Overrides:
Returns:

This DockableElement.

Type
olympe.ui.std.DockableElement

setPosition(position)

Sets the position (x,y) for this Element.

Parameters:
Name Type Description
position olympe.df.Vector2 | olympe.df.Proxy | olympe.df.Node

The position of this element.
Inherited From:
Overrides:
Returns:

this DockableElement.

Type
olympe.ui.std.DockableElement

setRotationAngle(angle)

Sets the rotation angle (in degree) for this element.

Parameters:
Name Type Description
angle olympe.df.ONumber | number | olympe.df.Node | olympe.df.Proxy

the angle, in degree.
Inherited From:
Overrides:
Returns:

This DockableElement.

Type
olympe.ui.std.DockableElement

setScale(scale)

Sets the scaling factor for the width and height of this element.

Parameters:
Name Type Description
scale olympe.df.PVector2 | olympe.df.Node

scaling vector (w, h).
Inherited From:
Overrides:
Returns:

This DockableElement.

Type
olympe.ui.std.DockableElement

setShadow( [offset] [, radius] [, spread] [, color] [, inset])

Set shadow on this DockableElement. A shadow is defined by its offset, the blur radius, the spread radius (all in pixels) and a base color. A shadow is by default 'external, but can be made internal by setting the 'inset' parameter to true`.

Parameters:
Name Type Argument Default Description
offset olympe.df.Vector2 | olympe.df.Node | olympe.df.Proxy.<olympe.df.Vector2> <optional>
 0

Offset in pixels.
radius olympe.df.PONumber | olympe.df.Node | number <optional>
 0

Blur radius in pixels.
spread olympe.df.PONumber | olympe.df.Node | number <optional>
 0

Spread in pixels.
color olympe.df.Color | olympe.df.Node | olympe.df.Proxy.<olympe.df.Color> <optional>
 '#000000'

Shadow color.
inset olympe.df.POBoolean | olympe.df.Node | boolean <optional>
 false

true if the shadow is inset.
Inherited From:
Overrides:
Returns:

This DockableElement.

Type
olympe.ui.std.DockableElement

setShadowPSStyle(color, angle, distance, spread, size, inset)

Set shadow on this DockableElement as done in Photoshop.

Parameters:
Name Type Description
color olympe.df.Color | olympe.df.Node | olympe.df.Proxy.<olympe.df.Color>

Shadow Color.
angle olympe.df.PONumber | olympe.df.Node | number

Angle, in radians.
distance olympe.df.PONumber | olympe.df.Node | number

Distance, in pixels.
spread olympe.df.PONumber | olympe.df.Node | number

Spread in pixels.
size olympe.df.PONumber | olympe.df.Node | number

Size, in pixels.
inset olympe.df.POBoolean | olympe.df.Node | boolean

true if the shadow is inset.
Inherited From:
Overrides:
Returns:

This DockableElement.

Type
olympe.ui.std.DockableElement

setStyle(style, value)

Parameters:
Name Type Description
style string

CSS style name
value string | number

CSS style value
Inherited From:
Overrides:
Returns:

this Element.

Type
olympe.ui.std.Element

setTabIndex(tabIndex)

Sets the tab index to this Element. Tab Index defines the tabulation or 'next' order while going through a form.

Parameters:
Name Type Description
tabIndex olympe.df.PONumber | olympe.df.ONumber | number | olympe.df.Node

The tab index.
Inherited From:
Overrides:
Returns:

this Element.

Type
olympe.ui.std.Element

setTabTitleBackgroundColor(tabTitleBackgroundColor)

Sets the background color for the tabs.

Parameters:
Name Type Description
tabTitleBackgroundColor olympe.df.PColor

The background color.
Returns:

This TabPanel.

Type
olympe.ui.std.TabPanel

setTabTitleBorderColor(tabTitleBorderColor)

Sets the border color for the tabs.

Parameters:
Name Type Description
tabTitleBorderColor olympe.df.Color | olympe.df.Proxy.<olympe.df.Color>

The border color.
Returns:

This TabPanel.

Type
olympe.ui.std.TabPanel

setTabTitleBorderWidth(tabTitleBorderWidth)

Sets the border width for the tabs.

Parameters:
Name Type Description
tabTitleBorderWidth olympe.df.PONumber | number

The border width.
Returns:

This TabPanel.

Type
olympe.ui.std.TabPanel

setTabTitleCornerRadius(tabTitleCornerRadius)

Sets the corner radius for the tabs.

Parameters:
Name Type Description
tabTitleCornerRadius olympe.df.PONumber | number

The corner radius.
Returns:

This TabPanel.

Type
olympe.ui.std.TabPanel

setTabTitleFontFamily(tabTitleFontFamily)

Sets the font family to use for the tab titles.

Parameters:
Name Type Description
tabTitleFontFamily olympe.df.POString | string

The font family.
See:
Returns:

This TabPanel.

Type
olympe.ui.std.TabPanel

setTabTitleFontSize(tabTitleFontSize)

Sets the font size to use for tab titles.

Parameters:
Name Type Description
tabTitleFontSize olympe.df.PONumber | number

The font size.
Returns:

This TabPanel.

Type
olympe.ui.std.TabPanel

setTabTitleFontWeight(tabTitleFontWeight)

Sets the font weight to use for the tab titles.

Parameters:
Name Type Description
tabTitleFontWeight olympe.df.PONumber | number

The font weight.
See:
Returns:

This TabPanel.

Type
olympe.ui.std.TabPanel

setTabTitleHeight(tabTitleHeight)

Sets the height for the tabs.

Parameters:
Name Type Description
tabTitleHeight olympe.df.PONumber | number

The height, in pixels.
Returns:

This TabPanel.

Type
olympe.ui.std.TabPanel

setTabTitleSelectedBackgroundColor(tabTitleSelectedBackgroundColor)

Sets the background color for the selected tab.

Parameters:
Name Type Description
tabTitleSelectedBackgroundColor olympe.df.PColor

The background color.
Returns:

This TabPanel.

Type
olympe.ui.std.TabPanel

setTabTitleSelectedTextColor(tabTitleSelectedTextColor)

Sets the text color for the selected tab.

Parameters:
Name Type Description
tabTitleSelectedTextColor olympe.df.PColor

The text color.
Returns:

This TabPanel.

Type
olympe.ui.std.TabPanel

setTabTitleTextAlign(tabTitleHorizontalAlign, tabTitleVerticalAlign)

Sets the horizontal & vertical alignments for the tab titles.

Parameters:
Name Type Description
tabTitleHorizontalAlign !olympe.df.Proxy.<olympe.ui.common.HorizontalAlign> | olympe.ui.common.HorizontalAlign

Horizontal alignment.
tabTitleVerticalAlign !olympe.df.Proxy.<olympe.ui.common.VerticalAlign> | olympe.ui.common.VerticalAlign

Vertical alignment.
See:
  • {olympe.ui.std.Label#setTextHorizontalAlign}.
  • {olympe.ui.std.Label#setTextVerticalAlign}.
Returns:

This TabPanel.

Type
olympe.ui.std.TabPanel

setTabTitleTextColor(tabTitleTextColor)

Sets the text color for the tab titles.

Parameters:
Name Type Description
tabTitleTextColor olympe.df.PColor

The text color.
Returns:

This TabPanel.

Type
olympe.ui.std.TabPanel

setThemeClass(themeClass)

Method to override if this dockable element supports themes.

Parameters:
Name Type Description
themeClass olympe.df.POString | olympe.df.Node | string

The theme class.
Inherited From:
Overrides:
Returns:

This DockableElement.

Type
olympe.ui.std.DockableElement

setTooltip(text [, options])

Assigns a tooltip to that element that will show up when the mouse hovers over it.

Parameters:
Name Type Argument Description
text olympe.df.POString

The text of the tooltip.
options Object <optional>

Various options for displaying the tooltip.

Properties
Name Type Argument Description
position olympe.df.PVector2 <optional>

The absolute position of the tooltip.
background olympe.df.PColor <optional>

The background color.
foreground olympe.df.PColor <optional>

The text color.
fontSize olympe.df.PONumber <optional>

The font size.
borderSize olympe.df.PONumber <optional>

The size of the border. Default is 1.
borderColor olympe.df.PColor <optional>

The color of the border. Default is black.
delay olympe.df.ONumber | number <optional>

The delay, in milliseconds, before showing the tooltip. Default is 500.
startingPos olympe.df.Vector2 <optional>

The starting position of the mouse. Default is (0,0).
theme olympe.df.POString <optional>

The theme class to apply to this tooltip.
Inherited From:
Overrides:
Returns:

This Element.

Type
olympe.ui.std.Element

setUniformScale(scale)

Sets the scaling factor for this element.

Parameters:
Name Type Description
scale olympe.df.PONumber | olympe.df.Node | number

The scaling factor.
Inherited From:
Overrides:
Returns:

This DockableElement.

Type
olympe.ui.std.DockableElement

setZIndex(zIndex)

Sets the z-index for this element. This determines how elements are layered when they overlap on the screen. Higher Z-index elements are placed on top of lower Z-index elements.

Parameters:
Name Type Description
zIndex olympe.df.PONumber | olympe.df.Node | number

Index of element on z axis.
Inherited From:
Overrides:
Returns:

This DockableElement.

Type
olympe.ui.std.DockableElement

Type Definitions

OnSelectionChanged(newValue)

Parameters:
Name Type Description
newValue string

The id of the tab.