Dojo and Common NOL

Date: 06/01/2008 

1

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

code consistency. and a object oriented approach to client side scripting 3 . JSON. animations. 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.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.

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 .

"state": "NY". "city": "New York". JSON is a human-readable data-interchange format that represents data structures and arrays. "lastName": "Smith".JSON What is JSON? ‡ JSON stands for Java Script Object Notation. "postalCode": 10021 }. "646 555-4567" ] } 5 . "phoneNumbers": [ "212 555-1234". JSON Example: { "firstName": "John".Dojo Core . "address": { "streetAddress": "21 2nd Street".

moveToNewState(µArizona¶). this. }. matt.parser").declare("ClassName".Dojo Core Classes declared in a common format: Example Class: dojo.name=name. Example of creating a new instance: var matt= new Person('Matt'.currentResidence=newState. null.require("dojo. moveToNewState: function(newState){ this. { constructor: function(name. 6 . this. dojo. age. currentResidence){ this. 25.currentResidence=currentResidence.declare("Person". dojo. null. {/*class body*/}). } }). 'New Mexico').age=age.

form controls. and Specialized Inputs ‡ Layout ‡ User assistance and feedback ‡ Grid (also in dojox) 7 . layouts.Dojo Dijit What is Dijit? ‡ Dijit is a collection of widgets utilizing the Dojo Core to provide GUI themes. Validation. 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.

Dojo Dijit Common NOL Example 8 .

cpv.Dojo Dijit .AgentView" id="agent"></div> </td> 9 . Example: Example Code: <td width=50% valign=top rowspan=2> <div dojoType="cnol.Custom Widgets Provides the ability to write encapsulated views and reuse them within a page.view.

Dojo Dijit ± Custom Widget Common NOL Example 10 .

data Future considerations: ‡ ‡ ‡ ‡ Dojo Wire Comet Pagination Encryption of local data 11 .Dojo Dojox Features used (but not limited to) the following: ‡ ‡ Fisheye (Claims Gateway Icons and Weather) Grid with data integration with dojo.

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 .

Sign up to vote on this title
UsefulNot useful