Dojo in XPages 22 – Full Page Source

This is the full source for my test page for my Image Gallery demo.

It shows two varaitions of the same gallery — one created declaratively and one created programmatically.

It requires a document (with a form name Images) with images attached to be referenced in the URL.

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="" dojoParseOnLoad="true"
		<xp:dominoDocument var="document1" formName="Images"></xp:dominoDocument>

		<xp:dojoModule name=""></xp:dojoModule>
		<xp:dojoModule name="dojox.image.Gallery"></xp:dojoModule>
		<xp:styleSheet href="/.ibmxspres/dojoroot/dojox/image/resources/image.css">

	<div class="instructions">
		This page includes examples of programmatic (left) and declarative (right) implementations of a Gallery widget, built
		with images attached to a document.
		<br />
		<br />
		Click on any thumbnail image to see the larger version displayed below. Within the larger image area, click the right icon to start or stop playing a slideshow of images.</div>
	<xp:br />
	<xp:br />
			<td>Gallery - XP:Div</td>
			<td>Gallery - Declarative</td>

				<xp:div id="galleryDisplay" dojoType="dojox.image.Gallery">
						<xp:dojoAttribute name="data-dojo-props">
							<xp:this.value><![CDATA[#{javascript:return "";}]]></xp:this.value>

				<div id="galleryDisplay" dojoType="dojox.image.Gallery"
					data-dojo-props="imageHeight:250, imageWidth:500, slideshowInterval:1">

	<!-- data-dojo-props="numberThumbs:4"
	<xp:eventHandler event="onClientLoad" submit="false">
		<xp:this.script><![CDATA[// Build the data store of image urls and make it available with a client-side JS variable
// Build each URL in this format: DB.nsf.nsf/0/docUNID/$File/attachmentname
var fileNames =	"#{javascript:@AttachmentNames();}";
// It comes back as a concatenated string, surrounded by square brackets, to parse into an array
fileNames = fileNames.substring(1, fileNames.length-1).split(', ');
var docID = "#{javascript:currentDocument.getDocument().getUniversalID()}";

var itemNameMap = {
  imageThumbAttr: "thumb",
  imageLargeAttr: "large"

// Build an array of image items for the thumbnail's data store
var imageData = {};
imageData.items = [];
for (var i=0; i< fileNames.length; i++) {
	var newItem = {};
	newItem.thumb = './0/' + docID + '/$File/' + fileNames[i];
	newItem.large = './0/' + docID + '/$File/' + fileNames[i];
	newItem.title = 'Image: ' + fileNames[i];


// Initialize the data store
var imageStore = new{
	identifier: 'title',
	label: 'Images',
	data: imageData

var request= {}; 

// Initialize the Thumbnail Picker 
dijit.byId('galleryDisplay').setDataStore(imageStore, request, itemNameMap);

dijit.byId('#{id:galleryDisplay}').setDataStore(imageStore, request, itemNameMap);


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: