Introducing Tab

Tab is the component used when you need to place a large number of components on a narrow screen. Like the dictionary meaning of Tab, the user can efficiently navigate through the information needed by viewing the Tab, tab page.

The components of Tab are as follows.

Tab can be placed by overlapping several logically separated spaces on one screen. Such spaces are called tab pages. Each tab page is used as the space to collect and display similar information, and due to its structure, only one page can be viewed at a time.

Tab pages can also load other forms by setting the url property. At this time, depending on the setting of the preload property, the loading performance of Tab may be affected.

• If preload is set, when loading the main form, all forms connected to the tab page are loaded. Therefore, if there is the tab page or a lot of data to be displayed, the initial loading of the screen is slow.

• If preload is not set, when loading the main form, only the form connected to the tab page displayed on the screen is loaded. Therefore, the initial loading of the screen is fast, but there may be a loading delay every time the tab page is switched.

Hence, you need to decide how effective it is, taking into account the tab page, how much data to output, and whether the user needs to use all of the tabs.

Example

Use the Tab UI to present multiple pieces of information of a similar type within a limited area.

Creating Tab

Select Tab from the toolbar and drag it to an appropriate size on the form to create it. Just click on the form and it will be created with the default size, and 2 tab pages are automatically created.

After selecting the created tab and right-clicking the mouse opens the tab page context menu. If you select [Add Tabpage], then a new tab page is added after the last tab page.

To delete the tab page, select [Delete Tabpage]. This will delete the currently enabled tab page.

To switch between tab pages, use the [Previous Tabpage], [Next Tabpage], and [Go to Tabpage] menus.

When the showextrabutton property of the Tab component is set to 'true', the extra button is created above the tab button. Since creation alone does not do any action, the function of the button must be defined through the onextrabuttonclick event.

The preview and next buttons are automatically created when the number of tab buttons increases beyond the width of the Tab component. Create tab pages appropriately so that the number of tab buttons increases.

Run it with QuickView (Ctrl + F6) and switch tab pages to check that there is no problem with the operation.

Tab has two tab pages by default unless you add a separate tab page.

Configuring Multiline Tab

When there is a lot of information to be displayed and you need to show what information is available at a glance, it is convenient to use the multiline function of Tab. The multiline function allows the user to check at a glance which tab page exists by placing tab buttons in multiple lines in Tab configured with multiple tab pages.

Example

If you set the multiline property and add a tab page so that the width of the tab button is greater than the width of the Tab, then it will be configured with the multiline Tab. When you click the button, TabPage is added.

sample_tab_02.xfdl

Core features used in the example

multiline

This is the property that sets whether tab buttons are placed in multiple lines when more than a certain number of tab pages are added to the Tab component.

How to implement an example

Select Tab from the toolbar and drag it to an appropriate size on the form to create it.

After selecting the Tab component, set the multiline property to 'true' in the Properties window.

The default Tab created has 2 tab pages. Add tab pages to configure multiline Tab.

After selecting Tab, place the mouse cursor on the tab page area and click the right mouse button to display the context menu as shown below. Click [Add Tabpage] to create a new tab page until the tab buttons become multiple lines.

Tab-related menu functions are as follows.

• [Add Tabpage] Create a new tab page.

• [Delete Tabpage] Removes the currently selected tab page.

• [Previous Tabpage] Selects the tab page with the index right before the currently selected tab page.

• [Next Tabpage] Selects the tab page with the index right after the currently selected tab page.

• [Go to Tabpage] Selects a specific tab page by specifying it.

Place the Button component on top of the Tab component and add the onclick event.

this.btnInsert_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var i = this.Tab00.getTabpageCount()+1;
	this.Tab00.insertTabpage("TabPage"+i, -1);
};

Run it with QuickView (Ctrl + F6). Check that TabButton looks like it is configured with multiple lines.

Adjusting Tab Button Location

Depending on the screen configuration, you may need to locate the tab button to the left, right, or downward. At this time, you can change the location of the tab button by using the tabposition property of the Tab component.

Example

You set the location of the tab button by setting the tabposition property. The location of the tab button can be set to the left, right, up, or down.

sample_tab_03.xfdl

Core features used in the example

tabposition

This is the property that sets the location where the tab button is displayed in the Tab component.

How to implement an example

Create the Tab , Radio components from the toolbar and place them on the form as shown in the example screen.

Use the radio button to set the tabposition property of the Tab component. The tabposition property can be set to a total of 4 values, which are 'top', 'left', 'right', and 'bottom'.

1. Radio Menu Configuration

To create 4 radio buttons, select the Radio component and click the [...] button in the innerdataset property of the property window to set the innerDataset as follows.

2. Radio Property Setting

3. Registering onitemchanged Event Function

In order to set the tabposition property of Tab according to the selection of the radio button, create and register the onitemchanged event function in the Radio component.

this.Radio00_onitemchanged = function(obj:nexacro.Radio,e:nexacro.ItemChangeEventInfo)
{
	this.Tab00.set_tabposition(e.postvalue);

};

Run it with QuickView (Ctrl + F6). Click the radio button to see if the tab button changes location.

Disabling Tab Button

Depending on the situation, it may be necessary to select and provide tab pages to the user. At this time, disabling the tab button can prevent unnecessary user access.

Example

This is an example of disabling number 2 and 3 out of a total of 4 tab pages. It is visible on the screen, but it is disabled and cannot be selected.

sample_tab_04.xfdl

Core features used in the example

enable

This is the property that sets whether to enable or disable the tab page.

postindex

This is the property of the TabIndexChangeEventInfo event information object that has the index value of the newly changed tab page.

How to implement an example

Create the Tab component from the toolbar and place it on Form as shown in the example screen.

The default Tab created has 2 tab pages. Add so that you can have 4 tab pages.

If you click the right mouse button after selecting Tab, the context menu related to the tab page appears. If you select [Add Tabpage], a new tab page is added after the last tab page.

To delete the tab page, select [Delete Tabpage]. This will delete the currently enabled tab page.

To switch between tab pages, use the [Previous Tabpage], [Next Tabpage], and [Go to Tabpage] menus.

Select Tabpage2 and Tabpage3 to disable them respectively, and set the enable property to 'false'.

Run it with QuickView (Ctrl + F6). Click the tab button to switch the tab page and check if it operates as set.