How do I add design-time properties to this XBL control? - orbeon

Question

Using Orbeon, I have the following XBL for a simple control:
<xbl:xbl xmlns:xh="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xi="http://www.w3.org/2001/XInclude"
xmlns:xxi="http://orbeon.org/oxf/xml/xinclude"
xmlns:xxf="http://orbeon.org/oxf/xml/xforms"
xmlns:fr="http://orbeon.org/oxf/xml/form-runner"
xmlns:saxon="http://saxon.sf.net/"
xmlns:xbl="http://www.w3.org/ns/xbl"
xmlns:xxbl="http://orbeon.org/oxf/xml/xbl"
xmlns:nrs="http://nrs.foo/2014/xml/xbl">
<xbl:script src="/xbl/nrs/foo/foo.js"/>
<xbl:binding id="nrs-foo" element="nrs|foo" xxbl:mode="lhha binding value">
<metadata xmlns="http://orbeon.org/oxf/xml/form-builder">
<display-name lang="en">Foo</display-name>
<templates>
<view>
<nrs:foo>
<xf:label ref=""/>
<xf:hint ref=""/>
<xf:help ref=""/>
<xf:alert ref=""/>
</nrs:foo>
</view>
</templates>
</metadata>
<xbl:template>
<xf:group xxbl:scope="outer">
<xf:group xbl:attr="model context ref bind">
<!-- Constructor -->
<xf:group xxbl:scope="inner">
<xxf:script id="xf-en" ev:event="xforms-enabled">YAHOO.xbl.nrs.foo.instance(this).init();</xxf:script>
</xf:group>
</xf:group>
<xf:input class="nrs-foo-json" ref="xxf:binding('nrs-foo')" xxbl:scope="inner" />
</xf:group>
</xbl:template>
</xbl:binding>
.. and accompanying JS module:
(function() {
var $ = ORBEON.jQuery;
var Document = ORBEON.xforms.Document;
YAHOO.namespace("xbl.nrs");
YAHOO.xbl.nrs.Foo= function() {};
ORBEON.xforms.XBL.declareClass(YAHOO.xbl.nrs.Foo, "xbl-nrs-foo");
YAHOO.xbl.nrs.Foo.prototype = {
fooInput : null,
init: function() {
var self = this;
self.fooInput = $(this.container).find( '.nrs-foo-json' );
// get design time property
},
};
})();
How would I modify the XBL to get a design-time property (say a string called 'URL', that I can configure on the properties panel in the form designer), that is stored in the form definition and I can access in the JS code (at place marked by comment)?

Answer 1

Check how it is done in autocomplete.xbl, and more specifically at the the content of <control-details> inside <metadata>. In that case the value set in Form Builder through the Control Settings dialog ends up in the resource="..." attribute on the control, and accessed in the XBL through the resource-avt variable.
(Note that there are some complications there as we want the value to be interpreted as an AVT, and the variable to be accessible both in the inner and outer scope, but hopefully this example helps you get the idea.)