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

Open

Source

Bluewash

Domino 8.5

download.dojotoolkit.org/release-1.1.1

www.ibm.com/software/lotus/

notesanddomino

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

View

108 requests

765 Kb

82 requests

230 Kb

46 requests

535 Kb

Read Document

4 requests

4 Kb

3 requests

4 Kb

1 request

Edit Document

56 requests

257 Kb

14 requests

86 Kb

42 requests

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

● One conversion, from CD to MIME, possible

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 wikilotus.com/ldd/ddwiki.nsf

Wiki articles

Videos

Red wikis

Dojotoolkit.org

Google too...