8/7/2019 47255586-Dojo-Overview

1/14

1

Dojo and Common NOL

Date: 06/01/2008

8/7/2019 47255586-Dojo-Overview

2/14

2

Agenda

1. Overview

2. Core

3. Dijit

4. Dojox5. Common NOL Client Side Architecture

6. Q & A

8/7/2019 47255586-Dojo-Overview

3/14

3

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

8/7/2019 47255586-Dojo-Overview

4/14

4

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

8/7/2019 47255586-Dojo-Overview

5/14

5

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" ]

}

8/7/2019 47255586-Dojo-Overview

6/14

6

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 ofcreating a new instance:

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

matt.moveToNewState(Arizona);

8/7/2019 47255586-Dojo-Overview

7/14

7

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)

8/7/2019 47255586-Dojo-Overview

8/14

8

Dojo Dijit

Common NOL Example

8/7/2019 47255586-Dojo-Overview

9/14

9

Dojo Dijit - Custom Widgets

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

Example:

Example Code:

8/7/2019 47255586-Dojo-Overview

10/14

10

Dojo Dijit Custom Widget

Common NOL Example

8/7/2019 47255586-Dojo-Overview

11/14

11

Dojo Dojox

Features used (but not limited to) the following:

Fisheye (Claims Gateway Icons and Weather)

Grid with data integration with dojo.data

Futureconsiderations:

Dojo Wire

Comet

Pagination

Encryption of local data

8/7/2019 47255586-Dojo-Overview

12/14

8/7/2019 47255586-Dojo-Overview

13/14

13

CNOL Client Architecture

8/7/2019 47255586-Dojo-Overview

14/14

14

Q & A

Questions?