Building composite controls with switch, case and toggle

The XForms switch, case and toggle elements are often used to implement a tabbed view in complex applications. This article demonstrates how they can also be employed at a much finer granularity to build individual composite controls.

This approach can be of particular use when the available display area is severely limited, as the following code shows:

  1. <xf:switch>
  2. <xf:case id="case-display">
  3. <xf:trigger>
  4. <xf:label ref="/data" />
  5. <xf:action ev:event="DOMActivate">
  6. <xf:toggle case="case-edit" />
  7. <xf:setfocus control="edit" />
  8. </xf:action>
  9. </xf:trigger>
  10. </xf:case>
  11. <xf:case id="case-edit">
  12. <xf:input ref="/data" id="edit">
  13. <xf:toggle ev:event="DOMFocusOut" case="case-display" />
  14. </xf:input>
  15. </xf:case>
  16. </xf:switch>
Phil Booth

Another scenario where composite controls can be helpful is when a trigger is used to invoke some activity that may take a long time to complete. In these cases, a busy animation can be switched for the activated trigger, indicating to the user that the application is processing their request:

  1. <xf:switch>
  2. <xf:case id="case-ready">
  3. <xf:trigger>
  4. <xf:label>Submit</xf:label>
  5. <xf:action ev:event="DOMActivate">
  6. <xf:toggle case="case-busy" />
  7. ...
  8. </xf:action>
  9. </xf:trigger>
  10. </xf:case>
  11. <xf:case id="case-busy">
  12. <img src="status-busy.gif" alt="Please wait..." />
  13. </xf:case>
  14. </xf:switch>
Submit Please wait...
When the remainder of your action handler has completed, you can then toggle back to the ready case.

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

JavaScript composite control

JavaScript composite control version:

HTML (this is the only bit your designer would have to change - the rest is automagic):


<span onclick="edit()" data="location.of.data">text to in-line edit</span>

In addition you would need to add the following site wide JavaScript (only once though). There is some Mootools syntax, but could be rewritten for raw JS:


// Adds in-line edit to any span/div and places the data
// at the location defined in the element's 'data' property
function edit(event) {
var field = event.currentTarget;
eval('var prop = ' + field.get('data'));
// Create the editable element and add a closure that does the updates
var input = new Element('input').addEvent('change',function() {
swapInElement(field, input);
prop = input.get('value'); field.set('text',prop);
// You may want to add a global update function here
});
swapInElement(input, field).focus();
}

One utility function for completeness sake...


function swapInElement = function(toAdd,toRemove) {
var previousNode = toRemove.getPrevious();
var parent = toRemove.getParent();
toRemove.dispose();
if (!$defined(previousNode)) {
toAdd.inject(parent, 'top');
} else {
toAdd.injectAfter(previousNode);
}
return toAdd;
}

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.