XPages Compatible Dojo Dialog Reusable Component

Read the associated Blog Post: XPages Compatible Dojo Dialog Reusable Component

This sample demonstrates how to use the com.ZetaOne.widget.Dialog class to display an XPages compatible dijit.Dialog box using HTML markup and the dojoType attribute.

Working Example
Document Title
XPage Source Code for this Sample
For display purposes, extra spaces have been placed between ]] ${ and #{
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" dojoParseOnLoad="true"
	dojoTheme="true">

	<xp:panel styleClass="workingSample">

		<xp:button id="displayDialog" value="Display Dialog"
			dojoType="dijit.form.Button">
			<xp:eventHandler event="onclick" submit="false">
				<xp:this.script><![CDATA[
					var dialog = dijit.byId('# {id:editDocumentRegion}');
					dialog.show();					
				] ]></xp:this.script>
			</xp:eventHandler>
		</xp:button>

		<xp:panel id="editDocumentRegion"
			dojoType="com.ZetaOne.widget.Dialog"
			style="width:400px;height:110px">
			<xp:this.dojoAttributes>
				<xp:dojoAttribute name="title"
					value="XPages Compatible Dojo Dialog Reusable Component" />
			</xp:this.dojoAttributes>

			<xp:this.data>
				<xp:dominoDocument var="sampleEditableDoc"
					action="editDocument"
					documentId="# {javascript:database.getView('sample-data-view').getFirstDocument().getUniversalID()}"
					formName="sample-data">
				</xp:dominoDocument>
			</xp:this.data>

			<xp:text value="Document Title"
				style="position:absolute:top:10px;left:20px;" />

			<xp:inputText id="inputDocumentTitle"
				style="position:absolute:top:10px;left:80px;width:190px;"
				value="# {sampleEditableDoc.docTitle}" />

			<xp:button dojoType="dijit.form.Button"
				style="position:absolute;top:70px;left:260px;" id="okButton"
				value="OK">
				<xp:eventHandler event="onclick" submit="true"
					refreshMode="partial" refreshId="editDocumentRegion">
					<xp:this.script><![CDATA[
						var dialog = dijit.byId('view:_id1:_id27:editDocumentRegion');
						// We're are going to do a partial refresh, so the dialog
						// needs to be detroyed so the partial refresh can re-create it.
						// The parameter to the destroy function determines whether or 
						// not the nodes in the DOM are destroyed. We do NOT want to destroy
						// them because we need to post them back to the server, 
						// so we pass TRUE (preserve DOM) to the destroy function.
						dialog.destroy(true);
						// make sure we pass true back to the XSP handler to enable the partial refresh.
						return true;
					] ]></xp:this.script>
					<xp:this.action>
						<xp:saveDocument></xp:saveDocument>
					</xp:this.action>
				</xp:eventHandler>
			</xp:button>

			<xp:button dojoType="dijit.form.Button"
				style="position:absolute;top:70px;left:310px;" id="button1"
				value="Cancel">
				<xp:eventHandler event="onclick" submit="false">
					<xp:this.script><![CDATA[
						var dialog = dijit.byId('view:_id1:_id27:editDocumentRegion');
						dialog.hide();
					] ]></xp:this.script>
				</xp:eventHandler>
			</xp:button>
		</xp:panel>
	</xp:panel>

</xp:view>
Client-Side JavaScript Code for this Sample
// DialogComponent.js
dojo.require('dojo._base._loader.loader_nsf');
dojo.requireFromNsf('com.ZetaOne.widget.Dialog', '/zojs.nsf/');


// com.ZetaOne.Widget.Dialog
dojo.provide('com.ZetaOne.widget.Dialog');
dojo.require('dijit.Dialog');
(function(){
		dojo.declare("com.ZetaOne.widget.Dialog", dijit.Dialog, {
				postCreate: function(){
					this.inherited(arguments);
					dojo.query('form', dojo.body())[0].appendChild(this.domNode);
				},
				_setup: function() {
					this.inherited(arguments);
					if (this.domNode.parentNode.nodeName.toLowerCase() == 'body')
						dojo.query('form', dojo.body())[0].appendChild(this.domNode);				
				}				
		})
}());
CSS for this Sample
No CSS required.