Importing custom controls into a form

Mark Birbeck's picture

Linking to a set of bindings rules

We saw earlier how we generally provide an extension 'hook' on a base control that allows us to extend it with our custom functionality. The binding is expressed in a set of binding rules, so the first step is to provide a link to some rules. We do this by using the HTML link element, as follows:

<?xml version="1.0" encoding="utf-8" ?>
<html
 xmlns="http://www.w3.org/1999/xhtml"
 xmlns:xf="http://www.w3.org/2002/xforms"
>
  <head>
    <title>Map widget</title>
    <link rel="bindings" href="my-bindings.xml" />
  </head>
  <body>
    <xf:output value="'52;4'" appearance="geolocation" />
  </body>
</html>

Defining binding rules

The binding rules simply map some expression to a file that defines the behaviour we want. For example, to attach the functionality from the file geo.xbl to all xf:output controls that have appearance="geoposition" we would use the following rule (in my-bindings.xml):

<?xml version="1.0" encoding="UTF-16"?>
<bindings xmlns="http://www.x-port.net/bindingresolver/" xmlns:xf="http://www.w3.org/2002/xforms">
  <binding match="xf:output[@appearance='geoposition']/xf:pe--value" binding="geo.xbl" />
</bindings>

Note that we don't actually bind to the xf:output control as a whole, but the ::value part. This is because a control is actually made up of not just the interactive part (such as an input box), but also includes a label, as well as help, hint and alert messages. Since we may want to bind to each of these items with different custom controls, we always bind to the smallest--or most specific--part of a control that we can. (For more on this, see Anatomy of a control.)

Now that we've made the custom control available to a form, it can be used in any of the ways that the equivalent base control can be used, as we saw earlier in Using custom controls in a form. Our next step is to define the control.