TabPane Properties
The properties for TabPane widget are:
activeFocusSkin Property
This is a skin property. This property specifies the skin that is to be applied when a TabPane is active and focused.
Syntax
activeFocusSkin
Type
String
Read/Write
Read + Write
Example
//Sample code to set the activeFocusSkin property of a TabPane widget.
frmTab.myTab.activeFocusSkin="aFSkin";
Platform Availability
- Available in the IDE
- Available on all platforms
activeSkin Property
This is a skin property. Skin to be applied when a TabPane is active.
Syntax
activeSkin
Type
String
Read/Write
Read + Write
Example
//Sample code to set the activeSkin property of a TabPane widget.
frmTab.myTab.activeSkin="aSkin";
Platform Availability
- Available in the IDE
- Available on all platforms
activeTabs Property
Indicates the selected Tabs indices. Index starts from 0. Specifies the Tab that must be displayed as the default open Tab.
Syntax
activeTabs
Type
Array
Read/Write
Read + Write
Remarks
The default value for this property is '1' (Tab 1 will be displayed as the Active Tab)
If you want to set another Tab as Active Tab, select that Tab in the drop-down list. Multiple indices in activeTabs is only appropriate for collapsible view currently. For all the remaining views,activeTabs always respects only one selected item i.e first element in the array.
Example
//Sample code to set the activeTabs property of a TabPane widget.
frmTab.myTab.activeTabs=[0, 1, 2, 3, 4];
Platform Availability
- Available in the IDE
- Available on all platforms
autogrowMode Property
The autogrowMode
property is used to set the height of the TabPane widget dynamically. The height of the TabPane widget will be the same as the height of the content inside the selected tab (including the height of the tab header).
This property is not applicable when the viewType property has the value: TABPANE_VIEW_TYPE_PAGEVIEW
.
Syntax
autogrowMode
Type
Constant
You can add any of the following constants to the autogrowMode property.
voltmx.flex.AUTOGROW_NONE
: When the autogrowMode property is assigned this value, the height of the TabPane widget does not increase dynamically. The default value is applied using the values in minHeight and maxHeight properties. This is the default value of this property.voltmx.flex.AUTOGROW_HEIGHT
: When the autogrowMode property is assigned this value, the height of the TabPane widget increases dynamically. The height of the TabPane widget is dependent on the height of the selected tab.
Read/Write
Read +Write
Remarks
Note: If one or all the child widgets height or other properties such as centerY, top, bottom, minHeight or maxHeight are used in determining the height given in percentage (%), then the autogrowMode property will not work for the selected tab and the height of the TabPane widget falls back to the default configuration value (220 dp).
Rules and priorities of autogrowMode property
- The autogrowMode property is ignored if the height property of the TabPane widget has a value.
- If the autogrowMode property is configured as voltmx.flex.AUTOGROW_HEIGHT, then preferred Size (based on content in the selected tab ) is computed, and min/max constraints are applied.
- In a TabPane widget with Collapsible view, when the value of the autogrowMode property is voltmx.flex.AUTOGROW_HEIGHT,the height of the widget is the total height of all the expanded tabs.
Example
//Sample code to set the autogrowMode property of a TabPane widget.
//The TabPane widget will use the set height property to derive height
frmHome.myTab1.autogrowMode=voltmx.flex.AUTOGROW_NONE;
//The TabPane widget will use the height of the selected tab to derive height
frmHome.autogrow1.autogrowMode=voltmx.flex.AUTOGROW_HEIGHT;
Platform Availability
- iOS, Android, SPA, and Desktop Web
bottom Property
This property determines the bottom edge of the widget and is measured from the bottom bounds of the parent container.
The bottom property determines the position of the bottom edge of the widget’s bounding box. The value may be set using DP (Device Independent Pixels), Percentage, or Pixels. In freeform layout, the distance is measured from the bottom edge of the parent container. In flow-vertical layout, the value is ignored. In flow-horizontal layout, the value is ignored.
The bottom property is used only if the Height property is not provided.
Syntax
bottom
Type
String
Read/Write
Read + Write
Remarks
The property determines the bottom edge of the widget and is measured from the bottom bounds of the parent container.
If the layoutType is set as voltmx.flex.FLOW_VERTICAL, the bottom property is measured from the top edge of bottom sibling widget. The vertical space between two widgets is measured from bottom of the top sibling widget and the top of the bottom sibling widget.
Example
//Sample code to set the bottom property for widgets by using DP, Percentage and Pixels.
frmHome.widgetID.bottom = "50dp";
frmHome.widgetID.bottom = "10%";
frmHome.widgetID.bottom = "10px";
Platform Availability
- Available in the IDE
- iOS, Android, Windows, SPA , and Desktop Web
centerX Property
This property determines the center of a widget measured from the left bounds of the parent container.
The centerX property determines the horizontal center of the widget’s bounding box. The value may be set using DP (Device Independent Pixels), Percentage, or Pixels. In freeform layout, the distance is measured from the left edge of the parent container. In flow-vertical layout, the distance is measured from the left edge of the parent container. In flow-horizontal layout, the distance is measured from the right edge of the previous sibling widget in the hierarchy.
Syntax
centerX
Type
String
Read/Write
Read + Write
Remarks
If the layoutType is set as voltmx.flex.FLOW_HORIZONTAL, the centerX property is measured from right edge of the left sibling widget.
Example
//Sample code to set the centerX property for widgets by using DP, Percentage and Pixels.
frmHome.widgetID.centerX = "50dp";
frmHome.widgetID.centerX = "10%";
frmHome.widgetID.centerX = "10px";
Platform Availability
- Available in the IDE
- iOS, Android, Windows, SPA, and Desktop Web
centerY Property
This property determines the center of a widget measured from the top bounds of the parent container.
The centerY property determines the vertical center of the widget’s bounding box. The value may be set using DP (Device Independent Pixels), Percentage, or Pixels. In freeform layout, the distance is measured from the top edge of the parent container. In flow-horizontal layout, the distance is measured from the top edge of the parent container. In flow-vertical layout, the distance is measured from the bottom edge of the previous sibling widget in the hierarchy.
Syntax
centerY
Type
String
Read/Write
Read + Write
Remarks
If the layoutType is set as voltmx.flex.FLOW_VERTICAL, the centerY property is measured from bottom edge of the top sibling widget.
Example
//Sample code to set the centerY property for widgets by using DP, Percentage and Pixels.
frmHome.widgetID.centerY = "50dp";
frmHome.widgetID.centerY = "10%";
frmHome.widgetID.centerY = "10px";
Platform Availability
- Available in the IDE
- iOS, Android, Windows, SPA, and Desktop Web
cursorType Property
In Desktop Web applications, when you hover the mouse over any widget, a mouse pointer appears. Using the cursorType property in Iris, you can specify the type of the mouse pointer.
Syntax
cursorType
Type
String.
You must provide valid CSS cursor value such as wait, grab, help, etc. to the cursorType property.
Read/Write
Read + Write
Remarks
To add the cursorType
property using Volt MX Iris in a Desktop Web application, follow these steps.
- In Volt MX Iris, open the Desktop Web application. From the Project explorer, expand Responsive Web/ Desktop> Forms and select the form to which you need to make the changes.
- On the canvas, select the widget for which you want to specify the cursor type. For example, button.
- From the Properties panel, navigate to the Skin tab > Hover Skin tab.
You will find that the details of the hover skin is not enabled here. - Check the Enable option to add a hover skin to your widget.
The details and configurations of the hover skin is enabled. - Under the General section, for the Platform option, click the ellipsis icon.
The Fork Skin window appears. - In the Fork Skin window, for Desktop, check under HTML5 SPA.
- Click Ok. You have successfully forked your hover skin for Desktop Web application.
You can see that the Cursor Type property has been added under the General section. - Select a value from the drop-down list to set the Cursor Type for the widget.
Example
//This is a generic property and is applicable for many widgets.
/*The example provided is for the Button widget. Make the required changes in the example while using other widgets.*/
frmButton.myButton.cursorType = "wait";
Platform Availability
- Available in IDE
- Desktop Web
enable Property
The enable
property is used to control the actionability of the widgets. In a scenario where you want to display a widget but not invoke any action on the widget, configure the enable
property to false to achieve it.
This is a constructor level property and applicable for all widgets in Volt MX Iris.
Syntax
enable
b>Type
Boolean
Read/Write
Read + Write
Remarks
The default value of this property is true.
When enable
property is configured to true, the action associated with a widget can be invoked by the user in the application.
When enable
property is configured to false, the action associated with a widget cannot be invoked by the user in the application.
Example
//This is a generic property and is applicable for many widgets.
/*The example provided is for the Button widget. Make the changes required in the example while using other widgets.*/
frmButton.myBtn.enable= true;
Platform Availability
- Android, iOS, Windows, SPA, and Desktop web
enableCache Property
The property enables you to improve the performance of Positional Dimension Animations.
Syntax
enableCache
Type
Boolean
Read/Write
Read + Write
Remarks
The default value for this property is true.
Note: When the property is used, application consumes more memory. The usage of the property enables tradeoff between performance and visual quality of the content. Use the property cautiously.
Example
Form1.widgetID.enableCache = true;
Platform Availability
- Available in the IDE.
- Windows
height Property
It determines the height of the widget and measured along the y-axis.
The height property determines the height of the widget’s bounding box. The value may be set using DP (Device Independent Pixels), Percentage, or Pixels. For supported widgets, the height may be derived from either the widget or container’s contents by setting the height to “preferred”.
Syntax
height
Type
Number, String, and Constant
Read/Write
Read + Write
Remarks
Following are the available measurement options:
- %: Specifies the values in percentage relative to the parent dimensions.
- px: Specifies the values in terms of device hardware pixels.
- dp: Specifies the values in terms of device independent pixels.
- default: Specifies the default value of the widget.
- voltmx.flex.USE_PREFERED_SIZE: When this option is specified, the layout uses preferred height of the widget as height and preferred size of the widget is determined by the widget and may varies between platforms.
Example
/*Sample code to set the height property for a TabPane widget by using DP, Percentage and Pixels.*/
frmTab.myTab.height="50dp";
frmTab.myTab.height="10%";
frmTab.myTab.height="10px";
Platform Availability
- Available in the IDE
- iOS
- Android
- Windows
- SPA
id Property
id is a unique identifier of a TabPane consisting of alpha numeric characters. Every TabPane should have a unique id within a Form.
Syntax
id
Type
String
Read/Write
Read only
Example
//Defining the properties for TabPane with id:"tPane"
var tabBasic = {
id: "tPane",
info: {
key: "TabPane"
},
activeSkin: "aSkin",
isVisible: true,
activeFocusSkin: "aFSkin",
selectedTabIndex: 0,
viewType: constants.TABPANE_VIEW_TYPE_TABVIEW,
screenLevelWidget: true,
retainPositionInTab: true,
needPageIndicator: true,
inactiveSkin: "inActiveSkin"
};
var tabLayout = {
padding: [5, 5, 5, 5],
margin: [5, 5, 5, 5],
paddingInPixel: true,
marginInPixel: true,
widgetAlignment: constants.WIDGET_ALIGN_TOP_LEFT,
containerWeight: 70
};
var tabPSP = {};
//Creating the TabPane.
var tabPane = new voltmx.ui.TabPane(tabBasic, tabLayout, tabPSP);
//Reading id of the TabPane.
alert("TabPane id is ::" + tabPane.id);
Platform Availability
- Available in the IDE
- Available on all platforms
inactiveSkin Property
Skin to be applied for all inactive tabs.
Syntax
inactiveSkin
Type
String
Read/Write
Read + Write
Example
//Sample code to set the inactiveSkin property for a TabPane widget.
frmTab.myTab.inactiveSkin="inActiveSkin";
Platform Availability
- Available in the IDE
- Available on all platforms
info Property
A custom JS Object with the key value pairs that a developer can use to store the context with the widget.
Syntax
info
Type
JSObject
Read/Write
Read + Write
Remarks
This will help in avoiding the globals to most part of the programming.
This is a non-Constructor property. You cannot set this property through widget constructor. But you can always read and write data to it.
Info property can hold any JSObject. After assigning the JSObject to info property, the JSObject should not be modified. For example,
var inf = {
a: "hello"
};
widget.info = inf; //works
widget.info.a = "hello world";
//This will not update the widget info a property to hello world.
//widget.info.a will have old value as hello.
Example
//Sample code to set info property of a TabPane widget.
frmTab.myTab.info = {
key: "TabPane"
};
//Reading the info of the TabPane widget.
voltmx.print("TabPane widget info:" +frmTab.myTab.info);
Platform Availability
Available on all platforms
isMaster Property
Specifies whether the container is a master container.
Syntax
isMaster
Type
Boolean
Read/Write
Read Only after initialization.
Remarks
If the isMaster
property is true, the current widget is a master container and all of the rules and limitations of master containers apply to it. For more information, please see Masters in the Overviews section of this guide, as well as Using Masters in the Volt MX Iris User Guide.
Your app can set the isMaster
property in this container's constructor. After that, this property is read-only.
Example
var isMasterContainer = tabPane1.isMaster;
isVisible Property
This property controls the visibility of the TabPane on the form.
Syntax
isVisible
Type
Boolean
Read/Write
Read + Write
Remarks
The default value for this property is true.
If set to false, the widget is not displayed.
If set to true, the widget is displayed.
Example
//Sample code to set isVisible property of a TabPane widget.
frmTab.myTab.isVisible=true;
Note: You can set the visibility of a widget dynamically from code using the setVisibility method.
Platform Availability
- Available in the IDE
- Available on all platforms
layoutMeta Property
A custom Object with the key, value pairs that developer can use to provide the meta info about the grid layout.
Syntax
layoutMeta
Type
JSObject
Remarks
The following are the mandatory keys required to be part of the Meta. These are not visible PSPs in IDE. The data for layoutmeta data is set when you set grid layout view properties for rows and columns.
rows : no of grid rows
cols : no of grid cols
colmeta: [{width:"width in %"}]
The sum total of the % widths of each of the columns in the grid layout should add up to 100%
Example
//Sample code to set layoutMeta property of a TabPane widget.
frmTab.myTab.layoutMeta = {
cols: 8,
colmeta: ["15", "15", "15", "15", "15", "15", "5", "5"],
rows: 4
};
Availability
- Available in the IDE
- Windows
layoutType Property
Defines the type of the layout of widget. Layout type can be grid or normal.
Syntax
layoutType
Type
String
Remarks
Layout type is not visible as a property. It is set when the user applies XYLayout or Grid Layout on a form.
Example
//Sample code to set layoutType property of a TabPane widget.
frmTab.myTab.layoutType =constants.CONTAINER_LAYOUT_GRID;
Availability
- Available in the IDE
- Windows
left Property
This property determines the lower left corner edge of the widget and is measured from the left bounds of the parent container.
The left property determines the position of the left edge of the widget’s bounding box. The value may be set using DP (Device Independent Pixels), Percentage, or Pixels. In freeform layout, the distance is measured from the left edge of the parent container. In flow-vertical layout, the distance is measured from the left edge of the parent container. In flow-horizontal layout, the distance is measured from the right edge of the previous sibling widget in the hierarchy.
Syntax
left
Type
String
Read/Write
Read + Write
Remarks
If the layoutType is set as voltmx.flex.FLOW_HORIZONTAL, the left property is measured from right edge of the left sibling widget.
Example
//Sample code to set the left property for widgets by using DP, Percentage and Pixels.
frmHome.widgetID.left = "50dp";
frmHome.widgetID.left = "10%";
frmHome.widgetID.left = "10px";
Platform Availability
- Available in the IDE
- iOS, Android, Windows, SPA, and Desktop Web
maxHeight Property
This property specifies the maximum height of the widget and is applicable only when the height property is not specified.
The maxHeight property determines the maximum height of the widget’s bounding box. The value may be set using DP (Device Independent Pixels), Percentage, or Pixels. The maxHeight value overrides the preferred, or “autogrow” height, if the maxHeight is less than the derived content height of the widget.
Syntax
maxHeight
Type
Number
Read/Write
Read + Write
Example
//Sample code to set the maxHeight property for widgets by using DP, Percentage and Pixels.
frmHome.widgetID.maxHeight = "50dp";
frmHome.widgetID.maxHeight = "10%";
frmHome.widgetID.maxHeight = "10px";
Platform Availability
- Available in the IDE
- iOS, Android, Windows, SPA, and Desktop Web
maxWidth Property
This property specifies the maximum width of the widget and is applicable only when the width property is not specified.
The Width property determines the maximum width of the widget’s bounding box. The value may be set using DP (Device Independent Pixels), Percentage, or Pixels. The maxWidth value overrides the preferred, or “autogrow” width, if the maxWidth is less than the derived content width of the widget.
Syntax
maxWidth
Type
Number
Read/Write
Read + Write
Example
//Sample code to set the maxWidth property for widgets by using DP, Percentage and Pixels.
frmHome.widgetID.maxWidth = "50dp";
frmHome.widgetID.maxWidth = "10%";
frmHome.widgetID.maxWidth = "10px";
Platform Availability
- Available in the IDE
- iOS, Android, Windows, SPA, and Desktop Web
minHeight Property
This property specifies the minimum height of the widget and is applicable only when the height property is not specified.
The minHeight property determines the minimum height of the widget’s bounding box. The value may be set using DP (Device Independent Pixels), Percentage, or Pixels. The minHeight value overrides the preferred, or “autogrow” height, if the minHeight is larger than the derived content height of the widget.
Syntax
minHeight
Type
Number
Read/Write
Read + Write
Example
//Sample code to set the minHeight property for widgets by using DP, Percentage and Pixels.
frmHome.widgetID.minHeight = "50dp";
frmHome.widgetID.minHeight = "10%";
frmHome.widgetID.minHeight = "10px";
Platform Availability
- Available in the IDE
- iOS, Android, Windows, SPA, and Desktop Web
minWidth Property
This property specifies the minimum width of the widget and is applicable only when the width property is not specified.
The minWidth property determines the minimum width of the widget’s bounding box. The value may be set using DP (Device Independent Pixels), Percentage, or Pixels. The minWidth value overrides the preferred, or “autogrow” width, if the minWidth is larger than the derived content width of the widget.
Syntax
minWidth
Type
Number
Read/Write
Read only
Example
//Sample code to set the minWidth property for widgets by using DP, Percentage and Pixels.
frmHome.widgetID.minWidth = "50dp";
frmHome.widgetID.minWidth = "10%";
frmHome.widgetID.minWidth = "10px";
Platform Availability
- Available in the IDE
- iOS, Android, Windows, SPA, and Desktop Web
pageSkin Property
Specifies the skin for page indicator.
Syntax
pageSkin
Type
String
Read/Write
Read + Write
Remarks
The default value for this property is Skin Defaults ( blue color strip is applied for the page indicator).
This property is applicable only when viewType is set as TABPANE_VIEW_TYPE_PAGEVIEW and images are selected for pageOnDotImage and pageOffDotImage.
Example
//Sample code to set pageSkin property of a TabPane widget.
frmTab.myTab.pageSkin="pSkin";
Platform Availability
- Available in the IDE
- iPhone
- iPad
progressIndicatorColor Property
Specifies the color of the progress indicator as white or grey.
Syntax
progressIndicatorColor
Type
Number
Remarks
The default value for this property is PROGRESS_INDICATOR_COLOR_WHITE.
The available options are:
- PROGRESS_INDICATOR_COLOR_WHITE: The progress indicator is