Button 

Definition

Provides any type of functionality in your application at the touch of the button. Hints can be displayed as the mouse cursor passes over the button, or as the mouse button is pressed but not released.

·        design

Defines the size and highlighting of the button.

¡        STANDARD

Displays the button with the standard background and text color.

¡        SMALL

Displays the button with the standard background and text color and half of the STANDARD size.

¡        EMPHASIZED

Displays the button with the highlighted background and text color. You can also refer to the emphasized button as default button. Therefore only one emphasized button per form can be defined. If you use more then one "EMPHASIZED" button, the last button defined becomes "EMPHASIZED".

·        disabled

A boolean value that defines if the button is clickable. If the button is disabled it sends no event when you press a mouse button on the button. A disabled button has a different text color to show the user that it is disabled.

·        encode

A Boolean value that defines how the text in the button is interpreted. HTML text formatting commands (for example, <h1>, <i> etc.) can be used to change the display of the text. If there are no formatting commands in the text string, the encode attribute has no effect.

Example:

text = "<h1><i>Important</i></h1>"

encode = "false"       Browser output: 

the text string is rendered by interpreting the formatting commands.

 

encode = "true"       Browser output: 

the formatting commands are displayed and not interpreted.

·        id

Identification name of the button.

·        onClick

Defines the event handling method that will be processed when the user clicks on the enabled button. If you do not define a 'onClick' event the button can be clicked but no event is generated.

·        onClientClick

Defines the JavaScript fragment that is executed when the user clicks on the button. If both events ('onClick' and 'onClientClick') are specified, the 'onClientClick' event handling method is activated first. By default the 'onClick' event handling method is activated afterwards. In the JavaScript fragment you can cancel the activation of the 'onClick' event handling method with the command:

htmlbevent.cancelSubmit=true;

The 'onClientClick' event is useful to preprocess the form and only send the form to client if the preprocessing was successful (e.g. date validation, valid number format etc.) to save client/server interaction.

A button click usually activates the client/server interaction. If an input field has to be filled out for further processing, the JavaScript fragment can check the necessary input on the client side and display a message if the necessary input is missing, without server interaction.

 

To use JavaScript the JSP has to use the page tag (set page tag).

·        text

Defines the string of text placed centered on the button. If no text should be displayed in the button an empty string (null) can be used. The width of the button is automatically adjusted to the length of the text.

·        width

Defines the width of the button. The width of the button is automatically adjusted to the length of the 'text'. To see an effect of the 'width' attribute, 'width' has to be set higher as the width defined through the length of the 'text' string. The text string of the button is always placed centered on the button. If an empty (null) 'text' string is set no 'text' attribute is defined the width of the button is set according to the 'width' attribute.

·        tooltip

Defines the hint of the button which is displayed as the mouse cursor passes over the button, or as the mouse button is pressed but not released.

 

Attributes	M	Values	Usage
design		STANDARD (d) SMALL EMPHASIZED	Taglib design="STANDARD" Classlib setDesign(ButtonDesign.STANDARD)
disabled		FALSE (d) TRUE	Taglib disabled="FALSE" Classlib setDisabled(true)
encode		FALSE (d) TRUE	Taglib not avaliable Classlib setEncode(true)
id	*	String (cs)	Taglib id="OrderConfirm" Classlib setId("OrderConfirm")
text		String	Taglib text="Confirm" Classlib setText("Confirm")
width		Unit	Taglib width="125px" Classlib setWidth("125px")
tooltip		String	Taglib tooltip="Confirm order" Classlib setTooltip("Confirm order")

 

Events	M	Values	Usage
onClick		String (cs)	Taglib onClick="ProcessConfirm" Classlib setOnClick("ProcessConfirm")
onClientClick		String (cs)	Taglib onClientClick="alert(‘Hi’);" Classlib setOnClientClick("alert(‘Hi’);")

 

Example

using the taglib

<hbj:button          id="OrderConfirm"          text="Confirm"          width="125px"          tooltip="Click here to confirm order"          onClick="ProcessConfirm"          disabled="false"          design="STANDARD"          />

 

using the classlib

Form form = (Form)this.getForm();     Button button = new Button("button", "button");     button.setText("Confirm");     button.setWidth("125px");     button.setTooltip("Click here to confirm order");     button.setOnClick("ProcessConfirm");     button.setDisabled(false);     button.setDesign(ButtonDesign.STANDARD);     form.addComponent(button);

 

Result