Dojo Meets XPages in IBM Lotus Domino 8.5. Steve Leland PouchaPond Software

Transcription

1 Dojo Meets XPages in IBM Lotus Domino 8.5 Steve Leland PouchaPond Software

2 Agenda What is Dojo? We (XPages) use it. Setup for Dojomino development. You can use Dojo too! Demo Q&A

3 What is Dojo? Open source IBM is a contributor JavaScript Toolkit Handles browser differences Java like Object Oriented semantics Widget library AJAX 2.0 library Easily internationalised Generates Accessible HTML

4 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

5 From Open Source to Domino Dojo ships in Domino 8.5 Open Source Bluewash Domino notesanddomino download.dojotoolkit.org/release-1.1.1

6 Dojo packaging 3 main packages Dijit UI widgets Dojo Runtime Dojox Extensions, Experiments Support packages Util Tools for Build, Doc

7 Domino's additions to Dojo One main package ibm inotes domino xpages Rich text Date-timepicker Calendar Typeahead xspclientdojo (One support file A 'profile.js' file for configuring a Dojo build)

8 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

9 Optimized JavaScript Build?? Minified Comments and white space removed Layers Many.js files combined into one Gzip'd Supported by modern browsers

10 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

11 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

12 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

13 Agenda What is Dojo? We (XPages) use it. Setup for Dojomino development. You can use Dojo too! Demo Q&A

14 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

15 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 Nice widget catalog Adobe Air Dojo app offline api doc

16 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

17 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

18 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() { } //, } );

19 Now you too do the voodo we do Download Shrinksafe and the Dojo source DojoDemo.nsf contains dojo-release test.rar Test.profile.js Use them to create 3 directories dojo-release shrinksafe dojo-release src dojo-release test

20 Voodo, two Put test.profile.js in dojo-release test\util\buildscripts\profiles In dojo-release test, run build.cmd Copy dojo-release test\work\release\dojo\test to server s data\domino\js\dojo-1.1.1\test

21 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

22 Questions? Thank you!

23 Resources Lotus Domino Designer wiki lotus.com/ldd/ddwiki.nsf Wiki articles Videos Red wikis Dojotoolkit.org Google too...