Tabs (Text with focus-Line)

Tabs (Text with focus-Line)

Asset Version: 1.0.0
  • Version 1.0.0
Last Published: Aug 2, 2017 By: Kony Team
97 0 2 20
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

Tony Francis Question

Dear Kony, I am using the tabs menu in a form but I can't find how to navigate to another form when I click on tab2 let's say. I want to navigate to another form when I click on tab2 in form1. Thanks for your help!

SaiPavan Kumar

Hi Tony, We have exposed an event called onTabChange which is triggered when user clicks on a tab. You can write your form navigation logic there. In case you want navigate to another form and need the tabs, Instead of form use flex's and write your logic for them. I hope you this has answered your question, let us know if you need any assistance. Thanks,Pavan

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.

  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.tabstextline.createTabs();

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

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 any of the properties are changed at run-time, user must call 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.tabstextline.tabCount = 3;.
Remarks:

The default value for the property is 3. Number of tabs should range between 1 and 6.

This throws an exception if the value provided is out of bounds or an invalid value is assigned. The user needs to handle this exception.

Tab Width
Description: Specifies the width of the tab in %.
Syntax: tabWidth
Type: String
Read/Write:

Read + Write

Example: this.view.tabstextline.tabWidth= "33.3%";
Remarks:

The default value for the property is 33.3%.

If the value provided is not appended with "%", the component throws an exception at run-time. User needs to handle this exception.

Tab Names

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

Read + Write

Example: this.view.tabstextline.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.tabstextline.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.tabstextline.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.tabstextline.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.tabstextline.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.tabstextline.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.tabstextline.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.tabstextline.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.tabstextline.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.tabstextline.sknIndicator = "sknName";

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.

Note:

If an invalid tabIndex is passed, this API throws an exception. User needs to handle this exception.

Syntax
goToTab(tabIndex)
Parameters

tabIndex (0<=tabIndex <tabCount)

Return Value

None

Example
this.view.tabstextline.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.tabstextline.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

Example
this.view.tabstextline.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

Example
this.view.tabstextline.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.tabstextline.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. (If the tabObject is null, then the tab is created based on the Tab Properties.)

Return Value

None

Example
var tabObject = [‘Technology’,’Social’,’Finance’,’Product’]
		this.view.tabstextline.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.

Known Issues

For iPhone, there occurs a gap due to content offset issue; when you set tab width other than 33% or tab count not equal to 3.