Dojo Meets XPages

in IBM Lotus Domino 8.5

Steve Leland
PouchaPond Software
 Agenda
● What is Dojo?
● We (XPages) use it.
● Setup for Dojomino development.
● You can use Dojo too!
● Demo
● Q&A
 What is Dojo?
● Open source
– IBM is a contributor
– http://dojotoolkit.org
● JavaScript Toolkit
– Handles browser differences
– Java – like Object Oriented semantics
– Widget library
– AJAX 2.0 library
– Easily internationalised
– Generates Accessible HTML
 Why does Domino need Dojo?
● Strategic win for IBM
– Common controls across products
– Write it once
– Conform to standards
● Smaller learning curve
● Less support
● Domino wants consistent browser functionality
– Understood by non-Domino community
● Can be extended by anyone
 From Open Source to Domino
● Dojo 1.1.1 ships in Domino 8.5

Domino 8.5
Bluewash
Open
Source www.ibm.com/software/lotus/
notesanddomino
download.dojotoolkit.org/release-1.1.1
 Dojo packaging
● 3 main packages
– Dijit
●UI widgets
– Dojo
●Runtime
– Dojox
Extensions, Experiments
●

● Support packages
– Util
● Tools for Build, Doc
 Domino's additions to Dojo
● One main package
– ibm
● inotes
● domino
– Rich text
● xpages
– Date-timepicker
– Calendar
– Typeahead
– xspClientDojo
● (One support file
– A 'profile.js' file for configuring a Dojo build)
 Where to find Domino’s Dojo
● Directory name provides version
– On disk: data\domino\js\dojo-x.y.z\dojo\dojo.js
– URI: /domjs/dojo-x.y.z/dojo/dojo.js
● Allows predictable browser caching
– Expires header set for static files by default
– Expires header optional for nsf file resources
● Set in 'Application Properties'

● DDE has Dojo source

● Server has Dojo optimized build
 Optimized JavaScript Build??
● Minified
– Comments and white space removed
● Layers
– Many .js files combined into one
● Gzip'd
– Supported by modern browsers
 It all adds up!
8.5 Discussion app, 1 Main topic

HTML Page Dojo Source Dojo Build SAVINGS

108 requests 82 requests 46 requests

View 765 Kb 230 Kb 535 Kb

4 requests 3 requests 1 request

Read Document 4 Kb 4 Kb

56 requests 14 requests 42 requests

Edit Document 257 Kb 86 Kb 171 Kb
 XPages runs on Dojo
● XPage runtime: XspClientDojo.js
– Supplies a global XSP JavaScript object
– Wraps some Dojo event functions
● addOnLoad()
● attachEvent()

● Date-time picker
● Calendar
● Typeahead
● Rich text
 More on Rich Text
– Data characteristics change the design
– Rich Text editor can display inline images
● But not Attachments
– Upload Control
– Attachments Control
– Document’s files are cached on read by
XPages
● Across many http requests
– XPages stores MIME in the item
 Agenda
● What is Dojo?
● We (XPages) use it.
● Setup for Dojomino development.
● You can use Dojo too!
● Demo
● Q&A
 Development in a Dojo world
● Firefox 3
– Firebug plugin
– Many others tools too – yslow, proxy, ...
● XSP settings
– xsp.error.page.default=true
– IE and Safari firebug lite console
● xsp.client.script.dojo.djConfig=isDebug:true

– Debug your own widgets

● xsp.client.script.dojo.djConfig=debugAtAllCosts:true
 Dev, continued
● JavaScript statement: debugger
● Logging to Dojo console
– console.log(), .debug(), .info(), .warn(), .error()
● Use Dojo sources!
– installed with DDE
● Look to the Dojo community
– http://dojocampus.org/explorer/
● Nice widget catalog

– http://sitepen.com/labs/toolbox/
● Adobe Air Dojo app – offline api doc
 Using a Dojo widget on an XPage
● Start with the Dojo runtime
– <script type="text/javascript"
src="/domjs/dojo-1.1.1/dojo/dojo.js"
● Include a widget
– dojo.require(“dijit.TitlePane”)
● 2 ways to instantiate it
– Let dojo.parser find DojoType=“dijit.TitlePane”
● djConfig="parseOnLoad: true"

– Programmatically, like rich text

● XSP.addOnLoad() calls constructor once Dojo loaded
 Demo
● Add a widget to an XPage
– Many small details
● Turn it into a custom control
– Wraps up ALL the small details
– Parameterized
– Can then be used on any XPage
 How about a new Dojo widget?
● Create your own, or extend an existing widget
● TestRichText.js – add new tool to toolbar
dojo.provide("test.widget.layout.TestRichText");
dojo.require("ibm.domino.widget.layout.DominoRichText");
dojo.require("dijit._editor.plugins.LinkDialog");
dojo.declare("test.widget.layout.TestRichText",
ibm.domino.widget.layout.DominoRichText,
{ constructor: function() { …} //, }
);
 Now you too do the voodo we do
● Download Shrinksafe and the Dojo source
– http://download.dojotoolkit.org/release-1.1.1/
● DojoDemo.nsf contains
– dojo-release-1.1.1-test.rar
– Test.profile.js
● Use them to create 3 directories
– dojo-release-1.1.1-shrinksafe
– dojo-release-1.1.1-src
– dojo-release-1.1.1-test
 Voodo, two
● Put test.profile.js in
dojo-release-1.1.1-test\util\buildscripts\profiles
● In dojo-release-1.1.1-test, run build.cmd
● Copy
dojo-release-1.1.1-test\work\release\dojo\test
to
server’s data\domino\js\dojo-1.1.1\test
 Demo
● Brute force
– Change XPage to use dojoParseOnLoad
– Set Rich Text’s dojoType to
test.widget.layout.TestRichText
● Elegant (exercise for you to try)
– Create a custom control that uses
test.widget.layout.TestRichText
Questions?

Thank you!
Resources
Lotus Domino Designer wiki
lotus.com/ldd/ddwiki.nsf
Wiki articles
Videos
Red wikis

Dojotoolkit.org
Google too...