Line Properties

The properties for Line widget are:

accessibilityConfig Property

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.

Key	Type	Description	ARIA Equivalent
a11yIndex	Integer with no floating or decimal number.	This is an optional parameter. Specifies the order in which the widgets are focused on a screen.	For all widgets, this parameter maps to the `aria-index`, `index`, or `taborder` properties.
a11yLabel	String	This is an optional parameter. Specifies alternate text to identify the widget. Generally the label should be the text that is displayed on the screen.	For all widgets, this parameter maps to the `aria-labelledby` property of ARIA in HTML. > *Note:* For the Image widget, this parameter maps to the alt attribute of ARIA in HTML.
a11yValue	String	This is an optional parameter. Specifies the descriptive text that explains the action associated with the widget. On the Android platform, the text specified for a11yValue is prefixed to the a11yHint.	This parameter is similar to the a11yLabel parameter. If the a11yValue is defined, the value of a11yValue is appended to the value of a11yLabel. These values are separated by a space.
a11yHint	String	This is an optional parameter. Specifies the descriptive text that explains the action associated with the widget. On the Android platform, the text specified for a11yValue is prefixed to the a11yHint.	For all widgets, this parameter maps to the `aria-describedby` property of ARIA in HTML.
a11yHidden	Boolean	This is an optional parameter. Specifies if the widget should be ignored by assistive technology. The default option is set to false. This option is supported on iOS 5.0 and above, Android 4.1 and above, and SPA	For all widgets, this parameter maps to the `aria-hidden` property of ARIA in HTML.
a11yARIA	Object	This is an optional parameter. For each widget, the key and value provided in this object are added as the attribute and value of the HTML tags respectively. Any values provided for attributes such as `aria-labelledby` and `aria-describedby` using this attribute, takes precedence over values given in `a11yLabel` and `a11yHint` fields. When a widget is provided with the following key value pair or attribute using the a11yARIA object, the tabIndex of the widget is automatically appended as zero.{"role": "main"}``aria-label	This parameter is only available on the Desktop Web platform.

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

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

id Property

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

info Property

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

isVisible Property

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

retainContentAlignment Property

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.

Properties	Local Flag Value	Widget Flag Value	Action
Mirror/retain FlexPositionProperties	true	true	Use the designed layout from widget for all locales. Widget layout overrides everything else.
Mirror/retain FlexPositionProperties	true	false	Use Mirror FlexPositionProperties since locale-level Mirror is true.
Mirror/retain FlexPositionProperties	true	not specified	Use Mirror FlexPositionProperties since locale-level Mirror is true.
Mirror/retain FlexPositionProperties	false	true	Use the designed layout from widget for all locales. Widget layout overrides everything else.
Mirror/retain FlexPositionProperties	false	false	Use the Design/Model-specific default layout.
Mirror/retain FlexPositionProperties	false	not specified	Use the Design/Model-specific default layout.
Mirror/retain FlexPositionProperties	not specified	true	Use the designed layout from widget for all locales. Widget layout overrides everything else.
Mirror/retain FlexPositionProperties	not specified	false	Use the Design/Model-specific default layout.
Mirror/retain FlexPositionProperties	not specified	not specified	Use the Design/Model-specific default layout.

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

retainFlexPositionProperties Property

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.

Properties	Local Flag Value	Widget Flag Value	Action
Mirror/retain FlexPositionProperties	true	true	Use the designed layout from widget for all locales. Widget layout overrides everything else.
Mirror/retain FlexPositionProperties	true	false	Use Mirror FlexPositionProperties since locale-level Mirror is true.
Mirror/retain FlexPositionProperties	true	not specified	Use Mirror FlexPositionProperties since locale-level Mirror is true.
Mirror/retain FlexPositionProperties	false	true	Use the designed layout from widget for all locales. Widget layout overrides everything else.
Mirror/retain FlexPositionProperties	false	false	Use the Design/Model-specific default layout.
Mirror/retain FlexPositionProperties	false	not specified	Use the Design/Model-specific default layout.
Mirror/retain FlexPositionProperties	not specified	true	Use the designed layout from widget for all locales. Widget layout overrides everything else.
Mirror/retain FlexPositionProperties	not specified	false	Use the Design/Model-specific default layout.
Mirror/retain FlexPositionProperties	not specified	not specified	Use the Design/Model-specific default layout.

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

retainFlowHorizontalAlignment Property

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.

Properties	Local Flag Value	Widget Flag Value	Action
Mirror/retain FlexPositionProperties	true	true	Use the designed layout from widget for all locales. Widget layout overrides everything else.
Mirror/retain FlexPositionProperties	true	false	Use Mirror FlexPositionProperties since locale-level Mirror is true.
Mirror/retain FlexPositionProperties	true	not specified	Use Mirror FlexPositionProperties since locale-level Mirror is true.
Mirror/retain FlexPositionProperties	false	true	Use the designed layout from widget for all locales. Widget layout overrides everything else.
Mirror/retain FlexPositionProperties	false	false	Use the Design/Model-specific default layout.
Mirror/retain FlexPositionProperties	false	not specified	Use the Design/Model-specific default layout.
Mirror/retain FlexPositionProperties	not specified	true	Use the designed layout from widget for all locales. Widget layout overrides everything else.
Mirror/retain FlexPositionProperties	not specified	false	Use the Design/Model-specific default layout.
Mirror/retain FlexPositionProperties	not specified	not specified	Use the Design/Model-specific default layout.

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

skin Property

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

toolTip Property

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