Tabs (Text with focus-Line)

Tabs (Text with focus-Line)

Asset Version: 1.0.1
  • Version 1.0.1
  • Version 1.0.0
Last Published: May 10, 2018 By: Kony Team
932 0 3 49
Tabs are used to organize content at app level. Using these, users can quickly switch between different sections of the app.

Requirements

  • Visualizer Enterprise
 

Devices

 

Platforms


Features

  • Ready-to-use and easy to implement Tab patterns
  • Useful component for Navigation between different sections (functional modules)
  • Easy to plug into your app
  • Facilitates easy customization of UI

Prerequisites

  • Kony Account
  • Kony Visualizer v8

Tabs are used to organize content at app level. Using these, users can quickly switch between different sections of the app.

Use case

Consider a case that you want to develop an app for social networking that helps users to perform multiple transactions in separate sections. In this app, you want to develop a feature that helps users to make calls via internet, send messages, and view status. Using the Tabs component, you can achieve the feature in your app. To achieve the feature, do the following.

  1. Define a Tabs component with required number of sections.
  2. Change the Tabs in sync with the sections selected.

Now, your app shows users the different sections arranged through the Tabs component.

The Tabs component is a ready-to-use component. You can import the Tabs component into your app (created in Kony Visualizer), and can achieve the features without developing it from scratch. The Tabs component also facilitates a set of properties, events, and APIs that helps you customize the UI elements and functionality, if required.

The following sections help you use the Tabs component in your app.

Prerequisites

Before you start using the Tabs component, ensure the following:

  1. Kony account.
  2. Kony Visualizer V8.

Importing the Tabs Component

Before you start importing the component to Kony Visualizer, you must download the component from Kony Marketplace website. You can import the marketplace components only into the apps that are of the Kony Reference Architecture type.

  1. Open your app project in Kony Visualizer.
  2. On the File menu, point to Import, and click Component. The Open dialog appears.
  3. Navigate to the location where you have downloaded the component (zip file) on your computer, select the component, and click Open. The Import Marketplace Item dialog appears.
    tabstextline_import.png
  4. In the Library Name box, type a name if you want to create a new library. Otherwise, you can select the existing library name
  5. In the Collection Name box, type a name if you want to create a new collection. Otherwise, you can select the existing collection name.
  6. In the Component Name box, the com.konymp.tabstextline name is displayed by default.

When you import a component, the component is imported to Visualizer's workspace, but not directly into your app. Thus, after you import a component, you must add the component to your app.

Adding a Tabs Component into your App

You can add a tabstextline component to FlexForms only.

To add a tabstextline component:

  1. Open your app, and then open the form to which you want to add the component.
  2. On the My Libraries tab, select the defined Marketplace library from the drop-down list in which the component exists.
    library.png
  3. From the Collections tab, drag the component onto the form on the Visualizer canvas. The component will be added to the form. You will also see a new element, com.konymp.tabstextline, under the component section on the Templates tab.

After adding a component to a form, you can configure the component the way you want it using the Look, Skin, and Action tabs on the Properties pane. Configuring the properties on the Properties pane is similar to configuring the properties of any widget in Kony Visualizer. For more information, refer to Button Widget.

You can also see that a new Component tab, is added on the Properties pane. The component tab contains assorted properties relevant to the component that allows you to customize the component as required. The properties on the Component tab are categorized as Generaland Tab Names properties.

Note:

Changes made to the properties are reflected only at the run time, but not at the design time (Visualizer Canvas).

You can also add a Tabs component dynamically. To do so,

  1. In the Project Explorer, on the Projects tab, click Controllers section to access the respective formController. Create a method and implement the code snippet similar to the sample code mentioned below.
    /* creating a component's Object */
    var tabs = new com.konymp.tabstextline(
    {
    	"clipBounds":true,
    	"id": "tabstextline",
    	"isVisible": true,
    	"zIndex": 1
    }, {}, {});
    
    /*Setting the component's properties*/
    tabs.left = "0%";
    tabs.width = "100%";
    tabs.top = "0%";
    tabs.tabCount = 2;
    tabs.tabWidth = "50%";
    tabs.title0 = "News";
    tabs.title1 = "Business";
    tabs.sknBackground = "sknName";
    tabs.sknTextActive = "sknName";
    tabs.sknTextInactive = "sknName";
    tabs.sknIndicator = "sknName";									
    				
    /*Adding the Tabs component to a Form*/
    this.view.add(tabs);
    this.view.tabs.createTabs();
    

    In the code snippet, you can edit the properties of the component as per your requirement. For more information, see Setting Properties.

  2. Save the file.

Setting Properties

The properties provided on the Component tab allow you to customize the UI elements in the Tabs component. You can set the properties directly on the Component tab or by writing a JavaScript.

Note:

If your app changes any of the properties at run-time, you must call the createTabs() API to see the changes in the Tab.

General Properties

No of Tabs
Description: Specifies the Number of tabs to be created in the component at the run time.
Syntax: tabCount
Type: Integer
Read/Write:

Read + Write

Example:
this.view.componentID.tabCount = 3;

.

Remarks:
  • The default value for the property is 3. Number of tabs should range between 1 and 6.
  • If the specified value is out of bounds or invalid, the component throws an INVALID_TABCOUNT exception and you must handle it.
  • If specified tab count is n, then you must provide names for all the n tabs. Otherwise, the component throws an INVALID_TAB_TITLE exception and you must handle it.
Tab Width
Description: Specifies the width of the tab in %.
Syntax: tabWidth
Type: String
Read/Write:

Read + Write

Example:
this.view.componentID.tabWidth= "33.3%";
Remarks:
  • The default value for the property is 33.3%.
  • Ensure that you append the value with %. Otherwise, the component throws an INVALID_TABWIDTH exception at run-time and you must handle it.

Tab Names

Note:

If specified tab count is n, then you must provide names for all the n tabs. Otherwise, the component throws an INVALID_TAB_TITLE exception and you must handle it.

Tab 1
Description: Specifies the title of the first tab (index: 0).
Syntax: title0
Type: String
Read/Write:

Read + Write

Example:
this.view.componentID.title0= "Tab1";
Remarks: The default value for the property is "Tab 1".
Tab 2
Description: Specifies the title of the second tab (index: 1).
Syntax: title1
Type: String
Read/Write:

Read + Write

Example:
this.view.componentID.title1 = "Tab 2";
Remarks: The default value for the property is "Tab 2".
Tab 3
Description: Specifies the title of the third tab (index: 2).
Syntax: title2
Type: String
Read/Write:

Read + Write

Example:
this.view.componentID.title2 = "Tab 3";
Remarks: The default value for the property is "Tab 3".
Tab 4
Description: Specifies the title of the fourth tab (index: 3).
Syntax: title3
Type: String
Read/Write:

Read + Write

Example:
this.view.componentID.title3 = "Tab 4";
Remarks: The default value for the property is "Tab 4".
Tab 5
Description: Specifies the title of the fifth tab (index: 4).
Syntax: title4
Type: String
Read/Write:

Read + Write

Example:
this.view.componentID.title4= "Tab 5";
Remarks: The default value for the property is "Tab 5".
Tab 6
Description: Specifies the title of the sixth tab (index: 5).
Syntax: title5
Type: String
Read/Write:

Read + Write

Example:
this.view.componentID.title5 = "Tab 6";
Remarks: The default value for the property is "Tab 6".

Skin Section

Tab Background
Description: This property enables the consumer to change the background skin of tabs.
Syntax: sknBackground
Type: String
Read/Write:

Read + Write

Example:
this.view.componentID.sknBackground = "sknName";
Tab Text Active
Description: This property enables the consumer to set the skin of the selected tab text.
Syntax: sknTextActive
Type: String
Read/Write:

Read + Write

Example:
this.view.componentID.sknTextActive = "sknName";
Tab Text Inactive
Description: This property enables the consumer to set the skin of the unselected tab text.
Syntax: sknTextInactive
Type: String
Read/Write:

Read + Write

Example:
this.view.componentID.sknTextInactive = "sknName";
Indicator Skin
Description: This property allows the user to change the skin of the line indicator that appears below the selected tab text.
Syntax: sknIndicator
Type: String
Read/Write:

Read + Write

Example:
this.view.componentID.sknIndicator = "sknName";

Defining Events

onTabChange
Description: An event callback is invoked when the user clicks on any of the Tabs.
Syntax: onTabChange
Type: String
Read/Write:

Read + Write

Example:
{"tabIndex" : 1, "text" : "Tab 2"};
Params: eventObject (tabIndex, text)

APIs

The following are the APIs pertaining to the Tabs component.

goToTab

This API navigates the control to the provided tab Index.

Syntax
goToTab(tabIndex)
Parameters

tabIndex (0<=tabIndex <tabCount)

Return Value

None

Remarks

Ensure that you pass a valid tabIndex. Otherwise, this API throws an INVALID_TAB_INDEX exception and you must handle it.

Example
this.view.componentID.goToTab(2);
getSelectedTabIndex

This API is used to get the selected tab index.

Syntax
getSelectedTabIndex()
Parameters

None

Return Value

tabIndex

Example
var tabIndex = this.view.componentID.getSelectedTabIndex ();
	 	alert(JSON.stringify(tabIndex));
					
moveLeft

This API is used to shift the tab selection from the current selected tab to its immediate left (by one unit).

Syntax
moveLeft()
Parameters

None

Return Value

None

Remarks

If the current tab is the first tab and the application invokes the moveLeft API, the component throws an OUT_OF_BOUND_EXCEPTION and you must handle it.

Example
this.view.componentID.moveLeft();
moveRight

This API is used to shift the tab selection from the current selected tab to its immediate right (by one unit).

Syntax
moveRight()
Parameters

None

Return Value

None

Remarks

If the current tab is the last tab and the application invokes the moveRight API, the component throws an OUT_OF_BOUND_EXCEPTION and you must handle it.

Example
this.view.componentID.moveRight();
getSelectedTabDetails

This API returns an object containing details of the selected tab.

Syntax
getSelectedTabDetails()
Parameters

None

Return Value

tabObject

Example
var tabData = this.view.componentID.getSelectedTabDetails ();
	    alert(JSON.stringify(tabData));
	Output:{"text":"Tab 2", "tabIndex":1}				
createTabs

This API helps create tabs based on user provided input. Before calling this API, ensure an instance of the tab component is present in the respective form.

Syntax
createTabs(tabObject)
Parameters

tabObject: [Array of Strings]

If the tabObject is null, then the tab is created based on the Tab Properties.

Return Value

None

Remarks

Ensure that the tabObject array does not contain null or empty string. Otherwise, the component throws an INVALID_TAB_TITLE exception and you must handle it.

Example
var tabObject = [‘Technology’,’Social’,’Finance’,’Product’]
		this.view.componentID.createTabs(tabObject);	

Limitations

The following are the limitations pertaining to the Tabs component.

  • We can support a maximum number of 6 tabs using this component.