The document outlines the Dojo Toolkit, an open-source JavaScript library intended for integration with IBM Lotus Domino, detailing its history, roadmap, and installation options. It provides step-by-step instructions for developing a simple phone directory application using Dojo components, including dialog forms and custom widgets. Additionally, it lists resources for further information and support regarding the Dojo Toolkit.

1. Introduction dojo Toolkit & IBM Lotus Domino February 2008 Dr. Rolf Kremer ( PAVONE AG )

2. Agenda Introduction Samples Installation Step-by-Step Resources Discussion

3. What is the Dojo Toolkit? Open Source JavaScript Toolkit Developed by the Dojo Foundation (Member: IBM, Sun, AOL, BEA, and more) Available: http://dojotoolkit.org/ First release in November 2007 Should be integrated in IBM Lotus Domino (planned)

4. Dojo History 2004: Dojo 0.0: How do I create something like GMail? 2005: 0.1, 0.2: More features 2006: 0.3, 0.4: Features, doc writer 2007-06: 0.9: Redesign 2007-11: 1.0: First release 165.000+ downloads since Dojo 1.0 Source: http:// www.dojotoolkit.org / files /ddd4day1summary.pdf

5. Dojo Roadmap 2008-02: 1.1 RC (Beta: 19.02) 2008-03: 1.1 (Firefox 3 Dijit support) 2008-04: 1.1.1 2008-05: 1.2 (Grid + Charting Improvements) 2008-06: 1.2.1 2008-07: 1.2.2 2008-08: 1.3 2008-11: 1.4 Source: http:// www.dojotoolkit.org / files /ddd4day1summary.pdf

6. Dojo Modules Core Contains basic libraries Ajax, evens, packaging, CSS-based querying, animations, JSON, language utilities Size: 23 k Dijit Skinnable, template-driven widgets Accessibility and localization DojoX Inventive & innovative code and widgets Visualize of data with grids and charts Pre-beta or beta widgets

7. JavaScript Frameworks Prototype Dojo Toolkit Script.aculo.us Mootools jQuery Open Rico TIBCO General Interface qooxdoo Macao Yahoo! User Interface Library Zimbra AjaxTK Ext BACKBASE crossvision … and more…

8. Dojo Samples Dojo Webseite Dojo Feature Explorer Sample by Rocky Oliver (IBM Lotus Domino) PAVONE Solution Center PAVONE Process Control Suite (JEE) Demo ‚Phone Directory‘ (IBM Lotus Domino) (This demo will be developed in this workshop.) Widgets ( GCC project )

9. Dojo & Domino Domino form fields that can be Dojo enabled: Source: Lotusphere 2008 – Presentation: AD303.pdf

10. Domino Extensions (1) View: Source: Lotusphere 2008 – Presentation: AD303.pdf

11. Domino Extensions (2) Source: Lotusphere 2008 – Presentation: AD303.pdf

12. Domino Extensions (2) Source: Lotusphere 2008 – Presentation: AD303.pdf

13. Installation Options AOL CDN (Content Distribution Network) + Easy installation + Easy update - Requried Internet access - AOL can log the access Server installation + Required only Intranet access + Only one installation - Manual installation - Increased update effort - Need server administration access Application installation + Required only Intranet access + Required no server administration access - Manual installation - Increased update effort o Application-specific

14. Installation Steps (1) AOL CDN Add following line to your head section: Example: <script type=&quot;text/javascript&quot; src=&quot;http://o.aolcdn.com/dojo/1.0.2/dojo/dojo.xd.js&quot; djConfig=&quot;parseOnLoad: true&quot;></script> Server installation Install dojo files on IBM Lotus Domino server Example: /data/domino/htm/dojo-release-1.0.2 Add following line to your head section: Example: <script type=&quot;text/javascript„ src=&quot;/dojo-release-1.0.2/dojo/dojo.js&quot; djConfig=&quot;parseOnLoad: true&quot;></script> Or another path

15. Installation Steps (2) Application installation Insert dojo files into the database Add following line to the head section: Example: &quot;<script type=\&quot;text/javascript\„ src=\&quot;/&quot; + @WebDbName + &quot;/dojo/dojo.js\&quot; djConfig=\&quot;parseOnLoad: true\&quot;></script>&quot;

16. Step-by-Step (Developing a simple Phone Directory) Step 1: Add dialog to add people to directory Step 2: Open Person form in dialog Step 3: Add Tab container Step 4: Create new widget ‚AddressReferrer‘ Step 5: Install widget Step 6: Add widget to form (These steps are based on a pre-configured Phone Directory application.)

17. Step 0: Install Firebug (or another JavaScript debugger) Firebug : Tool for debugging JavaScript in Firefox browers

18. Step 1: ‚Add Person‘ dialog (1) Dojo Book: http:// dojotoolkit.org /book/dojo-book-0-9/part-2-dijit/layout/ dialog Example:

19. 1. Create subform „sa_DialogPerson“ <div dojoType=&quot;dijit.Dialog&quot; id=&quot;dialogPerson&quot; title=&quot;<Computed Value>&quot; href=&quot;<Computed Value>&quot; execute=„dijit.byId('fa_DialogPerson').hide();&quot;> </div> 2. Insert subform in existing form „fa_View“ Remarks: - We create a subform since the dialog (code) can be used in other design elements, too. - The field ‚tmpBaseUrl‘ contains the host name and database path. Step 1: ‚Add Person‘ dialog (2) tmpBaseUrl + &quot;/fa_DialogPerson?OpenForm&quot; „ Person“

20. Step 1: ‚Add Person‘ dialog (3) 3. Create form „fa_DialogPerson“ Add WebQuerySave-Code: @Command([ToolsRunMacro]; &quot;(WEBQuerySavePerson)&quot;) Remark: The agent re-opens the page. „ Save“ „ Close“

21. Step 1: ‚Add Person‘ dialog (4) 4. Create button to open dialog in form „fa_View“ <button dojoType=&quot;dijit.form.Button&quot; onclick=&quot;showDialog('dialogPerson','fa_DialogPerson')&quot;><Computed Value></button> 5. Add dojo.require statements („sa_DojoHeader“) dojo.require(&quot;dijit.Dialog&quot;); dojo.require(&quot;dijit.form.Button&quot;); 6. Create agent „WebQuerySavePerson“ Sub Initialize Dim ns As NotesSession Dim strTmpUrl As String '// re-open view Set ns = New NotesSession strTmpURL = &quot;/&quot; + ReplaceSubstring ( ns.CurrentDatabase.FilePath, &quot;\&quot;, &quot;/&quot; ) + &quot;/&quot; + &quot;Default&quot; + &quot;?OpenView&quot; Print |<SCRIPT LANGUAGE=&quot;JavaScript&quot;> location.replace( &quot;| + strTmpURL + |&quot; )</SCRIPT>| End Sub „ Add Person“

22. Step 1: Test it Result: If the user clicks on the button ‚Add Person‘ the dojo dialog with the form ‚fa_DialogPerson‘ will be opened. If the user clicks on the ‚Close‘ button, the dojo dialog will be closed. If the user clicks on the ‚Save‘ button, the dojo dialog will be closed, a new Person document will be created and the view will be refreshed.

23. Step 2: ‚Open Person‘ dialog (1) Open dialog from view:

24. Change view column code to: _tmpNumber := @Text ( @DocNumber ); _tmpName := LastName + &quot;, &quot; + FirstName; _tmpPathEdit := &quot;/0/&quot; + @Text( @DocumentUniqueID ) + &quot;?EditDocument&quot;; _tmpOnClick := &quot;onclick=\&quot;showDocument('dialogPerson','&quot; + _tmpPathEdit + &quot;')\&quot;&quot;; _tmpValue := _tmpNumber + &quot; &quot; + &quot;<a href=\&quot;#\&quot; &quot; + _tmpOnClick + &quot;>&quot; + _tmpName + &quot;</a>&quot;; &quot;<div class=\&quot;pdViewColumn\&quot;>&quot; + _tmpValue + &quot;</div>&quot; Remarks: - The style sheet class ‚pdViewColumn‘ is defined in ‚ PhoneDirectory.css‘. - The Javascript function „showDocument“ calls the dojo dialog (Code see next page) Step 2: ‚Open Person‘ dialog (2)

25. Step 2: ‚Open Person‘ dialog (3) Javascript function: function showDocument ( strPage, strPath ) { // open page dijit.byId( strPage ).setHref( G_BASEURL + strPath ); dijit.byId( strPage ).show(); setFocusToField( strPage ,'Firstname'); return; } Contains the host name and database path. Function sets the focus to the field ‚Firstname‘.

26. Step 2: ‚Open Person‘ dialog (4) Javascript function: function setFocusToField ( strDialog, strFieldName ) { // wait 500 ms to open the form, then set the focus to the first field setTimeout(dojo.hitch( strDialog, function(){ document.getElementsByName( strFieldName )[0].focus(); }), 500); } If the loading process required more than 500 ms an error occured.

27. Step 2: Test it Result: If the user clicks on an entry in the view the dojo dialog with the form ‚fa_DialogPerson‘ will be opened. The fields are filled from the selected document.

28. Step 3: Add Tab container Add following code to „fa_View“ Add „dojo.require“ to subform „sa_DojoHeader“ dojo.require(&quot;dijit.layout.TabContainer&quot;); dojo.require(&quot;dijit.layout.ContentPane&quot;); The view „Default“ should be placed here. Subform „sa_List“

29. Step 3: Test it Result: The view will be display in the first tab. If the user switch to the second tab, the static subform content will be showed.

30. Step 4: Widget ‚AddressReferrer‘ (1) Example „AddressReferrer“ Code to add widget on page: <input dojoType=&quot;pavone.widget.AddressRef&quot; value=&quot;111&quot; type=&quot;skype&quot; id=&quot;phoneNumber&quot; label=&quot;skype.gif&quot; title=&quot;Call person&quot;/> Link: http://homepages.uni-paderborn.de/okoehler/pav53/AddressRef.html Call number with Skype Create e-mail Open http page Text field + icon + link

31. Step 5: Install ‚AddressReferrer‘ Add to Phone Directory application: 1. Add js file to ‚Shared Resources\Files‘ 2. Add css file to ‚Shared Resources\Style Sheets‘ 3. Add skype.gif image to ‚Shared Resources\Images‘

32. Step 6: Add widget ‚AddressReferrer‘ (1) 1. Create field „SkypeNumber“ to form „fa_DialogPerson“ 2. Add html tags (field section ‚Others‘) dojoType=&quot;pavone.widget.AddressRef&quot; type=&quot;skype&quot; id=&quot;phoneNumber&quot; label=&quot;skype.gif&quot; title=„Call person&quot;

33. Step 6: Test it Remark: If the user clicks on the Skype icon behind the input field the Skype client will be opened and the number in the field will be called.

34. Resources The Book of Dojo: http://dojotoolkit.org/book/dojo-book-1-0 Demos: http://dojotoolkit.org/key-links Dojomino Blog: http://dojomino.com LCTY 2008 presentation (german) by Martin Henning

35. Diskussion