wareSource

Domino Designer 8.5: Browser Applications and Dojo

Course Code: DDDojo85
Product: Lotus Notes/Domino R8.5
Duration: 1 days
Topics/Pages: 6 topics / 146 pages
Price (US dollars):
$25 per user

Description

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.

Course goals

This course will teach you how to:

  • explain the role of Dojo in browser applications running on Domino and how Dojo is otherwise used by Domino 8.5 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
  • install a newer version of Dojo concurrent to the older version installed on and used by other Domino applications
  • 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.


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 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 8: 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 8: JavaScript


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


Domino Designer 8: Basic Notes Applications provides the base knowledge for this additional training, and Domino Designer 8.5: User Interface updates existing Domino 8 programmers to the changes in Domino Designer 8.5.
Client Track

      • Configure Domino to use DB2 as a database engine and build applications that access relational data, DB2 for Domino 8 Administrators and Developers.
      • Specialize in programming Notes applications to respond to built-in user interface features, Domino Designer 8: Special Notes Features.
      • Convert an application written for Notes clients to be used in browsers, Domino Designer 8: Basic Browser Applications.
      • Provide data to cutting-edge Web applications, Domino Designer 8: Web Agents and Web Services.
      • Enhance Domino 8.5 Web applications by employing Dojo in Domino Designer 8.5: Browser Applications and Dojo.


Language Track. These languages apply to both Notes and browser clients:

    • Learn sophisticated application techniques that fully exploit the formula language in Domino Designer 8: Formula Language.
    • Develop sophisticated applications and Agents with LotusScript in Domino Designer 8: LotusScript.
    • Add powerful client-side scripting to browser applications in Domino Designer 8: JavaScript.


Duration

This course is sold as a 1-day course.


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.

Outline


Topic 1: Introduction to the Dojo Toolkit 

Traditional architecture for both Lotus Notes and Web browsers
Client-side scripting
Dojo Toolkit contents
How Domino 8.5 uses Dojo
So what about XPages?
Dojo library download locations
Add a newer version of Dojo to Domino
Run Dojo 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 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 form submission
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
Create dojo.data.ItemFileReadStore data store from URL source
Optional View URL command arguments and performance
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
Dojox Grid widget
Domino Views
Grid data store
Grid 1.1 widget basics
Grid events
Exercise: Create Grid 1.1 widget that uses a data store
DataGrid 1.3 widget basics


Topic 5: Dijit Buttons, Menus, and Toolbars 

Buttons
Icons on buttons and menus
Menus
MenuBar
DijitToolbar 


Topic 6: 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
HTML File Resource for read-only Dialog contents
Connecting to an event
Tooltip
TooltipDialog