Client-Side Event Handlers

JavaScript and DataFlex Classes

HTTP Request Handler

 

Most framework events can be handled in JavaScript as well. This is considered to be advanced technology and should be used with precaution. The main reason for handling an event on the client should be performance. Instead of adding an additional round-trip to the server executing a function in JavaScript can be more efficient. These events have two properties that control how they are handled. The pbServer… (pbServerOnClick, pbServerOnChange, pbServerOnBlur, …) properties control if an event is sent to the server. The psClient… (psClientOnClick, psClientOnChange, psClientOnBlur, …) properties can be used to attach an event handler on the client by setting it to the name of a JavaScript function.

Object oCustomerStatus is a cWebCheckBox

    Entry_Item Customer.Status

    Set piColumnIndex to 0

    Set psCaption to "Active Customer"

    Set piColumnSpan to 5

    Set pbShowLabel to True

    

    Set pbServerOnChange to True

    Procedure OnChange String sNewValue String sOldValue

        WebSet pbEnabled of oCustomerName to (sNewValue <> "N")

    End_Procedure

End_Object

The example above shows how to handle the OnChange event of a cWebCheckbox on the server. In this example the enabled state of another field is changed based on the new value. To move this logic to the client the first step is to create a JavaScript event handler function.

function handleStatusChange(oEvent){

    var sVal = oEvent.oSource.get("psValue");

    

    oWebApp.oCustomer.oWebMainPanel.oCustomerName.set("pbEnabled", (sVal !== "N"));

}

The JavaScript function above needs to be placed inside index.html or in a separate JavaScript file included from index.html. Note that it gets the event object as a parameter. This object contains information about the event and is based on the df.events.JSEvent class. The oSource property contains a reference to the object that has thrown the event (oCustomerStatus in our sample). The event object also contains the same parameters as the server-side handler gets in the aParams array property. The sample uses the get method to get the value of the psValue web property and sets the pbEnabled property using the set method. Note that the entire object structure can be accessed using the dot notation.

Now this handler needs to be attached to the oCustomerStatus object which is done by setting the psClientOnChange property.

Object oCustomerStatus is a cWebCheckBox

    Entry_Item Customer.Status

    Set piColumnIndex to 0

    Set psCaption to "Active Customer"

    Set piColumnSpan to 5

    Set pbShowLabel to True

    Set pbServerOnChange to False

    Set psClientOnChange to "handleStatusChange"

End_Object

 

Previous Topic: JavaScript and DataFlex Classes

Next Topic: Studio Support for Web Application Development

 

See Also

Developing Web Applications