Canvas Properties

---

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 kony.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

---

---

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 kony.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

---

---

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 kony.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

---

---

In Desktop Web applications, when you hover the mouse over any widget, a pointer appears. Using the cursorType property, you can specify the type of the mouse pointer in Visualizer.

Syntax

cursorType

Type

String.

You must provide a valid CSS cursor values such as wait, grab, help, etc. to the cursorType property.

Read/Write

Read + Write

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

• Desktop Web

---

---

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.
• kony.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 widgets by using DP, Percentage and Pixels.
frmHome.label1.height = "50dp";

frmHome.label1. height = "10%";

frmHome.label1. height = "10px";

Platform Availability

• iOS, Android, Windows 10, and SPA

---

---

id is the unique identifier of a Canvas widget consisting of alpha numeric characters. Every widget should have a unique id within a Form.

Syntax

id

Type

String - [Mandatory]

Read/Write

Yes - (Read only)

Example

//Defining the properties for a label with id:"label1"
var lblBasic = {
    id: "label1",
    skin: "labelSkin",
    text: "Hello world",
    isVisible: true
};
var lblLayout = {
    containerWeight: 100,
    padding: [5, 5, 5, 5],
    margin: [5, 5, 5, 5],
    hExpand: true,
    vExpand: false
};
var lblPSP = {};

//Creating the label.
var label1 = new kony.ui.Label(lblBasic, lblLayout, lblPSP);

//Reading the id of the label
alert("Label id::" + label1.id);

Platform Availability

• iOS, Android, Windows 10, and SPA

---

---

A custom JavaScript object with the key value pairs that a developer can use to store the context with the widget. This will help in avoiding the global variables that are part of most programming.

Syntax

info

Type

JSObject

Read/Write

Yes - (Read and Write)

Remarks

Note: 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 can hold any JavaScript object. After assigning the JavaScript object to info property, the JavaScript object 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 for a Label widget

frm1.myLabel.info = {
    key: "LABEL"
};

//Reading the info of the Camera widget.
kony.print("Camera info ::" +frm1.myLabel.info);

Platform Availability

• iOS, Android , Windows 10, and SPA

---

---

This property controls the visibility of a widget on the Form.

Syntax

isVisible

Type

Boolean

Read/Write

Yes - (Read and Write)

Remarks

The default value for this property is true. If set to false, the label is not displayed on the Form. If set to true, the label is displayed on the Form.

Note: 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

//This is a generic property that is applicable for various widgets.
//Here, we have shown how to use the isVisible Property for camera widget.
/*You need to make a corresponding use of the 
isVisible Property for other applicable widgets.*/
frmCamera.myCamera.isVisible=true;

Platform Availability

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

---

---

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 kony.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

---

---

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

---

---

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

---

---

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

---

---

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

---

---

Specifies the opacity of the widget. The value of this property must be in the range 0.0 (transparent) to 1.0 (opaque). Any values outside this range are fixed to the nearest minimum or maximum value.

Specifies the opacity of the widget. Valid opacity values range from 0.0 (transparent), to 1.0 (opaque). Values set to less than zero will default to zero. Values more than 1.0 will default to 1. Interaction events set on a transparent widget will still be fired. To disable the events, also set the “isVisible” property to “false”.

Syntax

opacity

Type

Number

Read/Write

Read + Write

Remarks

Note: This property has more priority compared to the values coming from the configured skin.

Example

//Sample code to make the widget transparent by using the opacity property.
frmHome.widgetID.opacity = 0;

//Sample code to make the widget opaque by using the opacity property.
frmHome.widgetID.opacity = 1;

Platform Availability

• Not available in the IDE.
• iOS, Android, Windows, SPA, and Desktop Web

---

---

Helps you access the parent of the widget. If the widget is not part of the widget hierarchy, the parent property returns null.

Syntax

parent

Read/Write

Read only

Remarks

Note: The property works for all the widgets whether they are placed inside a FlexContainer, a Form, or an HBox.

Example

function func() {

    kony.print("The parent of the widget" + JSON.stringify(Form1.widgetID.parent));

}

Platform Availability

• Not available in the IDE
• iOS, Android, Windows, SPA, and Desktop Web

---

---

This property determines the lower right corner of the widget and is measured from the right bounds of the parent container.

The right property determines the position of the right 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, value is ignored. In flow-horizontal layout, the value is ignored.

The right property is used only if the width property is not provided.

Syntax

right

Type

String

Read/Write

Read + Write

Remarks

If the layoutType is set as kony.flex.FLOW_HORIZONTAL, the right property is measured from left edge of the right sibling widget. The horizontal space between two widgets is measured from right of the left sibling widget and left of the right sibling widget.

Example

//Sample code to set the right property for widgets by using DP, Percentage and Pixels.
frmHome.widgetID.right = "50dp";

frmHome.widgetID.right = "10%";

frmHome.widgetID.right = "10px";

 

Platform Availability

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

---

---

The shapesData property contains the configuration of the shapes drawn in a Canvas widget. This configuration includes the shape identifier, the type of the shape, and color. You can use the shapesData property to draw and replace the shapes that are present inside a Canvas widget.

Syntax

shapesData

Input Parameters

The input parameter of the shapesData property is an array of the configurations of each shape.

Each configuration is a JavaScript object with the following keys.

Parameter Name	Type	Default Value	Description
shapeid	String		This is a mandatory parameter and it specifies a unique parameter to identify the shape. If a Canvas widget contains another shape with the same shape id, the latest shape configuration is ignored.
shapeType	Constant		This is a mandatory parameter. The following constant is supported for shapeType: kony.canvas.SHAPE_TYPE_LINE
strokeColor	String	BLACK	This is an optional parameter and it specifies the color of the shape. You must provide the color of the shape which you want to draw in RGBA Hexadecimal format. For example, 0xFF0000FF and FF0000FF, are both valid formats for RED color.
points	Array of [x,y] coordinates	The default unit of coordinates is DP.	This is a mandatory parameter when the shapeType parameter is set as kony.canvas.SHAPE_TYPE_LINE. You can set the [x,y] coordinates in either DP, PX, or percentage.
thickness	String	1 px. If a number is mentioned without a unit, the default unit would be DP.	This is an optional parameter and it is applicable only when the shapeType parameter is set as kony.canvas.SHAPE_TYPE_LINE. You must provide the thickness parameter in DP or PX.
lineStyle	Constant	kony.canvas.LINE_STYLE_SOLID	This is an optional parameter and it is applicable only when the shapeType parameter is set as kony.canvas.SHAPE_TYPE_LINE. The lineStyle parameter specifies the type of line you want to draw in the Canvas widget. The possible values for this parameter are as follows: kony.canvas.LINE_STYLE_SOLID kony.canvas.LINE_STYLE_DASHED
lineStyleConfig	Array of [x,y] coordinates	["1 px","1 px"]. If a number is mentioned without a unit, the default unit would be DP.	This is an optional parameter and it is applicable only when the lineStyle parameter is set as kony.canvas.LINE_STYLE_DASHED. The lineStyleConfig parameter specifies the intervals at which you want the dotted lines to appear. These intervals must always be greater than or equal to two.

Note: When you assign a null value to shapesData property, all the shapes drawn inside the Canvas widget is cleared.

Read/Write

Read + Write

Limitations

Android

• The lineStyleConfig parameter must contain an even number of entries. If you provide an array with odd number of intervals, the last entry in the array is not considered.

Exceptions

Error code	Name	Message	Reason
6001	Invalid shapesData	shapesData does not have a mandatory value for the shapeid parameter	This exception occurs when the configuration of shapes in the shapesData property does not have a shapeid value.
6001	Invalid shapesData	shapesData does not have mandatory value for the shapeType parameter	This exception occurs when the configuration of shapes in the shapesData property does not have a shapeType value.
6001	Invalid shapesData	shapesData does not have mandatory points for the shapeType line.	This exception occurs when the configuration of shapes in the shapesData property does not have points for the shapeType line.
6002	Invalid shapesData	shapesData contains duplicate shape identifiers <shapeid of the shape that causes the error>.	This exception occurs when there is more than one shape with the same identifier.

Example

//Sample code to set shapesData property for Canvas widget.
frmCanvas.myCanvas.shapesData = [{
 "shapeid": "shape1",
 "shapeType": kony.canvas.SHAPE_TYPE_LINE,
 "lineStyle": kony.canvas.LINE_STYLE_DASHED,
 "lineStyleConfig": ["1px", "1px"],
 "thickness": "2px",
 "points": [
  ["10px", "10px"],
  ["100px", "10px"]
 ],
 strokeColor: "ff000000",
}];

Platform Availability

• iOS, Android, Windows 10 and SPA

---

---

Specifies the look and feel of a widget when not in focus.

Syntax

skin

Type

String

Read/Write

Yes - (Read and Write)

Example

//Sample code to set the skin property for Canvas widget.

frmCanvas.myCanvas.skin="canvasSkin";

Platform Availability

• iOS, Android, Windows 10, SPA

---

---

This property determines the top edge of the widget and measured from the top bounds of the parent container.

The top property determines the position of the top 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 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. In flow-horizontal layout, the distance is measured from the left edge of the parent container.

Syntax

top

Type

String

Read/Write

Read + Write

Remarks

If the layoutType is set as kony.flex.FLOW_VERTICAL, the top property is measured from the bottom edge of the top sibling widget. The vertical space between two widgets is measured from bottom of the top sibling widget and top of the bottom sibling widget.

Example

//Sample code to set the top property for widgets by using DP, Percentage and Pixels.
frmHome.widgetID.top = "50dp";

frmHome.widgetID.top = "10%";

frmHome.widgetID.top = "10px";

Platform Availability

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

---

---

This property determines the width of the widget and is measured along the x-axis.

The width property determines the width of the widget’s bounding box. The value may be set using DP (Device Independent Pixels), Percentage, or Pixels. For supported widgets, the width may be derived from either the widget or container’s contents by setting the width to “preferred”.

Syntax

width

Type

Number, String, and Constant

Read/Write

Read + Write

Remarks

Following are the options that can be used as units of width:

• %: 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.
• kony.flex.USE_PREFERED_SIZE: When this option is specified, the layout uses preferred width of the widget as width and preferred size of the widget is determined by the widget and may varies between platforms.

Example

//Sample code to set the width property for widgets by using DP, Percentage and Pixels.
frmHome.widgetID.width = "50dp";

frmHome.widgetID.width = "10%";

frmHome.widgetID.width = "10px";

Platform Availability

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

---

---

This property specifies the stack order of a widget. A widget with a higher zIndex is always in front of a widget with a lower zIndex.

The zIndex property is used to set the stack, or layer order of a widget. Widgets with higher values will appear “over”, or “on top of” widgets with lower values. Widgets layered over other widgets will override any interaction events tied to widgets beneath. Modifying the zIndex does not modify the order of the widgets in the Kony hierarchy, inside of a flexContainer or form. zIndex accepts both negative and positive values.

Syntax

zIndex

Type

Number

Read/Write

Read + Write

Remarks

The default value for this property is 1.

Note: Modifying the zIndex does not modify the order of the widgets inside the FlexContainer. If zIndex is same for group of overlapping widgets then widget order decides the order of overlapping. The last added widget is displayed on top.

Example

//Sample code to set the zIndex property for widgets.
frmHome.widgetID.zIndex = 300;

Platform Availability

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

---