Button is one of the most frequently used controls in Morfik. It provides the basic mechanism for interactivity by allowing the user to initiate an action. The action initiated by a Button could be anything ranging from basic navigation to complex operations on application data. Button has one of the most versatile visual appearances amongst Morfik controls and can be used in a variety of situations.


button32.png Key properties: Name, Caption
Key events: On Click
Server Code: Button = Class(TWebControl)
Browser Code: Button = Class(TWebControl)

Graphical States

The Button control emulates the behaviour of a Push-button and as such it implements additional graphical states for when the button is pushed into the down state. To see the down states at design time you need to set the GroupIndex property to any value other than zero. The following graphical states are supported by Button.

States Appearance Description
Normal ButtonNormal.jpg The default state for the control when no other state is active.
Mouseover ButtonMouseover.jpg This view is displayed when the user moves the cursor over the control
Disabled ButtonDisabled.jpg This view is displayed when the control's ability to receive input is disabled.
Mousedown ButtonMousedown.jpg This view is displayed when the user presses the mouse left button down.
Down ButtonDown.jpg This view is only displayed if the GroupIndex property is non-zero and the Down property is set to true.
Down Mouseover ButtonDownMouseover.jpg This view is only displayed if the GroupIndex property is non-zero and the user moves the cursor over the control
Down Mousedown ButtonDownMousedown.jpg This view is only displayed if the GroupIndex property is non-zero and the user presses the mouse left button down.

Learn more about Morfik Styles and Themes.

Layout

The dimension properties for a button follow the same general pattern as for all other controls in Morfik. There are two additional properties that relate to the position of the icon inside the button. These properties are Icon.HorzMargin and Icon.VertMargin which determine the relative position of the icon within the button.


Button.jpg
'

Properties

Property Description
Alignment The Alignment property is used to align the Caption text with the left, right, or center of the Control.
Border Style The BorderStyle property of the control defines how and if a border will be drawn around the control.
Border Color The BorderColor property specifies the color that should be used for drawing a rectangular border around the Control. Note: the border will not be visible unless the BorderStyle and BorderWidth properties are also set.
Border width The Border Width property specifies the line width used to draw the rectangular border around the Control. Note: the border will not be visible unless the BorderColor and BorderStyle properties are also set.
Color The Color property specifies the background color of the Control.
Caption Caption is the most frequently used property of a Text orientated control as it allows setting and reading of the content (all the text) that is displayed by the control. This property can be bound to a database table field as to automatically display its contents and allow editing of them.
Cursor The Cursor property, if set, causes the appearance of the mouse cursor to change as it moves over the Control.
Default If the Default property is set to true, the user may "click" the button by pressing the Enter key, even if another non-Button control has input focus.
Down The Down property specifies the button which is selected inside the group. It has no effect if GroupIndex property is set to 0.
Enabled If the Enabled property is set to false, the Control's state or value cannot be changed by the user.

Note For Timer Control: This property controls whether the Timer event will be triggered at the time interval specified in the Interval property. If the Enabled property is set to false, the Timer event will not be triggered.

Font The Font property (and its sub-properties Color and Name) is used to indicate which font should be used for drawing the text in the Control.
Group Index The GroupIndex property identifies the logical group to which the Button belongs.
Height The Height property specifies the vertical extent of the Control. Note: if the CanGrow or CanShrink properties are set, the actual height of the Control at run time may be different.
Hint The Hint property, if set, specifies the text of a tooltip that is displayed when the user moves the cursor over the control.
Horizontal Placement The HorizontalPlacement property, if set, governs how the Control adjusts its size and position in response to changes in the horizontal dimensions of its parent.
Icon The Icon property allows the developer to specify an image to be displayed in the Control. Use the Icon.Picture subproperty to specify the image file. Use the Icon.HorzAlign, Icon.HorzMargin, Icon.VertAlign, Icon.VertMargin subproperties to specify the position of the image within the Control.
Left The Left property specifies the horizontal position of the Control in the form.
Name The Name property specifies the identifier used to reference the control from browser- or server-side code.
Opacity The Opacity property determines the extent to which the Control obscures any controls placed in its background. A value of 0 means that background controls are fully visible, whereas a value of 100 means that background controls are completely obscured.
Padding The Padding property specifies the space between the border and the content of the editor.
Tab Order The TabOrder property allows the developer to specify the order in which controls should receive input focus when the user steps through them using the tab key.
Top The Top property specifies the vertical position of the Control in the form.
Vertical Placement The VerticalPlacement property, if set, governs how the Rectangle adjusts its size and position in response to changes in the vertical dimensions of its parent.
Visible The visible property is used to make controls visible or invisible. Invisible controls are frequently used to allow for easy access to information from a database table field, if the control is bound to one.
Width The Width property specifies the horizontal extent of the Form/control.

Events (browser-side)

Event Description
On Click The most commonly used event for a TextLabel control is the OnClick event, which should be handled to execute whatever action is intended when a control is clicked.
On Blur Event This event is fired within the browser when a control loses focus either by the pointing device or by tabbing navigation.
On Double Click This event is fired when the user clicks on a control within the browser.
On Focus This event is fired within the browser when a control receives focus either by the pointing device or by tabbing navigation.
On Key Down This event is fired within the browser when a key is pressed down.
On Key Up This event is fired within the browser when a key is released.
On Mouse Down This event is fired within the browser when the mouse button, or any other pointing device button, is pressed while it is over a control. On a PC-based mouse, it specifically relates to the left-hand mouse button being depressed.
On Mouse Out This event is fired when the mouse pointer, or any other pointing device button, is moved out of the region defined by a control.
On Mouse Over This event is fired when the mouse pointer or any other pointing device is over (within the region defined by) a control.
On Mouse Up This event is fired within the browser when the mouse button, or any other pointing device button, is released over a control. On a PC-based mouse, it specifically relates to when the left-hand mouse button is being released.
On After Pushed Or Pulled This event is fired within the browser after the position of a control has changed in response to a change in the content of a sibling control.
On Before Pushed Or Pulled This event is fired within the browser before the position of a control is changed in response to a change in the content of a sibling control.

   

Events (server-side)

Event Description
On After Print This event is fired on the server by a Control after its HTML (or in the case of Report generation, PDF) content is generated.
On Before Print This event is fired by a control on the server before control’s HTML (or in the case of Report generation, PDF) content is generated.
On Print Style This event is fired on the server to allow for CSS style changes when the HTML representation of a control is being constructed.

   

Remarks

Data Binding

No property of a button can be bound to a field from a data source

Button Icons

Use Icon property to specify image displayed on the button and its position relative to the text. Please note that currently setting icon properties does not affect position of the text, which is subject to change in Morfik 3.

Button Groups

Group of buttons can be used to represent Toolbar or Menu-like interfaces, such as those found in Book Collector demo or Morfik main web site. In such a group only one button can be pressed (selected) at a time. To achieve this functionality you need to place a number of buttons in the same container (or band) and set the GroupIndex property to the same (non-zero) integer value. With the GroupIndex property set it's possible to customize appearance of a button in the Down state (when one of the button is pressed). Setting the Down property at run-time will force one of the buttons to become pressed and other buttons in the group to be released.

Syntax

FX Code

  Button1.Down := True;

Related Topics

Back to top