Dojo and Common NOL

Date: 06/01/2008 

1
 Agenda

1. Overview
2. Core
3. Dijit
4. Dojox
5. Common NOL Client Side Architecture
6. Q&A

2
 Overview

What is Dojo?

• Dojo is an open-source JavaScript toolkit that provides an API and reusable assets that assists in
the development of web applications

• Consists of three packages

– Core consists of events, animations, JSON, and various language utilites
– Dijit consists of a library of UI widgets
– Dojox consists of extensions to the library providing enhanced features

Why Dojo?

• Architectural decision to provide AJAX and enhanced GUI features to the client

• To promote code reuse, code consistency, and a object oriented approach to client side scripting

3
 Dojo Core

Features used (but not limited to) by Common NOL

• JSON encoding/decoding
• Package loading
• Unified events
• Animation support
• Language utilities
• CCS style and positioning support
• OOP support
• Firebug integration
• Dojo Objective Harness (Unit testing)
• Unified data access (dojo.data)
• Universal debugging tools

4
 Dojo Core - JSON

What is JSON?
• JSON stands for Java Script Object Notation. JSON is a human-readable data-interchange format
that represents data structures and arrays.

JSON Example:

{ "firstName": "John",
"lastName": "Smith",
"address": {
"streetAddress": "21 2nd Street",
"city": "New York",
"state": "NY",
"postalCode": 10021 },
"phoneNumbers": [
"212 555-1234",
"646 555-4567" ]
}

5
 Dojo Core

Classes declared in a common format: dojo.declare("ClassName", null, {/*class body*/});

Example Class:

dojo.require("dojo.parser");

dojo.declare("Person", null, {

        constructor: function(name, age, currentResidence){

                this.name=name;
                this.age=age;
                this.currentResidence=currentResidence;
},

        moveToNewState: function(newState){
                this.currentResidence=newState;
}
});

Example of creating a new instance:

var matt= new Person('Matt', 25, 'New Mexico');

matt.moveToNewState(‘Arizona’);

6
 Dojo Dijit

What is Dijit?
• Dijit is a collection of widgets utilizing the Dojo Core to provide GUI themes, form controls, layouts,
and the ability to extend and customize
• Takes existing HTML elements and extends them to provide extension points for a developer

Features used (but not limited to) by Common NOL

• Form, Validation, and Specialized Inputs
• Layout
• User assistance and feedback
• Grid (also in dojox)

7
 Dojo Dijit

Common NOL Example

8
 Dojo Dijit - Custom Widgets

Provides the ability to write encapsulated views and reuse them within a page.

Example:

Example Code:

<td width=50% valign=top rowspan=2>

<div dojoType="cnol.cpv.view.AgentView" id="agent"></div>
</td>

9
 Dojo Dijit – Custom Widget

Common NOL Example

10
 Dojo Dojox

Features used (but not limited to) the following:

• Fisheye (Claims Gateway Icons and Weather)

• Grid with data integration with dojo.data

Future considerations:

• Dojo Wire

• Comet

• Pagination

• Encryption of local data

11
 CNOL Client Architecture

Example from Declarative and Programmatic Data Wiring in dojo presentation by Jared Jurkiewicz

12
CNOL Client Architecture

13
 Q&A

Questions?

14