0
Introduction dojo Toolkit & IBM Lotus Domino February 2008 Dr. Rolf Kremer ( PAVONE AG )
Agenda <ul><li>Introduction </li></ul><ul><li>Samples </li></ul><ul><li>Installation </li></ul><ul><li>Step-by-Step </li><...
What is the Dojo Toolkit? <ul><li>Open Source JavaScript Toolkit </li></ul><ul><li>Developed by the Dojo Foundation (Membe...
Dojo History <ul><li>2004: Dojo 0.0: How do I create something like GMail? </li></ul><ul><li>2005: 0.1, 0.2: More features...
Dojo Roadmap <ul><li>2008-02: 1.1 RC (Beta: 19.02) </li></ul><ul><li>2008-03: 1.1 (Firefox 3 Dijit support) </li></ul><ul>...
Dojo Modules <ul><li>Core </li></ul><ul><ul><li>Contains basic libraries </li></ul></ul><ul><ul><li>Ajax, evens, packaging...
JavaScript Frameworks Prototype Dojo Toolkit Script.aculo.us Mootools jQuery Open Rico TIBCO General Interface qooxdoo Mac...
Dojo Samples <ul><li>Dojo Webseite </li></ul><ul><li>Dojo Feature Explorer </li></ul><ul><li>Sample by Rocky Oliver  (IBM ...
Dojo & Domino <ul><li>Domino form fields that can be Dojo enabled: </li></ul>Source: Lotusphere 2008 – Presentation: AD303...
Domino Extensions (1) <ul><li>View: </li></ul>Source: Lotusphere 2008 – Presentation: AD303.pdf
Domino Extensions (2) Source: Lotusphere 2008 – Presentation: AD303.pdf
Domino Extensions (2) Source: Lotusphere 2008 – Presentation: AD303.pdf
Installation Options <ul><li>AOL CDN (Content Distribution Network) </li></ul><ul><ul><li>+ Easy installation </li></ul></...
Installation Steps (1) <ul><li>AOL CDN </li></ul><ul><ul><li>Add following line to your head section: </li></ul></ul><ul><...
Installation Steps (2) <ul><li>Application installation </li></ul><ul><ul><li>Insert dojo files into the database </li></u...
Step-by-Step  (Developing a simple Phone Directory) <ul><li>Step 1: Add dialog to add people to directory </li></ul><ul><l...
Step 0: Install Firebug  (or another JavaScript debugger) <ul><li>Firebug : Tool for debugging JavaScript in Firefox browe...
Step 1: ‚Add Person‘ dialog (1) <ul><li>Dojo Book:   http:// dojotoolkit.org /book/dojo-book-0-9/part-2-dijit/layout/ dial...
<ul><li>1. Create subform „sa_DialogPerson“ </li></ul><ul><ul><li><div dojoType=&quot;dijit.Dialog&quot; id=&quot;dialogPe...
Step 1: ‚Add Person‘ dialog (3) <ul><li>3. Create form „fa_DialogPerson“ </li></ul><ul><ul><li>Add WebQuerySave-Code: </li...
Step 1: ‚Add Person‘ dialog (4) <ul><li>4. Create button to open dialog in form „fa_View“ </li></ul><ul><li><button dojoTy...
Step 1: Test it <ul><li>Result: </li></ul><ul><li>If the user clicks on the button ‚Add Person‘ the dojo dialog with the f...
Step 2: ‚Open Person‘ dialog (1) <ul><li>Open dialog from view: </li></ul>
<ul><li>Change view column code to: </li></ul><ul><li>_tmpNumber := @Text ( @DocNumber ); </li></ul><ul><li>_tmpName := La...
Step 2: ‚Open Person‘ dialog (3) <ul><li>Javascript function: </li></ul><ul><li>function showDocument ( strPage, strPath )...
Step 2: ‚Open Person‘ dialog (4) <ul><li>Javascript function: </li></ul><ul><li>function setFocusToField ( strDialog, strF...
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...
Step 3: Add Tab container <ul><li>Add following code to „fa_View“ </li></ul><ul><li>Add „dojo.require“ to subform „sa_Dojo...
Step 3: Test it <ul><li>Result: </li></ul><ul><li>The view will be display in the first tab. </li></ul><ul><li>If the user...
Step 4: Widget ‚AddressReferrer‘ (1) <ul><li>Example „AddressReferrer“ </li></ul><ul><li>Code to add widget on page:  </li...
Step 5: Install ‚AddressReferrer‘ <ul><li>Add to Phone Directory application: </li></ul><ul><ul><li>1. Add js file to ‚Sha...
Step 6: Add widget ‚AddressReferrer‘ (1) <ul><li>1. Create field „SkypeNumber“ to form „fa_DialogPerson“ </li></ul><ul><li...
Step 6: Test it <ul><li>Remark: </li></ul><ul><li>If the user clicks on the Skype icon behind the input field the Skype cl...
Resources <ul><li>The Book of Dojo:  http://dojotoolkit.org/book/dojo-book-1-0 </li></ul><ul><li>Demos:  http://dojotoolki...
Diskussion
Upcoming SlideShare
Loading in...5
×

Introduction Dojo Toolkit & IBM Lotus Domino

25,804

Published on

This presentation shows an introduction to the usage of the dojo toolkit in an IBM Lotus Domino application. The presentation based on a three hour workshop in which the sample application 'Phone Directory' was developed.

Published in: Technology, Business
0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
25,804
On Slideshare
0
From Embeds
0
Number of Embeds
37
Actions
Shares
0
Downloads
761
Comments
0
Likes
15
Embeds 0
No embeds

No notes for slide

Transcript of "Introduction Dojo Toolkit & IBM Lotus Domino"

  1. 1. Introduction dojo Toolkit & IBM Lotus Domino February 2008 Dr. Rolf Kremer ( PAVONE AG )
  2. 2. Agenda <ul><li>Introduction </li></ul><ul><li>Samples </li></ul><ul><li>Installation </li></ul><ul><li>Step-by-Step </li></ul><ul><li>Resources </li></ul><ul><li>Discussion </li></ul>
  3. 3. What is the Dojo Toolkit? <ul><li>Open Source JavaScript Toolkit </li></ul><ul><li>Developed by the Dojo Foundation (Member: IBM, Sun, AOL, BEA, and more) </li></ul><ul><li>Available: http://dojotoolkit.org/ </li></ul><ul><li>First release in November 2007 </li></ul><ul><li>Should be integrated in IBM Lotus Domino (planned) </li></ul>
  4. 4. Dojo History <ul><li>2004: Dojo 0.0: How do I create something like GMail? </li></ul><ul><li>2005: 0.1, 0.2: More features </li></ul><ul><li>2006: 0.3, 0.4: Features, doc writer </li></ul><ul><li>2007-06: 0.9: Redesign </li></ul><ul><li>2007-11: 1.0: First release </li></ul><ul><li>165.000+ downloads since Dojo 1.0 </li></ul>Source: http:// www.dojotoolkit.org / files /ddd4day1summary.pdf
  5. 5. Dojo Roadmap <ul><li>2008-02: 1.1 RC (Beta: 19.02) </li></ul><ul><li>2008-03: 1.1 (Firefox 3 Dijit support) </li></ul><ul><li>2008-04: 1.1.1 </li></ul><ul><li>2008-05: 1.2 (Grid + Charting Improvements) </li></ul><ul><li>2008-06: 1.2.1 </li></ul><ul><li>2008-07: 1.2.2 </li></ul><ul><li>2008-08: 1.3 </li></ul><ul><li>2008-11: 1.4 </li></ul>Source: http:// www.dojotoolkit.org / files /ddd4day1summary.pdf
  6. 6. Dojo Modules <ul><li>Core </li></ul><ul><ul><li>Contains basic libraries </li></ul></ul><ul><ul><li>Ajax, evens, packaging, CSS-based querying, animations, JSON, language utilities </li></ul></ul><ul><ul><li>Size: 23 k </li></ul></ul><ul><li>Dijit </li></ul><ul><ul><li>Skinnable, template-driven widgets </li></ul></ul><ul><ul><li>Accessibility and localization </li></ul></ul><ul><li>DojoX </li></ul><ul><ul><li>Inventive & innovative code and widgets </li></ul></ul><ul><ul><li>Visualize of data with grids and charts </li></ul></ul><ul><ul><li>Pre-beta or beta widgets </li></ul></ul>
  7. 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. 8. Dojo Samples <ul><li>Dojo Webseite </li></ul><ul><li>Dojo Feature Explorer </li></ul><ul><li>Sample by Rocky Oliver (IBM Lotus Domino) </li></ul><ul><li>PAVONE Solution Center </li></ul><ul><li>PAVONE Process Control Suite (JEE) </li></ul><ul><li>Demo ‚Phone Directory‘ (IBM Lotus Domino) </li></ul><ul><li>(This demo will be developed in this workshop.) </li></ul><ul><li>Widgets ( GCC project ) </li></ul>
  9. 9. Dojo & Domino <ul><li>Domino form fields that can be Dojo enabled: </li></ul>Source: Lotusphere 2008 – Presentation: AD303.pdf
  10. 10. Domino Extensions (1) <ul><li>View: </li></ul>Source: Lotusphere 2008 – Presentation: AD303.pdf
  11. 11. Domino Extensions (2) Source: Lotusphere 2008 – Presentation: AD303.pdf
  12. 12. Domino Extensions (2) Source: Lotusphere 2008 – Presentation: AD303.pdf
  13. 13. Installation Options <ul><li>AOL CDN (Content Distribution Network) </li></ul><ul><ul><li>+ Easy installation </li></ul></ul><ul><ul><li>+ Easy update </li></ul></ul><ul><ul><li>- Requried Internet access </li></ul></ul><ul><ul><li>- AOL can log the access </li></ul></ul><ul><li>Server installation </li></ul><ul><ul><li>+ Required only Intranet access </li></ul></ul><ul><ul><li>+ Only one installation </li></ul></ul><ul><ul><li>- Manual installation </li></ul></ul><ul><ul><li>- Increased update effort </li></ul></ul><ul><ul><li>- Need server administration access </li></ul></ul><ul><li>Application installation </li></ul><ul><ul><li>+ Required only Intranet access </li></ul></ul><ul><ul><li>+ Required no server administration access </li></ul></ul><ul><ul><li>- Manual installation </li></ul></ul><ul><ul><li>- Increased update effort </li></ul></ul><ul><ul><li>o Application-specific </li></ul></ul>
  14. 14. Installation Steps (1) <ul><li>AOL CDN </li></ul><ul><ul><li>Add following line to your head section: </li></ul></ul><ul><ul><li>Example: </li></ul></ul><ul><ul><li><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> </li></ul></ul><ul><li>Server installation </li></ul><ul><ul><li>Install dojo files on IBM Lotus Domino server </li></ul></ul><ul><ul><li>Example: /data/domino/htm/dojo-release-1.0.2 </li></ul></ul><ul><ul><li>Add following line to your head section: </li></ul></ul><ul><ul><li>Example: </li></ul></ul><ul><ul><li><script type=&quot;text/javascript„ </li></ul></ul><ul><ul><li>src=&quot;/dojo-release-1.0.2/dojo/dojo.js&quot; </li></ul></ul><ul><ul><li>djConfig=&quot;parseOnLoad: true&quot;></script> </li></ul></ul>Or another path
  15. 15. Installation Steps (2) <ul><li>Application installation </li></ul><ul><ul><li>Insert dojo files into the database </li></ul></ul><ul><ul><li>Add following line to the head section: </li></ul></ul><ul><ul><li>Example: </li></ul></ul><ul><ul><li>&quot;<script type=&quot;text/javascript„ </li></ul></ul><ul><ul><li>src=&quot;/&quot; + @WebDbName + &quot;/dojo/dojo.js&quot; djConfig=&quot;parseOnLoad: true&quot;></script>&quot; </li></ul></ul>
  16. 16. Step-by-Step (Developing a simple Phone Directory) <ul><li>Step 1: Add dialog to add people to directory </li></ul><ul><li>Step 2: Open Person form in dialog </li></ul><ul><li>Step 3: Add Tab container </li></ul><ul><li>Step 4: Create new widget ‚AddressReferrer‘ </li></ul><ul><li>Step 5: Install widget </li></ul><ul><li>Step 6: Add widget to form </li></ul><ul><li>(These steps are based on a pre-configured Phone Directory application.) </li></ul>
  17. 17. Step 0: Install Firebug (or another JavaScript debugger) <ul><li>Firebug : Tool for debugging JavaScript in Firefox browers </li></ul>
  18. 18. Step 1: ‚Add Person‘ dialog (1) <ul><li>Dojo Book: http:// dojotoolkit.org /book/dojo-book-0-9/part-2-dijit/layout/ dialog </li></ul><ul><li>Example: </li></ul>
  19. 19. <ul><li>1. Create subform „sa_DialogPerson“ </li></ul><ul><ul><li><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;> </li></ul></ul><ul><ul><li></div> </li></ul></ul><ul><li>2. Insert subform in existing form „fa_View“ </li></ul><ul><li>Remarks: </li></ul><ul><li>- We create a subform since the dialog (code) can be used in </li></ul><ul><li> other design elements, too. </li></ul><ul><li>- The field ‚tmpBaseUrl‘ contains the host name and database </li></ul><ul><li>path. </li></ul>Step 1: ‚Add Person‘ dialog (2) tmpBaseUrl + &quot;/fa_DialogPerson?OpenForm&quot; „ Person“
  20. 20. Step 1: ‚Add Person‘ dialog (3) <ul><li>3. Create form „fa_DialogPerson“ </li></ul><ul><ul><li>Add WebQuerySave-Code: </li></ul></ul><ul><ul><li>@Command([ToolsRunMacro]; &quot;(WEBQuerySavePerson)&quot;) </li></ul></ul><ul><li>Remark: The agent re-opens the page. </li></ul>„ Save“ „ Close“
  21. 21. Step 1: ‚Add Person‘ dialog (4) <ul><li>4. Create button to open dialog in form „fa_View“ </li></ul><ul><li><button dojoType=&quot;dijit.form.Button&quot; onclick=&quot;showDialog('dialogPerson','fa_DialogPerson')&quot;><Computed Value></button> </li></ul><ul><li>5. Add dojo.require statements („sa_DojoHeader“) </li></ul><ul><li>dojo.require(&quot;dijit.Dialog&quot;); </li></ul><ul><li>dojo.require(&quot;dijit.form.Button&quot;); </li></ul><ul><li>6. Create agent „WebQuerySavePerson“ </li></ul><ul><li>Sub Initialize </li></ul><ul><li>Dim ns As NotesSession </li></ul><ul><li>Dim strTmpUrl As String </li></ul><ul><li>'// re-open view </li></ul><ul><li>Set ns = New NotesSession </li></ul><ul><li>strTmpURL = &quot;/&quot; + ReplaceSubstring ( </li></ul><ul><li>ns.CurrentDatabase.FilePath, &quot;&quot;, &quot;/&quot; ) + &quot;/&quot; + &quot;Default&quot; + </li></ul><ul><li>&quot;?OpenView&quot; </li></ul><ul><li>Print |<SCRIPT LANGUAGE=&quot;JavaScript&quot;> location.replace( &quot;| + </li></ul><ul><li>strTmpURL + |&quot; )</SCRIPT>| </li></ul><ul><li>End Sub </li></ul>„ Add Person“
  22. 22. Step 1: Test it <ul><li>Result: </li></ul><ul><li>If the user clicks on the button ‚Add Person‘ the dojo dialog with the form ‚fa_DialogPerson‘ will be opened. </li></ul><ul><li>If the user clicks on the ‚Close‘ button, the dojo dialog </li></ul><ul><li>will be closed. </li></ul><ul><li>If the user clicks on the ‚Save‘ button, the dojo dialog </li></ul><ul><li>will be closed, a new Person document will be created </li></ul><ul><li>and the view will be refreshed. </li></ul>
  23. 23. Step 2: ‚Open Person‘ dialog (1) <ul><li>Open dialog from view: </li></ul>
  24. 24. <ul><li>Change view column code to: </li></ul><ul><li>_tmpNumber := @Text ( @DocNumber ); </li></ul><ul><li>_tmpName := LastName + &quot;, &quot; + FirstName; </li></ul><ul><li>_tmpPathEdit := &quot;/0/&quot; + @Text( @DocumentUniqueID ) + &quot;?EditDocument&quot;; </li></ul><ul><li>_tmpOnClick := &quot;onclick=&quot;showDocument('dialogPerson','&quot; + _tmpPathEdit + &quot;')&quot;&quot;; </li></ul><ul><li>_tmpValue := _tmpNumber + &quot; &quot; + &quot;<a href=&quot;#&quot; &quot; + _tmpOnClick + &quot;>&quot; + _tmpName + &quot;</a>&quot;; </li></ul><ul><li>&quot;<div class=&quot;pdViewColumn&quot;>&quot; + _tmpValue + &quot;</div>&quot; </li></ul><ul><li>Remarks: </li></ul><ul><li>- The style sheet class ‚pdViewColumn‘ is defined in </li></ul><ul><li>‚ PhoneDirectory.css‘. </li></ul><ul><li>- The Javascript function „showDocument“ calls the dojo dialog </li></ul><ul><li>(Code see next page) </li></ul>Step 2: ‚Open Person‘ dialog (2)
  25. 25. Step 2: ‚Open Person‘ dialog (3) <ul><li>Javascript function: </li></ul><ul><li>function showDocument ( strPage, strPath ) { </li></ul><ul><li>// open page </li></ul><ul><li>dijit.byId( strPage ).setHref( G_BASEURL + strPath ); </li></ul><ul><li>dijit.byId( strPage ).show(); </li></ul><ul><li>setFocusToField( strPage ,'Firstname'); </li></ul><ul><li>return; </li></ul><ul><li>} </li></ul>Contains the host name and database path. Function sets the focus to the field ‚Firstname‘.
  26. 26. Step 2: ‚Open Person‘ dialog (4) <ul><li>Javascript function: </li></ul><ul><li>function setFocusToField ( strDialog, strFieldName ) { </li></ul><ul><li>// wait 500 ms to open the form, then set the focus to the first field </li></ul><ul><li>setTimeout(dojo.hitch( strDialog, function(){ </li></ul><ul><li>document.getElementsByName( strFieldName )[0].focus(); </li></ul><ul><li>}), 500); </li></ul><ul><li>} </li></ul>If the loading process required more than 500 ms an error occured.
  27. 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. 28. Step 3: Add Tab container <ul><li>Add following code to „fa_View“ </li></ul><ul><li>Add „dojo.require“ to subform „sa_DojoHeader“ </li></ul><ul><li>dojo.require(&quot;dijit.layout.TabContainer&quot;); </li></ul><ul><li>dojo.require(&quot;dijit.layout.ContentPane&quot;); </li></ul>The view „Default“ should be placed here. Subform „sa_List“
  29. 29. Step 3: Test it <ul><li>Result: </li></ul><ul><li>The view will be display in the first tab. </li></ul><ul><li>If the user switch to the second tab, the static subform </li></ul><ul><li>content will be showed. </li></ul>
  30. 30. Step 4: Widget ‚AddressReferrer‘ (1) <ul><li>Example „AddressReferrer“ </li></ul><ul><li>Code to add widget on page: </li></ul><ul><li><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;/> </li></ul><ul><li>Link: http://homepages.uni-paderborn.de/okoehler/pav53/AddressRef.html </li></ul>Call number with Skype Create e-mail Open http page Text field + icon + link
  31. 31. Step 5: Install ‚AddressReferrer‘ <ul><li>Add to Phone Directory application: </li></ul><ul><ul><li>1. Add js file to ‚Shared ResourcesFiles‘ </li></ul></ul><ul><ul><li>2. Add css file to ‚Shared ResourcesStyle Sheets‘ </li></ul></ul><ul><ul><li>3. Add skype.gif image to ‚Shared ResourcesImages‘ </li></ul></ul>
  32. 32. Step 6: Add widget ‚AddressReferrer‘ (1) <ul><li>1. Create field „SkypeNumber“ to form „fa_DialogPerson“ </li></ul><ul><li>2. Add html tags (field section ‚Others‘) </li></ul><ul><li>dojoType=&quot;pavone.widget.AddressRef&quot; type=&quot;skype&quot; id=&quot;phoneNumber&quot; label=&quot;skype.gif&quot; title=„Call person&quot; </li></ul>
  33. 33. Step 6: Test it <ul><li>Remark: </li></ul><ul><li>If the user clicks on the Skype icon behind the input field the Skype client will be opened and the number in the </li></ul><ul><li>field will be called. </li></ul>
  34. 34. Resources <ul><li>The Book of Dojo: http://dojotoolkit.org/book/dojo-book-1-0 </li></ul><ul><li>Demos: http://dojotoolkit.org/key-links </li></ul><ul><li>Dojomino Blog: http://dojomino.com </li></ul><ul><li>LCTY 2008 presentation (german) by Martin Henning </li></ul>
  35. 35. Diskussion
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×