XSLTForms/XForms 1.2/"dialog" element

Presentation

"dialog" element allows to show and hide controls in a popup approach.

A dialog is a container control with a mandatory @id attribute. It can be placed anywhere in the (X)HTML body element, considering that it will be transformed as a disabled (or hidden) DIV element by the XSLT step of XSLTForms.

A dialog is rendered using z-index property in a modal popup, with another DIV element covering all the main elements, with a lower z-index value, to disable interaction with controls. When changing controls values in a dialog, all other controls can be refreshed whether they are in this dialog or anywhere else. Label is not yet supported by XSLTForms and there is no X trigger.

Dialogs can be nested. Ancestor dialogs are masked automatically, changing the z-index property of the covering DIV.

Two actions are defined for dialogs management:

  • "show": this action will enable the dialog identified by the @dialog attribute value
  • "hide": this action will disable the dialog identified by the @dialog attribute value

Usually, for each dialog, there should be, at least, one trigger for showing (opening) it and another, in itself, for hiding (closing) it.

Sample Program 

<html
 xmlns="http://www.w3.org/1999/xhtml"
 xmlns:xf="http://www.w3.org/2002/xforms"
 xmlns:ev="http://www.w3.org/2001/xml-events">
 <head>
  <title>Contact</title>
   <style type="text/css">
    #details {
     width: 250px;
     height: 100px;
    }
  </style>
  <xf:model>
   <xf:instance xmlns="">
    <contact>
     <email/>
     <firstname/>
     <lastname/>
    </contact>
   </xf:instance>
   <xf:bind ref="email" type="xf:email"/>
   <xf:setfocus ev:event="xforms-ready" control="email"/>
  </xf:model>
 </head>
 <body>
  <xf:dialog id="details">
   <xf:input id="firstname" ref="firstname">
    <xf:label>First Name : </xf:label>
   </xf:input>
   <br/>
   <xf:input ref="lastname">
    <xf:label>Last Name : </xf:label>
   </xf:input>
   <br/>
   <xf:trigger>
    <xf:label>Close</xf:label>
    <xf:action ev:event="DOMActivate">
     <xf:hide dialog="details"/>
     <xf:setfocus control="email"/>
    </xf:action>
   </xf:trigger>
  </xf:dialog>
  <xf:group>
   <xf:label>Contact Information</xf:label>
   <xf:input id="email" ref="email" incremental="true">
    <xf:label>E-mail : </xf:label>
   </xf:input>
   <xf:trigger>
    <xf:label>Details</xf:label>
    <xf:action ev:event="DOMActivate">
     <xf:show dialog="details"/>
     <xf:setfocus control="firstname"/>
    </xf:action>
   </xf:trigger>
  </xf:group>
 </body>
</html>

References

  1. W3C XForms WG Wiki - Dialog candidate specifications for XForms 1.2
  2. AJAXForms Addons - Specific dialog addon
  3. Orbeon Dialog Extension
Last modified on 15 February 2010, at 03:11