API Simplification

APIs are simplified from three bucket constructors to a single bucket constructor so that you don’t have to remember multiple properties. Even if you pass one property, widget can be constructed with default properties. For example,

var label1 = new kony.ui.Label({
    "text": "HelloWorld"
}); 

Following widgets support API simplification:

• Form2
• TextArea2
• TextBox2
• HBox
• VBox
• Button
• CheckBox
• Listbox
• Label
• RadioButton
• SegmentedUI2
• Browser
• Camera
• HorizontalImageStrip
• ImageGallery2
• Phone
• PickerView
• Switch
• ScrollBox
• Image2
• Line
• Link
• RichText
• Slider
• Calendar
• DataGrid
• Map
• TabPane
• Video
• ComboBox
• Popup

Single Bucket Constructors Examples

Below are some of the examples of the constructor usage using few widgets. There is no change in the Read - Write values of the properties.

To create a label with default text:

//Create a label with default text.
var label1 = new kony.ui.Label();

To create a label with text as "HelloWorld" that overrides the default value:

//Create a label with text HelloWorld.
var label1 = new kony.ui.Label({
    "text": "HelloWorld"
});

To create a label with text as "HelloWorld" and a skin defined with ID SkinLabel that overrides the default values:

//Create a label with text HelloWorld and skin SkinLabel.
var label1 = new kony.ui.Label({
    "text": "HelloWorld",
    "skin": "SkinLabel"
});

To create a Form with title MyForm and the specific title bar configuration properties:

//Create a Form with title MyForm and specific title bar configuration properties.
var frm1 = new kony.ui.Form2({
    "title": "MyForm",
    "titleBarConfig": {
        "renderTitleText": true,
        "titleBarLEftSideView": "button",
        "labelLeftSideView": "Back",
        "titleBarRightSideView": "button",
        "labelRightSideView": "Edit"
    }
});

Handling Widget IDs

Every widget in an application requires a unique Widget ID. If you construct a widget using the single bucket constructor, the widget ID is not mandatory. Following are the implications, if you do not pass a widget ID while creating a widget:

• The framework will create a unique widget ID
• A JavaScript null value will be returned if you try to read the widget ID.
• You will not be able to reference the widget through a form or another widget hierarchy.

To create a label with default text, but using the specified ID:

//Create a label with default text and specified ID.
var label1 = new kony.ui.Label({
    "id": "username"
});

To create a label with default text and unique platform generated internal ID:

//Create a label with default text and unique platform generated internal ID.
var label1 = new kony.ui.Label();
kony.print(label1.id); // will print null

 

Default Skins and Skin Fallback

When the widgets are created using single bucket constructor without the skins, then the default skin is applied to ensure that the widget look and feel is acceptable and also consistent across the platforms. f you do not apply any skin to the widget while creating it, at run time the below skins are applied to the widgets as default skins.

Widget	Skin	Additional Skins
Form2	slForm	"titleBarSkin":"slTitleBar"
TextArea2	slTextArea
TextBox2	slTextBox
HBox	slHbox
Button	slButtonGlossBlue	"focusSkin": "slButtonGlossRed"
CheckBoxGroup	slCheckBoxGroup
ListBox	slListBox
Label	slLabelSk
RadioButton	slRadioButtonGroup
Camera	slCamera
ImageGallery2	slImageGallery
Phone	slPhone
PickerView	slPickerView
Switch	slSwitch
ScrollBox	slScrollBox
Line	slLine
Link	slLine
RichText	slRichText
Calendar	slCalendar
Video	slVideo
ComboBox	slComboBox
Popup	slPopup
SegmentedUI2		"rowSkin":"seg2Normal", "rowFocusSkin":"seg2Focus" "sectionHeaderSkin":"sliPhoneSegmentHeader"
HorizontalImageStrip2	Borderskin
TabPane		"activeSkin":"tabCanvas","inactiveSkin": "tabCanvasInactive"
Slider		"leftSkin":"slSliderRightBlue", "rightSkin":"slSliderRightBlue"
DataGrid		"headerSkin":"slDataGridHead", "rowNormalSkin":"slDataGridRow", "rowFocusSkin":"slDataGridFocusedRow", "rowAlternateSkin":"slDataGridAtAltRow"