JavaScript API

Use

The JavaScript API allows access to HTMLB components in JavaScript programs. Every component which is capable of client side eventing, has to set the "jsObjectNeeded" attribute (inherited from the Component component) to TRUE so that the component can be accessed with the JavaScript API. See also the EventValidationComponent description for more details.

Example for InputField

Using the InputField component

    Form form = (Form)this.getForm();
    InputField inf2 = new InputField("currencyDisplay");
 // Enable JavaScript object generation for access in JavaScript
    inf2.setJsObjectNeeded(true);
    inf2.setClientEvent(EventTrigger.ON_CHANGE, 
                       calculateCurrencyToFrom()");
    inf2.setBCD("100");
    inf2.setWidth("250px");
    form.addComponent(inf2);

Getting the InputField object in JavaScript

    function calculateCurrencyFromTo(){
         var funcName = htmlb_formid+"_getHtmlbElementId";
         func = window[funcName];
         var inputfield = eval(func("currencyDisplay"));
 // Now we have the inputField, so we can access it, for example 
 // set a new value
         if (inputfield)
                inputfield.setValue("100.23");
    }

Getting the InputField ID with Java

The IdD of a HTMLB component is generate by the HTMLB API. To get the Id of a component use:
    InputField inf2 = new InputField("currencyDisplay");
    String inputfieldID = pageContext.getParamIdForComponent(inf2);

The inputfieldID can now be used to access the component:
    <script> var inputfield = eval(inputfieldID);</script>

Components

The components that support client side eventing, like inputField and label, have a API for JavaScript that allow access and modification of the component on the client side.

Label

enabled

A boolean value that indicates if the component is enabled (=true) or disabled (=false).
id

Identification code of the component.

Properties	Methods
id	setEnabled()
isEnabled	setDisabled()

Button

enabled

A boolean value that indicates if the component is enabled (=true) or disabled (=false).
id

Identification code of the component.

Properties	Methods
id	setEnabled()
isEnabled	setDisabled()

InputField

enabled

A boolean value that indicates if the component is enabled (=true) or disabled (=false).
id

Identification code of the component.
value

Content of the inputField.

Properties	Methods
id	setEnabled()
isEnabled	setDisabled()
	setValue(value)
	getValue()

CheckBox

checked

A boolean value that indicates if the component is checked (=true) or disabled (=false).
enabled

A boolean value that indicates if the component is enabled (=true) or disabled (=false).
id

Identification code of the component.

Properties	Methods
id	setEnabled()
isEnabled	setDisabled()
	setChecked(boolean)
	getChecked()

DropDownListBox & ListBox

checked

A boolean value that indicates if the component is checked (=true) or disabled (=false).
enabled

A boolean value that indicates if the component is enabled (=true) or disabled (=false).
id

Identification code of the component.
index

Index of selected entry of the list box, "top down", starting with 0.
option

An entry in the list box.
value

The key of an entry in the list box.

Properties	Methods	Comment
id	setEnabled
isEnabled	setDisabled
	setIndex(index)	Set the selected entry by index number.
	getIndex()
	addOption(key, visibleText)
	removeOption(key)
	setValue(Key)	Sets the selected entry by key.
	getValue()	Get key of the currently selected entry.

RadioButton

To get the radio button object use:
    function calculateCurrencyFromTo(){
         var funcName = htmlb_formid+"_getHtmlbElementId";
         func = window[funcName];
         var rb = eval(func(htmlb_radiobuttonmodifier+"radiobutton"));
          .
          .
    }

enabled

A boolean value that indicates if the component is enabled (=true) or disabled (=false).
id

Identification code of the component.

Properties	Methods
id	setEnabled()
isEnabled	setDisabled()

TableView

The htmlbevent object provides methods to get and set following information:

Method	Description
htmlbevent.obj.getClickedColumn()	Returns the column index of the column that has been clicked.
htmlbevent.obj.getClickedRow()	Returns the row index of the row that has been clicked.
htmlbevent.obj.getClickedRowKey()	Returns the row key of the row that has been clicked.
htmlbevent.obj.getSelectedRow()	Returns the index of the selected row (single select mode).
htmlbevent.obj.getSelectedRows()	Returns an array with the indices of all selected rows (multiple select mode).
htmlbevent.obj.getSelectedRowKey()	Returns the key of the selected row (single select mode).
htmlbevent.obj.getSelectedRowKeys()	Returns an array with the keys of all selected rows (multiple select mode).

Example

myTable.setOnClientRowSelection("alert('You clicked on row with key
             '+htmlbevent.obj.getClickedRowKey());
           alert('Selected rowkeys are:
             '+htmlbevent.obj.getSelectedRowKeys())");