You are here: TabPane Widget > TabPane Widget Basics > Creating a TabPane Using a Constructor: voltmx.ui.TabPane

TabPane Widget

A TabPane widget is a container widget that allows you to organize multiple tabs within it. Each Tab will in turn hold a collection of widgets within the same area of the Form. You can only view one Tab a time. Every Tab in the TabPane widget consists of a certain type of information, and is displayed when the user selects the corresponding Tab.

Tab Pane widget can have the following views:

• Default view

• Collapsible view

• Page view

Following are a few real-time use cases of Tab Pane widget:

• Tabs are extensively used in news websites to display national, international, and state news in various tabs.

• Tabs are used in shopping websites categorizing men’s fashion, women’s fashion, and kids’ fashion into various tabs.

Widgets are normally added to your application using Volt MX Iris, but can also be added from code. For general information on using widgets in Volt MX Iris, see Designing an Application in the Volt MX Iris User Guide.

For general information on the TabPane widget see the TabPane topic in the Volt MX Iris User Guide.

The TabPane widget capabilities can be broadly categorized into the following:

• Layout
• Data Management
• User Input Handling
• 3D Touch
• UI Appearance
• Miscellaneous
• Configurations Common To All Widgets

Layout

Data Management

3D Touch

User Input Handling

UI Appearance

Miscellaneous

Configurations Common To All Widgets

TabPane Widget Basics

Click here to view TabPane features specific to Desktop Web platform

Creating a TabPane Using a Constructor: voltmx.ui.TabPane

var tab = new voltmx.ui.TabPane (basicConf, layoutConf, pspConf);

• basicConf is an object with basic properties.
• layoutConf is an object with layout specific properties.
• pspConf is an object with platform specific properties.

Note: The configuration properties should be passed only in the respective configuration objects otherwise they are ignored.

Example

//The below is the callback for onTabClick event.
function onTabClick(tabpane, tabIndex) {
 /* Write your logic here*/
}

//Defining the properties for TabPane.
var tabBasic = {
 id: "tPane",
 "autogrowMode": voltmx.flex.AUTOGROW_HEIGHT,
 info: {
  key: "TabPane"
 },
 activeSkin: "aSkin",
 activeFocusSkin: "aFSkin",
 inactiveSkin: "inActiveSkin",
 viewType: constants.TABPANE_VIEW_TYPE_TABVIEW,
 screenLevelWidget: true,
 isVisible: true,
 retainPositionInTab: true,
 needPageIndicator: true,
 selectedTabIndex: 0,
 onTabClick: onTabClick
};

var tabLayout = {
 padding: [5, 5, 5, 5],
 margin: [5, 5, 5, 5],
 paddingInPixel: true,
 marginInPixel: true,
 widgetAlignment: constants.WIDGET_ALIGN_TOP_LEFT,
 containerWeight: 99
};

var tabPSP = {};

//Creating the TabPane.
var tabPane = new voltmx.ui.TabPane(tabBasic, tabLayout, tabPSP);

Customizing Appearance

You can customize the appearance of the TabPane widget using the following properties:

• widgetAlignment: Specifies the alignment of the widget.
• margin: Defines the space around the widget.
• padding: Defines the space between the content of the widget and the widget boundaries.
• activeSkin: Specifies the skin that must be applied to an active tab.
• activeFocusSkin: Specifies the skin that must be applied to the Tab in focus.
• inactiveSkin: Specifies the skin that must be applied to a Tab that is inactive.

Important Considerations

TabPane widget has the following considerations:

• The TabPane widget occupies 100% of the screen width.

• You can navigate within the TabPane using only the down key.
• If you press the down key, the focus shifts to the next widget in the TabPane.
• If you press the down key while you are on the last widget in the TabPane, you are taken to the top most widget in the TabPane.
• If you press the right or the left arrow keys, you move to next or previous tabs.

• Tab cycling is supported (i.e, if you are on the last tab and you press the right arrow, you move to the first tab)

• On devices which have a navigation key, the following are applicable:
• Each Tab has a context menu. This menu is displayed in the menu options whenever the Tab is in focus.
• Tab remembers the control on which there was focus. For example, if control 2 of Tab2 is in focus, and you navigate to Tab1, when you navigate back to Tab2, control 2 will be in focus and not the first item in the Tab.

• On iOS platform, following are the limitations:

  • TabPane skin supports only two border styles plain and rounded corner.

  • TabPane skin border style does not support complete rounded. It you set border style as complete rounded it will show border style as plain.

  • If you set border style as rounded corner, only the top portion of button gets rounded, but not the complete tab.