Canvas Methods

Canvas widget is associated with the following methods:

This API allows you to set a gesture recognizer for a specified gesture for a specified widget.

Syntax

addGestureRecognizer(gestureType, gestureConfigParams, onGestureClosure)

Parameters

gestureType

[Number] - Mandatory

Indicates the type of gesture to be detected on the widget.

See Remarks for possible values.

gestureConfigParams

[object] - Mandatory

The parameter specifies a table that has the required configuration parameters to setup a gesture recognizer.

The configuration parameters vary based on the type of the gesture.

See Remarks for possible values.

onGestureClosure

[function] - Mandatory

Specifies the function that needs to be executed when a gesture is recognized.

This function will be raised asynchronously

See Remarks for the syntax of this function.

Return Values

String - Reference to the gesture is returned.

Remarks

The values for the gestureTypeparameter are:

[Number] - Mandatory

Indicates the type of gesture to be detected on the widget. The following are possible values:

  • 1 – constants.GESTURE_TYPE_TAP
  • 2 - constants.GESTURE_TYPE_SWIPE
  • 3 – constants.GESTURE_TYPE_LONGPRESS
  • 4 – constants.GESTURE_TYPE_PAN
  • 5 – constants.GESTURE_TYPE_ROTATION
  • 6 - constants.GESTURE_TYPE_PINCH
  • 7 - constants.GESTURE_TYPE_RIGHTTAP

The values for the gestureConfigParamsparameter are:

[object] - Mandatory

The parameter specifies a table that has the required configuration parameters to setup a gesture recognizer. The configuration parameters vary based on the type of the gesture.

This parameter supports the following key-value pairs:

Gesture Type:TAP

  • fingers [Number] - specifies the maximum number of fingers that must be respected for a gesture. Possible values are: 1. Default value is 1.
  • taps [Number] - specifies the maximum number of taps that must be respected for a gesture. Possible values are: 1 or 2. Default value is 1.

For example:

{fingers:1,taps:1}

Gesture Type:SWIPE

  • fingers [Number] - specifies the maximum number of fingers that must be respected for a gesture. Possible values are: 1. Default value is 1.

For example:

{fingers: 1}

Gesture Type:LONGPRESS

  • pressDuration [Number] - specifies the minimum time interval (in seconds) after which the gesture is recognized as a LONGPRESS. For example, if pressDuration is 2 seconds, any continued press is recognized as LONGPRESS only if it lasts for at least 2 seconds. Default value is 1.

For example:

{pressDuration=1}.

Gesture Type: PAN

  • fingers [number] specifies the minimum number of fingers needed to recognize this gesture. Default value is 1.
  • continuousEvents [Boolean] indicates if callback should be called continuously for every change beginning from the time the gesture is recognized to the time it ends.

Gesture Type: ROTATION

  • Rotation gesture involves only two fingers.
  • continuousEvents [Boolean] indicates if callback must be called continuously for every change beginning from the time the gesture is recognized to the time it ends.

Gesture Type:PINCH

  • Pinch gesture invloves two fingures.
  • continuousEvents [Boolean] indicates if callback should be called continuously every change beginning from the time the gesture is recognized to the time it ends.

The syntax for the onGestureClosurecallback function are:

[function] - Mandatory

Specifies the function that needs to be executed when a gesture is recognized.

This function will be raised asynchronously and has the following Syntax:

onGestureClosure(widgetRef, gestureInfo, context)

  • widgetRef - specifies the handle to the widget on which the gesture was recognized.
  • gestureInfo - Table with information about the gesture. The contents of this table vary based on the gesture type.
  • context - Table with SegmentedUI row details.

gestureInfo table has the following key-value pairs:

  • gestureType [number] – indicates the gesture type; 1 for TAP, 2 for SWIPE, and 3 for LONGPRESS,4 for PAN, 5 for ROTATION, 6 for PINCH and 7 for RIGHTTAP
  • gesturesetUpParams [object] – specifies the set up parameters passed while adding the gesture recognizer
  • gesturePosition [number] – indicates the position where the gesture was recognized. Possible values are: 1 for TOPLEFT, 2 for TOPCENTER, 3 for TOPRIGHT, 4 for MIDDLELEFT, 5 for MIDDLECENTER, 6 for MIDDLERIGHT, 7 for BOTTOMLEFT, 8 for BOTTOMCENTER, 9 for BOTTOMRIGHT, 10 for CENTER
  • swipeDirection [number] –indicates the direction of swipe. This parameter is applicable only if the gesture type is SWIPE. Possible values are: 1 for LEFT, 2 for RIGHT, 3 for TOP, 4 for BOTTOM. Direction is w.r.t the view and not device orientation.
  • gestureX [number] – specifies the X coordinate of the point (in pixels) where the gesture has occurred. The coordinate is relative to the widget coordinate system.
  • gestureY [number] – specifies the Y coordinate of the point (in pixels) where the gesture has occurred. The coordinate is relative to the widget coordinate system.
  • widgetWidth [number] – specifies the width of the widget (in pixels)
  • widgetHeight [number] – specifies the height of the widget (in pixels)
  • gestureState[number] – indicates the gesture state as below
  • 1 – gesture state begin
  • 2 - gesture state changed
  • 3 – gesture state ended.
  • * gestureState is applicable only for continuous gestures like PAN, ROTATION and PINCH.
  • rotation [number] rotation of the gesture in degrees since its last change.( Applicable only when gesture type is ROTATION
  • velocityX and velocityY : horizontal and vertical component of velocity expressed in points per second. (Applicable only for PAN gesture type)
  • velocity [number]: velocity of pinch in scale per second (Applicable for Pinch gesture)
  • scale [number]:scale factor relative to the points of the two touches in screen coordinates
  • translationX and translationY [number] : cumulative distance as number. (Applicable only for PAN gesture type)

context table has the following key-value pairs:

  • rowIndex [number] : row index of the segui where gesture was recognised. (Applicable to gestures added to segUI rows)
  • sectionIndex [number] : section index of the segui where gesture was recognised. (Applicable to gestures added to segUI rows)

It is not recommend to define gestures for widgets that have a default behavior associated with it.

If you click (tap) a button (any clickable widget), the default behavior is to trigger an onClick event. If you define a Tap gesture on such widgets, the gesture closure is executed in addition to the onClick event.

If you swipe a larger form, the default behavior is to scroll up and down depending on the direction in which you swipe. If you define a SWIPE gesture on such forms, the gesture closure gets executed in addition to scrolling the form.

If you swipe a Segmented UI with huge number of rows, the default behavior is to scroll the Segmented UI. If you define a SWIPE gesture on such segments, the gesture closure gets executed in addition to scrolling the form.

Gestures can be added only for the following widgets:

  • Form (deprecated)
  • HBox (deprecated)
  • VBox (deprecated)
  • Scrollable Box (deprecated)
  • Flex Container
  • Flex Scroll Container.

In the android platform, the top and bottom gestures work only when the scrolling is disabled for Form and parent scrolling containers. By default, the scrolling is enabled for the Form and scrolling containers.

  • ROTATION is not supported on android.

Example

 

//Sample code to add Gestures to the frmGestures FlexForm.
//Code to add DOUBLE TAP gesture to the frmGestures, FlexForm.
var doubletp = {
 fingers: 1,
 taps: 2
};
frmGestures.addGestureRecognizer(1, doubletp, onGestureFunction);
//Code to add SINGLE TAP gesture to the frmGestures FlexForm.
var singleTp = {
 fingers: 1,
 taps: 1
};
frmGestures.addGestureRecognizer(1, singleTp, onGestureFunction);
//Code to add SWIPE gesture to the frmGestures FlexForm.
var swipeForm = {
 fingers: 1,
 swipedistance: 50,
 swipevelocity: 75
};
frmGestures.addGestureRecognizer(2, swipeForm, onGestureFunction);
//Code to add LONGPRESS gesture to the frmGestures FlexForm.
var longPressForm = {
 pressDuration: 2
};
frmGestures.addGestureRecognizer(3, longPressForm, onGestureFunction);

function onGestureFunction(commonWidget, gestureInfo) {
 kony.print("The Gesture type is:" + gestureInfo.gestureType);

}

Platform Availability

  • iOS

You can use the addShapes method to append shapes in a Canvas widget.

Syntax

addShapes(shapesData)

Parameters

shapesData-Mandatory

The shapesData parameter contains an array of JavaScript objects with the same configuration as the shapesData property.

Return Values

None

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 a mandatory value for shapeType parameter. This exception occurs when the configuration of shapes in shapesData property does not have a shapeType.
6001 Invalid shapesData shapesData does not have a mandatory points for the shapeType line. This exception occurs when the configuration of shapes in shapesData property does not have points for the shape 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 add a green line to a Canvas widget by using the addShapes method.*/
this.view.canvas.addShapes([{
 "shapeid": "shape1",
 "shapeType": kony.canvas.SHAPE_TYPE_LINE,
 "lineStyle": kony.canvas.LINE_STYLE_SOLID,
 "thickness": "10px",
 "points": [
  ["100%", "0%"],
  ["0%", "100%"]
 ],
 "strokeColor": "00ff00"
}]);
/*Sample code to add a green line, and a blue line to a Canvas widget by using the addShapes method.*/

this.view.canvas.addShapes([{
 "shapeid": "shape1",
 "shapeType": kony.canvas.SHAPE_TYPE_LINE,
 "lineStyle": kony.canvas.LINE_STYLE_SOLID,
 "thickness": "10px",
 "points": [
  ["100%", "0%"],
  ["0%", "100%"]
 ],
 "strokeColor": "00ff00"
}, {
 "shapeid": "shape2",
 "shapeType": kony.canvas.SHAPE_TYPE_LINE,
 "lineStyle": kony.canvas.LINE_STYLE_SOLID,
 "thickness": "10px",
 "points": [
  ["50%", "0%"],
  ["50%", "100%"]
 ],
 "strokeColor": "0000ff"
}]);

Platform Availability

  • iOS
  • Android

You can use the clear method to delete all the shapes drawn inside a Canvas widget.

Syntax

clear()

Parameters

None

Return Values

None

Example



// Sample code to remove all shapes in a canvas widget by using the clear method.
this.view.canvas.clear();

Platform Availability

  • iOS
  • Android

This method allows you to convert the coordinate system from a widget to a point (receiver's coordinate system).

Syntax

convertPointFromWidget(point, fromWidget)

Parameters

point

[JSObject]- Mandatory

You can specify an object with keys as x and y. You can specify the values in all (dp, px and %) units of measurement.

fromWidget

[widgetref]- Mandatory

This parameter is the handle to the widget instance. Based on this parameter, the coordinate system is converted from the widget to a point (receiver's coordinate system).

Example

Form1.widget1.convertPointFromWidget({
    x: "10dp",
    y: "20dp"
}, widget2);

Platform Availability

  • Android
  • iOS

Using the convertPointToWidget method, you can modify the co-ordinate system. You can convert the receiver's co-ordinate system from a point to a Widget.

Syntax

convertPointToWidget(point, toWidget)

Parameters

point

[JSObject]- Mandatory. You can specify an object with keys as x and y. You can specify the values in all (dp, px and %) units of measurement.

toWidget

[widgetref] - Mandatory. This parameter is the handle to the widget instance. Based on this parameter, the coordinate system is converted from a point to a widget.

Example

Form1.widget2.convertPointToWidget({
    x: "20dp",
    y: "30dp"
}, widget1);

Platform Availability

  • iOS
  • Android

When this method is used on a container widget, then all the widgets inside the container are cloned. This method takes an optional parameter. If the widgetid is not passed then the cloned copy will have the same ID as original widget.

If the widget ID is passed as a parameter then it will be prefixed to the existing ID and will assign it to cloned copy of the container. For all other widgets of the container and its child widgets.

For example, if the widget ID is "fc1" and the widget ID passed to clone API is "ref1", then the cloned widget ID will be "ref1fc1". For a child widget placed in a container with widget ID as "wid1", the cloned copy will have the widget ID as "ref1wid1".

Exceptions are not displayed if widget ID parameter is not unique. Instead when the cloned copy is added to the same form as of original container then it may lead to unexpected behaviors. So it is your responsibility to provide unique widget ID.

Syntax

clone()

Parameters

widgetId [String]

Optional. Reference of the name of the widget.

Return Values

Cloned copy of the widget.

Exceptions

None

Remarks

  • This method is not supported on SegmentedUI2 widget.
  • Gestures for the FlexContainer are not cloned. You have to reapply the gestures on the cloned object.
  • In Android platform, cloned Map widget will not work if prefix is not passed as parameter to the API.
  • To apply focusSkin for dynamically created widgets or cloned widgets, assign focusSkin dynamically after adding the widget to the form hierarchy. This is applicable for Desktop web platform. 
    formid.widgetid.focusSkin = "skinname";
  • To apply hoverSkin for dynamically created widgets or cloned widgets, assign hoverSkin dynamically after adding the widget to the form hierarchy. This is applicable for the Desktop web platform. 
    formid.widgetid.hoverSkin = "skinname";

Example



//This is a generic method that is applicable for various widgets.
//Here, we have shown how to use the clone Method for a FlexContainer widget.
//You need to make a corresponding call of the clone method for other applicable widgets.
var flex2 = frmFlex.flexContainer1.clone();
//Here, flexContainer1 is a FlexContainer widget that is already present in frmFlex FlexForm.
frmFlex.add(flex2);
//For instance, the corresponding clone method call on the Label widget is as follows:
var myLabel=frmFlex.lbl1.clone();

Platform Availability

  • iOS
  • Android

This method registers a widget to enable 3D Touch peek and pop gestures.

Syntax

registerForPeekandPop(onPeekCallback, onPopCallback)

Parameters

onPeekCallback

A callback function that is invoked when the user slightly presses (soft press) the widget.

Callback Syntax

onPeekCallback(widget)

Callback Input Parameters

widget: A widget reference that is registered for peek and pop.

Callback Return Values

  A PreviewInfoTable. See the Remarks section for a description of this table.

Callback Example

function onPeekCallback(widget) {
    var previewInfoTable = {
        "peekForm": frmSecond,
        "focusRect": [0, 0, 200, 200],
        "contentSize": [320, 480]
    };
    return previewInfoTable;
}

onPopCallback (Optional)

A callback function that is invoked when the user further presses (hard press) the preview that is displayed for the widget.

Callback Syntax

onPopCallback(widget,peekForm)

Callback Input Parameters

widget: A widget reference that is registered for peek and pop.

peekForm: A form reference that is displayed as preview/peek.

Callback Return Values

 A form reference.

Callback Remarks

Use this callback to set the content for pop. The form handle returned by this callback is used for pop content. In general, the form that is used for preview is used for pop content also. If the pop callback is not implemented, peek disappears and the app returns to its previous state.

Callback Example

function onPopCallback(widget, peekForm) {
    // preview form used for pop also
    return peekForm;
}

Remarks

A PreviewInfoTable has the following format.

Name: peekForm

Description: The form reference that will be displayed as preview. If an invalid form reference is given, the preview will not be shown.

Type: form reference

Name: focusRect (Optional)

Description: An array representing a rectangle in widgets view coordinates. If provided, this rectangle will be focused while its surrounding area will be blurred, indicating a preview is available for the widget. If not provided, entire view area of the widget will be focused. If either the width or height is zero, the widget's view width/height is used. The values are supported in percentage(with regard to widget bounds), dp, or pixels. The values are strings. If a string value is given without any format specifier, it defaults to dp. If an array of numbers is given, it is assumed they are dp values.

Type: Array [x, y, width, height]

Example: [“0dp”, “0dp”, “200dp”, “300dp”], [“10%”, “10%”, “75%”, “50%”], [“10px”, “10px”, “200px”, “480px”]

 

Name: contentSize (Optional)

Description: An array representing the preferred content size of the preview. This allows the user to adjust the preferred width/height dimensions of the preview. If not provided, the preview is shown with default values. If either the width or height is zero, the default preview width/height is used. It is recommended that one of the width/height values be zero for proper adjustment of the other value. For example, if width = 0, the height is adjustable and vice versa. Providing positive values simultaneously for both width and height will result in distorted appearance of preview. The values are supported in dp, pixels, and percentage(with regard to screen bounds). The actual width/height of the preview may vary slightly due to resizing per aspect ratio. The values are strings. If a string value is given without any format specifier, it defaults to dp. If array of numbers is given, it is assumed they are dp values.

Type: Array [width, height]

Example: [“0dp”, “100dp”], [“100%”, “0%”], [“0px”, “240px”]

Example of a PreviewInfoTable:

var previewInfoTable = {
    "peekForm": frmSecond,
    "focusRect": [0, 0, 200, 200],
    "contentSize": [320, 480]
};

Return Values

None.

Platform Availability

  • iOS 9.0 and later

This method allows you to remove a child widget from a parent widget.

Syntax

removeFromParent()

Read/Write

Yes - (Read and Write)

Example



//This is a generic method that is applicable for various widgets.
//Here, we have shown how to use the removeFromParent Method for a Calendar widget.
//You need to make a corresponding call of the removeFromParent method for other applicable widgets.

Form1.calendar.removeFromParent();

Platform Availability

  • iOS
  • Android
  • Responsive Web

This method allows you to remove the specified gesture recognizer for the specified widget.

Syntax

removeGestureRecognizer(gestureHandle)

Parameters

gestureHandle - Mandatory

Specifies the handle to the gesture returned by addGestureRecognizer call.

Example

 

//Sample code to remove Double tap gesture from frmGestures FlexForm.
frmGestures.removeGestureRecognizer(doubletp);

Platform Availability

  • iOS

You can use the removeShapes method to delete the specific shapes drawn in a Canvas widget.

Syntax

removeShapes([shapeid])

Parameters

shapeid

The shapeid parameter contains an array of shape identifiers as Strings. If you do not provide a shapeid, then the removeShapes method is not considered.

Return Values

None

Example



/*Sample code to add two shapes: one red line and one green line by using the shapesData property.*/
 this.view.canvas.shapesData= [{
  "shapeid": "shape0",
  "shapeType": kony.canvas.SHAPE_TYPE_LINE,
  "lineStyle": kony.canvas.LINE_STYLE_SOLID,
  "thickness": "10px",
  "points": [
   ["0%", "0%"],
   ["100%", "100%"]
  ],
  "strokeColor": "ff0000"
 }, {
  "shapeid": "shape1",
  "shapeType": kony.canvas.SHAPE_TYPE_LINE,
  "lineStyle": kony.canvas.LINE_STYLE_SOLID,
  "thickness": "10px",
  "points": [
   ["100%", "0%"],
   ["0%", "100%"]
  ],
  "strokeColor": "00ff00"
 }];
//Sample code for removing one shape.
this.view.canvas.removeShapes(["shape0"]);
//Sample code for removing two shapes.
this.view.canvas.removeShapes(["shape0","shape1"]);

Platform Availability

  • iOS
  • Android

This method allows you to set a gesture recognizer for a specified gesture for a specified widget. You can set a Gesture recognizer only for a Form, a Box, and a Scroll Box. The setGestureRecognizer method is deprecated and should not be used in new software. However, Swipe Distance and Swipe Velocity parameters are not deprecated. So if you want to use the Swipe Distance and Swipe velocity parameters, use the setGestureRecognizer method. To use all other parameters, you must use the addGestureRecognizer method.

Syntax

setGestureRecognizer (gestureType,setupParams,gestureHandler)

Parameters

gestureType

[Number] - Mandatory

Specifies the type of gesture that needs to be detected on the widget. The following are possible values:

  • 1 for TAP
  • 2 for SWIPE
  • 3 for LONGPRESS

setupParams

[array of arrays] - Mandatory

The parameter specifies an object that has the configuration parameters to setup a gesture recognizer. See Remarks for the values for this parameter.

gestureHandler

[function] - Mandatory

The parameter specifies the function that needs to be executed when a gesture is recognized. See Remarks for the functions syntax.

onGesturefunction(widgetRef,gestureInfo)

  • widgetRef - This parameter specifies the handle to the widget on which the gesture was recognized.
  • gestureInfo - This parameter specifies an array that provides information about the gesture. The contents of this array vary based on the gesture type.

Quantum Visualizer populates the details in the gestureInfo array. This array has the following key-value pairs:

  • gestureType [number] - indicates the gesture type; 1 for TAP, 2 for SWIPE, and 3 for LONGPRESS.
  • gesturesetUpParams [object] - this array is the set up parameters passed while adding the gesture recognizer.
  • gesturePosition [number] - indicates the position where the gesture was recognized. Possible values are: 1 for TOPLEFT, 2 for TOPCENTER, 3 for TOPRIGHT, 4 for MIDDLELEFT, 5 for MIDDLECENTER, 6 for MIDDLERIGHT, 7 for BOTTOMLEFT, 8 for BOTTOMCENTER, 9 for BOTTOMRIGHT, 10 for CENTER. This parameter is applicable only on iPhone.
  • swipeDirection [number] -indicates the direction of swipe. This parameter is applicable only if the gesture type is SWIPE. Possible values are: 1 for LEFT, 2 for RIGHT, 3 for TOP, 4 for BOTTOM.
  • gestureX [number] - specifies the X coordinate of the point (in pixels) where the gesture has occurred. The coordinate is relative to the widget coordinate system. This parameter is applicable only on iPhone.
  • gestureY [number] - specifies the Y coordinate of the point (in pixels) where the gesture has occurred. The coordinate is relative to the widget coordinate system. This parameter is applicable only on iPhone.
  • widgetWidth [number] - specifies the width of the widget (in pixels). This parameter is applicable only on iPhone.
  • widgetHeight [number] - specifies the height of the widget (in pixels). This parameter is applicable only on iPhone.

Return Values

String - Reference(uniqueidentifier) to the gesture is returned.

Exceptions

Error

Remarks

This method is applicable on Form, Box, and ScrollBox widgets only.

Configuration of setupParams

The configuration parameters vary based on the type of the gesture.

Gesture Type:TAP

  • fingers [number] - This parameter specifies the maximum number of fingers that must be respected for a gesture. Possible values are: 1. Default value is 1.
  • taps [number] - This parameter specifies the maximum number of taps that must be respected for a gesture. Possible values are: 1 or 2. Default value is 1.

For example:

{fingers:1,taps:1}

Gesture Type:SWIPE

  • fingers [number] - This parameter specifies the maximum number of fingers that must be respected for a gesture. Possible values are: 1. Default value is 1.
  • swipedistance [number] - This parameter specifies the distance between the pixel from where the swipe started to the pixel where the swipe stopped (finger is moved up or removed). The default value is 50 pixels. This parameter is applicable only on android. This parameter is applicable only if the gesture type is SWIPE.
  • swipevelocity [number] - This parameter specifies the velocity of the swipe measured in pixels per second. The default value is 75. This parameter is applicable only on android. This parameter is applicable only if the gesture type is SWIPE.

For example:

{fingers:1,swipedistance:50,swipevelocity:75}

Gesture Type:LONGPRESS

  • pressDuration [number] - This parameter specifies the minimum time interval (in seconds) after which the gesture is recognized as a LONGPRESS. For example, if the pressDuration is 2 seconds, any continued press is recognized as LONGPRESS only if it lasts for at least 2 seconds. Default value is 1. This parameter is not customizable on android platform. The default value on android platform is 500 ms. Any value you pass to this parameter is ignored and the default value is used.

For example:

{pressDuration:1}

Function syntax for the GestureHandler parameter

The parameter specifies the function that needs to be executed when a gesture is recognized. This function has the following Syntax:

onGesturefunction(widgetRef,gestureInfo)

  • widgetRef - This parameter specifies the handle to the widget on which the gesture was recognized.
  • gestureInfo - This parameter specifies an array that provides information about the gesture. The contents of this array vary based on the gesture type.

Quantum Visualizer populates the details in the gestureInfo array. This array has the following key-value pairs:

  • gestureType [number] - indicates the gesture type; 1 for TAP, 2 for SWIPE, and 3 for LONGPRESS.
  • gesturesetUpParams [object] - this array is the set up parameters passed while adding the gesture recognizer.
  • gesturePosition [number] - indicates the position where the gesture was recognized. Possible values are: 1 for TOPLEFT, 2 for TOPCENTER, 3 for TOPRIGHT, 4 for MIDDLELEFT, 5 for MIDDLECENTER, 6 for MIDDLERIGHT, 7 for BOTTOMLEFT, 8 for BOTTOMCENTER, 9 for BOTTOMRIGHT, 10 for CENTER. This parameter is applicable only on iPhone.

  • swipeDirection [number] -indicates the direction of swipe. This parameter is applicable only if the gesture type is SWIPE. Possible values are: 1 for LEFT, 2 for RIGHT, 3 for TOP, 4 for BOTTOM.
  • gestureX [number] - specifies the X coordinate of the point (in pixels) where the gesture has occurred. The coordinate is relative to the widget coordinate system. This parameter is applicable only on iPhone.
  • gestureY [number] - specifies the Y coordinate of the point (in pixels) where the gesture has occurred. The coordinate is relative to the widget coordinate system. This parameter is applicable only on iPhone.
  • widgetWidth [number] - specifies the width of the widget (in pixels). This parameter is applicable only on iPhone.
  • widgetHeight [number] - specifies the height of the widget (in pixels). This parameter is applicable only on iPhone.

Example 



//The below function will get invoked  when a gesture is recognized. 
function myTap(myWidget, gestureInfo) {
    alert(" Tap Gesture detected");
    alert("gestureType :" + gestureInfo.gestureType);
    alert("gesturePosition :" + gestureInfo.gesturePosition);
    //write any further logic here
}

//Setting Gesture configuration.
var setupTblTap = {
    fingers: 1,
    taps: 2
}; //double tap gesture

//To add a TAP gesture recognizer on a hbox with ID hbx1 placed on a form frm1
var tapGesture = frm1.hbx1.setGgestureRecognizer(1, setupTblTap, myTap);

Platform Availability

  • iOS

This method sets and overrides the existing onPeekCallback for the widget.

Syntax

setOnPeek(onPeekCallback)

Parameters

onPeekCallback

A callback function that is invoked when the user slightly presses (soft press) the widget.

Callback Syntax

onPeekCallback(widget)

Callback Parameters

widget: A widget reference that is registered for peek and pop.

Callback Return Values

PreviewInfoTable. See the Remarks section for a description of this table.

Callback Example

function onPeekCallback(widget, contextInfo) {
    var previewInfoTable = {
        "peekForm": frmSecond,
        "focusRect": [0, 0, 200, 200],
        "contentSize": [320, 480]
    };
    return previewInfoTable;
}

Return Values

None.

Remarks

A PreviewInfoTable has the following format.

Name: peekForm

Description: The form reference that will be displayed as preview. If an invalid form reference is given, the preview will not be shown.

Type: form reference

Name: focusRect (Optional)

Description: An array representing a rectangle in widgets view coordinates. If provided, this rectangle will be focused while its surrounding area will be blurred, indicating a preview is available for the widget. If not provided, entire view area of the widget will be focused. If either the width or height is zero, the widget's view width/height is used. The values are supported in percentage(with regard to widget bounds), dp, or pixels. The values are strings. If a string value is given without any format specifier, it defaults to dp. If an array of numbers is given, it is assumed they are dp values.

Type:Array [x, y, width, height]

Example: [“0dp”, “0dp”, “200dp”, “300dp”], [“10%”, “10%”, “75%”, “50%”], [“10px”, “10px”, “200px”, “480px”]

Name:contentSize (Optional)

Description:An array representing the preferred content size of the preview. This allows the user to adjust the preferred width/height dimensions of the preview. If not provided, the preview is shown with default values. If either the width or height is zero, the default preview width/height is used. It is recommended that one of the width/height values be zero for proper adjustment of the other value. For example, if width = 0, the height is adjustable and vice versa. Providing positive values simultaneously for both width and height will result in distorted appearance of preview. The values are supported in dp, pixels, and percentage(with regard to screen bounds). The actual width/height of the preview may vary slightly due to resizing per aspect ratio. The values are strings. If a string value is given without any format specifier, it defaults to dp. If array of numbers is given, it is assumed they are dp values.

Type:Array [width, height]

Example: [“0dp”, “100dp”], [“100%”, “0%”], [“0px”, “240px”]

Example of a PreviewInfoTable:

var previewInfoTable = {
    "peekForm": frmSecond,
    "focusRect": [0, 0, 200, 200],
    "contentSize": [320, 480]
};

Example

function settingPeek() {
    Form1.setOnPeek(onMyPeekcallback);
}

function onMyPeekcallback(widgetref, contextInfo) {
    if (typeof(contextInfo) === undefined) {
        return null;
    }

    var previewInfoTable = {
        "peekForm": frmSecond,
        "focusRect": [0, 0, 200, 200],
        "contentSize": [320, 480]
    };
    return previewInfoTable;

}

Platform Availability

  • iOS 9.0 and later

This method overrides the existing onPopCallback for the widget.

Syntax

setOnPop(onPopCallback)

Parameters

onPopCallback

A callback function that is invoked when the user slightly presses (soft press) the widget.

Callback Syntax

onPopCallback(widget,peekForm)

Callback Parameters

widget: A widget reference that is registered for peek and pop.

peekForm

 A form reference that is displayed as preview/peek.

Callback Return Values

 A form reference.

Callback Remarks

 Use this callback to set the content for pop. The form handle returned by this callback is used for pop content. In general, the form that is used for preview is used for pop content also. If the pop callback is not implemented, peek disappears and the app returns to its previous state.

Callback Example

function onPopCallback(widget, peekForm) {
    // preview form used for pop also
    return peekForm;
}

Return Values

None.

Example

function settingPop() {
    Form1.setOnPop(myonPopcallback);
}

function myonPopcallback(widgetref, peekForm) {
    // preview form used for pop also
    return peekForm;
}

Platform Availability

  • iOS 9.0 and later

Use this method to set the visibility of the widget.

Default : true

Syntax

setVisibility(visible)

Parameters

visible

[Boolean] - Mandatory

true -Indicates visibility is true.

false - Indicates visibility is false.

animationConfig

[JSObject] - Optional. The parameter specifies the animation configuration of the object. This is not supported in Desktop Web platform.

Following are the parameters of the JSObject:

animEffect

Optional. The parameter specifies the animation effect. Following are the available options of animation effect:

  • constants.ANIMATION_EFFECT_EXPAND: This is applicable when the visibility is turned on. Specifies the widget must expand gradually by increasing the height of the widget.
  • constants.ANIMATION_EFFECT_COLLAPSE: This is applicable when the visibility is turned off. Specifies the widget must collapse gradually by decreasing the height of the widget.
  • constants.ANIMATION_EFFECT_REVEAL: This is applicable when the visibility is turned on. Specifies the widget must appear gradually by decreasing the transparency of the widget.
  • constants.ANIMATION_EFFECT_FADE: This is applicable when the visibility is turned off. Specifies the widget must disappear gradually by increasing the transparency of the widget.
  • constants.ANIMATION_EFFECT_NONE: This is the default option. Specifies animation should not be applied to the widget. However the layout animations are applied on the Form.

animDuration

Optional. The parameter specifies the duration of the animation effect in seconds. The default value is 1 second. The negative values are ignored and defaulted to 1 second.

animDelay

Optional. This parameter specifies the delay of the animation effect in seconds. The default value is 0 second. The negative values are ignored and defaulted to 0 second.

animCurve

Optional. The parameter specifies the animation curve to be applied while playing the animation. An animation curve defines the speed of the animations at different intervals of the animation duration. Following are the available options of animation curve:

  • constants.ANIMATION_CURVE_EASEIN: Specifies the animation effect to start slow in the beginning.
  • constants.ANIMATION_CURVE_EASEOUT: Specifies the animation effect to slowdown towards the end.
  • constants.ANIMATION_CURVE_EASEINOUT: Specifies the animation effect to start slow and slowdown towards the end.
  • constants.ANIMATION_CURVE_LINEAR: This is the default value. Specifies the animation effect to continue with the same speed from start to end.

animCallBacks - Optional

It is a JS dictionary containing the events invoked by the platform during the animation life cycle. Following are the available events:

  • animStarted: Invoked at the beginning of the animation without any parameters. Following is the Syntax of the event: function animStarted()
  • animEnded: Invoked at the end of the animation without any parameters. Following is the Syntax of the event: function animEnded()

Return Values

None

Exceptions

Error

Remarks

  • This method is not applicable on Form, Popup, and Alert. It is also not applicable if the widget is placed in a Segment. When the widget is placed in a Segment, the default Visibility is set to true. If you want to change the value to false, you can do so by using Segment methods.
  • Passing an invalid type other than the above events lead to run time exceptions/ crashes.
  • This method is not supported on the widgets FlexForm, FlexContainer, and FlexScrollContainer.

Example



//This is a generic method that is applicable for various widgets.
//Here, we have shown how to invoke the setVisibility Method for a button widget with animation.
//You need to make a corresponding call of the setVisibility method for other applicable widgets.

form1.myButton.setVisibility(
    false, {
        "animEffect": constants.ANIMATION_EFFECT_COLLAPSE,
        "animDuration": 1,
        "animDelay": 0,
        "animCurve": constants.ANIMATION_CURVE_LINEAR,
        "animCallBacks": {
            "animStarted": startCallBackFunc,
            "animEnded": endCallBackFunc
        }
    });
//Sample code to invoke setVisibility Method for button widget without animation.
form1.myButton.setVisibility(false);

Platform Availability

Available on all platforms.

This method unregisters a widget from 3D Touch peek and pop gestures.

Syntax

unregisterForPeekandPop()

Parameters

None.

Return Values

None.

Example



Form1.unregisterForPeekAndPop();

Platform Availability

  • iOS 9.0 and later

You can use the updateShapes method to update the configurations of specific shapes in a Canvas widget.

Syntax

updateShapes(shapesData)

Parameters

shapesData-Mandatory

The shapesData parameter contains an array of JavaScript objects with the same configuration as the shapesData property.

Return Values

None

Remarks

  • If a new shapeid or an incorrect shapeid is provided in the shapesData parameter, the shape corresponding to that shapeid is not considered.
  • When you want to update the position of a shape, say a line, you must provide all the coordinate values corresponding to the shape.
  • You cannot update the type of the shape by using the updateShapes method.

Example



/*Sample code to add two shapes: one red line and one green line by using the shapesData property.*/
 this.view.canvas.shapesData= [{
  "shapeid": "shape0",
  "shapeType": kony.canvas.SHAPE_TYPE_LINE,
  "lineStyle": kony.canvas.LINE_STYLE_SOLID,
  "thickness": "10px",
  "points": [
   ["0%", "0%"],
   ["100%", "100%"]
  ],
  "strokeColor": "ff0000"
 }, {
  "shapeid": "shape1",
  "shapeType": kony.canvas.SHAPE_TYPE_LINE,
  "lineStyle": kony.canvas.LINE_STYLE_SOLID,
  "thickness": "10px",
  "points": [
   ["100%", "0%"],
   ["0%", "100%"]
  ],
  "strokeColor": "00ff00"
 }];
//Sample code to change the color of the red line to green by using the updateShapes method.
this.view.canvas.updateShapes([{
 "shapeid": "shape0",
 "strokeColor": "00ff00"
}]);
/* Sample code to use the updateShapes method on two shapes. This code changes the color of one shape and thickness of the other.*/
this.view.canvas.updateShapes([{
 "shapeid": "shape0",
 "strokeColor": "00ff00"
}, {
 "shapeid": "shape1",
 "thickness": "30px"
}]);

Platform Availability

  • iOS
  • Android