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="http://www.ibm.com/xsp/core" dojoParseOnLoad="true"
	dojoTheme="true">
	<xp:this.data>
		<xp:dominoDocument var="document1" formName="Images"></xp:dominoDocument>
	</xp:this.data>

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

	<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 />
	<table>
		<tr>
			<td>Gallery - XP:Div</td>
			<td>Gallery - Declarative</td>
		</tr>
		<tr>
			<td>

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


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

	<!-- data-dojo-props="numberThumbs:4"
		size="300"
	-->
	<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];

	imageData.items.push(newItem);
}

// Initialize the data store
var imageStore = new dojo.data.ItemFileReadStore({
	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);
    ]]></xp:this.script>
	</xp:eventHandler>


</xp:view>
Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: