Show TOC

Component documentationJavaScript API Locate this document in the navigation structure

 

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

Syntax Syntax

  1.     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);
    
End of the code.

Getting the InputField object in JavaScript

Syntax Syntax

  1.     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");
        }
    
End of the code.

Getting the InputField ID with Java

Syntax Syntax

  1. 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>
    
End of the code.
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

Syntax Syntax

  1. To get the radio button object use:
        function calculateCurrencyFromTo(){
             var funcName = htmlb_formid+"_getHtmlbElementId";
             func = window[funcName];
             var rb = eval(func(htmlb_radiobuttonmodifier+"radiobutton"));
              .
              .
        }
    
End of the code.
  • 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

Syntax Syntax

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