Introduction Dojo Toolkit & IBM Lotus Domino

Slide 1: Introduction Introduction dojo Toolkit & IBM Lotus Domino Samples Installation Step-by-Step Resources Discussion February 2008 Dr. Rolf Kremer (PAVONE AG)

Slide 2: Agenda Introduction Introduction Samples Installation Samples Step-by-Step Installation Resources Discussion Step-by-Step Resources Discussion

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

Slide 4: Dojo History Introduction 2004: Dojo 0.0: How do I create something like GMail? Samples Installation 2005: 0.1, 0.2: More features Step-by-Step 2006: 0.3, 0.4: Features, doc writer Resources Discussion 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

Slide 5: Dojo Roadmap Introduction 2008-02: 1.1 RC (Beta: 19.02) Samples 2008-03: 1.1 (Firefox 3 Dijit support) Installation Step-by-Step 2008-04: 1.1.1 Resources Discussion 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

Slide 6: Dojo Modules Introduction Core Samples Contains basic libraries Ajax, evens, packaging, CSS-based querying, animations, Installation JSON, language utilities Step-by-Step Size: 23 k Resources Discussion 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

Slide 7: JavaScript Frameworks Introduction Yahoo! User Interface Library Samples TIBCO General Interface Installation Step-by-Step Zimbra AjaxTK Resources Mootools Macao Discussion BACKBASE Dojo Toolkit Script.aculo.us crossvision Open Rico qooxdoo Ext jQuery Prototype … and more…

Slide 8: Dojo Samples Introduction Dojo Webseite Samples Dojo Feature Explorer Installation Step-by-Step Sample by Rocky Oliver (IBM Lotus Domino) Resources Discussion 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)

Slide 9: Dojo & Domino Introduction Domino form fields that can be Dojo enabled: Samples Installation Step-by-Step Resources Discussion Source: Lotusphere 2008 – Presentation: AD303.pdf

Slide 10: Domino Extensions (1) Introduction View: Samples Installation Step-by-Step Resources Discussion Source: Lotusphere 2008 – Presentation: AD303.pdf

Slide 11: Domino Extensions (2) Introduction Samples Installation Step-by-Step Resources Discussion Source: Lotusphere 2008 – Presentation: AD303.pdf

Slide 12: Domino Extensions (2) Introduction Samples Installation Step-by-Step Resources Discussion Source: Lotusphere 2008 – Presentation: AD303.pdf

Slide 13: Installation Options Introduction AOL CDN (Content Distribution Network) + Easy installation Samples + Easy update Installation - Requried Internet access - AOL can log the access Step-by-Step Resources Server installation + Required only Intranet access Discussion + 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

Slide 14: Installation Steps (1) Introduction AOL CDN Samples Add following line to your head section: Example: Installation <script type="text/javascript" Step-by-Step src="http://o.aolcdn.com/dojo/1.0.2/dojo/dojo.xd.js" djConfig="parseOnLoad: true"></script> Resources Discussion 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="text/javascript„ src="/dojo-release-1.0.2/dojo/dojo.js" djConfig="parseOnLoad: true"></script> Or another path

Slide 15: Installation Steps (2) Introduction Application installation Samples Insert dojo files into the database Installation Step-by-Step Resources Discussion Add following line to the head section: Example: "<script type="text/javascript„ src="/" + @WebDbName + "/dojo/dojo.js" djConfig="parseOnLoad: true"></script>"

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

Slide 17: Step 0: Install Firebug (or another JavaScript debugger) Introduction Firebug: Tool for debugging JavaScript in Firefox browers Samples Installation Step-by-Step Resources Discussion

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

Slide 19: Step 1: ‚Add Person‘ dialog (2) Introduction 1. Create subform „sa_DialogPerson“ Samples <div dojoType="dijit.Dialog" id="dialogPerson" title="<Computed Installation Value>" href="<Computed Value>" execute=„dijit.byId('fa_DialogPerson').hide();"> „Person“ Step-by-Step </div> Resources tmpBaseUrl + "/fa_DialogPerson?OpenForm" Discussion 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.

Slide 20: Step 1: ‚Add Person‘ dialog (3) Introduction 3. Create form „fa_DialogPerson“ Samples „Save“ Installation Step-by-Step „Close“ Resources Discussion Add WebQuerySave-Code: @Command([ToolsRunMacro]; "(WEBQuerySavePerson)") Remark: The agent re-opens the page.

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

Slide 22: Step 1: Test it Introduction Samples Result: Installation If the user clicks on the button ‚Add Person‘ the dojo dialog Step-by-Step with the form ‚fa_DialogPerson‘ will be opened. Resources If the user clicks on the ‚Close‘ button, the dojo dialog Discussion 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.

Slide 23: Step 2: ‚Open Person‘ dialog (1) Introduction Open dialog from view: Samples Installation Step-by-Step Resources Discussion

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

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

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

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

Slide 28: Step 3: Add Tab container Introduction • Add following code to „fa_View“ Samples Installation Step-by-Step The view „Default“ should be placed here. Resources Discussion Subform „sa_List“ • Add „dojo.require“ to subform „sa_DojoHeader“ dojo.require("dijit.layout.TabContainer"); dojo.require("dijit.layout.ContentPane");

Slide 29: Step 3: Test it Introduction Samples Result: Installation The view will be display in the first tab. Step-by-Step Resources If the user switch to the second tab, the static subform Discussion content will be showed.

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

Slide 31: Step 5: Install ‚AddressReferrer‘ Introduction Add to Phone Directory application: Samples 1. Add js file to ‚Shared ResourcesFiles‘ Installation Step-by-Step 2. Add css file to ‚Shared ResourcesStyle Sheets‘ Resources Discussion 3. Add skype.gif image to ‚Shared ResourcesImages‘

Slide 32: Step 6: Add widget ‚AddressReferrer‘ (1) Introduction 1. Create field „SkypeNumber“ to form „fa_DialogPerson“ Samples Installation Step-by-Step Resources 2. Add html tags (field section ‚Others‘) Discussion dojoType="pavone.widget.AddressRef" type="skype" id="phoneNumber" label="skype.gif" title=„Call person"

Slide 33: Step 6: Test it Introduction Samples Remark: Installation If the user clicks on the Skype icon behind the input field the Step-by-Step Skype client will be opened and the number in the Resources field will be called. Discussion

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

Slide 35: Diskussion Introduction Samples Installation Step-by-Step Resources Discussion