You are here: Creating a Button Using a Constructor: voltmx.ui.Button

Button Widget

Button widget is a UI element that is used to trigger any actions. These actions can be navigating to another form, perform animations, interacting with a dialog box, etc.

A button displays text with a background image or a background color.

Button widget is employed in many scenarios where the user performs an on-click action on a button. Some of them are:

• Login and Logout: Login screen and Logout screen generally contain buttons to log in and log out of an application.

• Navigation: The previous and next buttons are used in applications to navigate to the previous form or next form.

• Dialog Box: Buttons are employed in dialog boxes to enable interaction between the user and the application.

• Modify Properties of other widgets: Button can modify properties of other widgets in the form, with an on-click action.

• Invoke Services: You can get data from the backend into the form, with an on-click action of a button. For instance, consider a form that contains a segment to be populated with employee details from the backend. A button in the form can be given an on-click action to invoke the services.

• Perform Animations: You can animate other widgets to move, rotate or scale using a button widget. The most common use case for this is the Hamburger menu. You can click on a hamburger menu to move a container which is not in the device frame to the visible area.

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

For general information on the Button widget see the Button topic in the Volt MX Iris User Guide.

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

• Layout
• UI Appearance
• Animations
• Data Management
• 3D Touch
• User Input Handling
• Enabling RTL
• Miscellaneous
• Configurations Common To All Widgets

Layout

UI Appearance

  Animations

Data Management

3D Touch

User Input Handling

Enabling RTL

Miscellaneous

Configurations common to all widgets

Button Widget Basics

Creating a Button Using a Constructor: voltmx.ui.Button

var button1 = new voltmx.ui.Button(basicConf, layoutConf, pspConf);

• basicConf is an object with basic properties.
• layoutConf is an object with layout properties.
• pspConf is an object with platform specific properties.

Note: The configuration properties should be passed only in the respective configuration objects otherwise they are ignored

Example

//The below function is the callback function for onClick event call.
function onClickCallBack() {
    //Write your logic here.
}

//Defining the button with onClick:onClickCallBck.
var btnBasic = {
    id: "Onbutton",
    isVisible: true,
    skin: "btnSkin",
    focusSkin: "btnFSkin",
    text: "Click Here",
    onClick: onClickCallBck
};

var btnLayout = {
    containerWeight: 100,
    padding: [5, 5, 5, 5],
    margin: [5, 5, 5, 5],
    hExpand: true,
    vExpand: false,
    displayText: true
};

var btnPSP = {
    pressedSkin: "presSkin",
    externalURL: "https://www.abcd.com",   
    submitURL: "https://www.abcd.com",   
    glowEffect:true  
 };

 //Creating the button.
 var Onbutton = new voltmx.ui.Button(btnBasic, btnLayout, btnPSP);

Customizing a Button’s Appearance

You can customize the appearance of the button using the following properties:

• widgetAlignment: Specifies the alignment of the widget.
• margin: Defines the space around a widget.
• padding: Defines the space between the content of the widget and the widget boundaries.
• skin: Specifies the skin.
• focusSkin: Specifies the focus skin.
• hExpand: Expand the button horizontally.
• vExpand: Expand the button vertically.

Important Considerations

The Button Widget has the following considerations:

• You can specify a background image for a Button. You can set the image from the Button skin for both normal and focus skins.

• To avoid jumping effect or to avoid overlap of neighboring widgets, you must ensure that the image for normal and focus skins are of the same size.