Thursday, May 19, 2016

JavaScript components made easier

Orbeon Forms's toolbox, which presents the choice of form controls available when you build a form, is fully customizable. Each form control points to a file containing information about the control and, in the case of custom controls (also known as components), the behavior of the control itself.

Some components do not require any custom JavaScript code: you implement all the logic with XForms. These components often combine other existing controls (such as a date components made of separate input fields or dropdown menus) and "glue" them together, visually as well as functionally (for example the value of multiple fields are put together to build an ISO date string).

On the other hand some components encapsulate functionality mainly implemented in JavaScript. And in such cases, XForms and JavaScript must communicate. For example, when a component becomes visible, some JavaScript initialization must run. Similarly, a user interaction might dispatch a JavaScript event which must result in a change of the control's value in the form.

Orbeon Forms does this with the help of a JavaScript class called the component's companion class. Each JavaScript-based component defines such a class, which handles the component's lifecycle and holds custom data and functions. One instance of this class is automatically created by Orbeon Forms for each instance of relevant (visible) control. We call these instances companion instances.

And the good news is that since Orbeon Forms 2016.1, a new javascript-lifecycle mode lets Orbeon Forms handle important aspects of the component's lifecycle. This makes it much easier to implement JavaScript-based components.

All the details are available in the documentation of JavaScript Companion Classes. We hope you'll like this new feature of Orbeon Forms 2016.1!

No comments:

Post a Comment