Skip to content

Widget Common Properties

Widget is the base class for all widgets (controls) in a framework, for example Button, Label, Image, and Segmented UI all are derived from the base Widget class.

The properties (common for all the widgets) of the Widget class are:


Alignment Property


Specifies the widget alignment in a box. A widget can be aligned top-left, top-center, top-right, middle-left, middle-center, middle-right, bottom-left, bottom-center, or bottom-right.

Note: This property is not supported on Browser, DataGrid, Map, PickerView, Segment and Slider widgets.

Note: The alignment property is applicable only if the widget size is lesser than the allocated size.

The following image illustrates the widget alignment property:

Widget Alignment when the widget size is lesser than the allocated size

Type

Number

Read/Write

No

Accessible from IDE

Yes

Availability on platforms

The following table shows the list of available platforms and property availability:

Platform Availability Comments
iPad Yes
iPhone Yes
Android/Android Tablet Yes
Mobile Web (basic) Yes
Mobile Web (advanced) Yes
SPA Yes

Expand Property (horizontal and vertical)


Specifies the widget expansion in the horizontal and vertical direction.

Note: Mobile Web does not support the Expand property. This is because a widget in a Mobile Web cannot expand or contract based on the neighboring widget (default behavior of a widget in a Mobile Web).

Note: This property is not supported on Browser, Image, Map, PickerView widgets.

The Expand property provides you with the following options:

horizontal

Specifies if the widget must expand horizontally.

Default: true (the checkbox is selected and the widget occupies the entire available width)

Widget when the Expand horizontal is set to true

If you set the value to false (clear the checkbox), the widget occupies the preferred width.

Vertical

Specifies if the widget must expand vertically.

Default: false (the checkbox is not selected and the widget occupies the preferred height)

If you set the value to true (select the checkbox), the widget occupies the entire available height.

Widget when the Expand vertical is set to true

Type

Boolean

Read/Write

No

Accessible from IDE

Yes

Availability on platforms

The following table shows the list of available platforms and property availability:

Platform Availability Comments
iPad Yes
iPhone Yes
Android/Android Tablet Yes
Mobile Web (basic)
Mobile Web (advanced)
SPA

Expand Property (horizontal)


Specifies the widget expansion in the horizontal direction.

Note: Important! Mobile Web does not support the Expand property. This is because a widget in a Mobile Web cannot expand or contract based on the neighboring widget (default behavior of a widget in a Mobile Web).

Note: Important! This property is not supported on Browser, Image, Map, and PickerView widgets.

The Expand property provides you with the following option:

horizontal

Specifies if the widget must expand horizontally.

Default: true (the checkbox is selected and the widget occupies the entire available width)

If you set the value to true (select the checkbox), the widget occupies the entire available height.

Type

Boolean

Accessible from code

No

Accessible from IDE

Yes

Availability on platforms

The following table shows the list of available platforms and property availability:

Platform Availability Comments
iPad Yes
iPhone Yes
Android/Android Tablet Yes
Mobile Web (basic)
Mobile Web (advanced)

Focus Skin Property


This is a skin property and it determines the look and feel when there is focus on a widget.

For more information on how to create and work with skins, see the Working with Applications section of the Volt MX Iris User Guide.

Note:
1. Mobile Web does not support this property. For Advanced Mobile Web platforms, a platform specific progress indicator is displayed. For other Mobile Web platforms (Basic and BJS), the screen is refreshed.
2. For the Pickerview widget on Android, borders, font weight, font size, and font style are ignored.

Type

Object

Read / Write

Yes (Write only)

You can change the focus skin of a button with ID btn1 and in form frm1 during the runtime by entering the following code:


frm1.btn1.focusSkin="skin1";

Accessible from IDE

Yes

Availability on platforms

The following table shows the list of available platforms and property availability:

Platform Availability Comments
iPad Yes
iPhone Yes
Android/Android Tablet Yes
Mobile Web (basic)
Mobile Web (advanced)
SPA

ID Property


Defines a string of alpha numeric characters that uniquely identifies a widget within an application.

Type

String

Read/Write

Yes (Read-only access)

Example If you want to access a widget with ID widget1 in a Form whose ID is frm1, enter the following:


var idcheck = frm1.widget1.id;
voltmx.print ("widget1 id is :"+idcheck);

Accessible from IDE

Yes

Availability on platforms

The following table shows the list of available platforms and property availability:

Platform Availability Comments
iPad Yes
iPhone Yes
Android/Android Tablet Yes
Mobile Web (basic)
Mobile Web (advanced) Yes
SPA Yes

Location Property


Specifies the location of a widget with respect to the x and y axis of the parent container. This property is used by the IDE to retain the positioning of the widgets as desired by the developer.

Note: Note: If the parent container is a form, you can only modify the y axis.

When you select the Location property the following additional properties are visible:

  • x: Specifies the x coordinate of the widget.
  • y: Specifies the y coordinate of the widget.

Type

Number

Read/Write

No

Accessible from IDE

Yes

Availability on platforms

The following table shows the list of available platforms and property availability:

Platform Availability Comments
iPad Yes
iPhone Yes
Android/Android Tablet Yes
Mobile Web (basic)
Mobile Web (advanced) Yes
SPA Yes

Margin Property


Defines the space around a widget. You can use this option to define the top, left, right, and bottom distance between the widget and the next element.

To define the margin values for a platform, click the Ellipsis () button against the property to open the Margin screen. Select the checkbox against the platform for which you want to define the margins and enter the top, left, right, and bottom margin values.

If you want to use the margin values set for a platform across other platforms, you can click the Apply To button and select the platforms on which you want the margin values to be applied.