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

Agenda Introduction Samples Installation Step-by-Step Resources Discussion

Introduction

Samples

Installation

Step-by-Step

Resources

Discussion

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)

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)

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

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

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

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

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

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

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…

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 )

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 )

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

Domino form fields that can be Dojo enabled:

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

View:

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

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

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

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

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

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>

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;

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;

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.)

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.)

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

Firebug : Tool for debugging JavaScript in Firefox browers

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

Dojo Book: http:// dojotoolkit.org /book/dojo-book-0-9/part-2-dijit/layout/ dialog

Example:

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“

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 (3) 3. Create form „fa_DialogPerson“ Add WebQuerySave-Code: @Command([ToolsRunMacro]; &quot;(WEBQuerySavePerson)&quot;) Remark: The agent re-opens the page. „ Save“ „ Close“

3. Create form „fa_DialogPerson“

Add WebQuerySave-Code:

@Command([ToolsRunMacro]; &quot;(WEBQuerySavePerson)&quot;)

Remark: The agent re-opens the page.

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“

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

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.

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.

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

Open dialog from view:

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)

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 (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‘.

Javascript function:

function showDocument ( strPage, strPath ) {

// open page

dijit.byId( strPage ).setHref( G_BASEURL + strPath );

dijit.byId( strPage ).show();

setFocusToField( strPage ,'Firstname');

return;

}

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.

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);

}

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.

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“

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;);

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.

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.

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

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

Step 5: Install ‚AddressReferrer‘ Add to Phone Directory application: 1. Add js file to ‚Shared ResourcesFiles‘ 2. Add css file to ‚Shared ResourcesStyle Sheets‘ 3. Add skype.gif image to ‚Shared ResourcesImages‘

Add to Phone Directory application:

1. Add js file to ‚Shared ResourcesFiles‘

2. Add css file to ‚Shared ResourcesStyle Sheets‘

3. Add skype.gif image to ‚Shared ResourcesImages‘

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;

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;

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.

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.

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

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

Diskussion