Dojo is an Open Source JavaScript toolkit that makes it easier to create Ajax/DHTML applications for browsers with modern, attractive user interfaces. Dojo is included with Domino 8.5 and with Dojo you can quickly and easily improve browser applications that use the traditional Domino Form/View design architecture.

This course immerses the developer in the essential aspects of the Dojo Base and Dijit widget libraries needed to adapt elements of existing Domino applications.

Lotus Training Learning Objectives

In this course, you will learn how to:

• explain the role of Dojo in browser applications running on Domino and how Dojo is otherwise used by Domino in iNotes, the Rich Text Editor, and XPages
• integrate Dojo and Dijit widgets with existing browser applications running on Domino
• install and locate the Dojo library files on the Domino Server and include them in a design element such as a Form or Page
• use key functions in the base Dojo library file to interact with the browser’s DOM nodes, manipulate JavaScript objects, load additional Dojo libraries when needed, run code only after all the Dojo modules have loaded, validate user entries, and fetch Domino data
• debug applications that use Dojo and JavaScript using the console log and Mozilla FireBug
• convert Domino fields to Dijit widgets
• establish a Dojo data store from a JSON object (including from a Domino View) and use the data to populate combo boxes, trees, and data grids
• add button, menu, toolbar, layout, and dialog box widgets to Pages and Forms.

Lotus Training Audience

This course is designed for Domino programmers well versed in using Domino Designer 8.5. It assumes that you have:

• thorough knowledge of the Domino Designer 8.5.x development environment to create browser-based applications, including Form and View design, as well as how to use properties boxes, and how to set the ACL
• mastered the topics covered in Domino Designer 8: Basic Notes Applications, Domino Designer 8: Basic Browser Applications, and Domino Designer: Web Agents and Web Services
• knowledge of Web technologies, including browser DOMs, HTML/DTHML, Cascading Style Sheets, Ajax, JSON, substantial knowledge of JavaScript to the level covered in Domino Designer: JavaScript

This course is part of a series of Domino Designer 8.5.x training courses. Follow these paths to master all aspects of developing applications using Domino Designer.

Domino Designer: Classic Notes Applications provides the base knowledge for this additional training.

Lotus Training Course duration

This course is sold as a 1-day course but you will likely need more time to thoroughly explore the examples provided in the text and sample database.

Course design

This course is designed as a lecture/demonstration that includes numerous hands-on exercises. As you expand your knowledge about Domino and Dojo, you will immediately apply the concepts and techniques in the exercises.

Lotus Training Course outline

Topic 1: Introduction to the Dojo Toolkit

• Traditional architecture for both Lotus Notes and Web browsers
• Client-side scripting
• So what about XPages?
• Dojo Toolkit contents
• Dojo before Domino 8.5
• Dojo after Domino 8.5
• Three builds of Dojo library files
• Examples of how Domino 8.5+ uses Dojo
• Install SDK build
• Run Dojo SDK unit tests

Topic 2: Dojo Core

• Load dojo.js bootstrap library from a Form
• Exercise: Load dojo.js bootstrap library
• Get help using the Dojo objects
• Use dojo.js functions to operate on dojo object
• dojo.byId and dojo.style
• Exercise: dojo.byId and dojo.style
• dojo.require and dojo.string
• Exercise: string.js
• dojo.addOnLoad
• Exercise: dojo.addOnLoad
• djConfig, the Debug Console, and console.log
• Debugging with Firebug
• Arrays and dojo.forEach
• dojo.query and dojo.NodeList
• Cookies
• dojox.validate
• Exercise: Validate input and set cookie
• Ajax

Topic 3: Dijit Form Widgets

• Review of basic HTML field types in Domino Designer
• Types of widgets
• Get the Form ready to add widgets
• Exercise: Get the Form ready to add widgets
• Add widgets to a Form
• Exercise: Add widgets to a Form
• dojo.byID versus dijit.byID
• jsId= attribute
• User input translation
• Enhanced TextBoxes for common data entry types
• Exercise: Add widget translation and validation
• Validation and conditional form submit
• Date and time widgets
• Select widgets
• Dijit click widgets
• TextArea and Editor

Topic 4: Data Stores and Widgets That Use Them

• What is a Dojo data store?
• JavaScript objects and JSON
• Create dojo.data.ItemFileReadStore data store from JSON object
• Exercise: Create data store from JSON object
• ComboBox and FilteringSelect widgets
• Exercise: Create ComboBox widget that uses a data store
• Keyword aliases
• Data stores that support the Identity API
• Tree widgets
• Example Tree widgets
• Example Tree 1: No children, no fake root
• Example Tree 2: No children, fake root, more item inspection
• Exercise: Create Tree widget that uses a data store
• Example Tree 3: Children, fake root
• Example Tree 4: Navigation Tree with children, no fake root

Topic 5: External Data Stores and DataGrid Widgets

• Create dojo.data.ItemFileReadStore data store from URL source
• Workaround 1: Dojo.xhrGet
• Workaround 2: Page plus Embedded View
• Optional View URL command arguments and performance
• Dojox DataGrid widget
• Domino Views
• Example 1: DataGrid using dojo.data.ItemFileReadStore
• DataGrid CSS files
• Exercise: Create DataGrid widget
• Example 2: DataGrid filter method
• Example 3: DataGrid refresh
• Other data stores from Domino View data

Topic 6: Dijit Buttons, Menus, and Toolbars

• Buttons
• Icons on buttons and menus
• Example 1: Menu
• MenuBar
• DijitToolbar

Topic 7: Dijit Layout Widgets

• BorderContainer
• BorderContainer and ContentPane attributes
• Add content to the panes
• Determine which tab is selected in TabContainer
• Delete and add tab to TabContainer
• TitlePane and multiple TitlePanes
• Dialog Example 1: Modal Dialog
• Dialog Example 2: HTML File Resource for read-only Dialog contents
• Connecting to an event
• Dialog Example 3: Tooltip
• Dialog Example 4: TooltipDialog