The xxforms:dialog controlYou declare dialogs directly under the <xhtml:body> element with: <xxforms:dialog id="my-dialog-id" appearance="full | minimal" level="modeless"
close="true" draggable="true" visible="false">
<xforms:label>Dialog title</xforms:label>
Content of the dialog (XHTML + XForms)
</xxforms:dialog>
- When you have
appearance="full" on the dialog, you define the title of the dialog with the embedded <xforms:label> element. - Inside an
<xxforms:dialog> you can use all the XHTML and XForms elements you can normally use elsewhere on the page. You can have other XForms controls, or show anything you would like to with HTML. - The attributes on the
<xxforms:dialog> are as follows:
id | Mandatory | The ID of the dialog. You reference this ID when opening the dialog with <xxforms:show dialog="my-dialog-id">. |
|---|
appearance | Optional. Possible values are: | You can set the appearance to either full or minimal:- The first screenshot below shows a dialog with
appearance="full" while the second one shows a dialog with appearance="minimal". - In general, you will use the minimal dialog when you want to show a limited set of information which is related to a certain element in the page. The minimal dialog is sometime also referred to as a "drop-down dialog".
- Some of the other attributes on
<xxforms:dialog> can only be used for the full or the minimal dialog. You will find more details on this below.
|
|---|
level | Optional. Can only be used appearance is set to full. Possible values are: | When set to modal the rest the page is grayed out and you can't interact with any ontrol on the page outside of the dialog. When set to modeless you can still use other controls on the page. |
|---|
close | Optional. Can only be used appearance is set to full. Possible values are: | A "x" is shown in the dialog title bar when close is set to true. If you specify close="false", then you should provide a way to close the dialog, for instance by having you own "Close" button inside the dialog. This is typically useful when you want to force users to enter some data before proceeding and you don't want them to cancel the current operation by closing the dialog. |
|---|
draggable | Optional. Can only be used appearance is set to full. Possible values are: | When set to false, you won't be able to move dialog on the page by using drag and drop in the dialog title bar. |
|---|
visible | Optional. Whether the dialog is initially visible when the page loads. Possible values are: | When set to true, the dialog appears immediately when the page loads. |
|---|
neighbor | Optional | Optional. Use only with minimal appearance. The id of the control next to which the dialog should display when opening. |
|---|
The xxforms:show and xxforms:hide actionsYou open a dialog by using the xxforms:show action: <xforms:trigger>
<xforms:label>Show Dialog</xforms:label>
<xxforms:show ev:event="DOMActivate" dialog="hello-dialog"/>
</xforms:trigger>
If the dialog is already open, no action takes place. xxforms:show supports the following attributes:
dialog | Mandatory | The id of an existing dialog to open. |
|---|
neighbor | Optional | Optional. Use only with minimal appearance. The id of the control next to which the dialog should display when opening. |
|---|
constrain | Optional | Whether to constrain the dialog to the viewport. Possible values are: |
|---|
You close a dialog by using the xxforms:hide action: <xforms:trigger>
<xforms:label>Hide Dialog</xforms:label>
<xxforms:hide ev:event="DOMActivate" dialog="hello-dialog"/>
</xforms:trigger>
If the dialog is already closed, no action takes place. xxforms:hide supports the following attributes:
dialog | Mandatory | The id of an existing dialog to close. |
|---|
The xxforms-dialog-open eventDispatched in response to: xxforms:show action executed with an existing dialog id. Target: dialog Bubbles: Yes Cancelable: Yes Context Info: none Default Action: Open the dialog. You can respond to this event before the dialog opens, for example to perform initialization of data: <xxforms:dialog id="hello-dialog">
<xhtml:div>
Hello!
</xhtml:div>
<xxforms:setvalue ev:event="xxforms-dialog-open" ref="..." value="..."/>
</xxforms:dialog>
You can set the focus on a specific control of the dialog with a setfocus action on the target or bubbling phase of this event: <xforms:setfocus ev:event="xxforms-dialog-open" control="my-control"/>
[SINCE: 2011-03-28] When the dialog opens upon receiving the xxforms-dialog-open event, it sets the focus on the first relevant, non-readonly control. This means that in general you don't need to use an explicit setfocus action. The xxforms-dialog-close eventDispatched in response to: xxforms:hide action executed with an existing dialog id. Target: dialog Bubbles: Yes Cancelable: Yes Context Info: none Default Action: Close the dialog.
|
|
