Open topic with navigation

You are here: Creating a Switch Widget Using a Constructor: kony.ui.Switch

Switch Widget

The Switch widget is identical to the Switch Control (an on-off switch that is not customizable) in iPhone, and presents two mutually exclusive choices or states.

The Switch widget displays the current state. You must slide the control to select the other value.

Following are the real-time use cases of Switch widget:

Widgets are normally added to your Kony application using Kony Visualizer, but can also be added from code. For general information on using widgets in Visualizer, see Designing an Application in the Kony Visualizer User Guide.

For general information on the Switch widget see the Switch topic in the Kony Visualizer User Guide.

The Switch widget capabilities can be broadly categorized into the following:

Layout

Properties Description
bottom Determines the bottom edge of the widget and is measured from the bottom bounds of the parent container.
centerX Determines the center of a widget measured from the left bounds of the parent container.
centerY Determines the center of a widget measured from the top bounds of the parent container.
height Determines the height of the widget and measured along the y-axis.
left Determines the lower left corner edge of the widget and is measured from the left bounds of the parent container.
maxHeight Specifies the maximum height of the widget and is applicable only when the height property is not specified.
maxWidth Specifies the maximum width of the widget and is applicable only when the width property is not specified.
minHeight Specifies the minimum height of the widget and is applicable only when the height property is not specified.
minWidth Specifies the minimum width of the widget and is applicable only when the width property is not specified.
padding Defines the space between the content of the widget and the widget boundaries.
paddingInPixel Indicates if the padding is to be applied in pixels or in percentage.
right Determines the lower right corner of the widget and is measured from the right bounds of the parent container.
top Determines the top edge of the widget and measured from the top bounds of the parent container.
width Determines the width of the widget and is measured along the x-axis.
zIndex Specifies the stack order of a widget.
 

Internationalization

PropertiesDescription
Left Text i18n Key Specifies the key to be used for internationalization of the string specified in the leftSideText property.
Right Text i18n Key Specifies the key to be used for internationalization of the string specified in the rightSideText property.
 

Data Management

 
MethodsDescription
cloneWhen this method is used on a container widget, then all the widgets inside the container are cloned.

 

User Input Handling

EventsDescription
onScrollWidgetPosition This event callback is invoked by the platform when the widget location position gets changed on scrolling.
onSlide An event callback that is invoked by the platform when there is a change in the default selected value.
onTouchEnd An event callback is invoked by the platform when the user touch is released from the touch surface.
onTouchStart An event callback is invoked by the platform when the user touches the touch surface.
onTouchMove An event callback is invoked by the platform when the touch moves on the touch surface continuously until movement ends.
 
MethodsDescription
addGestureRecognizer This API allows you to set a gesture recognizer for a specified gesture for a specified widget.
 

Animations

MethodsDescription
animateApplies an animation to the widget.
 
PropertiesDescription
widgetSwipeMoveUsed to enable and configure the left or right swipe actions for a widget.

UI Appearance

PropertiesDescription
blur You can enable or disable a blur-effect for a widget(for example, a FlexContainer)
HeaderSkin Specifies the skin to be applied to the header of the switch.
nativeThumbLook Provides the native thumb look of the Switch.
opacity Specifies the opacity of the widget.
skin Specifies a background skin for Switch widget.
SwitchColor Specifies the foreground color( sliding bar) to the Switch.
viewType Specifies the appearance of the switch -- either the Windows 10 style or the Windows 8 style.

 

Enabling RTL

PropertiesDescription
retainContentAlignmentHelps to retain the content alignment of the widget while applying RTL.
retainFlexPositionPropertiesHelps to retain the left, right and padding properties while applying RTL.
retainFlowHorizontalAlignmentEnables you to change the horizontal flow of the widget from left to right.

Miscellaneous

PropertiesDescription
cursorTypeSpecifies the type of the mouse pointer used.
enableHapticFeedback Allows you to enable or disable haptic feedback on the Switch widget.
Header Specifies the header text to the switch.
leftSideText Specifies the text to be displayed on the left portion of the Switch.
rightSideText Specifies the text to be displayed on the right portion of the Switch.
selectedIndex Accessible only from code and it specifies the option of the Switch that must be shown as selected when rendered.

 

Configurations Common To All Widgets

PropertiesDescription
accessibilityConfig Enables you to control accessibility behavior and alternative text for the widget.
enableCache Enables you to improve the performance of Positional Dimension Animations.
isVisible Controls the visibility of a widget on the form.
parent Helps you access the parent of the widget.

 

Switch Widget Basics

Note: The Switch Widget is supported on iOS, Android, SPA, Windows Phone (7.5 and 8), and Windows 8 Tablets.

You can use a Switch Widget to present a user two simple, diametrically opposed choices that determine the state or choice of something.

Creating a Switch Widget Using a Constructor: kony.ui.Switch


var myswitch = new kony.ui.Switch(basicConf, layoutConf, pspConf);

Note: The configuration properties should be passed only in the respective configuration objects. Otherwise, the configuration properties are ignored.

Example

//The below function is the callback function for onSliderCallback event. 
function onSliderCallbck(swtch) {
    /*write your logic here*/
}

//Defining the properties for Switch.
var swtchBasic = {
    id: "swtch",
    info: {
        key: "switch"
    },
    leftSideText: "on",
    rightSideText: "off",
    skin: "swchSkin",
    selectedIndex: 0,
    isVisible: true,
    onSlide: onSliderCallbck
};

var swtchLayout = {
    margin: [5, 5, 5, 5],
    marginInPixel: false,
    widgetAlignment: constants.WIDGET_ALIGN_TOP_LEFT,
    containerWeight: 99
};

//Creating the Switch.
var swtch = new kony.ui.Switch(swtchBasic, swtchLayout, {})

//Reading the id of the Switch
alert("Switch id is ::" + swtch.id);

Customizing Appearances

You can customize the appearance of Switch widget. Most of the dimensions of Switch widget were previously unchangeable and even if users provided a different set of values, the values were not considered. Instead, the Switch widget is rendered with the set of configured values. Now, however, you can the dimensions of the Switch with new properties and new skins that have been introduced.

You can only customize Switch widgets in the Desktop Web platform.

How it Works

The following set of properties and skins are exposed so that you can customize the Switch widget. You can set the default values for those newly exposed values in the Switch section of the Property window as a platform-specific property.

Properties Exposed

Skins

You can use the existing normal skin for the track of the Switch and then expose another similar skin type tab for thumb in the Property window. You can set the four properties mentioned earlier in the Switch tab, where the properties will be present as a platform-specific property.

Alignment

The Switch is middle -left aligned with respect to the FlexContainer.

Note: If the width or height of the track/thumb exceeds the flex properties, the Switch widget is shown with the exceeded dimensions. The Switch widget is not clipped in this case.

IDE/Codegen Requirements

Backward Compatibility

Default Behavior

Important Considerations

The following are the important considerations for the Switch widget:

premCopyright © 2012 Kony, Inc. All rights reserved.
premCopyright © 2012 Kony, Inc. All rights reserved.

Open topic with navigation