Button

A regular button.

This is what a button looks like:

Example: see Opening a New Widget upon Button Click example to learn how to execute an action upon button click, e.g. open another widget.

Common Properties

Width, Height, Bindings, Enabled, Visible, Foreground, Background, Opaque, Border, Font, Cursor, Tooltip, Focusable, Popup Menu

Custom Properties

Text

(Default Property)

Text of button label.

Buttons support rich multi-line HTML texts with formatting. To enable HTML start value Text property with <html> tag: <html>Line <b>1</b><br>Line <b>2</b>

Property name: text

Property type: String

Alignment

Horizontal alignment of text within button display area.

Possible values:

Description

Value

Left

2

Center

0

Right

4

Property name: horizontalAlignment

Property type: Integer

Vertical Alignment

Vertical alignment of text within button display area.

Possible values:

Description

Value

Top

1

Center

0

Bottom

3

Property name: verticalAlignment

Property type: Integer

Margins

Space between the border and the label at each of its edges. Margins value has the following fields:

Field

Name

Type

Top

top

Integer

Left

left

Integer

Bottom

bottom

Integer

Right

right

Integer

Property name: margins

Property type: DataTable

Operations

List of widget actions caused by button activation.

This list may contain zero or more of the following operations:

  • Submit. This action triggers submit event of a root panel.
  • Logout. This action triggers logout event of a root panel.
  • Close. Stops widget execution and closes its window.

Property name: operations

Property type: Data Table

Icon

Image shown on the button. If NULL, no image will be shown.

Property name: icon

Property type: Data Block

Icon Text Gap

Defines the space between the text and the icon.

Property name: iconTextGap

Property type: Integer

Pressed Icon

Image shown on the button when the button is pressed. If NULL, the default image will be shown.

Property name: pressedIcon

Property type: Data Block

Disabled Icon

Image shown on the button when the button is disabled. If NULL, the Disabled Icon will be auto-generated from normal Icon.

Property name: disabledIcon

Property type: Data Block

Rollover Icon

Image shown on the button when a mouse hovered over the button. If NULL, the default image will be shown.

Property name: rolloverIcon

Property type: Data Block

Focus Painted

Flag that controls drawing of a dotted-stroke rectangle inside the button when it has focus.

This option should be disabled to make icon-only buttons look better.

Property name: focusPainted

Property type: Boolean

Content Area Filled

Flag that controls filling of button content area.

This option should be disabled to make icon-only buttons look better.

Property name: contentAreaFilled

Property type: Boolean

Common Events

Hidden, Shown, Moved, Resized, Mouse Clicked, Mouse Pressed, Mouse Released, Mouse Entered, Mouse Exited, Mouse Moved, Mouse Wheel Moved, Key Typed, Key Pressed, Key Released, Focus Gained, Focus Lost

Custom Events

Click

This event fires when a user presses and releases the left mouse button while hovering over the button component.

Use the Click event for reacting to mouse clicks. Do not use Mouse Clicked or Mouse Pressed events, because those events do not handle mouse movement between pressing and releasing the mouse button.

Event name: click

Was this page helpful?