<xbl:script>
element directly within the <xbl:xbl>
element:declareCompanion()
must match the component's binding name, for example:acme|multi-tool
acme|multi-tool
/xbl/acme/multi-tool/multi-tool.js
foo|bar
foo|bar
/xbl/foo/bar/bar.js
YAHOO.namespace("xbl.acme")
defines a namespace for your class. All the XBL components components that ship with Orbeon Forms are in the xbl.fr
namespace. If you are defining a component for your company or project named Acme, you could use the namespace xbl.acme
.ORBEON.xforms.XBL.declareClass()
defines your class as an XBL class:<xbl:binding>
. For example, if the binding is acme|multi-tool
, the class name is xbl-acme-multi-tool
.declareCompanion()
and declareClass()
create a JavaScript class and:instance()
method.container
attribute.this.container
to retrieve the outermost HTML element corresponding to your component.acme-my-input
inside your component, you get the HTML element corresponding to that input with the following jQuery:init
javascript-lifecycle
destroy
javascript-lifecycle
xformsUpdateReadonly
javascript-lifecycle
xformsUpdateValue
external-value
xformsGetValue
external-value
xformsFocus
focus
setFocus
focus
enabled
init()
method is not new in Orbeon Forms 2016.1, but when using the javascript-lifecycle
mode it is called automatically. Prior to Orbeon Forms 2016.1, or when not using the javascript-lifecycle
mode, it is called either via XForms event handlers, or as a side-effect of calls to setFocus()
or enabled()
.myFunction()
method on xforms-enabled
, write:instance()
factory function:xformsUpdateValue()
xformsGetValue()
fr:code-mirror
component: code-mirror.xbl
and code-mirror.js
.javascript-lifecycle
and the external-value
modes are enabled, just after the control is initialized,ORBEON.xforms.Document.setValue()
.xformsUpdateValue()
receives a string and must update the associated JavaScript control, making the value accessible to the user.xformsUpdateValue()
must return:undefined
(or not return anything).done()
method must be called once the value is known to have been fully applied. For instance:xformsGetValue()
after a new value has been set.done()
method), you can also return a JavaScript Promise
object (with a then()
method). The latter is the recommended way since JavaScript promises are implemented natively by all major browsers (except IE 11, but Orbeon Forms includes a polyfill for IE 11).ORBEON.xforms.Document.getValue()
.xformsGetValue()
returns a string obtained from the associated JavaScript control.xxbl:serialize-external-value
and xxbl:deserialize-external-value
attributes on <xbl:binding>
, you can create XPath expressions that transform the external value back and forth.fr:number
component uses this to communicate a display value, an edit value and a decimal separator to the client.xxbl:serialize-external-value
:xformsUpdateValue()
methodxxbl:deserialize-external-value
:xformsGetValue()
methodinit()
destroy()
xformsUpdateReadonly()
init()
method is called when the control becomes relevant, including:xxf:full-update
or xxf:dynamic
replace an entire block of HTML on the clientdestroy()
method is called when the control becomes non-relevant, including:xxf:full-update
or xxf:dynamic
replace an entire block of HTML on the clientxformsUpdateReadonly()
method is called when the control's readonly status changes.true
if the control becomes readonly and to false
if the control becomes readwrite.oxf:/oxf/xslt/utils/xbl.xsl
XSL file, and call xxbl:parameter()
function for each parameter, as in:xxbl:parameter()
are:<fr:currency>
element written by the user of your component. If your template matches on /*
, this will be the current node.parameterFooChanged
if "foo" is the name of your property. Parameters names are in lowercase and use dash as a word separator, while the method names use camel case. E.g. if your parameter name is digits-after-decimal
, you will defined a method parameterDigitsAfterDecimalChanged
.ORBEON.xforms.Document.dispatchEvent()
function. If you are calling it with custom events, make sure you are allowing the custom event names on the binding first: