Widget class objects

The Widget class is the base class for all the elements on a page including the page element.

Widget, in this case, is not used to indicate a specific screen object but a JavaScript class.

Changing widget properties with JavaScript

If you want to change the properties of widgets with JavaScript set the widget property Static Optimization to Dynamic.

Important: If the widget property Static Optimization is not set to Dynamic, changes to properties will be ignored.

Whenever a call to getWidget fails, the remote debugger reports the following error:

“Trying to access static optimized widget "label1". Disable widget static optimization to access widget from script.”.

This error is visible also using following code fragment:

var wgt;

try {

wgt = page.getWidget('label1');

} catch(err) {

alert("" + err);

}

Widget properties

Some properties are common to all widgets.

objectName

string objectName

Gets the name of the widget, a unique id.

function btnStd04_onMouseRelease(me) {

var wgt = page.getWidget("rect1");

var name = wgt.objectName;

}

(Available on web pages)

x

number x

Gets or sets the widget ‘x’ position in pixels.

function btnStd1_onMouseRelease(me) {

var wgt = page.getWidget("rect1");

wgt.x = 10;

}

(Available on web pages)

y

number y

Gets or sets the widget ‘y’ position in pixels.

function btnStd1_onMouseRelease(me) {

var wgt = page.getWidget("rect1");

wgt.y = 10;

}

(Available on web pages)

width

number width

Gets or sets the widget width in pixels.

function btnStd1_onMouseRelease(me) {

var wgt = page.getWidget("rect1");

wgt.width = 10;

}

(Available on web pages)

height

number height

Gets or sets the widget height in pixels.

function btnStd1_onMouseRelease(me) {

var wgt = page.getWidget("rect1");

wgt.height = 10;

}

(Available on web pages)

visible

boolean visible

Gets or sets the widget visible state.

function btnStd4_onMouseRelease(me) {

var wgt = page.getWidget("rect1");

wgt.visible = false;

}

 

function btnStd5_onMouseRelease(me) {

var wgt = page.getWidget("rect1");

wgt.visible = true;

}

value

number value

Gets or sets the widget value. 

function btnStd6_onMouseRelease(me) {

var wgt = page.getWidget("field1");

wgt.value = 100;

}

opacity

number opacity (range from 0 to 1)

Gets or sets the widget opacity. Values are decimals from 0 to 1, where 1 is 100% opaque.

function btnStd8_onMouseRelease(me) {

var wgt = page.getWidget("rect1");

wgt.opacity = 0.5;

}

(Available on web pages)

rotation

number rotation (in degrees)

Gets or sets the rotation angle for the widget. The rotation is done clockwise and by degrees, starting at the East position.

function btnStd9_onMouseRelease(me) {

var wgt = page.getWidget("rect1");

wgt.rotation = 45;

}

(Available on web pages)

userValue

string userValue

Gets or sets a user-defined value for the widget. This field can be used by JavaScript functions to store additional data with the widget.

function btnStd9_onMouseRelease(me) {

var wgt = page.getWidget("rect1");

wgt.userValue = "Here I can store custom data";

}

Every widget has some specific properties that you can access using dot notation. For an up-to-date and detailed list of properties you can use the JavaScript Debugger inspecting the widget methods and properties.

Widget methods

Some methods are common to all widgets.

getProperty

object getProperty( propertyName, [index] )

Returns a property.

Parameter Description
propertyName String containing the name of property to get
index Index of the element to get from the array (default = 0)

Almost all properties that are shown in the JMobile Studio Properties pane can be retrieved using the getProperty method. The index value is optional and only used for widgets that support arrays.

function buttonStd1_onMouseRelease(me, eventInfo) {

var shape = page.getWidget("rect2");

var y_position = shape.getProperty("y");

}

function buttonStd2_onMouseRelease(me, eventInfo) {

var image = page.getWidget("multistate1");

var image3 = image.getProperty("imageList", 2);

//…

}

(Available on web pages)

setProperty

boolean setProperty( propertyName, value, [index] )

Sets a property for the widget.

Parameters
Parameter Description
propertyName String containing the name of property to set
value

String containing the value to set the property.
index Index of the element to set in the array (default = 0)

Almost all properties that are shown in the JMobile Studio Properties pane can be set by this method. The index value is optional and only used for Widgets that support arrays (for example, a MultiState Image widget). The setProperty method returns a boolean value (true or false) to indicate if the property was set or not.

function buttonStd1_onMouseRelease(me, eventInfo) {

var setting_result = shape.setProperty("y", 128);

if (setting_result)

alert("Shape returned to start position");

}

function buttonStd2_onMouseRelease(me, eventInfo) {

var image = page.getWidget("multistate1");

var result = image.setProperty("imageList", "Fract004.png", 2);

//…

}

(Available on web pages)