kony.ui Namespace

Constructs an ActionItem object for use in an ActionSheet object.

Syntax

new kony.ui.ActionItem(actionItemParams)

Input Parameters

actionItemParams

A JavaScript object containing key-value pairs that define the configuration parameters for the action item. This object must contain the following keys.

Example

//Creating the Action Item Object
  setActionSheet: function(){
    var actionItem = new kony.ui.ActionItem({
    "title": "Open Basecamp",
    "style": constants.ACTION_STYLE_DEFAULT,
    "action": function(){
     kony.application.openURL("https://basecamp.kony.com/s/");
    }

Return Values

Returns an ActionItem object that can be added to an Action Sheet.

Remarks

The actionCallback function, which is passed into this function through the actionSheetParams parameter, must have the following prototype.

actionItemCallback(actionSheetObject, actionItem1);

where actionSheetObject is a handle to the ActionSheet object that the ActionItem object is associated with, and actionItem1 is a handle to the ActionItem object that the user selected.

Platform Availability

iOS

Constructs an ActionSheet object that represents an iOS Action Sheet.

Syntax

kony.ui.ActionSheet(actionSheetParams)

Input Parameters

actionSheetParams

A JavaScript object containing key-value pairs that define the configuration parameters for the Action Sheet. This object must contain the following keys.

Example

//Creating the Action Sheet Object
  var actionSheetObject = new kony.ui.ActionSheet({
        "title":"Kony Basecamp", 
        "message":"Welcome to Kony Base Camp! Explore. Learn. Develop. Share.", 
        "showCompletionCallback": function(){
        }
    });

Return Values

Returns an ActionSheet object.

Remarks

The actionSheetParams parameter is an object containing key-value pairs. When your app uses the showCompletionCallback key, it specifies a callback function that is automatically invoked after your app displays the action sheet. The callback function must have the following signature.

showCompletionCallback();

In an Action Sheet, only one action item can have the style constants.ACTION_ITEM_STYLE_CANCEL.

Platform Availability

iOS

This API provides you the ability to add alerts in the application. The alerts are of the following types:

• information - an informative message is displayed on the screen. This message can be in turn a warning or a success message.
• confirmation - a confirmation message with Yes and No options is displayed on the screen.
• error - an error message is displayed on the screen.

All the alerts are modal in nature, i.e., the user cannot proceed with other UI operations unless the alert is dismissed.

Syntax

kony.ui.Alert(basicConfig, pspConfig)

Input Parameters

basicConfig

basicConfig is an object with the following configuration properties.

pspConfig

pspConfig is an object with platform specific configuration properties.

var pspConf = {
    ondeviceback: func1
};
var confirmationAlert = kony.ui.Alert(basicConf, pspConf);

function func1() {
    kony.print("Example function on device back");
}

Example

  confirmationAlert: function(){ 
   //Creating the basicConfig object 
  var basicConf = {
    message: "This is an confirmation alert",
    alertType: constants.ALERT_TYPE_CONFIRMATION,
    
};
   //Creating the pspConfig object
  var pspConfig = {
    "contentAlignment": constants.ALERT_CONTENT_ALIGN_CENTER
};
   kony.ui.Alert(basicConf, pspConfig);
 },
  
   informationAlert: function(){ 
     //Creating the basicConfig object
  var basicConf = {
    message: "This is an info alert",
    alertType: constants.ALERT_TYPE_INFO,
 
};
     //Creating the pspConfig object
  var pspConfig = {
  "contentAlignment": constants.ALERT_CONTENT_ALIGN_LEFT
};
   kony.ui.Alert(basicConf, pspConfig);
 },
  
   errorAlert: function(){ 
   //Creating the basicConfig object
  var basicConf = {
    message: "This is an error alert",
    alertType: constants.ALERT_TYPE_ERROR,
   
};
     //Creating the pspConfig object
  var pspConfig = {
  "contentAlignment": constants.ALERT_CONTENT_ALIGN_RIGHT
};
   kony.ui.Alert(basicConf, pspConfig);
 },

Alerts are displayed on some platforms as follows:

Return Values

None.

Remarks

Invoking this API multiple times in the same action sequence leads to an erroneous behavior.

This API should be invoked at the end of a function as a best practice.

The following are the behavioral aspects of alerts on various platforms:

RichClient

In all native implementations alert is non blocking, i.e. the execution of any logic defined after the alert definition continues without the alert confirmation.

Important: Alert images are not supported on Windows 8 tablet.

Android

Android platform supports display of multiple alerts each time the kony.ui.Alert API is invoked. On device back, the alert gets dismissed and also the alert handler is raised.

For CONFIRMATION type alert, the alert callback is invoked with cancel flag. For example, false Boolean argument.

For INFO & ERROR type alert, the alert callback is invoked with true argument.

iPhone

iPhone does not support displaying image icons based on the alert types: info,confirmation, error. "\n" as a newline character in the alert messages supported for iPhone Platform

Mobile Web/SPA/Desktop Web

• For advanced Mobile Web devices like iPhone, Android, and Palm Pre, alerts are displayed as popups. For basic devices, the alerts are displayed in a new page.
• For all platforms you cannot customize alert icons/yes or no labels/ look and feel.
• Titles of the alerts are provided by the browser and you cannot modify them. The alert title attribute does not apply for Mobile Web. Usually, the title on the alert will be the IP address or the domain name of the application.
• Confirmation alerts in the basic devices will be displayed in another form.
• If the alert message is nil, alert is not displayed.
• In case of all platforms, the execution of the logic defined after alert is blocked until the user clicks "yes" or "no".

For JavaScript conversion, an alert has to be created using another variant constructor,i.e an Indexed argument constructor.

kony.ui.Alert(message, alertHandler, alertType, yesLabel, noLabel, alertTitle, pspConf);

Platform Availability

Available on all platforms.

BarButtonItem

Syntax

kony.ui.BarButtonItem(
    options);

Input Parameters

options

A JavaScript object containing key-value pairs that the constructor uses to set the configuration of the BarButtonItem object. The following keys are supported.

Example

var item = new kony.ui.BarButtonItem(
    {type:constants.BAR_BUTTON_IMAGE, 
    tintColor: hex color string, 
    style :constants.BAR_ITEM_STYLE_PLAIN, 
    enabled :true, 
    action : funtionObject, 
    metaData:{image:"imagename"}} );

Return Values

Returns an instantiated and configured BarButtonItem object.

Remarks

The kind of data needed by the BarButtonItem in its metaData key in the options parameter varies depending on the type of the BarButtonItem that is being created. The value for the metaData key can be any of the following.

constants.BAR_BUTTON_IMAGE

Set the value for the metaData key to a string containing the name of an image.

constants.BAR_BUTTON_TITLE

Set the value for the metaData key to a string containing the title for the button.

constants.BAR_BUTTON_SYSTEM_ITEM

Set the value for the metaData key to a value from the System Item Constants.

constants.BAR_BUTTON_CUSTOM

Set the value for the metaData key to a widget reference. Only the Label and Button widgets can be set as a widget reference. For these widgets, the following properties are supported.

Creates a Browser widget.

Syntax

kony.ui.Browser(
    basicConfig,
    layoutConfig,
    pspConfig);

Input Parameters

Example

var basicConfig = {
    "detectTelNumber": false,
    "enableZoom": false,
    "id": "brwInline",
    "isVisible": true,
    "requestURLConfig": {
        "URL": "http://www.google.co.in/",
        "requestMethod": constants.BROWSER_REQUEST_METHOD_GET
    }
};

var LayoutConfig = {
    "containerHeightReference": constants.CONTAINER_HEIGHT_BY_FORM_REFERENCE,
    "containerWeight": 100,
    "margin": [0, 0, 0, 0],
    "marginInPixel": false
};

var PSPConfig = {};

//Creating the browser widget 
    var webtemp = new kony.ui.Browser(basicConfig, LayoutConfig, PSPConfig);

//Adding the widge
frmBrowser.add(webtemp);

Return Values

Returns an instantiated Browser widget.

Remarks

All writable properties can be optionally passed inside dictionary objects to the constructor. Unspecified properties or an empty constructor results in the defaults values being used for all unprovided information.

Returns a URL that points to the privacy policy for Safe Browsing reporting, which is displayed to end users if you want a custom interstition.

Syntax

kony.ui.BrowserSettings.getSafeBrowsingPrivacyPolicyUrl()

Example

var webBasic = {id:"browserID", 
	isVisible:true, 
	screenLevelWidget: false, 
	requestURLConfig:{URL: "https://www.google.co.in/", 
    requestMethod:constants.BROWSER_REQUEST_METHOD_GET}};
var webLayout = {containerWeight:100};

//Creating the Browser
var browser = new kony.ui.Browser(webBasic, webLayout, {});
frm.add(browser);
kony.ui.BrowserSettings.getSafeBrowsingPrivacyPolicyUrl(); 
//Getting the SafeBrowsingPrivacyPolicyUrl to display a custom interstition

Type

Static

Input Parameters

None

Return Values

String - The URL that points to a privacy policy document that can be displayed to end users. Returns null if the device API Level is earlier than 27.

Platform Availability

• Android (API Level 27 and later)

This API is used to set an event callback that is triggered once the Safe Browsing initialization process is completed.

The URL is not guaranteed to be protected by Safe Browsing until after the callback is invoked with true. Safe Browsing is not fully supported on all devices. For those devices, callback will receive false.

For optimal protection against known threats, you must wait until the onSafeBrowsingInitialized callback is triggered with true before you invoke a Browser widget object's loadUrl() method.

Syntax

kony.ui.BrowserSettings.setOnSafeBrowsingInitializedCallback(eventCallback);

Input Parameters

Event Callback Syntax

onSafeBrowsingInitialized(initStatus)

Input Parameters

Example

var webBasic = 
{
  id:"browserID", 
  isVisible:true, 
  screenLevelWidget: false
};
var webLayout = {containerWeight:100};

//Creating the Browser
var browser = new kony.ui.Browser(webBasic, webLayout, {});
frm.add(browser);
kony.ui.BrowserSettings.setOnSafeBrowsingInitializedCallback(onSafeBrowsingInitializedCallback); 
// setting safebrowsing initialization callback

function onSafeBrowsingInitializedCallback(initStatus)
{
  if(initStatus == true)
  {
   frm.browser.requestURLConfig = {"URL":"http://testsafebrowsing.appspot.com/s/malware.html", "requestMethod":constants.BROWSER_REQUEST_METHOD_GET};
  }
}

Type

static

Platform Availability

• Android (API Level 27 and later)

Sets the list of hosts (domain names/IP addresses) that are exempt from SafeBrowsing checks. The list of such hosts is global for all Browser widgets across any application.

The following table illustrates the rules that are applicable for different hosts.

All other rules, including wildcards, are not valid. The correct syntax for hosts is defined by RFC 3986.

Syntax

kony.ui.BrowserSettings.setSafeBrowsingWhitelist([url1,url2], callback)

Type

Static

Input Parameters

Example

var webBasic = {id:"browserID", 
	isVisible:true, 
	screenLevelWidget: false, 
	requestURLConfig:{URL: "https://www.google.co.in/", 
    requestMethod:constants.BROWSER_REQUEST_METHOD_GET}};
var webLayout = {containerWeight:100};

//Creating the Browser
var browser = new kony.ui.Browser(webBasic, webLayout, {});
frm.add(browser);

kony.ui.BrowserSettings.setSafeBrowsingWhitelist([url1,url2],resultCallback);
//Setting the whitelist

function resultCallback(result){}

Platform Availability

• Android (API Level 27 and later)

Creates a Button widget.

Syntax

kony.ui.Button(
    basicConfig,
    LayoutConfig,
    PSPConfig);

Input Parameters

Example

//Call back function onClick of button
function onClickCallBack()
{
    alert("button clicked");  
}

var basicConfig = {
    "focusSkin": "slButtonGlossRed",
    "height": "50dp",
    "id": "Button0cde40e79ba934b",
    "isVisible": true,
    "left": "65dp",
    "onClick": onClickCallBack,
    "skin": "slButtonGlossBlue",
    "text": "Button",
    "top": "486dp",
    "width": "260dp",
    "zIndex": 1
};
  
var LayoutConfig = {
    "contentAlignment": constants.CONTENT_ALIGN_CENTER,
    "displayText": true,
    "padding": [0, 0, 0, 0],
    "paddingInPixel": false
};
  
var PSPConfig={};

var Button0cde40e79ba934b = new kony.ui.Button(basicConfig,LayoutConfig,PSPConfig);

//Adding the button to the form  
Form06900dd40fc7842.add(Button0cde40e79ba934b); 

Return Values

Returns an instantiated Button widget.

Remarks

All writable properties can be optionally passed inside dictionary objects to the constructor. Unspecified properties or an empty constructor results in the defaults values being used for all unprovided information.

Creates a Calendar widget.

Syntax

kony.ui.Calendar(
    basicConf,
    layoutConf,
    PSPConf);

Parameters

Example

//Defining the properties for a calendar with id:"calendar1"
var basicConf = {
    id: "calendar1",
    isVisible:true, 
    skin:"slCalendar",
    dateFormat:"dd/MM/yyyy",
    viewType:constants.CALENDAR_VIEW_TYPE_DEFAULT,
    validStartDate:[01,01,2017],
    validEndDate:[31,12,2017],
    calendarIcon:"calbtn.png"
};

var layoutConf = {
    "contentAlignment": constants.CONTENT_ALIGN_CENTER,
    padding:[2,2,2,2],
    "paddingInPixel": false
};

var PSPConf = {};

//Creating the Calendar.
var calendar1 = new kony.ui.Calendar(basicConf,layoutConf,PSPConf);

//adding the calendar to form
frmHome.add(calendar1);

Return Values

Returns an instantiated Calendar widget.

Remarks

All writable properties can be optionally passed inside dictionary objects to the constructor. Unspecified properties or an empty constructor results in the defaults values being used for all unprovided information.

Creates a Camera widget.

Syntax

kony.ui.Camera(
    basicConfig,
    layoutConfig,
    pspConfig);

Input Parameters

Example

function onCameraCaptureAPI(eventobject)
{
    var  cameraRawBytes = camera1.rawBytes;
    Form06900dd40fc7842.Image0e7a54b01924146.rawBytes=cameraRawBytes;

    alert("camera raw bytes");
    if( null !== cameraRawBytes)
    {
        kony.camera1.releaseRawBytes(cameraRawBytes);
        cameraRawBytes = null;
    }
}

var basicConfig = {
    "height": "50dp",
    "id": "camera1",
    "isVisible": true,
    "left": "60dp",
    "onCapture": onCameraCaptureAPI,
    "skin": "slCamera",
    "text": "Camera",
    "top": "405dp",
    "width": "260dp",
    "zIndex": 1
};

var LayoutConfig = {
    "contentAlignment": constants.CONTENT_ALIGN_CENTER,
    "padding": [0, 0, 0, 0],
    "paddingInPixel": false
};
  
var PSPConfig = {
    "accessMode": constants.CAMERA_IMAGE_ACCESS_MODE_PUBLIC,
    "enableOverlay": false,
    "enablePhotoCropFeature": false
};

var camera1 = new kony.ui.Camera(basicConfig,LayoutConfig,PSPConfig );
CameraForm.add(camera1);  

Return Values

Returns an instantiated Camera widget.

Remarks

All writable properties can be optionally passed inside dictionary objects to the constructor. Unspecified properties or an empty constructor results in the defaults values being used for all unprovided information.

Creates a Canvas widget.

Syntax

kony.ui.Canvas(
    basicConfig,
    layoutConfig,
    pspConfig)

Input Parameters

Example

//Sample code to draw a red and a green line using Canvas widget.
define({
 addCanvasWidget: function() {
  var shapesDataArray = [{
   "shapeid": "shape1",
   "shapeType": kony.canvas.SHAPE_TYPE_LINE,
   "lineStyle": kony.canvas.LINE_STYLE_SOLID,
   "thickness": "10px",
   "points": [
    ["5%", "20%"],
    ["95%", "20%"]
   ],
   "strokeColor": "ff000000"
  }, {
   "shapeid": "shape2",
   "shapeType": kony.canvas.SHAPE_TYPE_LINE,
   "lineStyle": kony.canvas.LINE_STYLE_SOLID,
   "thickness": "10px",
   "points": [
    ["5%", "40%"],
    ["95%", "40%"]
   ],
   "strokeColor": "00FF0000"
  }];
  var basicConfig = {
   "id": "canvas",
   "isVisible": true,
   "skin": "canvasskin",
   "width": "100%",
   "height": "40%",
   "centerY": "50%",
   "shapesData": shapesDataArray
  };
  var LayoutConfig = {
   "marginInPixel": false,
  };
  var PSPConfig = {};
  var canvas = new kony.ui.Canvas(basicConfig, LayoutConfig, PSPConfig);
  this.view.add(canvas);
 }
});  

Return Values

Returns an instantiated Canvas widget.

Remarks

All writable properties can be optionally passed inside dictionary objects to the constructor. Unspecified properties or an empty constructor results in the defaults values being used for all unprovided information.

Creates a CheckBoxGroup widget.

Syntax

kony.ui.CheckBoxGroup(
    basicConf,
    layoutConf,
    pspConf);

Input Parameters

Example

//Defining the properties for a checkBoxGroup with id:"chkBox1"
var basicConf = { 
    id: "chkBox1",
    isVisible: true,
    skin:"slCheckBoxGroup",
    onSelection:onSelCallBck,
    masterData": [
        ["cbg1", "Checkbox One"],
        ["cbg2", "Checkbox Two"],
        ["cbg3", "Checkbox Three"]
    ],
    "selectedKeyValues": [
        ["cbg1", "Checkbox One"]
    ],
    "selectedKeys": ["cbg1"]
}

var layoutConf = {
    "padding": [0, 0, 0, 0],
    "paddingInPixel": false,
    "itemOrientation":constants.CHECKBOX_ITEM_ORIENTATION_VERTICAL
}
var pspConf = {};

//Create a new Checkbox.
var chkBox1 = new kony.ui.CheckBoxGroup(basicConf, layoutConf, pspConf);
//Adding checkBoxGroup to form
frmHome.add(chkBox1);

//Call back function onSelection of checkBox
function onSelCallBck(chkBox)
{
    alert("on selection event triggered");
}

Return Values

Returns an instantiated CheckBoxGroup widget.

Remarks

All writable properties can be optionally passed inside dictionary objects to the constructor. Unspecified properties or an empty constructor results in the defaults values being used for all unprovided information.

Creates a ComboBox widget.

Syntax

kony.ui.ComboBox(
    basicConf,
    layoutConf,
    pspConf);

Parameters

Example

//Defining properties of ComboBox with d:combobox1
var comboBasic = {
    id:"combobox1", 
    isVisible:true, 
    masterDataMap:[
        [
            {
                "mykey":"key1",
                "myvalue":"value1"
            }, 
            {
                "mykey":"key2",
                "myvalue":"value2"
            }
        ],
        "mykey","myvalue"
    ], 
    skin:"comboSkin", selectedKey:"key1", 
    onSelection:onSelCallBck
};

var comboLayout = {
    containerWeight:80, 
    widgetAlignment:constants.WIDGET_ALIGN_MIDDLE_LEFT, 
    padding:[0,0,0,0],  
    hExpand:true, 
    vExpand:false
};

var comboPSP= {
    viewType:constants.COMBOBOX_VIEW_TYPE_TABLEVIEW, 
    contentAlignment:constants.CONTENT_ALIGN_MIDDLE_LEFT, 
    placeholder:"Please select a value", 
    placeholderI18NKey:"plcHolder", 
    popupTitle:"ComboPopUp", 
    groupCells:true, 
    preOnclickJS:preOnclickJSCallBck, 
    postOnclickJS:postOnclickJSCallBck
};
//creating a combobox
combo = new kony.ui.ComboBox(comboBasic, comboLayout, comboPSP);
//adding the widget to form
frmHome.add(combo);

Return Values

Returns a ComboBox widget.

Remarks

All writable properties can be optionally passed inside dictionary objects to the constructor. Unspecified properties or an empty constructor results in the defaults values being used for all unprovided information.

Creates an object that defines an animation.

Syntax

kony.ui.createAnimation(
    animationDefinition);

Input Parameters

Example

var transformObject = kony.ui.makeAffineTransform();
transformObject.translate(10, 0);
transformObject.scale(0.1, 1);
animationDef = {
    100: {
        "transform": transformObject
    }
};
animationConfig = {
    duration: 0.3,
    fillMode: kony.anim.FILL_MODE_FORWARDS
};
animationDefObject = kony.ui.createAnimation(animationDef);	

Return Values

Returns an instantiated animation object.

Creates a DataGrid widget.

Syntax

kony.ui.DataGrid(
    dgridBasic,
    dgridLayout,
    dgridPSP);

Input Parameters

Example

//Defining the properties for dataGrid with id:dgrid
var dgridBasic = {
    id:"dgrid",
    info:{key:"This is a datagrid"},
    isVisible:true,
    headerSkin:"hSkin",
    rowNormalSkin:"rNSkin",
    rowFocusSkin:"rFSkin",
    rowAlternateSkin:"rASkin",
    showColumnHeaders:true,
    columnHeadersConfig:[
        {
            columnID:"col1",
            columnType:constants.DATAGRID_COLUMN_TYPE_TEXT,
            columnHeaderText:"Account Type",
            columnWidthInPercentage:40
        },
        {
            columnID:"col2",
            columnType:constants.DATAGRID_COLUMN_TYPE_TEXT,
            columnHeaderText:"Account Number",
            columnWidthInPercentage:30
        },
        {
            columnID:"col3", 
            columnType:constants.DATAGRID_COLUMN_TYPE_TEXT,
            columnHeaderText:"Balance",
            columnWidthInPercentage:30
        }
    ], 
    isMultiSelect:true,
    data:[
        {
            col1:"Checking", col2:"490",col3:"$400",
            metainfo:{skin:"rowskin1", col1_skin:"colskin1"}
        },
        {
            col1:"Checking",col2:"494", col3:"$2000.34"
        }, 
        {
            col1:"Savings",col2:"567",col3:"$4000"
        }
    ]
};

var dgridLayout = {
    widgetAlignment:constants.WIDGET_ALIGN_TOP_LEFT,
    contentAlignment:constants.CONTENT_ALIGN_CENTER,
    containerWeight:99,
    padding:[0,0,0,0]
};

var dgridPSP = {};

//Creating the dataGrid.	
var dgrid = new kony.ui.DataGrid(dgridBasic, dgridLayout, dgridPSP);
//adding data grid to form
frmHome.add(dgrid);

Return Values

Returns an instantiated DataGrid widget.

Remarks

All writable properties can be optionally passed inside dictionary objects to the constructor. Unspecified properties or an empty constructor results in the defaults values being used for all unprovided information.

Creates a FlexContainer widget.

Syntax

kony.ui.FlexContainer(
    basicConfig,
    layoutConfig,
    pspConfig);

Input Parameters

Example

var basicConfig = {
    "id": "flexContainer1",
    "top": "100dp",
    "left": "30dp",
    "width": "304dp",
    "height": "251dp",
    "zIndex": 10,
    "isVisible": true,
    "skin" : "slFbox05488114024e14c",
};

var LayoutConfig = {"padding": [0, 0, 0, 0]};
       
var PSPConfig={};

var flexContainer1 = new kony.ui.FlexContainer(basicConfig,LayoutConfig,PSPConfig);

//Adding to form
myForm.add(flexContainer1);

Return Values

Returns an instantiated FlexContainer widget.

Remarks

All writable properties can be optionally passed inside dictionary objects to the constructor. Unspecified properties or an empty constructor results in the defaults values being used for all unprovided information.

Instantiates a FlexScrollContainer widget.

Syntax

kony.ui.FlexScrollContainer(
    basicConf,
    layoutConf,
    pspConf);

Input Parameters

Example

//Defining the properties of FlexScrollContainer
function testfrm_flexScrollContainer1_onScrollStart_seq0(eventobject) 
{
    normalform.show();
};

function testfrm_flexScrollContainer1_onScrollEnd_seq0(eventobject) 
{
    normalform.show();
};

function testfrm_flexScrollContainer1_onScrollTouchReleased_seq0(eventobject) 
{
    normalform.show();
};

function testfrm_flexScrollContainer1_onScrolling_seq0(eventobject) 
{
    normalform.show();
};

function testfrm_flexScrollContainer1_onDecelerationStarted_seq0(eventobject) 
{
    normalform.show();
};


function addWidgetstestfrm() 
{
    var basicConfig = {
        "id": "flexScrollContainer1",
        "top": "5dp",
        "left": "6dp",
        "width": "97.15%",
        "height": "271dp",
        "zIndex": 1,
        "isVisible": true,
        "enableScrolling": true,
        "scrollDirection": kony.flex.SCROLL_BOTH,
        "horizontalScrollIndicator": true,
        "verticalScrollIndicator": true,
        "bounces": true,
        "allowHorizontalBounce": true,
        "allowVerticalBounce": true,
        "pagingEnabled": true,
        "Location": "[6,5]",
        "onScrollStart": testfrm_flexScrollContainer1_onScrollStart_seq0,
        "onScrollEnd": testfrm_flexScrollContainer1_onScrollEnd_seq0,
        "onScrollTouchReleased": testfrm_flexScrollContainer1_onScrollTouchReleased_seq0,
        "onScrolling": testfrm_flexScrollContainer1_onScrolling_seq0,
        "onDecelerationStarted": testfrm_flexScrollContainer1_onDecelerationStarted_seq0,
        "bouncesZoom": true,
        "zoomScale": 1.0,
        "minZoomScale": 1.0,
        "maxZoomScale": 1.0,
        "layoutType": kony.flex.FREE_FORM
    };

    var layoutConfig = {
        "padding": [0, 0, 0, 0],
        "marginInPixel": false,
        "paddingInPixel": false
    };
	
    var platforSpecificConfig = { };
									
    var flexScrollContainer1 = new kony.ui.FlexScrollContainer(basicConfig, layoutConfig, platforSpecificConfig);
    flexScrollContainer1.setDefaultUnit(kony.flex.DP);
    flexScrollContainer1.add();
    testfrm.add(flexScrollContainer1);
};

function testfrmGlobals() 
{
    var MenuId = [];
    testfrm = new kony.ui.Form2({
        "id": "testfrm",
        "contentOffset": {
            "x": "3dp",
            "y": "4dp"
        },
        "contentSize": {
            "width": "5dp",
            "height": "6dp"
        },
        "enableScrolling": true,
        "bounces": true,
        "allowHorizontalBounce": true,
        "allowVerticalBounce": false,
        "pagingEnabled": true,
        "title": "myfrmt",
        "needAppMenu": true,
        "enabledForIdleTimeout": true,
        "skin": "frm",
        "zoomScale": 22,
        "minZoomScale": 1.0,
        "maxZoomScale": 1.0,
        "layoutType": kony.flex.FREE_FORM,
        "addWidgets": addWidgetstestfrm
    }, {
        "padding": [0, 0, 0, 0],
        "displayOrientation": constants.FORM_DISPLAY_ORIENTATION_PORTRAIT,
        "paddingInPixel": false
    }, {
        "retainScrollPosition": true,
        "needsIndicatorDuringPostShow": true,
        "formTransparencyDuringPostShow": "100",
        "inputAccessoryViewType": constants.FORM_INPUTACCESSORYVIEW_DEFAULT,
        "bouncesZoom": false,
        "configureExtendTop": true,
        "configureExtendBottom": false,
        "configureStatusBarStyle": false,
        "extendTop": false,
        "titleBar": true,
        "footerOverlap": false,
        "headerOverlap": false,
        "inTransitionConfig": {
            "transitionDirection": "fromLeft",
            "transitionEffect": "none"
        },
        "outTransitionConfig": {
            "transitionDirection": "fromRight",
            "transitionEffect": "none"
        }
    });
    testfrm.setDefaultUnit(kony.flex.PX);
};

Return Values

Returns a FlexScrollContainer widget.

Remarks

All writable properties can be optionally passed inside dictionary objects to the constructor. Unspecified properties or an empty constructor results in the defaults values being used for all unprovided information

Creates a new FlexForm widget.

Syntax

kony.ui.Form2(
    basicConf,
    layoutConf,
    pspConf);

Input Parameters

Example

//Defining the properties of FlexScrollContainer
function testfrm_flexScrollContainer1_onScrollStart_seq0(eventobject) 
{
    normalform.show();
};

function testfrm_flexScrollContainer1_onScrollEnd_seq0(eventobject) 
{
    normalform.show();
};

function testfrm_flexScrollContainer1_onScrollTouchReleased_seq0(eventobject) 
{
    normalform.show();
};

function testfrm_flexScrollContainer1_onScrolling_seq0(eventobject) 
{
    normalform.show();
};

function testfrm_flexScrollContainer1_onDecelerationStarted_seq0(eventobject) 
{
    normalform.show();
};


function addWidgetstestfrm() 
{
    var basicConfig = {
        "id": "flexScrollContainer1",
        "top": "5dp",
        "left": "6dp",
        "width": "97.15%",
        "height": "271dp",
        "zIndex": 1,
        "isVisible": true,
        "enableScrolling": true,
        "scrollDirection": kony.flex.SCROLL_BOTH,
        "horizontalScrollIndicator": true,
        "verticalScrollIndicator": true,
        "bounces": true,
        "allowHorizontalBounce": true,
        "allowVerticalBounce": true,
        "pagingEnabled": true,
        "Location": "[6,5]",
        "onScrollStart": testfrm_flexScrollContainer1_onScrollStart_seq0,
        "onScrollEnd": testfrm_flexScrollContainer1_onScrollEnd_seq0,
        "onScrollTouchReleased": testfrm_flexScrollContainer1_onScrollTouchReleased_seq0,
        "onScrolling": testfrm_flexScrollContainer1_onScrolling_seq0,
        "onDecelerationStarted": testfrm_flexScrollContainer1_onDecelerationStarted_seq0,
        "bouncesZoom": true,
        "zoomScale": 1.0,
        "minZoomScale": 1.0,
        "maxZoomScale": 1.0,
        "layoutType": kony.flex.FREE_FORM
    };

    var layoutConfig = {
        "padding": [0, 0, 0, 0],
        "marginInPixel": false,
        "paddingInPixel": false
    };
	
    var platforSpecificConfig = { };
									
    var flexScrollContainer1 = new kony.ui.FlexScrollContainer(basicConfig, layoutConfig, platforSpecificConfig);
    flexScrollContainer1.setDefaultUnit(kony.flex.DP);
    flexScrollContainer1.add();
    testfrm.add(flexScrollContainer1);
};

//******************************************************
// Create a FlexForm and add a FlexFormContainer to it.
//******************************************************
function testfrmGlobals() 
{
    var MenuId = [];

    // Call the constructor for a FlexForm.
    testfrm = new kony.ui.Form2({    // Definition for the basicConf parameter.
        "id": "testfrm",
        "contentOffset": {
            "x": "3dp",
            "y": "4dp"
        },
        "contentSize": {
            "width": "5dp",
            "height": "6dp"
        },
        "enableScrolling": true,
        "bounces": true,
        "allowHorizontalBounce": true,
        "allowVerticalBounce": false,
        "pagingEnabled": true,
        "title": "myfrmt",
        "needAppMenu": true,
        "enabledForIdleTimeout": true,
        "skin": "frm",
        "zoomScale": 22,
        "minZoomScale": 1.0,
        "maxZoomScale": 1.0,
        "layoutType": kony.flex.FREE_FORM,
        "addWidgets": addWidgetstestfrm
    }, {    // Definition for the layoutConf.
        "padding": [0, 0, 0, 0],
        "displayOrientation": constants.FORM_DISPLAY_ORIENTATION_PORTRAIT,
        "paddingInPixel": false
    }, {    // Definition for the pspConf parameter.
        "retainScrollPosition": true,
        "needsIndicatorDuringPostShow": true,
        "formTransparencyDuringPostShow": "100",
        "inputAccessoryViewType": constants.FORM_INPUTACCESSORYVIEW_DEFAULT,
        "bouncesZoom": false,
        "configureExtendTop": true,
        "configureExtendBottom": false,
        "configureStatusBarStyle": false,
        "extendTop": false,
        "titleBar": true,
        "footerOverlap": false,
        "headerOverlap": false,
        "inTransitionConfig": {
            "transitionDirection": "fromLeft",
            "transitionEffect": "none"
        },
        "outTransitionConfig": {
            "transitionDirection": "fromRight",
            "transitionEffect": "none"
        }
    });
    testfrm.setDefaultUnit(kony.flex.PX);
};

Return Values

Returns a FlexForm widget.

Remarks

FlexForms created with this function are the recommended type of form to use in your applications. Legacy box forms should not be used in new software.

All writable properties can be optionally passed inside dictionary objects to the constructor. Unspecified properties or an empty constructor results in the defaults values being used for all unprovided information.

Creates a HorizontalImageStrip widget.

Syntax

kony.ui.HorizontalImageStrip2(
    hImgBasic,
    hImgLayout,
    hImgPSP);

Input Parameters

Example

//Defining the properties for Image strip with id:hImg1
var hImgBasic = {
    id:"hImg1",
    skin:"hImgSkn",
    isVisible:true,
    selectedIndex:1,
    imageWhileDownloading:"someimg.png",
    imageWhenFailed:"someimg3.png",
    spaceBetweenImages:20,
    data:
    [
        [
            {"imagekey":"someimage1.png"},
            {"imagekey":"someimage2.png"},
            "imagekey"
        ]
    ],
    viewType:constants.HORIZONTAL_IMAGESTRIP_VIEW_TYPE_COVERFLOW,
    showArrows:true,
    showScrollbars:true,
    onSelection:onSelectionCallBack
};

var hImgLayout = {
    padding:[0,0,0,0],
    paddingInPixel:true,
    marginInPixel:true,
    referenceWidth:100,
    referenceHeight:100,
    imageScaleMode:constants.IMAGE_SCALE_MODE_FIT_TO_DIMENSIONS,
    containerWeight:100
};

var hImgPSP={};

//Creating the Horizontal Image strip.
var hImg1=new kony.ui.HorizontalImageStrip2(hImgBasic, hImgLayout, hImgPSP);
// add widget to form
frmHome.add(hImg1);

Return Values

Returns an instantiated HorizontalImageStrip object.

Remarks

All writable properties can be optionally passed inside dictionary objects to the constructor. Unspecified properties or an empty constructor results in the defaults values being used for all unprovided information.

Creates an Image widget.

Syntax

kony.ui.Image2(
    basicConfig,
    layoutConfig,
    pspConfig);

Input Parameters

Example

var basicConfig = {
    "id": "imgBullet1",
    "isVisible": true,
    "src": "bullet_white.png"
};

var LayoutConfig = {
    "containerWeight": 11,
    "imageScaleMode": constants.IMAGE_SCALE_MODE_MAINTAIN_ASPECT_RATIO,
    "margin": [0, 0, 0, 0],
    "marginInPixel": false,
    "padding": [0, 0, 0, 0],
    "paddingInPixel": false,
    "widgetAlignment": constants.WIDGET_ALIGN_CENTER
}; 

var PSPConfImage = {glossyEffect:constants.MAGE_GLOSSY_EFFECT_RADIAL};

//Creating the Image 
var imageIdTest = new kony.ui.Image2(basicConfig, LayoutConfig, PSPConfImage);

//Adding widget to form.
Form0bf93c59bdc404d.add(imageIdTest);

Return Values

Returns an instantiated Image widget.

Remarks

The Image widget, like all widgets, is a UI element that you can place of forms when you design your program or add programmatically at runtime. It simply displays images on the screen. The Image widget is different from the Image object, which encapsulates images in code for cropping, scaling, and other similar operations.

All writable properties can be optionally passed inside dictionary objects to the constructor. Unspecified properties or an empty constructor results in the defaults values being used for all unprovided information.

Creates an ImageGallery widget.

Syntax

kony.ui.ImageGallery(
    imgGalBasic,
    imgGalLayout,
    imgGalPSP );

Input Parameters

Example

//Defining the properties for ImageGallery widget with id:imgGallery
var imgGalBasic = { 
    id: "imgGallery",
    isVisible: true,
    skin: "gradroundfocusbtn",
    focusSkin: "gradroundfocusbtn",
    selectedIndex:3,
    spaceBetweenImages: 50};
    var imgGalLayout = {
        containerWeight:50};
        var imgGalPSP = {itemsPerRow:3,
        navigationBarPosition:"Bottom"
    };

// Creating the ImageGallery.
var imgGallery = new kony.ui.ImageGallery(imgGalBasic,imgGalLayout,imgGalPSP );
//adding the widget to form
frmHome.add(imgGallery);

Return Values

Returns an instantiated ImageGallery widget.

Remarks

All writable properties can be optionally passed inside dictionary objects to the constructor. Unspecified properties or an empty constructor results in the defaults values being used for all unprovided information.

Creates a Label widget.

Syntax

kony.ui.Label(
    basicConfig,
    LayoutConfig,
    PSPConfig);

Input Parameters

Example

var basicConfig = {
    "id":  "lblDescription2",
    "isVisible": true,
    "skin": "sknLblWhiteSampleApp",
    "text": "Generating checksum"
};

var LayoutConfig= {
    "containerWeight": 89,
    "contentAlignment": constants.CONTENT_ALIGN_TOP_LEFT,
    "hExpand": true,
    "margin": [0, 0, 0, 0],
    "marginInPixel": false,
    "padding": [6, 5, 6, 0],
    "paddingInPixel": true,
    "vExpand": false,
    "widgetAlignment": constants.WIDGET_ALIGN_TOP_LEFT
};

var PSPConfig = {
    renderAsAnchor:true, 
    wrapping:constants.WIDGET_TEXT_WORD_WRAP};
        
// Creating the label.
var lbl = new kony.ui.Label(basicConfig, LayoutConfig, PSPConfig);

// Adding the label to form  
Form06900dd40fc7842.add(lbl);

Return Values

Returns an instantiated Label widget.

Remarks

All writable properties can be optionally passed inside dictionary objects to the constructor. Unspecified properties or an empty constructor results in the defaults values being used for all unprovided information.

Creates a Line widget.

Syntax

kony.ui.Line(
    lineBasicConf,
    lineLayoutConf,
    linePSPConf);

Input Parameters

Example

//Defining the properties for a Line with id:"line".
var lineBasicConf = {
    id:"line1",
    skin:"gradlblskin",
    isVisible:true
};

var lineLayoutConf = {
    padding:[0,0,0,0],
    thickness:25
};

var linePSPConf = {};

//Creating the Line.
var line1 = new kony.ui.Line(lineBasicConf,lineLayoutConf,linePSPConf);
//adding line to form
frmHome.add(line);

Return Values

Returns an instantiated Line widget.

Remarks

All writable properties can be optionally passed inside dictionary objects to the constructor. Unspecified properties or an empty constructor results in the defaults values being used for all unprovided information.

Creates a Link widget.

Syntax

kony.ui.Link(
    linkBasic,
    linkLayout,
    linkPSP);

Input Parameters

Example

//Defining properties for a link widget with id:link1
var linkBasic = {
    id:"link1",
    skin:"linkSkin",
    text:"Click here",
    isVisible:true
};

var linkLayout = {
    containerWeight:100,
    padding[0,0,0,0],
    paddingInPixel:true,
    marginInPixel:true,
    hExpand:true,
    vExpand:true
};

var linkPSP = {blockedUISkin:"blkSkin"};

//Creating the link.
var link1 = new kony.ui.Link(linkBasic, linkLayout, linkPSP);
//adding widget to form
frmHome.add(link1);

Return Values

Returns an instantiated Link widget.

Remarks

All writable properties can be optionally passed inside dictionary objects to the constructor. Unspecified properties or an empty constructor results in the defaults values being used for all unprovided information.

Creates a ListBox widget.

Syntax

kony.ui.ListBox(
    listBasic,
    listLayout,
    listPSP);

Parameters

Example

//Defining properties for a listbox with id:listbox
var listBasic = {
    id:"listbox",
    isVisible:true,
    "masterData":[
        ["lb1", "Listbox One"],
        ["lb2", "Listbox Two"],
        ["lb3", "Listbox Three"]
    ],
    "selectedKey": "lb1",
    "selectedKeyValue": 
    ["lb1", "Listbox One"],
    "skin": "slListBox"
};
var listLayout = {
    "contentAlignment": constants.CONTENT_ALIGN_MIDDLE_LEFT,
    "padding": [0, 0, 0, 0],
    "paddingInPixel": false
};
var listPSP = {
    "applySkinsToPopup": true,
    "placeholder": "MyListbox",
    "viewType": constants.LISTBOX_VIEW_TYPE_LISTVIEW
};		

//Creating the ListBox.
var listbx = new kony.ui.ListBox(listBasic, listLayout, listPSP);

//Adding listbox to form
frmHome.add(listbx);

Return Values

Returns an instantiated ListBox widget.

Remarks

All writable properties can be optionally passed inside dictionary objects to the constructor. Unspecified properties or an empty constructor results in the defaults values being used for all unprovided information.

Creates a Map widget.

Syntax

kony.ui.Map(
    mapBasicConf,
    mapLayoutConf,
    mapPSPConf);

Input Parameters

Example

//Defining the properties for map with id:map1
var mapBasicConf = {
    id: "map1",
    provider:constants.MAP_PROVIDER_GOOGLE,
    mapKey:"0z5UtaSPUYj42f5qX0VAwmDGLX39Qxgbtcra0TA",
    defaultPinImage: "kmpin.png",
    isVisible:true,
    onPinClick:onPinClickCallBck
};

var mapLayoutConf = {
    margin:[20,40,50,20],
    containerWeight:100,
    widgetAlignment:constants.WIDGET_ALIGN_BOTTOM_LEFT,
    padding:[0,0,0,0],
    hExpand:false,
    vExpand:false
};

var mapPSPConf = {
    mode: constants.MAP_VIEW_MODE_HYBRID,
    showCurrentLocation:constants.MAP_VIEW_SHOW_CURRENT_LOCATION_AS_PIN
};

//Creating the map with the properties defined above.
var map = new kony.ui.Map(mapBasicConf,mapLayoutConf,mapPSPConf);
//adding widget to form
frmHome.add(map);

Return Values

Returns an instantiated Map widget.

Remarks

All writable properties can be optionally passed inside dictionary objects to the constructor. Unspecified properties or an empty constructor results in the defaults values being used for all unprovided information.

Creates a transformation object that can be used in an animation definition.

Syntax

kony.ui.makeAffineTransform()

Example

/******************************************************************
 *	Name    : createAnimation
 *	Author  : Kony
 *	Purpose : To call makeAffineTransform API and createAnimation API on widgets.
 *******************************************************************/
function animation() {

    // Creates a transformation object that can be used in an animation definition. 
    var transformObject = kony.ui.makeAffineTransform();

    // Add a translation and a scale.					
    transformObject.translate(10, 0);
    transformObject.scale(0.1, 1);

    // Create the animation definition.			
    animationDef = {
        100: {
            "transform": transformObject
        }
    };

    //Create the animation configuration.
    animationConfig = {
        duration: 0.3,
        fillMode: kony.anim.FILL_MODE_FORWARDS
    };

    // Creates an object that defines an animation.
    animationDefObject = kony.ui.createAnimation(animationDef);
    Form0bf93c59bdc404d.Button00aaa01360b0349.animate(animationDefObject, animationConfig);

}

Input Parameters

None.

Return Vales

An object that can be used to specify a transformation.

Creates a Phone widget.

Syntax

kony.ui.Phone(
    phBasicConf,
    phLayoutConf,
    phPSPConf);

Input Parameters

Example

// Create a phone widget.
var phBasic={
    "focusSkin": "phoneFocus",
    "id": "phone192735980025729",
    "isVisible": true,
    "onClick": makeCall,
    "skin": "phnImg",
    "text": "123-456-7890"
};
		
var phLayout={
    "containerWeight": 100,
    "contentAlignment": constants.CONTENT_ALIGN_CENTER,
    "displayText": true,
    "hExpand": true,
    "margin": [12, 4, 12, 4],
    "marginInPixel": true,
    "padding": [3, 10, 3, 10],
    "paddingInPixel": true,
    "vExpand": false,
    "widgetAlignment": constants.WIDGET_ALIGN_CENTER
};
					
var phPSP={};		

//creating the widget
var phone192735980025729 = new kony.ui.Phone(phBasic,phLayout,phPSP);
//adding widget to form 
frmHome.add(phone192735980025729);

Return Values

Returns an instantiated Phone widget.

Remarks

All writable properties can be optionally passed inside dictionary objects to the constructor. Unspecified properties or an empty constructor results in the defaults values being used for all unprovided information.

Creates a PickerView widget.

Syntax

kony.ui.PickerView(
    pickerBasic,
    pickerLayout,
    pickerPSP);

Input Parameters

Example

//Defining the properties for PickerView with id:picker
var pickerBasic = {
    id:"picker",
    info:{key:"PickerView"},
    skin:"slPickerView", 
    "masterData": [
        [
            ["y1", "2009"],
            ["y2", "2010"],
            ["y3", "2011"], 
            40
        ],
        [
            ["m1", "Jan"],
            ["m2", "Feb"],
            ["m3", "Mar"],
            ["m4", "Apr"],
            ["m5", "May"],
            ["m6", "Jun"],
            ["m7", "Jul"], 
            60
        ]
    ],
    isVisible:true,
    selectedKeys:["y2","m1"],
    onSelect:onSelectCalBck
};

var pickerLayout =  { 
    widgetAlignment:constants.WIDGET_ALIGN_CENTER
};

//Creating the PickerView.
var picker = new kony.ui.PickerView(pickerBasic, pickerLayout, {});

//Reading onSelect of the pickerView.
kony.print("pickerView onSelect event::"+picker.onSelect);

//adding widget to form
frmHome.add(picker);

//The below function is the callback function for onSelect event.
function onSelectCalBck(picker)
{
    alert("selected");
}

Return Values

Returns an instantiated PickerView widget.

Remarks

All writable properties can be optionally passed inside dictionary objects to the constructor. Unspecified properties or an empty constructor results in the defaults values being used for all unprovided information.

Creates a RadioButtonGroup widget

Syntax

kony.ui.RadioButtonGroup(
    radioBasic,
    radioLayout,
    radioPSP);

Input Parameters

Example

//Defining properties for RadioButtonGroup with id:RadioButton
var radioBasic = {
    id:"RadioButton",
    isVisible:true,
    "masterData": [
        ["rbg1", "Radiobutton One"],
        ["rbg2", "Radiobutton Two"],
        ["rbg3", "Radiobutton Three"]
    ],
    "selectedKey": "rbg1",
    "selectedKeyValue": ["rbg1", "Radiobutton One"],
    skin:"slRadioButtonGroup"};
					
var radioLayout = {
    "itemOrientation": constants.RADIOGROUP_ITEM_ORIENTATION_VERTICAL,
    "padding": [0, 0, 0, 0],
    "paddingInPixel": false
};

var radioPSP = {
    tickedImage:"img1.png",
    untickedImage:"img2.png",
    viewType:constants.RADIOGROUP_VIEW_TYPE_TABLEVIEW
};		

//Creating the RadioButtonGroup
radioBtn = new kony.ui.RadioButtonGroup(radioBasic, radioLayout, radioPSP);

//Reading the id of the RadioButtonGroup		
alert("RadioButtonGroup Id ::"+radioBtn.id);

//add radio button group to form
frmHome.add(radioBtn);

Return Values

Returns an instantiated RadioButtonGroup widget.

Remarks

All writable properties can be optionally passed inside dictionary objects to the constructor. Unspecified properties or an empty constructor results in the defaults values being used for all unprovided information.

Creates a Toast object.

Important: The kony.ui.Toast function is only available for the Android platform.

Syntax

kony.ui.Toast(configParams)

Input Parameters

Example

var toast = new kony.ui.Toast({
  "text": "This is the toast's text.",
  "duration": constants.SHORT
  });
toast.show();

Return Values

Returns an instantiated Toast Object.

Platform Availability

• Android

Creates a Video widget.

Syntax

kony.ui.Video(
    vidBasicConf,
    vidLayoutConf,
    vidPSPConf);

Input Parameters

Example

var vidBasic = {
    "id": "video1",
    skin:"vSkin",
    "source": {
        "mp4": "http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4", 
        "mov": video file path,
        "rawBytes": camera1.rawBytes
    }
};

var vidLayout = {
    "width": "100%",
    "height": "100%",
    "zIndex": 3
};

var vidPSP = {
    "controls": false,
    "poster": null
};

// Creating the widget
var video1 = new kony.ui.Video(vidBasic, vidLayout, vidPSP);
//adding widget to form
frmHome.add(video1);

Return Values

Returns an instantiated Video widget.

Remarks

All writable properties can be optionally passed inside dictionary objects to the constructor. Unspecified properties or an empty constructor results in the defaults values being used for all unprovided information.