Enables you to control accessibility behavior and alternative text for the widget.

For more information on using accessibility features in your app, see the Accessibility appendix in the VoltMX IrisUser Guide.

Syntax

accessibilityConfig

Type

Object

Read/Write

Read + Write

Remarks

• The accessibilityConfig property is enabled for all the widgets which are supported under the Flex Layout.

Note: From VoltMX Iris V9 SP2 GA version, you can provide i18n keys as values to all the attributes used inside the accessibilityConfig property. Values provided in the i18n keys take precedence over values provided in a11yLabel, a11yValue, and a11yHint fields.

The accessibilityConfig property is a JavaScript object which can contain the following key-value pairs.

Android limitations

• If the results of the concatenation of a11y fields result in an empty string, then accessibilityConfig is ignored and the text that is on widget is read out.
• The soft keypad does not gain accessibility focus during the right/left swipe gesture when the keypad appears.

SPA/Desktop Web limitations

• When accessibilityConfig property is configured for any widget, the tabIndex attribute is added automatically to the accessibilityConfig property.
• The behavior of accessibility depends on the Web browser, Web browser version, Voice Over Assistant, and Voice Over Assistant version.
• Currently SPA/Desktop web applications support only a few ARIA tags. To achieve more accessibility features, use the attribute a11yARIA. The corresponding tags will be added to the DOM as per these configurations.

Example 1

This example uses the button widget, but the principle remains the same for all widgets that have an accessibilityConfig property.

//This is a generic property that is applicable for various widgets.
//Here, we have shown how to use the accessibilityConfig Property for button widget.
/*You need to make a corresponding use of the accessibilityConfig property for other applicable widgets.*/

Form1.myButton.accessibilityConfig = {
    "a11yLabel": "Label",
    "a11yValue": "Value",
    "a11yHint": "Hint"    
};

Example 2

This example uses the button widget to implement internationalization in accessibilityConfig property, but the principle remains the same for all widgets.

/*Sample code to implement internationalization in accessibilityConfig property in Native platform.*/

Form1.myButton.accessibilityConfig = {
    "a11yLabel": voltmx.i18n.getLocalizedString("key1")     
};  
/*Sample code to implement internationalization in accessibilityConfig property in Desktop Web platform.*/

Form1.myButton.accessibilityConfig = {
    "a11yLabel": "voltmx.i18n.getLocalizedString(\"key3\")"
};

Platform Availability

• Available in the IDE
• iOS, Android, SPA, and Desktop Web

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

id is a unique identifier of Line consisting of alpha numeric characters. Every Line should have a unique id within an Form.

Syntax

id

Type

String

Read/Write

Read only

Example

//Defining the properties for a Line with id:"line".
var lineBasicConf = {
    id: "line1",
    skin: "gradlblskin",
    isVisible: true
};
var lineLayoutConf = {
    margin: [0, 0, 0, 0],
    padding: [3, 3, 3, 3],
    thickness: 25
};
var linePSPConf = {};

//Creating the Line.
var line1 = new voltmx.ui.Line(lineBasicConf, lineLayoutConf, linePSPConf);

//Reading the id property of Line widget.
alert("Line id ::" + line1.id);

Platform Availability

Available on all platforms

A custom JSObject with the key value pairs that a developer can use to store the context with the widget. This will help in avoiding the globals to most part of the programming .

Syntax

info

Type

JSObject

Read/Write

Read + Write

Remarks

This is a non-constructor property. You cannot set this property through widget constructor. But you can read and write data to it.

Info property holds any JSObject. Post 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

//Defining the properties for a Line with info property.
var lineBasicConf = {
    id: "line1",
    skin: "gradlblskin",
    isVisible: true
};

var lineLayoutConf = {
    margin: [0, 0, 0, 0],
    padding: [3, 3, 3, 3],
    thickness: 25
};

var linePSPConf = {};

//Creating the Line.
var line1 = new voltmx.ui.Line(lineBasicConf, lineLayoutConf, linePSPConf);
line1.info = {
    key: "Line"
};

//Reading the info property of Line widget.
alert("Line info is ::" + line1.info);

Platform Availability

Available on all platforms

This property controls the visibility of the line widget on the form.

Syntax

isVisible

Type

Boolean

Read/Write

Read + Write

Remarks

The default value for the property is true.

• If set to false, the widget is not displayed.
• If set to true, the widget is displayed.

This property is not applicable if the widget is placed in a Segment. When the widget is placed in a Segment, the Visibility of the widget is controlled by the data property of the segment.

Example

Note: In addition, the visibility of the widget can be controlled using the setVisibility method.

//Creating the Line with isVisible:true.
var lineBasicConf = {
    id: "line",
    skin: "gradlblskin",
    isVisible: true
};

var lineLayoutConf = {
    margin: [0, 0, 0, 0],
    padding: [3, 3, 3, 3],
    thickness: 25
};

var linePSPConf = {};

//Creating the Line.
var line = new voltmx.ui.Line(lineBasicConf, lineLayoutConf, linePSPConf);

//Reading the isVisible property of Line widget.
alert("Line isVisible ::" + line.id);

Platform Availability

• Available in the IDE
• Available on all platforms

This property is used to retain the content alignment property value, as it was defined.

Note: Locale-level configurations take priority when invalid values are given to this property, or if it is not defined.

The mirroring widget layout properties should be defined as follows.

function getIsFlexPositionalShouldMirror(widgetRetainFlexPositionPropertiesValue) {
    return (isI18nLayoutConfigEnabled &&
    localeLayoutConfig[defaultLocale]
    ["mirrorFlexPositionalProperties"] == true &&
    !widgetRetainFlexPositionPropertiesValue);
}

The following table illustrates how widgets consider Local flag and Widget flag values.

Syntax

retainContentAlignment

Type

Boolean

Read/Write

No (only during widget-construction time)

Example

//This is a generic property that is applicable for various widgets.
//Here, we have shown how to use the retainContentAlignment property for Button widget.
/*You need to make a corresponding use of the 
retainContentAlignment property for other applicable widgets.*/
var btn = new voltmx.ui.Button({
    "focusSkin": "defBtnFocus",
    "height": "50dp",
    "id": "myButton",
    "isVisible": true,
    "left": "0dp",
    "skin": "defBtnNormal",
    "text": "text always from top left",
    "top": "0dp",
    "width": "260dp",
    "zIndex": 1
}, {
    "contentAlignment": constants.CONTENT_ALIGN_TOP_LEFT,
    "displayText": true,
    "padding": [0, 0, 0, 0],
    "paddingInPixel": false,
    "retainFlexPositionProperties": false,
    "retainContentAlignment": true
}, {});

Platform Availability

• Available in IDE
• Windows, iOS, Android, and SPA

This property is used to retain flex positional property values as they were defined. The flex positional properties are left, right, and padding.

Note: Locale-level configurations take priority when invalid values are given to this property, or if it is not defined.

The mirroring widget layout properties should be defined as follows.

function getIsFlexPositionalShouldMirror(widgetRetainFlexPositionPropertiesValue) {
    return (isI18nLayoutConfigEnabled &&
    localeLayoutConfig[defaultLocale]
    ["mirrorFlexPositionalProperties"] == true &&
    !widgetRetainFlexPositionPropertiesValue);
}

The following table illustrates how widgets consider Local flag and Widget flag values.

Syntax

retainFlexPositionProperties

Type

Boolean

Read/Write

No (only during widget-construction time)

Example

//This is a generic property that is applicable for various widgets.
//Here, we have shown how to use the retainFlexPositionProperties property for Button widget.
/*You need to make a corresponding use of the 
retainFlexPositionProperties property for other applicable widgets.*/
var btn = new voltmx.ui.Button({
    "focusSkin": "defBtnFocus",
    "height": "50dp",
    "id": "myButton",
    "isVisible": true,
    "left": "0dp",
    "skin": "defBtnNormal",
    "text": "always left",
    "top": "0dp",
    "width": "260dp",
    "zIndex": 1
}, {
    "contentAlignment": constants.CONTENT_ALIGN_CENTER,
    "displayText": true,
    "padding": [0, 0, 0, 0],
    "paddingInPixel": false,
    "retainFlexPositionProperties": true,
    "retainContentAlignment": false
}, {});

Platform Availability

• Available in IDE
• Windows, iOS, Android, and SPA

This property is used to convert Flow Horizontal Left to Flow Horizontal Right.

Note: Locale-level configurations take priority when invalid values are given to this property, or if it is not defined.

The mirroring widget layout properties should be defined as follows.

function getIsFlexPositionalShouldMirror(widgetRetainFlexPositionPropertiesValue) {
    return (isI18nLayoutConfigEnabled &&
    localeLayoutConfig[defaultLocale]
    ["mirrorFlexPositionalProperties"] == true &&
    !widgetRetainFlexPositionPropertiesValue);
}

The following table illustrates how widgets consider Local flag and Widget flag values.

Syntax

retainFlowHorizontalAlignment

Type

Boolean

Read/Write

No (only during widget-construction time)

Example

//This is a generic property that is applicable for various widgets.
//Here, we have shown how to use the retainFlowHorizontalAlignment property for Button widget.
/*You need to make a corresponding use of the 
retainFlowHorizontalAlignment property for other applicable widgets. */
var btn = new voltmx.ui.Button({
 "focusSkin": "defBtnFocus",
 "height": "50dp",
 "id": "myButton",
 "isVisible": true,
 "left": "0dp",
 "skin": "defBtnNormal",
 "text": "always left",
 "top": "0dp",
 "width": "260dp",
 "zIndex": 1
}, {
 "contentAlignment": constants.CONTENT_ALIGN_CENTER,
 "displayText": true,
 "padding": [0, 0, 0, 0],
 "paddingInPixel": false,
 "retainFlexPositionProperties": true,
 "retainContentAlignment": false,
 "retainFlowHorizontalAlignment ": false
}, {});

Platform Availability

• Available in IDE
• Windows, iOS, Android, and SPA

Specifies the look and feel of the Line when not in focus.

Syntax

skin

Type

String

ead/Write

Read + Write

Example

//Creating the Line with skin:"gradlblskin"
var lineBasicConf = {
    id: "line",
    skin: "gradlblskin",
    isVisible: true
};

var lineLayoutConf = {
    margin: [0, 0, 0, 0],
    padding: [3, 3, 3, 3],
    thickness: 25
};

var linePSPConf = {};

//Creating the Line.
var line = new voltmx.ui.Line(lineBasicConf, lineLayoutConf, linePSPConf);

//Reading the skin property of Line widget
alert("Line skin ::" + line.skin);

Platform Availability

• Available in the IDE
• Available on all platforms

Specifies the hint text when the cursor hovers over a widget, without clicking it. The text entered in the tooltip appears as a small box when the cursor hovers over a widget.

Syntax

toolTip

Type

String

Read/Write

Read + Write

Example

//Defining the properties of Line with toolTip:sample text
var lineBasicConf = {
    id: "line1",
    isVisible: true,
    skin: "lineSkin",
    focusSkin: "lineFSkin",
    text: "Click Here"
};

var lineLayoutConf = {
    containerWeight: 100,
    padding: [5, 5, 5, 5],
    margin: [5, 5, 5, 5],
    hExpand: true,
    vExpand: false,
    displayText: true
};

var linePSPConf = {
    toolTip: "sample text"
};

//Creating a Line.
var line1 = new voltmx.ui.Line(lineBasicConf, lineLayoutConf, linePSPConf);

Platform Availability

• Available in the IDE
• This property is available on Windows Tablet