INTRODUCTION TO DOJO

What is Dojo?
There currently are quite a few open source and commercial JavaScript frameworks available, including Prototype, EXTJS, YUI, and jQuery. Whereas most JavaScript frameworks focus on simplifying DOM access, it could be argued that Dojo is a one-stop solution. Here is some of what Dojo does for you: Introduces the concept of classes, constructors, and inheritance in JavaScript, allowing you to build object-oriented JavaScript code. Allows you to build more-manageable code by breaking your code into modules. Simplifies Ajax programming by providing infrastructure code for making asynchronous requests using XMLHttpRequest and cross-browser-compatible DOM-manipulation code. As a framework, Dojo has three main components: The Dojo core provides core functionality such as ability to make remote method calls, manipulate DOM node, and manipulate Cascading Style Sheets (CSS). The Dojo core also supports animation features and drag-and-drop functionality. Dijit is Dojo's widget library, built on top of the Dojo core. Dijitemplate-based, accessible widgets, not only for simple form control but also advanced widgets such as calendar control, menus, toolbars, progress t provides bars, charts, and graphs. DojoX is a container for developing extensions to the Dojo toolkit. It acts as an incubator for new ideas and a testbed for experimental additions to the main toolkit, as well as a repository for more stable and mature extensions

Dojo Architecture
As illustrated in the diagram the Dojo toolkit is made of a set of layered libraries. The bottom most layer is the packaging system which allows you to customize the distribution of Dojo for your application. On top of Dojo's package system reside language libraries such as the Dojo event system and the language utilities which greatly improve and simplify the lives of JavaScript developers.

lfx is a lightweight effects library, while I/O is "where the AJAX-based communication with the server A higher layer and highly popular piece of Dojo is the widget toolkit, which contains a set of APIs and functionality for defining and instantiating reusable components across your application. Your application code may use functionality from any or all of the different layers in the toolkit. Dojo is designed to simplify building sophisticated JavaScript applications. Download Dojo from: http://download.dojotoolkit.org/release-1.0.0/dojo-release1.0.0.tar.gz.

Adding Dojo to your HTML pages

1. Flags <script type="text/javascript"> djConfig = { isDebug: false, parseOnLoad: true }; </script> Dojo Bootstrap <script type="text/javascript" src="/path/to/dojo/dojo.js"></script> This imports the core Dojo library from dojo.js. The djConfig attribute allows us to set various configuration properties of Dojo. Here, we set the parseOnLoad property to true. This causes Dojo to attach an onload event handler for the body. Adding Resources <script type="text/javascript"> dojo.require("dojo.event.*"); dojo.require("dojo.io.*"); dojo.require("dojo.widget.*"); </script> The dojo.require() function imports the JavaScript code for a specific package. This allows you to import only the portion of Dojo that you need. In this case, we are importing the code for the dijit.form.DateTextBox widget. Note: To use any widget in a page, you must import its code using dojo.require().

2.

3.

What are widgets?

Widget is a generic term for the part of a GUI that allows the user to interface with the application and operating system. Widgets display information and invite the user to act in a number of ways. Typical widgets include buttons, dialog boxes, pop-up windows, pull-down menus, icons, scroll bars, resizable window edges, progress indicators, selection boxes, windows, tear-off menus, menu bars, toggle switches and forms. Is a UI element such as a button, text box, scroll bar, calendar, tree etc Widgets "enhance the user experience". In layman's terms, that means that you can design web pages that are easier for people use, more quickly understandable, less error-prone, and flashier than web pages in plain html. Three Ways of Adding Widgets to Your Page. When Dojo traverses the DOM tree, it detects the existence of the dojoType attribute. This causes Dojo to create the widget by creating additional DOM elements near the <input> element. That's pretty much all it takes to dojo.require(). 1)<dojo:NameofWidget ../> 2)<div dojoType="NameOfWidget" ..../> 3)<div class="dojo-NameOfWidget" .../> Eg:<button dojoType="Button" id="foo"> Click me </button>

 Analyze the Code

Add a Combo Box Widgets <select dojoType="dijit.form.ComboBox" autocomplete="true" value="Enter a state"> <option selected="selected">California</option> <option>Illinois</option> <option>New York</option> <option>Nebraska</option> </select> Add Checkbox and Radio Button <input id="rad1" dojoType="dijit.form.RadioButton" checked="checked" name="vendor" value="IBM"/> <label for="rad1">IBM</label> <input id="rad2" dojoType="dijit.form.RadioButton" name="vendor" value="MS"/> <label for="rad2">Microsoft</label> <input id="rad3" dojoType="dijit.form.RadioButton" name="vendor" value="Oracle"/> <label for="rad3">Oracle</label>

Dojo Events
Events are essential in JavaScript components as they drive the user interface. allows JavaScript components to interact with each other. It abstracts the JavaScript event system. Lets you register to "hear" about any action through a uniform and simple to use API - dojo.event.connect().

dojo.event.connect(srcObj,"srcFunc", "targetFunc"). eg: dojo.event.connect(helloButton, 'onClick', 'helloPressed') Event handling works somewhat differently in Dojo than regular DOM. First, let's recap DOM's event handling scheme. For a regular button element, you will register an onclick event handler as follows: <button onclick="showEventStd(this, event);">OK</button> The "this" and "event" keywords tell the browser to supply the element and the event object as parameters to the handler function. The handler function looks something like this: function showEventStd(theElement, theEvent) { alert("Event " + theEvent.type + " for element " + theElement.nodeName); } Let's have a look at an example. The event handler is registered as follows: <button dojoType="dijit.form.Button" onclick="showEvent">OK</button> The event handler method looks like this: function showEvent(theEvent) alert("Event " + theEvent.type + " for element " + theElement.nodeName); }

Dojo Debugging
Using alert() for debugging can get tiresome. Dojo has a built in logging mechanism. It's pretty easy to use. First, enable debugging. This is done by setting the isDebug property of Dojo configuration to true. <script type="text/javascript" djConfig="parseOnLoad: true, isDebug: true" src="dojo-release-1.0.0/dojo/dojo.js"> </script> Next, replace the alert() function with console.debug(). function showEvent(theEvent) { console.debug("Event: " + theEvent.type + " for element: " + theEvent.target.nodeName); } Save changes. Refresh the browser. The debug console becomes visible at the bottom of the page. Click the buttons and make sure that the debug messages show up

 Screen Layout
ContentPane Widget A content pane is the simplest layout manager. It is just a grouping of other widgets. It does not enforce any particular layout. In a way, it acts just like a <div> element. ContentPane does have a powerful feature. It can pull in content from an external URL and populate its internal content asynchronously. This allows you to load content into the pane on demand <div dojoType="dijit.layout.ContentPane" style="background: red"> <p>Hello World</p> </div>

The LayoutContainer Widget Most desktop applications have this layout: 12 1. The top layer has menu and toolbar. 2. There are sidebars on left and/or right side. 3. There is a status bar and widgets at the bottom. 4. In the middle, we have the main work area <div dojoType="dijit.layout.LayoutContainer"> <div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="background:red;height:50px"> Header </div> <div dojoType="dijit.layout.ContentPane" layoutAlign="bottom" style="background:blue> </div> Etc.

TabContainer Widget Showing tabbed content is very easy. Each tab is created using a ContentPane. The title of the tab is set Using the title attribute of the ContentPane. <div dojoType="dijit.layout.TabContainer" style="width:500px;height:100px"> <div dojoType="dijit.layout.ContentPane" title="Tab A"> The content of tab A. </div> <div dojoType="dijit.layout.ContentPane" title="Tab B" href="content1.html"> Loading... </div> <div dojoType="dijit.layout.ContentPane" title="Tab C" closable="true" selected="true"> The content of tab C. </div>

Grid Widget <div dojoType="dojox.Grid" autoWidth="true" model="productModel" structure="structure"></div> The grid widget can help you create very complex tables. var data = [ ["Baseball gloves", 12.34, "Sports"], ["Tennis ball", 5.99, "Sports"], ["T-shirt", 12.45, "Clothing"], ["Hat", 12.45, "Clothing"] ]; var productModel = new dojox.grid.data.Table(null, data);

Dojo.io.bind
The dojo.io.* namespace contains generic APIs for doing network I/O. dojo.io package provides portable code for XMLHTTP and other, more complicated, transport mechanisms . dojo.io.bind() is a generic asynchronous request API that wraps multiple transport layers

dojo.io.bind() hides low-level XMLHttpRequest operations.

dojo.io.bind() Syntax:
// Make a request that returns raw text from a URL dojo.io.bind({ // URL to make a request to url: "http://foo.bar.com/something", // Callback function to execute upon successful response load: function(type, data, evt){ /*do something w/ the data */ }, // Type of data that is returned mimetype: "text/plain });

Example : Error Handling

// Make a request that returns raw text from a URL // with error handling dojo.io.bind({ url: "http://foo.bar.com/sampleData.txt", load: function(type, data, evt){ /*do something with the data */ }, error: function(type, error){ /*do something with the error*/ }, mimetype: "text/plain" });

HelloWorld demo:
Step1: Setting up Dojo - HelloWorldTutorial/ - | - |---- js/ - | ---- dojo/ HelloWorldTutorial/ | |-- js/ | -- dojo/ | -- build.txt -CHANGELOG -- demos | -- .. -- dojo.js -dojo.js.uncompressed.js -- iframe_history.html -LICENSE -- README -- src/ | -- ..

Cont..
Step2: Include dojo.js which is responsible for loading the base Dojo script that provides access to all the other Dojo functionality that we will use. Step3: Creating a Button Widget . Step4: Connecting an Event to the Widget Step5: Reading Data from the Server

Source code: <html> <head> <title>Dojo: Hello World!</title> <!-- SECTION 1 --> <script type="text/javascript" src="js/dojo/dojo.js"></script> <!-- SECTION 2 --> <script type="text/javascript"> dojo.require("dojo.io.*"); dojo.require("dojo.event.*"); dojo.require("dojo.widget.*"); dojo.require("dojo.widget.Button");

Source code:

function helloPressed() { dojo.io.bind({ url: response.txt', handler: helloCallback }); } function helloCallback(type, data, evt) { if (type == 'error') alert('Error when retrieving data from the server!'); else alert(data); }

function init() { var helloButton = dojo.widget.byId('helloButton'); dojo.event.connect(helloButton, 'onClick', 'helloPressed') } dojo.addOnLoad(init); </script> </head> <body> <button dojoType="Button" widgetId="helloButton">Hello World!</button> <br> Please enter your name: <input type="text" id="name"> </body> </html>

Advantages
Code Simplification Reusable Code Portable Tools More responsive and functional