Using Events

Ā 

Sample code:
Display file source:Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā PUISAMPLES/QDDSSRC(DROPD005D)
RPGLE source:Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā  PUISAMPLES/QRPGLESRC(DROPD005R)

Widgets in Profound UI can also respond to events, such as onclick or onchange.Ā  This allows us to add even more dynamic functionality to the Web application using client-side JavaScript code.Ā  There are two ways to write code for JavaScript events -- inline or in an external JavaScript file.Ā  When using an external file, you will generally place it on the IFS somewhere in the /www/profoundui/htdocs/profoundui/userdata/ folder.Ā  You should then reference the external JavaScript file from /www/profoundui/htdocs/profoundui/userdata/html/start.html using a <script> tag.

If the JavaScript functionality is fairly simple, writing the code inline may be preferred.Ā  Simply prompt the event in the Properties Window, and type the code.



Profound UI provides a number of useful JavaScript API to make coding easier.Ā  The two most commonly used API are described below:

  • pui.click() ā€“ submits a response to the server.Ā  This API can accept an optional parameter containing an ID or an object reference to a button, or a similar element, that has a bound response property to be sent to the server.Ā  Sample usage:

pui.click(); // send response to server pui.click(ā€œExitā€); // send response to server by triggering the Exit button.
  • getObj() ā€“ retrieves a reference to the DOM (browserā€™s Document Object Model) element given an element ID.Ā  The function can be used to retrieve and set the content or CSS style of an element.Ā  Sample usage:

getObj(ā€œCustBoxā€).value = ā€œā€; // clear the customer number box if (Number(getObj(ā€œAmountā€).innerHTML) < 0) getObj(ā€œAmountā€).style.color = ā€œRedā€; // if the content of the output field with the ID of Amount is less than 0, make the output field appear in red

Ā 

Note: JavaScript and element IDs are case sensitive.

Note: In addition to attaching events to widgets, you may also attach events, such as onload and onsubmit, to the screen itself.

Ā