tab

Creates a tab component where each child component within the tab tag represents a separate tab page inside of the tab component.  Note that the height and width attributes of a tab component include the space occupied by the tab labels, not just the size of child components.

Syntax

<tab container attributes>

    <component for tab 1 child component attributes> </component>

    <component for tab 2 child component attributes> </component>

    . . .

</tab>


 

Container Attributes

In addition to General Attributes, the following attributes may be specified to the <tab> tag:

Attribute

Values

Restrictions

Description

tabposition

north

east

south

west

none

How the tabs are rendered within their quadrant is determined by the look and feel.

Specifies the placement of the tabs.

MC900329243[1]

none

Tabs will be hidden and the visible component must be controlled through the “reveal” tag or the OGP REVEAL_ELEMENT trap.

tablayout

scroll

stack

 

If there are more tabs than can fit in the horizontal space available, this controls whether there are multiple rows of tabs (“stack”) or if additional tabs are on the same row and accessible via scrolling (“scroll”).

tabheight

Integer

Tab will not resize below minimum size to render tab label text

Specifies the height of the tab label, in pixels. Note that the width of the tab is determined by the length of the tab label names.

onchange

ogScript String

 

The provided snippet of ogScript is triggered when the selected tab changes.

Current tab index is:

this.getSelectedIndex()

Current tab name is:

this.getTitleAt(this.getSelectedIndex())

Default values shown in bold.

Child Component Attributes

In addition to General Attributes, the following attributes may be specified to child components:

Attribute

Values

Restrictions

Description

name

String

This attribute is used in elements contained within a tab tag.

Specifies (or overrides) the name to display in the tab for a component.  If the component provides its own name (e.g. an OGP Menu), that name will be used in the absence of this attribute.

selected

default

forced

none

This attribute is used in elements contained within a tab tag.

default = this tab will be selected by default when the UI is loaded.

forced = this tab will be selected by default when the UI is loaded and, if the UI is refreshed, this tab will be selected again.

none = when the UI is loaded, the first tab in the tab group is selected.  If the UI is refreshed, DashBoard should attempt to maintain the current tab selection.

Default values shown in bold.

Example

The following example creates a tab container with three tabs:

·         First tab contains an abs container with 4 buttons placed in a 2x2 grid.

·         Second tab contains an abs container with 4 buttons placed in a 2x2 grid.

·         Third tab contains a single button

<tab width="250" height="300" left="1" tabposition="north" top="1">

<abs height="300" width="250" name="First Tab">

    <button left="5" top="5" width="25" height="25" name="1"/>

    <button left="30" top="5" width="25" height="25" name="2"/>

    <button left="5" top="30" width="25" height="25" name="3"/>

    <button left="30" top="30" width="25" height="25" name="4"/>

</abs>

<abs height="250" width="250" name="Second Tab">

    <button left="5" top="5" width="25" height="25" name="5"/>

    <button left="30" top="5" width="25" height="25" name="6"/>

    <button left="5" top="30" width="25" height="25" name="7"/>

    <button left="30" top="30" width="25" height="25" name="8"/>

</abs>

<button name="Go"/> 

</tab>