Tab Controls (Magic xpa 4.x)

A Tab control allows you to simplify the look of your forms. You may have a screen that has several different tables and 40 different fields, but if they are organized into tabs, the interface seems simpler to the user.

When you use a Tab control, only the controls that are attached to one tab are visible when that tab is chosen. The controls that are attached to the tab might be one set of variables, or it might be a subform that links to an entirely different task or program.

A Tab control enables us to design a form with many controls but these controls are only visible when the tab that they are linked to, has been pressed.

Clicking on a Tab control raises a Zoom event. Since the Tab control is a selection control, it will not function in Query mode. If you want the data to be in Query mode, use subforms.

The Tab control properties are listed by categories:

General

Details

Data Source

Input

Appearance

Mobile

Parking

Navigation

Add Tab and Remove Tab links are available at the bottom of the property sheet. You can also add and remove tabs by adding or deleting options in the Items List control property. Since version: 3.0

Platform specific

The Tab control appears as a tab bar on Android and iOS devices (Since version: 2.5). The tab bar will appear in full screen; therefore, when developing an app, it is recommended to stretch the Tab control across the entire form.

In general, the tab bar's functionality is based on the device's default behavior:

Functionality	Android	iOS
Navigation	Click the tab bar items or swipe the tab bar.	Click the tab bar items.
Location	At the top of the form.	At the bottom of the form.
Horizontal scrolling inside a tab	Not supported. Horizontal scrolling navigates between tabs. Controls (on a tab) that exceed the screen size will not be seen.	Supported.
Vertical scrolling inside a tab	Supported.	Supported.

Images

The tab can contain both text and images. Images are defined in the Image List File Name and Image List Indexes properties (as in desktop tabs).

Unlike desktop tabs:

• The images' size is not limited to 16x16. The images however must be rectangles; so for example, the image list can contain multiple 100x100 images.

• The image file must contain images for all of the tabs.

Android only

For Android devices, you can hide the tab header by having blank text and no images. In this case, the tab will be used for scrolling between objects without a header. You can display and/or hide the text and images by setting the following properties:

Display combination	Display List property	Image List File Name property
To show only text values		X
To show text + images
To show only images	X
To hide the tab bar (and have only pane scrolling behavior)	X	X

Exceptions

Due to the default behavior of the devices, the following scenarios are not allowed:

• Controls placed outside the Tab control.

• Controls attached to layer 0 of the Tab control.

• More than one Tab control on the form.

• A Tab control attached to a container control (such as a Group control or another Tab control).

• A subform task that has a Tab control.

The background of the form (wallpaper, color, and gradient) will be used for all the tabs.

Related Topics

Keyboard Mapping - Form Editor

How Do I Associate Controls to Different Tabs in a Tab Control?

How Do I Associate a Task to a Specific Tab in a Tab Control?

How Do I Use the Tab Control on Mobile Devices?

The Rich Client Samples project (program RMO04)