Wednesday, March 21, 2012

Be focused!

Contrary to what the title might suggest, this isn't a post on personal productivity or self-realization! Instead, we will be talking about keyboard focus.

We recently made a number of improvements to focus handling in Orbeon Forms, on two fronts:
  1. The XForms engine is more aware of which control owns focus.
  2. Focus in/out events are now handling container controls.
Say you have a group containing two fields: name and email, followed by a save button:

This corresponds to the following simplified XForms:
<group id="name-and-email">
    <input id="name" ref="name"/>
    <input id="email" ref="email"/>
<trigger id="save"/>
Starting with initial focus on name, when you navigate from the name field to the email field to the save button, focus events used to be dispatched as follows:
  1. DOMFocusOut on name
  2. DOMFocusIn on email
  3. DOMFocusOut on email
  4. DOMFocusIn on save
With the recent changes, you are also informed of the fact that focus has left the group:
  1. DOMFocusOut on name
  2. DOMFocusIn on email
  3. DOMFocusOut on email
  4. DOMFocusOut on name-and-email
  5. DOMFocusIn on save
Of course this works for DOMFocusIn as well, nested groups, and in fact any grouping control, including repeats, switches, and XBL controls. Focus is not only updated upon the user navigating between controls, but also when the user interface updates following UI refreshes and actions such as setfocus, setindex, toggle, show/hide, and insert/delete.

This behavior also makes perfect sense for XBL controls which are composites of other XForms controls. Say you have a composite control for dates with multiple fields:

You use this control this way in Orben Forms:
<fr:fields-date ref="date"/>
From the component user's perspective, fr:fields-date gets focus in/out events as if the composite control was a a single control. This satisfies the requirements for abstraction that come with XBL components, and in effect works like event retargeting specified by XBL 2 and the HTML Shadow DOM.

To learn all the little details, see the documentation.

No comments:

Post a Comment