Knowledge Base > Page Editor > UI Parts > Button

An Image button is a UI part that allows the user to perform an action associated with it. Image buttons are used to display a button with a back ground and foreground image.

Step 1: To add an Image Button click on the Buttons tab in the UI toolbox.

mobilous_appexe_npe_myproject_uipart_buttons1

Step 2: Drag and drop the Image button on the page.

mobilous_appexe_npe_myproject_uipart_buttons_imagebutton_default

Step 3: When the user drags and drops a Image Button on the page, its properties appear automatically on the "Properties Palette window" on the right hand side. User can view the UI part properties by clicking on it's object figure whenever required. User can also edit each property to change the UI part object's figure as shown below.

mobilous_appexe_npe_myproject_uipart_buttons_imagebutton_property

List of Properties:

Property

Description

Type

mobilous_appexe_npe_myproject_uipart_buttons_imagebutton_property_type

Name/Identifier

The Name defines the identity of an Image Button and can be used in the future to refer to it. This should be a unique name and should not be the same as any other UI part in the page being built.

Foreground Image

The Foreground Image property allows the user to set the desired foreground image that the user would like to display on the page within the Image button.

Background Image

The Background property allows the user to set the desired background image that the user would like to display on the page within the Image button. If there is no image then default image will be displayed.

On Tap - Foreground

The Image – on tap property allows the user to set the desired foreground image that the user would like to display on the button while tapping on it.

On tap - Background

The Back ground – on tap property allows the user to set the desired background image that the user would like to display on the button while tapping on it.

Border Width

Border Width property allows user to set the width of the UI part.

Border Color

Border Color property allows user to set the color of the Border Line.

Border Transparency

Border Transparency property allows user to set the visibility level of the Border Line.

Draggable

Image Button can be Dragged on the Page at the runtime if Draggable property is selected.

Hidden

The Hidden property if checked will hide the Image Button UI on different runtimes or platforms.

Functions

mobilous_appexe_npe_myproject_uipart_buttons_imagebutton_property_functions

Functions act as trigger to launch the actions when a particular task is performed. To know more about Functions click here.

On Tap

The event will occur when the user taps the button.

On flick (Left to Right)

The event will occur when the user flicks (slight movement of UI on touch) the button from Left to Right direction.

On flick (Right to Left)

The event will occur when the user flicks (slight movement of UI on touch) the button from Right to Left direction.

Geometry

mobilous_appexe_npe_myproject_uipart_buttons_imagebutton_property_geometry

Position : X

Sets the position of image button on the page horizontally.

Position : Y

Sets the position of image button on the page vertically.

Width

Sets the width of image button on the page.

Height

Sets the height of image button on the page.

Rotation(In Degrees)

Rotates the UI Part as per specified Degrees on the page.

Please Note:

For Android: Image Name should be a-z 0-9, eg alpha1.png.

Other Image Names like

a)icon.png (default android icon filename)

b)Upper case on filename and ext. name. eg ALPHA. PNG

c)Numeric filename e.g 123.png

d)Other characters aside from a-b 0-9 like @lph!.png

e)CJK (Chinese, Japanese and Korean) characters

are not supported.

Page after setting Property:

mobilous_appexe_npe_myproject_uipart_buttons_imagebutton_part