Introduction Dojo Toolkit & IBM Lotus Domino

  • 25,496 views
Uploaded 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 …

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.

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
25,496
On Slideshare
0
From Embeds
0
Number of Embeds
35

Actions

Shares
Downloads
753
Comments
0
Likes
15

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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 ResourcesFiles‘
      • 2. Add css file to ‚Shared ResourcesStyle Sheets‘
      • 3. Add skype.gif image to ‚Shared ResourcesImages‘
  • 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