cObject
---cWebObject
------cWebBaseUIObject
---------cWebBaseDEOServer
------------cWebBaseControl
---------------cWebButton
Use the cWebButton class to create a clickable button control in your web view or dialog. When clicked, buttons produce a specific action with an immediate response. Cancel and OK are typical uses of buttons.
Object oOkBtn is a cWebButton
Set psCaption to "Ok"
Set piColumnIndex to 0
Set piColumnSpan to 1
Procedure OnClick
Send Info_Box "Hello World" "My First WebApp"
End_Procedure
End_Object
The Web Framework uniquely identifies each web object via a combination of the object hierarchy (object nesting), and object name. This means that web object names must be unique within their parent (i.e. each sibling web object must have a unique name).
Button controls must be placed within a web container (e.g. cWebPanel, cWebView or cWebModalDialog).
Example:
Object oHelloDlg is a cWebModalDialog
//...
Object oOkBtn is a cWebButton
//...
End_Object
End_Object
In the above code, a cWebButton object is placed inside a cWebModalDialog.
Button controls may not be nested inside other web controls. You may not mix web panels and web controls as sibling objects.
Web controls are positioned by HTML flow layout (left to right, top to bottom). The relative position of the control in this flow is determined by the location of the object declaration in your code.
In addition to the flow layout, each web container is divided into a fixed number of equal-width columns (piColumnCount). Child controls are aligned to these columns to determine their horizontal position and width.
Set piColumnIndex to position a button control in a particular column of the parent container.
Set piColumnSpan to determine the width of the button control i.e., the number of columns occupied by the control. The actual width is determined by the number of columns and the width of the parent container.
For more information, see Positioning and Layout of Controls.
Each button control has a pre-determined height according to the web application's CSS theme (psTheme). You can also instruct a button control to occupy all available vertical height in its parent container by setting pbFillHeight to true.
Button clicks can be handled on the server by writing DataFlex code. A click can also be handled on the client (browser) by writing JavaScript code. Writing a server-side DataFlex handler is the simplest way to handle button-click events.
Write an OnClick event handler in your button object to perform some action when the button control is clicked.
Set pbServerOnClick to False to prevent the OnClick event from being sent to the server. By default, this property is True.
To write a client-side button click handler using JavaScript, set the psClientOnClick property to the name of the JavaScript function that will execute when the button is clicked.
This control can be used as a valid drop target by registering it as such in a cWebDragDropHelper object.
The supported actions for this control are:
- C_WebDropOnControl
This allows the control to accept data dragged from elsewhere in the control (if configured that way) and can also be used to accept files when registered within a cWebDragDropFileHelper.
Set psCaption to specify the text displayed on the button.
The color of a button control is determined by the web application's CSS theme (psTheme). You can define additional or replacement CSS styles in your web application's application.css file. Set psCSSClass to the CSS class name you would like to be applied to a button control.
Set psBackgroundColor and psTextColor to directly override the control's CSS themed color.