Open topic with navigation

You are here: TabPane Widget > TabPane Widget Basics > Creating a TabPane Using a Constructor: kony.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:

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

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

For general information on the TabPane widget see the TabPane topic in the Kony Visualizer User Guide.

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

Layout

 
PropertiesDescription
anchorPointSpecifies the anchor point of the widget bounds rectangle using the widget's coordinate space.
bottom Determines the bottom edge of the widget and is measured from the bottom bounds of the parent container.
centerX Determines the center of a widget measured from the left bounds of the parent container.
centerY Determines the center of a widget measured from the top bounds of the parent container.
height Determines the height of the widget and measured along the y-axis.
layoutType Defines the type of the layout of widget. Layout type can be grid or normal.
left Determines the lower left corner edge of the widget and is measured from the left bounds of the parent container.
maxHeight Specifies the maximum height of the widget and is applicable only when the height property is not specified.
maxWidth Specifies the maximum width of the widget and is applicable only when the width property is not specified.
minHeight Specifies the minimum height of the widget and is applicable only when the height property is not specified.
minWidth Specifies the minimum width of the widget and is applicable only when the width property is not specified.
rightDetermines the lower right corner of the widget and is measured from the right bounds of the parent container.
tabHeaderHeight Specifies the height of the Tab header in pixels.
top Determines the top edge of the widget and measured from the top bounds of the parent container.
width Determines the width of the widget and is measured along the x-axis.
zIndex Specifies the stack order of a widget.
 

Data Management

 
MethodsDescription
addTab Used to add a tab to the TabPane widget.
addTabAt Used to add a tab at the specified index to the TabPane.
clone When this method is used on a container widget, then all the widgets inside the container are cloned.
removeTabById Used to remove a tab based on the tabid on the TabPane.
 
PropertiesDescription
layoutMeta A custom Object with the key, value pairs that developer can use to provide the meta info about the grid layout.

 

3D Touch

MethodsDescription
registerForPeekandPop Registers a widget to enable 3D Touch peek and pop gestures.
setOnPeek Sets and overrides the existing onPeekCallback for the widget.
setOnPop Overrides the existing onPopCallback for the widget.
unregisterForPeekandPop Unregisters a widget from 3D Touch peek and pop gestures.

User Input Handling

MethodsDescription
addGestureRecognizer Allows you to set a gesture recognizer for a specified gesture for a specified widget.
removeGestureRecognizer Allows you to remove the specified gesture recognizer for the specified widget.
setGestureRecognizer Allows you to set a gesture recognizer for a specified gesture for a specified widget.
 
PropertiesDescription
scrollsToTop This property enables you to scroll the TabPane to top on tapping a device’s status bar.
retainPositionInTab Indicates whether each individual tab should retain its scroll position when the TabPanes are switched over.

 

UI Appearance

PropertiesDescription
activeSkin This is a skin property. Skin to be applied when a TabPane is active.
inactiveSkin Skin to be applied for all inactive tabs.
layoutType Defines the type of the layout of widget. Layout type can be grid or normal.
pageSkin Specifies the skin for page indicator.
tabHeaderTemplate Accepts reference to a box widget which represents a UI template for a custom tab header.
viewType Specifies the view type the Tab Pane should display.
viewConfig The view configuration for different view types.

Miscellaneous

MethodsDescription
getBadge Enables you to read the badge value (if any) attached to the specified widget.
setBadge Enables you to set the badge value to the given widget at the upper, right corner of the widget.

 

PropertiesDescription
activeTabs Indicates the selected Tabs indices. Index starts from 0.
cursorTypeSpecifies the type of the mouse pointer used.
isMaster Specifies whether the container is a master container.
widgetSwipeMoveUsed to enable and configure the left or right swipe actions for a widget.

Configurations Common To All Widgets

MethodsDescription
convertPointFromWidget Allows you to convert the coordinate system from a widget to a point (receiver's coordinate system).
convertPointToWidget Allows you to convert the coordinate system from a point (receiver's coordinate system) to a widget.
removeFromParent Allows you to remove a child widget from a parent widget.
setEnabled Specifies the widget that must be enabled or disabled.
setFocus Specifies the widget on which there must be focus.
setVisibility Use this method to set the visibility of the widget.

 

EventsDescription
onTabClick Event callback invoked when the tab is clicked.
postOnclickJS This event allows the developer to execute custom JavaScript function after the onTabClick callback of the TabPane is invoked.
preOnclickJS This event allows the developer to execute custom JavaScript function before the onTabClick callback of the TabPane is invoked.

 

PropertiesDescription
enableCache Enables you to improve the performance of Positional Dimension Animations.
info A custom JS Object with the key value pairs that a developer can use to store the context with the widget.
idid is a unique identifier of a TabPane consisting of alpha numeric characters.
isVisible This property controls the visibility of the TabPane on the form.

TabPane Widget Basics

Click here to view TabPane features specific to Desktop Web platform

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


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

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",
    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 kony.ui.TabPane(tabBasic, tabLayout, tabPSP);

Customizing Appearance

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

Important Considerations

TabPane widget has the following considerations:

premCopyright © 2012 Kony, Inc. All rights reserved.
premCopyright © 2012 Kony, Inc. All rights reserved.

Open topic with navigation