XSLTForms/XForms 2.0/"dialog" element
Presentation[edit | edit source]
"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[edit | edit source]
<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[edit | edit source]
- W3C XForms WG Wiki - Dialog candidate specifications for XForms 1.2
- AJAXForms Addons - Specific dialog addon
- Orbeon Dialog Extension