What is Dojo?

Dojo is JavaScript framework released as open source software. This JavaScript toolkit provides many components to develop rich internet applications. You can use Dojo toolkit to develop dynamic web applications. Dojo toolkit will put life in your web application and turn it into highly interactive application. You can turn your web application into desktop like web application.

Dojo offers many widgets, utilities and ajax libraries to develop your application. Dojo is released under BSD or AFL license Dojo is free and can be used to develop free or commercial application.

Features of Dojo

Dojo is based on HTML and JavaScript, so its easy for the developers to learn it fast. There is no requirement of learning new programming language. Just HTML and JavaScript knowledge if sufficient. Dojo provides higher abstraction layer to the programmer. So, it helps the programmers to develop powerful functions very easily. Dojo has already invented the wheels for the programmers and now programmers just have to use the Dojo api into their application

Here is the list of components that comes along with Dojo framework:

DOJO Tree DOJO Button DOJO Calendar control DOJO Grid DOJO List box and many more..

In the next sections you will be learning about all these components in details.

Benefits of Dojo Framework In this section we will see the benefits of Dojo Framework. Dojo toolkit provides many widgets to develop the UI for web applications. Dojo is one of the robust ajax framework that can be used to develop enterprise grade application. Following are the benefits of Dojo.

Associative arrays Loosely typed variables Regular expressions Objects and classes Highly evolved date, math, and string libraries W3C DOM support in the Dojo

Disadvantages of Dojo Following are the Disadvantages of Dojo.

Developer depends on the browser support for the Dojo There is no way to hide the Dojo code in case of commercial application

Why Dojo? Choosing a ajax framework for your next web application can be very difficult task for you. There may be many choices for the ajax framework. There are many frameworks already available in the market for developing ajax applications. Both commercial and free ajax software's provides many features. Read more on the Dojo Official web site here. In the next section we will learn how to install Dojo.

Install Dojo
In this section we will learn how to download and install Dojo in your web application. You can easily add Dojo support into your existing application. This section covers:

Download and install for new development Download and install Dojo into existing application

Downloading Dojo You can download the latest version of Dojo from its official site http://dojotoolkit.org/. The latest version of Dojo was Dojo Toolkit 1.1.1 at the time of wiring of the tutorial. Download the Dojo toolkit directly from http://dojotoolkit.org/downloads.

In our case the downloaded file was dojo-release-1.1.1.tar.gz. Installing Dojo First choose the directory in your computer where you want to install the Dojo for this tutorial. Let's assume that the directory is c:\mydojo. Now move the downloaded file into the

"c:\mydojo" directory and unzip it using WinZip tool or winrar tool. You will get a new directory called "dojo-release-1.1.1". Here is the screen shot from my computer:

Now you ready to start the development. In next section I will show you how to develop simple "Hello World" Dojo application. Installing Dojo into existing application Installing Dojo into existing application is also a very easy task. You have to just copy the directory "dojo-release-1.1.1" into your existing project. You can rename the directory "dojorelease-1.1.1" to dojo for easy programming. Now get ready to develop "Hello World" application in next section.

Dojo Hello World

In this tutorial, you will learn how to create a "Hello World" example in Dojo. Before creating any examples or applications you must be follow the its directory structure. Try Online: Hello World Create a Button The following example we are going to create a button "Hello World!". To create a button in dojo you need to a Button Widget that contains three visual states as: mouseOut, mouseOver and mouseDown. To follow the following steps for creating a dojo button widget: <script type="text/javascript"> // Load Dojo's code relating to widget managing functions dojo.require("dojo.widget.*"); // Load Dojo's code relating to the Button widget dojo.require("dojo.widget.Button"); </script> dojo.require("dojo.widget.*"): It instructs you to include the dojo widget (Not load all the widgets) for managing functions. dojo.require("dojo.widget.Button"): This line instructs you to load the Dojo button widget. If you don't include this line, the markup code for the button would not be evaluated by Dojo upon loading, resulting in a plain HTML button instead of what you expect. Insert the following code into the HTML body:
<button dojoType="Button" widgetId="helloButton" onClick="helloPressed();">Hello World!</button>

The key attribute of this HTML element to notice is the dojoType attribute. This is responsible for instructing Dojo on how to process the element when the page is loading. In this case you will use a button element for the button that is used to input element - Dojo will work with either as long as the dojoType attribute is present.

widgetId="helloButton": This is replaced with id="helloButton" without the

functionality being affected - Dojo's widget system is smart enough to convert regular id attributes to widgetId's if no widgetId` attribute is explicitly named. Connecting an Event to the Widget When you click the command button then it doing something? We specify an onClick event handler for the given command button.
dojo.require("dojo.event.*");

Above code we use "dojo.event.*" that includes all events functionality of Dojo (But not all widgets). Following function that will called by the button when we clicked. After clicking the "helloPressed" method is called and it displays an alert message like: "Click on the Hello World Button".
function helloPressed() { alert('Click on the Hello World Button'); }

Here is the code of program:

<html> <head> <title>button</title> <script type="text/javascript"> dojo.require("dojo.event.*"); dojo.require("dojo.widget.*"); dojo.require("dojo.widget.Button"); function helloPressed() { alert('Click on the Hello World Button'); }

function init() { var helloButton = dojo.widget.byId('helloButton'); dojo.event.connect(helloButton, 'onClick', 'helloPressed') } dojo.addOnLoad(init); </script>

</head> <body bgcolor="#FFFFCC"> <p align="center"><font size="6" color="#800000">Welcome to Roseindia Dojo Project</font></p> <button dojoType="Button" widgetId="helloButton" onClick="helloPressed();">Hello World!</button> <br> </body> </html>

Output of program:

After clicking the "Hello World!" command button, you get:

Dojo Checkbox
In this section, you will learn how to create a checkbox in dojo. For creating checkbox you require "dijit.form.CheckBox". The checkbox button do some action on press. Try Online: Checkbox [Checkboxes are used when there are multiple lists of options and user may select any number of choices, including zero, one, or more. Each checkbox is independent of all other checkboxes in the list, so checking one box doesn't uncheck the others.] Check boxes are the same as html but dojo provides more controls and styling options than a conventional check box. The checkbox contains Boolean types value either 'true' or 'false'. The following example creates a Checkbox:

Here is the code of Program:

<html> <head> <title>checkbox</title> <!-- check box --> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dijit.form.CheckBox"); </script> </head> <body> <h2>Check box</h2> <input id="cb" dojotype="dijit.form.CheckBox" name="developer" checked="checked" value="on" type="checkbox" /> <label for="cb"> Are you a Developer </label>

</body> </html>

Output of Program:

Dojo Radio Button

In this section, you will learn how to create radio buttons in dojo. For creating radio button you need "dijit.form.CheckBox". The radio button do some action on press. Try Online: Radio Button The RadioButton class is declared in the CheckBox.js file, hence you need dojo.require(dijit.form.CheckBox) for RadioButtons to work. [Radio buttons are used when there is a list of two or more options that are mutually exclusive and the user must select exactly only one choice from a group of radio button. Click a non-selected radio button will deselect whatever other button was previously selected in the list.] Radio Buttons are the same as html but dojo provides more controls and styling options than a conventional Radio button. The radio button also contains Boolean types value either 'true' or 'false'. The following example creates a Radio buttons: Here is the code of Program:
<html> <head> <title>Radio</title> <!-- radio --> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dijit.form.*"); </script> </head> <body>

<h2>Radio button</h2> <input dojoType="dijit.form.RadioButton" id="val1" name="group1" checked="checked" value="Programmer" type="radio" /> <label for="val1"> Programmer </label> <input dojotype="dijit.form.RadioButton" id="val2" name="group1" value="Designer" type="radio" /> <label for="val2"> Designer </label> <input dojotype="dijit.form.RadioButton" id="val3" name="group1" value="Developer" type="radio" /> <label for="val3"> Developer </label> </body> </html>

Output of Program:

Dojo Combo Box

In this section, you will learn what is combo box and how to create a combo box in dojo. For creating the Combo box you need "dijit.form.ComboBox". Try Online: Combo Box Combo Box: A combo box is a graphical user interface that controls GUI element. It is a combination of a drop-down list or list box and a single-line textbox, allowing the user either to type a value directly into the control or choose from the list of options.

Here is the code of Program:

<html> <head> <title>combobox</title> <!-- combo box --> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dijit.form.ComboBox");

function setVal1(value) { console.debug("Selected "+value); } </script> </head> <body> <h2>Combo box</h2> <select name="country" dojoType="dijit.form.ComboBox" autocomplete="false" value="country" onChange="setVal1"> <option>India</option> <option>California</option> <option >Illinois</option> <option >New York</option> <option >Texas</option> </select> </body> </html>

Output of Program:

Dojo Auto completer

In this section, you will learn how to create a auto completer in dojo. Try Online: Auto Completer Auto Completer: The Auto Completer provides the front-end logic for text-entry suggestion and completion functionality. The features of the auto completer to control navigation of the suggestions container via up/down arrow keys and rich event model. Easily to configure its included parameters and custom formatting of auto completer suggestions, query delimiters (Multiple selections per input box), configurable query delay, type-ahead, animation of suggestions container, built-in query caching and much more.

The Combo Box is a hybrid between the combo box and text field. It provides a list of acceptable values. This is good for open-ended multiple choice questions. Rather than having two fields - a combo box and an Other text box - you can use just one field. Here is the code of Program:
<html> <head> <title>Auto Completer Combo</title> <style type="text/css"> @import "../resources/dojo.css"; @import "../dijit/themes/tundra/tundra.css"; </style> <script type="text/javascript" src="dojo.xd.js" djConfig="parseOnLoad: true"></script> <!-- combo box --> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dijit.form.FilteringSelect"); </script> </head> <body class="tundra"> <h2>Auto Completer Combo box</h2> <select dojoType="dijit.form.FilteringSelect" name="sname" autocomplete="false" value="Vinod"> <option value="Vinod">Vinod</option> <option value="Vikash" >Vikash</option> <option value="Deepak" >Deepak</option> <option value="DeepakSir" >Deepak Sir</option> <option value="Arun" >Arun</option> <option value="Amar" >Amar</option> <option value="Aman" >Aman</option> </select> </body> </html>

Output of Program:

Dojo Inline Edit Box

In this section, you will learn how to edit any data. The InlineEditBox provides the better facility for editing any data and save it. Try Online: Inline Edit Box InlineEditBox describes a widget wrapper that takes a child widget declared in markup and makes it inline-editable. This widget performs the role as a <div> tag when not in edit mode. When you click widget text then it open as an editable mode. In this mode, you edit the text and save it. Whenever you don't save the editable text then it can't be save so, after editing the text you must have to save it. Without editing text you can't be save it.

Here is the code of Program: <html> <head> <title>InlineEdit Demo</title> <style type="text/css"> @import "../resources/dojo.css"; @import "../dijit/themes/tundra/tundra.css"; </style> <script type="text/javascript" src="dojo.xd.js" djConfig="parseOnLoad: true"></script> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dijit.form.InlineEditBox"); dojo.require("dijit.form.Textarea"); </script> </head> <body> Edit Please:<br> <p id="areaEditable" dojoType="dijit.form.InlineEditBox" renderAsHtml="true" autoSave="false"> <textarea dojoType="dijit.form.Textarea"> vinod </textarea> </p> </body> </html> Output of Program:

When you click the following text then it open as editable mode:

After editing it, save it:

Then you get:

Dojo inline DateTextBox

In this section, you will learn about the dojo inline DateTextBox and how to create a inline DateTextBox and how to make its editable. Try Online: Inline Date Text Box The following code is the InlineEditBox that edits date of dijit.form.DateTextBox save it automatically. The inner textarea tag is the Textarea widget. When a user run this code then they see the paragraph of rich text. If user clicks the text, the plain text appears in paragraph. If you want to change the value then click the date text and select the appears date. The InlineEditBox has methods get/setDisplayedValue, inline. The following code shows the DateTextBox that makes inline in HTML.

Here is the code of program:

<html> <head> <title>InlineEdit Date Demo</title> <style type="text/css"> @import "../resources/dojo.css"; @import "../dijit/themes/tundra/tundra.css"; </style> <script type="text/javascript" src="dojo.xd.js" djConfig="parseOnLoad: true"></script> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dijit.form.InlineEditBox"); dojo.require("dijit.form.DateTextBox"); </script> </head> <body class="tundra"> <p id="backgroundArea" dojoType="dijit.form.InlineEditBox" > <input name="date" value="2005-12-30" dojoType="dijit.form.DateTextBox" constraints={datePattern:'MM/dd/yy'} lang="en-us" required="true" promptMessage="mm/dd/yy" invalidMessage="Invalid date. Please use mm/dd/yy format."> </body> </html>

Output of the program:

When you click the following date then you get the following and select any date and it automatically save:

Dojo NumberSpinner Button

In this section, you will learn how to create a NumberSpinner button that increase and decrease the number. Sometime, if you want to directly put the specified range of data. Try Online: Number Spinner Button NumberSpinner : The Number Spinner is a GUI (Graphical User Interface) that makes an integer value is entered in the box easily when small adjustments are required. There are two arrow buttons (down and up) that "spin" the number up and down (increase and decrease). When you hold the up arrow button then increase the number and down arrow button then decrease the number. Here is the code of Program: <html> <head> <title>Number Spinner Demo</title> <style type="text/css"> @import "../resources/dojo.css";

@import "../dijit/themes/tundra/tundra.css"; </style> <script type="text/javascript" src="dojo.xd.js" djConfig="parseOnLoad: true "></script> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dijit.form.NumberSpinner"); </script> </head> <body class="tundra"> <input dojoType="dijit.form.NumberSpinner" value="0" smallDelta="1" constraints="{min:0,max:1550,places:0}" maxlength="20" id="integerspinner2"> </body> </html>

Output of the Program:

If you want to increase the number then click the up arrow:

If you want to decrease the number then click the down arrow:

Dojo Slider

In this section, you will learn about slider and how to create a slider in dojo. Try Online: Slider Slider : A slider is a GUI (Graphical User Interface) component. In other words a slider is a scale with handle a dragged values up/down or left/right. Calling the dojo slider by using the dojo.require("dijit.form.Slider") that provides dijit.form.HorizontalSlider, dijit.form.VerticalSlider and all rules and label classes. The following code fills a simple textbox called horizontalSliderValue. Here is the code of Program:
<html> <head> <title>Slider Example 1</title> <style type="text/css"> @import "../resources/dojo.css"; @import "../dijit/themes/tundra/tundra.css"; </style> <script type="text/javascript" src="dojo.xd.js" djConfig="parseOnLoad: true"></script> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dijit.form.Slider"); </script> </head> <body class="tundra"> <b>Slider:</b> <div id="horizontalSlider" dojoType="dijit.form.HorizontalSlider" value="5" minimum="-10" maximum="10" discreteValues="11" intermediateChanges="true"

onChange="dojo.byId('horizontalSlider').value = arguments[0];" handleSrc="preciseSliderThumb.png" ></div> </body> </html>

Output of the Program: When you click the left side button (-) then decrease the value of slider and click the right side button (+) then increase the value of slider.

Dojo StackContainer
In this section, you will learn about the StackContainer with example. Try Online: Stack Container StackContainer : This is a container that has more children, but displays only one child at a time (look the pages in a book one by one). This container is a good for wizards, slide shows, and long listing or text blocking. Here is the code of Program:
<html> <head> <title>Stack Container Demo</title> <style type="text/css"> @import "../resources/dojo.css"; @import "../dijit/themes/tundra/tundra.css"; </style> <script type="text/javascript" src="dojo.xd.js" djConfig="parseOnLoad: true"></script> <script type="text/javascript"> dojo.require("dojo.parser");

dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.layout.StackContainer"); dojo.require("dijit.form.Button"); </script> </head> <body class="tundra"> <button id="previous" onClick="dijit.byId('mainTabContainer').back()"><<-Previous</button> <button id="next" onClick="dijit.byId('mainTabContainer').forward()"> Next->></button> <div id="mainTabContainer" dojoType="dijit.layout.StackContainer" style="width: 90%; border:1px solid #9b9b9b; height: 10em; margin: 0.5em 0 0.5em 0; padding: 0.5em;"> <p id="Page1" dojoType="dijit.layout.ContentPane" label="Intro"> Page First </p> <p id="Page2" dojoType="dijit.layout.ContentPane"> Page Second. </p> <p id="Page3" dojoType="dijit.layout.ContentPane" > Page Third. </p> </div> </body> </html>

Output of the Program: Whenever you click the "Previous" command button the you get the previous pages and click the "Next" command button then you get next pages of the stack container.

Dojo TabContainer
In this section, you will learn about the TabContainer and how to create its. Try Online: Tab Container TabContainer : This is a container that has multiple panes, but it displays only one pane at a time. There are multiple tabs corresponding to each pane, where each tab has the title and close button (label) of the pane. The close button is an optional button whenever you require. When you want to close any tab the click on the close button.

Here is the code of Program : <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>TabContainer Demo</title> <style type="text/css"> @import "../resources/dojo.css"; @import "../dijit/themes/tundra/tundra.css"; </style> <script type="text/javascript" src="dojo.xd.js" djConfig="parseOnLoad: true"></script> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dijit.layout.ContentPane");

dojo.require("dijit.layout.TabContainer"); dojo.require("dijit.form.Button"); </script> </head> <body class="tundra"> <h1>Tab Container</h1> <div id="mainTabContainer" dojoType="dijit.layout.TabContainer" style="width:500px;height:100px"> <div id="tab1" dojoType="dijit.layout.ContentPane" title="First Tab" selected="true" closable="true"> First Tab </div> <div id="tab2" dojoType="dijit.layout.ContentPane" title="Second Tab" closable="true"> Second Tab </div> <div id="tab3" dojoType="dijit.layout.ContentPane" title="Third Tab" closable="true"> Third Tab </div> </div> </body></html> Output of the Program :

Dojo Menu and Menu Item

In this section, you will learn about the menu and how to create it in dojo. Try Online: Menu and Menu Item Menu : This is the widget models a context menu, otherwise known as a right-click or popup menu, and it appears in a ComboButton and DropDownButton widgets. If you click on the right button of the mouse then popup menu is appeared on the screen.

MenuItem widgets are an actual items in the menu. The PopupMenuItem is a MenuItem, but it displays a submenu or other widget to the right . A PopupMenuItems always have two child nodes: a tag with the displayed label (Using SPAN tag), and a widget to be popped up, typically a dijit.Menu widget.

Here is code of program: <html> <head> <title>Menu Demo</title> <style type="text/css"> @import "../resources/dojo.css"; @import "../dijit/themes/tundra/tundra.css"; </style> <script type="text/javascript" src="dojo.xd.js" djConfig="parseOnLoad: true"></script> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dijit.form.Button"); dojo.require("dijit.Menu"); function call_function(choice) { alert(choice+" was clicked."); } function save_function() { alert("Save Button"); } function save_as_function(choice) { alert("Save As Button"); } </script> </head> <body class="tundra"> <b>Creating DropDownButtons</b><br> <div dojoType="dijit.form.ComboButton" onclick="save_function"> <span>File</span> <div dojoType="dijit.Menu" id="saveMenu" toggle="fade" style="display: none;"> <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconSave" onclick="save_function"> Save </div> <div dojoType="dijit.MenuItem" onclick="save_as_function"> Save As </div> </div> </div> <div dojoType="dijit.form.DropDownButton"> <span>Edit</span> <div dojoType="dijit.Menu" id="Edit"> <div dojoType="dijit.MenuItem" label="Copy" onclick="call_function('copy');"></div> <div dojoType="dijit.MenuItem" label="Cut"

onclick="call_function('cut');"></div> <div dojoType="dijit.MenuItem" label="Paste" onclick="call_function('paste');"></div> </div> </div> <br><br><br><br><br><br> <h1>Submenu</h1> <style> .myIcon { background-image: url (http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/images/checkmark.gif); background-position: -16px 0px; width: 16px; height: 16px; } </style> <div dojoType="dijit.Menu" id="submenu1" contextMenuForWindow="true"> <div dojoType="dijit.MenuItem" iconClass="myIcon" onClick="alert('Hello world');">Enabled Item</div> <div dojoType="dijit.PopupMenuItem" id="submenu2"> <span>Submenu</span> <div dojoType="dijit.Menu"> <div dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')"> Submenu Item One</div> <div dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')"> Submenu Item Two</div> </div> </div> </div> </body> </html> Here is code of program:

Submenu:

Dojo Dialog Box

In this section, you will learn about the dialog box with tool tips and how to create it in dojo. Try Online: Dialog Box Dialog Box : Dialog box is a rectangular GUI box that either requests or provides information. Some dialog boxes present warnings and options to choose from before windows can carry out a command. In dialog box users can entered your information.

Here is the code of Program: <html> <head> <title>TooltipDialog demo</title> <style type="text/css"> @import "../resources/dojo.css"; @import "../dijit/themes/tundra/tundra.css"; </style> <script type="text/javascript" src="dojo.xd.js" djConfig="parseOnLoad: true"></script> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dijit.form.Button"); dojo.require("dijit.Dialog"); dojo.require("dijit.form.TextBox"); function checkPw(dialogFields) { if (dialogFields.confirmpw != dialogFields.newpw) alert("Confirmation password is different."); } </script>

</head> <body class="tundra"> <div dojoType="dijit.form.DropDownButton"> <span>Login Form</span> <div dojoType="dijit.TooltipDialog" id="dialog1" title="Login Form" execute="checkPw(arguments[0]);"> <table> <tr> <td><label for="name" title="User name"> Username</label></td> <td><input dojoType="dijit.form.TextBox" type="text" name="oldpw"></td> </tr> <tr> <td><label for="loc">Password: </label></td> <td><input dojoType="dijit.form.TextBox" type="password" name="newpw"></td> </tr> <tr> <td><label for="desc">Confirm Password: </label></td> <td><input dojoType="dijit.form.TextBox" type="password" name="confirmpw"></td> </tr> <tr> <td colspan="2" align="center"> <button dojoType="dijit.form.Button" type="submit">Login</button></td> </tr> </table> </div> </div> </body> </html> Output of the Program:

When you click the following button then you get:

Again, fill the following dialog:

After clicking the "Login" command button you get:

Dojo Toolbar
In this section, you will learn about the toolbar and how to create a toolbar in dojo. Try Online: Toolbar Toolbar : This is a GUI (Graphical User Interface) that is either horizontal row or vertical column of the selected image "buttons" that gives user visible reminder and easy way to select certain application functions or desktop such as: backwards or forwards to pages and saving or printing pages or documents within a browser. The dijit.Menu is a container for dijit.MenuItem's, so dijit.Toolbar is also container for buttons. In the toolbar contains button-based Dijit, including ComboButtons and DropdownButtons. Here is the code of Program:

<html> <title>Toolbar</title> <head> <style type="text/css"> @import "../resources/dojo.css"; @import "../dijit/themes/tundra/tundra.css"; </style> <script type="text/javascript" src="dojo.xd.js" djConfig="parseOnLoad: true"></script> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dijit.form.Button"); dojo.require("dijit.Toolbar"); function italic() { alert("Italic"); } function bold() { alert("Bold!"); } function cut() { alert("Cut!"); } function copy() { alert("Copy!"); } function paste() { alert("Paste!"); } dojo.addOnLoad(function() { dojo.connect(dojo.byId("toolbar1.italic"),"onclick",italic); dojo.connect(dojo.byId("toolbar1.bold"),"onclick",bold); dojo.connect(dojo.byId("toolbar1.cut"),"onclick",cut); dojo.connect(dojo.byId("toolbar1.copy"),"onclick",copy); dojo.connect(dojo.byId("toolbar1.paste"),"onclick",paste); }); </script> </head> <body class="tundra"> <!-- Tags end on line afterwards to eliminate any whitespace --> <div id="toolbar1" dojoType="dijit.Toolbar"> <div dojoType="dijit.form.Button" id="toolbar1.cut" iconClass="dijitEditorIcon dijitEditorIconCut" showLabel="false">Cut</div>

<div dojoType="dijit.form.Button" id="toolbar1.copy" iconClass="dijitEditorIcon dijitEditorIconCopy" showLabel="false">Copy</div> <div dojoType="dijit.form.Button" id="toolbar1.paste" iconClass="dijitEditorIcon dijitEditorIconPaste" showLabel="false">Paste</div> <!-- The following adds a line between toolbar sections--> <span dojoType="dijit.ToolbarSeparator"></span> <div dojoType="dijit.form.ToggleButton" id="toolbar1.bold" iconClass="dijitEditorIcon dijitEditorIconBold" showLabel="false">Bold</div> <div dojoType="dijit.form.ToggleButton" id="toolbar1.italic" iconClass="dijitEditorIcon dijitEditorIconItalic" showLabel="false">Italic</div> </div> </body> </html>

Output of the Program:

Dojo Progress Bar

In this section, you will learn about the progress bar and how to create a progress bar in dojo. Try Online: Progress Bar Progress Bar : The progress bar is a GUI (Graphical User Interface) that gives dynamic feedback on the progress of a long-running operation. The progress bar can be updated by calling the JavaScript functions. Which works best for long-running JavaScript operations or a series of JavaScript XHR calls to the server. Progress bar performs to multiple types of works such as: download or upload any files and representation of the progress in a percent format. Here is the code of Program:
<html> <head>

<title>Progress Bar Demo</title> <style type="text/css"> @import "../resources/dojo.css"; @import "../dijit/themes/tundra/tundra.css"; </style> <script type="text/javascript" src="dojo.xd.js" djConfig="parseOnLoad: true"></script> <script type="text/javascript"> dojo.require("dijit.ProgressBar"); dojo.require("dojo.parser"); function download(){ // Split up bar into 5% segments numParts = Math.floor(100/5); jsProgress.update({ maximum: numParts, progress:0 }); for (var i=0; i<=numParts; i++){ // This plays update({progress:0}) at 1nn milliseconds, // update({progress:1}) at 2nn milliseconds, etc. setTimeout("jsProgress.update({ progress: " + i + " })",(i+1)*100 + Math.floor(Math.random()*100)); } } </script> </head> Progress Bar: <body class="tundra"> <div dojoType="dijit.ProgressBar" style="width:800px" jsId="jsProgress" id="downloadProgress"></div> <input type="button" value="Start" onclick="download();" /> </body> </html>

Output of the Program: When you click the "Start" command button then you get:

Dojo Tree
In this section, you will learn about the tree and how to create a tree in dojo. Try Online: Tree Tree : The tree is a GUI that helps to lists the hierarchical lists. The tree widget is a simple but the real power comes in the data. It represents the hierarchical structure of tree. Data is fed by the powerful dojo.data API. There are following steps for creating Dojo trees : Create a rooted or rootless trees (forests) Nest, each branch is independently expandible Different icons for different leaf or branch classes Tree data are stored in any dojo.data implementing API. Events fire when users clicked on it. Add, remove or disable nodes of tree.

Here is the code of Program: <html> <title>Tree</title> <head>

<style type="text/css"> @import "../resources/dojo.css"; @import "../dijit/themes/tundra/tundra.css"; </style> <script type="text/javascript" src="dojo.xd.js" djConfig="parseOnLoad: true"></script> <script> dojo.require("dojo.data.ItemFileReadStore"); dojo.require("dijit.Tree"); dojo.require("dojo.parser"); </script> </head> <body class="tundra"> Simple Tree:<br><br> <div dojoType="dojo.data.ItemFileReadStore" url="tree.txt" jsid="popStore" /> <div dojoType="dijit.Tree" store="popStore" labelAttr="sname" label="Tree"></div> </body> </html> tree.txt: In JSON format.
{ label: 'name', identifier: 'name', items: [ { name:'Students', type:'cat', children: [ { name:'Vinod', type:'st' }, { name:'Suman', type:'st' }, { name:'Deepak', type:'st' } ] }, { name:'Fruits', type: 'cat', children: [ { name:'Apple', type:'fr' }, { name:'Mango', type:'fr' }, { name:'Graps', type:'fr', children: [ { name:'Sweets', type:'gr' }, { name:'Sour', type:'gr' }, { name:'Salt', type:'gr' } ] } ] }, { name:'Vegetables', type: 'cat'}, { name:'Education', type:'cat'} ] }

Output of the Program:

Dojo Tool tips

In this section, you will learn about the tool tips and how to developed it in dojo. Try Online: Tool Tips Tool tips : This is a GUI (Graphical User Interface) element that is used in conjunction with a cursor and usually a mouser pointer. If the mouse cursor over an item, without clicking a mouse it appears a small box with supplementary information regarding the items.

Here is the code of program:

<html> <head> <title>Tooltip Demo</title>

<style type="text/css"> @import "../resources/dojo.css"; @import "../dijit/themes/tundra/tundra.css"; </style> <script type="text/javascript" src="dojo.xd.js" djConfig="parseOnLoad: true"></script> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dijit.Tooltip"); </script> </head> <body class="tundra"> <b>Tooltips:</b> <br><br> <span id="site1">Roseindia.net</span> <div dojoType="dijit.Tooltip" connectId="site1" label="This is a software developement company!"> </div><br><br><br> <span id="site2">Newstrackindia.com</span> <div dojoType="dijit.Tooltip" connectId="site2" label="This is a news publishing site!"> </div> </body> </html>

Output of the program: Whenever your mouse pointer goes on the Roseindia.net then you get:

Whenever your mouse pointer goes on the Newstrackindia.com then you get:

Dojo AccordionContainer
In this section, you will learn about the dojo AccordionContainer. AccordionContainer: We have already read about the container like: TabContainer and StackContainer. Similarly, this is a container that contains a set of panes. All pane titles are all visible, but only one pane's content is visible at a time. After clicking on the pane title currently slides are displayed. Try Online: AccordionContainer
<html> <head> <title>Accordion Container Example</title> <style type="text/css"> @import "../dijit/themes/tundra/tundra.css"; @import "/resources/dojo.css" </style> <script type="text/javascript" src="dojo.xd.js" djConfig="parseOnLoad: true"></script> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dijit.layout.AccordionContainer"); </script> </head> <body class="tundra"> <div dojoType="dijit.layout.AccordionContainer" duration="80" style="margin-right: 10px; width: 500px; height: 200px;"> <div dojoType="dijit.layout.AccordionPane" selected="true" title="Benefits of Dojo"> <p >Benefits of Dojo: Associative arrays, Loosely typed variables, Regular expressions, Objects and classes, Highly evolved date, math, and string libraries, W3C DOM support in the Dojo.</p > </div>

<div dojoType="dijit.layout.AccordionPane" title="Introduction to Dojo"> <p>This tips is light towards people with some JavaScript knowledge, priestly used another JavaScript (Ajax) framework before, now have a real need to use some of the features found in dojo.</p> </div> <div dojoType="dijit.layout.AccordionPane" title="WebSite for Dojo Tutorial"> <p>If you want to learn dojo. Please go the following url and read the dojo tutorials with running examples. URL: www.roseindia.net/dojo/</p> </div> </div> </body> </html>

Output:

Dojo BorderContainer
In this section, you will learn about the dojo BorderContainer.

BorderContainer: This is a container that operates in a choice of two layout modes: 1. The design attribute may be set to "headline" (by default) or 2. "sidebar". The "headline" layout extends the top and bottom regions of entire width of the box . And the remaining regions are placed in the middle or center. The "sidebar" layout, the side panels take priority to extend the full height of the box. Try Online: BorderContainer Here is the code for BorderContainer Example:
<html> <head> <title>Layout Container Example</title> <style type="text/css"> @import "../dijit/themes/tundra/tundra.css"; @import "/resources/dojo.css" </style> <script type="text/javascript" src="http://o. aolcdn.com/dojo/1.1/dojo/dojo.xd.js" djConfig="parseOnLoad: true"></script> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.layout.BorderContainer"); </script> </head> <body class="tundra"> <div dojoType="dijit.layout.BorderContainer" design="screenDesign"> <div dojoType="dijit.layout.ContentPane" id="top" region="top" style="background-color:gray"> <h3> Roseindia Technology Pvt. Ltd.</h3> </div>

<div dojoType="dijit.layout.ContentPane" id="left" region="left" style="background-color:lightblue;width: 125px;"> <B>Tutorials List</B> <ul> <li>Struts2</li> <li>JSP</li> <li>Servlets</li> <li>EJB</li> <li>Hibernate</li> </ul> </div> <div dojoType="dijit.layout.ContentPane" id="center" region="center" style="background-color:white"> <blockquote>Introduction</a> <ol> <li>Short description</li> <li>Brief description </li> <li>Running Examples</li> </ol> </blockquote> </div> <div dojoType="dijit.layout.ContentPane" id="right" region="right" style="background-color:pink; width: 130px;"> <p><B>Advertisement</B></p> <img src="advertisement.gif" align="right"/> </div> </div> </body> </html>

Output of BorderContainer :

Dojo ColorPalette
In this section, you will learn about dojo ColorPalette. ColorPalette: The ColorPalette is a color picker to the web pages. ColorPalette provides you a lot of colors, user can choose color to your requirement. This is an abstraction of hexa colors code that is provided by dijit. Try Online: ColorPalette Here is the code of Example:
<html> <head> <title>ColorPalette Demo</title> <style type="text/css"> @import "../dijit/themes/soria/soria.css"; @import "/resources/dojo.css"; </style>

<script type="text/javascript" src="dojo.xd.js" djConfig="parseOnLoad: true"></script> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dijit.ColorPalette"); function myColorPalette(selectColor) { console.debug(selectColor); } </script> </head> <body class="soria"> <div dojoType="dijit.ColorPalette" onChange="myColorPalette"></div> </body> </html>

Output:

Dojo Color Picker

In this section, you will learn about the dojo ColorPicker. ColorPicker: The dojox.widget.ColorPicker widget that allows user to select a color (in hexa format). This is a form component. We can add this component on the form to our requirement. Try Online: Color Picker Here is the code of Program:
<html> <head> <title>Color Picker Example</title> <style type="text/css"> @import "../dijit/themes/soria/soria.css"; @import "/resources/dojo.css"; @import "../dojox/widget/ColorPicker/ColorPicker.css"; </style>

<script type="text/javascript" src="dojo.js" djConfig="parseOnLoad: true"></script> <script type="text/javascript"> dojo.require("dojox.widget.ColorPicker"); dojo.require("dojo.parser"); </script> </head> <body class="soria"> <b>Please select the color:</b> <div id="colorPicker" dojoType="dojox.widget.ColorPicker"></div> </body> </html>

Output:

Dojo drag and drop

In this section, you will learn about dojo drag and drop.

Drag and Drop: This is a technique of dragging an item. Click an object or specific item that have to be dragged and dropped, you hold down the mouse button and drag the object to the suitable destination. Try Online: Drag and Drop Here is the code of Program:
<html> <head> <title>Dojo Drag and Drop Example</title> <script type="text/javascript" src="dojo.js" djConfig="parseOnLoad: true"> </script> <script type="text/javascript"> dojo.require("dojo.dnd.source"); dojo.require("dojo.parser"); </script> </head> <body> <h1>Drag and Drop</h1> <table border="1" cellpadding="0" cellspacing="0"> <tr> <td valign="top"> <!-- Source --> <div dojoType="dojo.dnd.Source" jsId="sourceData" class="source"> <b style="background-color:#999999 ">Source Data</b> <div class="dojoDndItem" dndType="vinod"> <div>Vinod</div> </div> <div class="dojoDndItem" dndType="suman"> <div>Suman</div> </div> <div class="dojoDndItem" dndType="amar"> <div>Amar</div> </div> <div class="dojoDndItem" dndType="ravi">

<div>Ravi</div> </div> <div class="dojoDndItem" dndType="aman"> <div>Aman</div> </div> <div class="dojoDndItem" dndType="deepak"> <div><img src="1.jpg" /></div> </div> <div class="dojoDndItem" dndType="deepak"> <div><img src="2.jpg" /></div> </div> </div> </td> <td valign="top"> <!-- Target --> <div dojoType="dojo.dnd.Target" jsId="targetData" class="target" accept="vinod,suman,amar,ravi,aman,deepak"> <b style="background-color:#999999; ">Target Data</b> </div> </td> </tr> </table> </body> </html>

Output:

If you drag and drop the items, you get:

Dojo Editor
In this section, you will learn about dojo editor. Dojo Editor: This is a editor that provides the facility to formatting your text. You enter your text in the editor, this editor provides you to edit those text like: bold, italic and underline. If you edit the text then you undo and redo your text. You can set the the alignment like: left, right and center. You can also justify your entered text in the editor. Try Online: Editor

Here is the code of Program:

<html> <head> <title>Editor Demo</title> <style type="text/css"> @import "../dijit/themes/soria/soria.css"; @import "/resources/dojo.css"; </style> <script type="text/javascript" src="dojo.xd.js" djConfig="parseOnLoad: true"></script> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dijit.Editor"); </script> </head> <body class="soria"> <textarea name="field" dojoType="dijit.Editor"> This tips is light towards people with some JavaScript knowledge, priestly used another JavaScript (Ajax) framework before, now have a real need to use some of the features found in dojo. In this tips, learn about the dojo and its directory structure. The purpose of this tips, for a new user learn to dojo then you need to know about the what is dojo and its directory structure. </textarea> </body> </html>

Output:

Dojo Editor Example

In this example, you will learn about the dojo editor. Editor: This is a Dijit's Rich Text editor, Dijit.Editor, is a text box that designed to look as a word processor. It works like a word processor. The features of editor is follow: 1. Toolbar 2. HTML output, and 3. Plugin architecture

Which supports new commands, new buttons and other new features also. The default configuration of Dijit.Editor has a toolbar on the top to the editor section, that contains Copy, Cut, Paste, Italic, Underline, Numbered, Bulleted list, Indent lift and Indent right. Here is the code of Example:
<html> <head> <title>Editor Demo</title> <style type="text/css"> @import "../dijit/themes/soria/soria.css"; @import "/resources/dojo.css"; </style> <script type="text/javascript" src="dojo.xd.js" djConfig="parseOnLoad: true"></script> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dijit.Editor"); </script> </head> <body class="soria"> <textarea name="field" dojoType="dijit.Editor"> This tips is light towards people with some JavaScript knowledge, priestly used another JavaScript (Ajax) framework before, now have a real need to use some of the features found in dojo. In this tips, learn about the dojo and its directory structure. The purpose of this tips, for a new user learn to dojo then you need to know about the what is dojo and its directory structure.

</textarea> </body>

Dojo Filtering Select

In this section, you will learn about the dojo filtering select. FilteringSelect: The FilteringSelect is same as html select tag, but it populated dynamically. It works to user friendly with large data set. It loads the data on the page which have to be needed. It looks as a combo box but the combo box do not allow to user to enter the outside of data in the combo box. It allows only the selection facility. But filteringselect allows to user to enter your text in the filteringselect. Try Online: Filtering Select Here is the code of Program: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Simple FilterSelect Example</title> <style type="text/css"> @import "../dijit/themes/soria/soria.css"; @import "/resources/dojo.css"; </style> <script type="text/javascript" src="dojo.xd.js" djConfig="parseOnLoad: true"></script> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dijit.form.FilteringSelect"); </script> </head> <body class="soria"> <select dojoType="dijit.form.FilteringSelect" name="countryName" autocomplete="true" value="sel">

<option value="sel" selected="selected">Austria</option> <option value="1" >Australia</option> <option value="2" >Canada</option> <option value="3" >Germany</option> <option value="4" >Japan</option> <option value="5" >United Kingdom</option> <option value="6" >United States of America</option> <option value="7" >Afghanistan</option> <option value="8" >Albania</option> <option value="9" >Algeria</option> <option value="10" >American Samoa</option> <option value="11" >Andorra</option> <option value="12" >Angola</option> </select> </body> </html>

OutPut: When you run the following example, you get:

If you click on the combo box, you get the following:

If you enter only the "A" then you get all the list which is related to "A"

Dojo FisheyeLite
In this section, you will learn about dojo FisheyeLite. FisheyeLite: The dojox.widget.FisheyeLite widget set on the anchor tags. We use the dojo query for selecting the anchor tags and FisheyeLite widget is used to create for each tag. If your mouse pointer over the anchor tag text then the text size (Increasable to your requirement) is automatically large according to your requirement. Try Online: FisheyeLite Here is the code of Program:
<html> <head> <title>Fish Eye Light Anchor tag Example</title> <style type="text/css"> @import "../dijit/themes/soria/soria.css"; @import "/resources/dojo.css"; </style> <script type="text/javascript" src="dojo.js" djConfig="parseOnLoad: true"></script> <script type="text/javascript">

dojo.require("dojox.widget.FisheyeLite"); dojo.addOnLoad(function(){ dojo.query("a", dojo.byId("myParagraph")).forEach(function(n){ new dojox.widget.FisheyeLite({ properties:{ fontSize:1.50, letterSpacing:2.00 } },n); }).connect("onclick",dojo,"stopEvent"); }); </script> </head> <body class="soria"> <p id="myParagraph"> This tips is light towards people with some <a href="#">JavaScript </a> knowledge, priestly used another <a href="#">JavaScript (Ajax) </a> framework before, now have a real need to use some of the features found in dojo. In this tips, learn about the dojo and its <a href="#">directory structure </a>. The purpose of this tips, for a new user learn to dojo then you need to know about the <a href="#">what is dojo </a>and its <a href="#">directory structure</a>. </p> </body> </html>

Output: When you run this program then you get the following:

Whenever your mouse pointer over the anchor tag.

Again, your mouse pointer over the anchor tag the text size will be increased like:

Again, your mouse pointer over the anchor tag the text size will be increased like:

Dojo Google Blog Search

In this section, you will learn how to implement the google blog search. That means user enter your text that have to be searched. This program search all content related to blog in the site. If you click on the filtered data then you go the specific blog site. And do your word. Try Online: Google Blog Search Here is the code of program:
<html> <head> <title>Dojo Google Blog Search Store Example</title> <style type="text/css"> @import "../dijit/themes/soria/soria.css"; @import "/resources/dojo.css"; </style>

<script type="text/javascript" src="dojo.js" djConfig="parseOnLoad: true"></script> <script type="text/javascript"> dojo.require("dojox.data.GoogleSearchStore"); dojo.require("dijit.form.Button"); function doSearch() { var queryString = dojo.byId("searchText").value; var store = new dojox.data.GoogleBlogSearchStore(); var list = dojo.byId("searchOutput"); dojo.byId("content").innerHTML = ""; //Clean up previous searches while(list.firstChild){ list.removeChild(list.firstChild); } store.fetch({ query:{text: queryString}, count: 8, onComplete: function(items, request) { //Print out the search results as an unordered list var delay = 0; dojo.forEach(items, function(item){ var li = document.createElement("li"); li.innerHTML = "<a href=\"" + store.getValue(item, "postUrl") "\">" + store.getValue(item, "titleNoFormatting") + "</a>"; dojo.style(li, "opacity", "0"); list.appendChild(li); dojo.connect(li.firstChild,"onclick", function(evt){ +

var frame = dojo.byId("content"); dojo.style(frame, "display", "block"); frame.src = store.getValue(item, "postUrl"); dojo.stopEvent(evt); return false; }) //Fade in the results. delay += 500; dojo.fadeIn({node:li}).play(delay); }); } }); } </script> </head> <body class="soria"> <b>Please Enter your text for searching: </b> <input type="text" size="20" value="" id="searchText"/> <div dojoType="dijit.form.Button" onclick="doSearch();"> <b>Search</b> </div> <div> <ul id="searchOutput" class="link-list"></ul> </div> <iframe id="content" style="display:solid;width:100%;height:400px;"></iframe> </body> </html>

Output: When you run this program then you get:

Enter your search text then you get the related text as follow:

Dojo Google Web Search

In this section, you will learn how to implement the google web search. That means user enter your text that have to be searched. This program search all content related to its. If you click on the filtered data then you get the specific data. Try Online: Google Web Search

Here is the code of program:

<html> <head> <title>Google Web Search Search Example</title> <style type="text/css"> @import "../dijit/themes/soria/soria.css"; @import "/resources/dojo.css"; </style> <script type="text/javascript" src="dojo.js" djConfig="parseOnLoad: true"></script> <script type="text/javascript"> dojo.require("dojox.data.GoogleSearchStore"); dojo.require("dijit.form.Button"); function doSearch() { var queryString = dojo.byId("searchText").value; var store = new dojox.data.GoogleWebSearchStore(); var list = dojo.byId("searchOutput"); //Clean up previous searches text while(list.firstChild){ list.removeChild(list.firstChild); } store.fetch({query:{text: queryString},count: 25,onComplete: function(items, request) { //Print out the search results as an unordered list var delay = 0; dojo.forEach(items, function(item){ var li = document.createElement("li"); li.innerHTML = "<a href=\"" + store.getValue(item, "url") store.getValue(item, "title") + "</a>"; dojo.style(li, "opacity", "0"); list.appendChild(li); + "\">" +

//Fade in the results. delay += 500; dojo.fadeIn({node:li}).play(delay); }); } }); } </script> </head> <body class="soria"> <table border="1" cellpadding="0" cellspacing="0" width="600" align="center"> <tr> <td valign="top" align="CENTER"> <b>Enter your search text:</b> <input type="text" size="20" value="" id="searchText"/> <div dojoType="dijit.form.Button" onclick="doSearch();"> <b>Search</b> </div> </td> </tr> <tr> <td valign="top"> <ul id="searchOutput" class="link-list"></ul> </td> </tr> </tr> </table> </body> </html>

Output: When you run this program:

After entering your text. This program searches the related text from google:

Dojo Show and Hide Dialog

In this example, you will learn dojo show and hide dialog. In the following example, you will see there are two method that are used for showing and hiding the dialog box.

1. show(): This method is used to display the dialog box. 2. hide(): This method is used to hide the dialog box. Try Online: Show and Hide Dialog Here is the code:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Show and hide Dialog example</title> <style type="text/css"> @import "../dijit/themes/soria/soria.css"; @import "/resources/dojo.css"; </style> <script type="text/javascript" src="dojo.js" djConfig="parseOnLoad: true"></script> <script > dojo.require("dojo.parser"); dojo.require("dijit.form.Button"); dojo.require("dijit.Dialog"); dojo.require("dijit.form.TextBox"); dojo.addOnLoad(showDialog); dojo.addOnLoad(hideDialog); function showDialog() { dijit.byId('dialog1').show(); } </script> </head> <body class="soria"> <div dojoType="dijit.Dialog" id="dialog1" title="Login"> <form action="Login" method="post" validate="true" id="loginForm"> <table width="258"> <tr> <td><label>Login</label></td> <td><input type="text" trim="true" dojoType="dijit.form.TextBox"

value="" name="login" id="userId"/></td> </tr> <tr > <td><label>Password</label></td> <td><input type="password" trim="true" dojoType="dijit.form.TextBox" value="" name="password" id="password"/></td> </tr> <tr><td colspan="2"> </td></tr> <tr> <td colspan="2" align="center">

<table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center" valign="top" width="40%"> <!-- button ok --> <button dojoType="dijit.form.Button" type="submit" id="LoginButton" onClick="return validate();">Ok</button></td>

<td align="left" valign="top" width="3%"> </td> <td align="left" valign="top" width="46%" > <!-- button cancel -->

<button dojoType="dijit.form.Button" type="submit" onclick="document.Login.reset()" id="Cancel">Cancel</button></td> </td>

<td width="11%" align="left" valign="top"> </td> <td><button dojoType="dijit.form.Button" type="submit" onclick="showDialog();" id="resetPassword"> Show Dialog </button></td> </tr> </table>

</td> </tr> </table> </form> </div> <!-- Forgot Password Form--> <div dojoType="dijit.Dialog" id="dialog2" title="Forgot Password"> <form action="doResetPassword.action" method="post" validate="true" id="resetPasswordForm"> <table width="308"> <tr> <td colspan="2"><label>Enter Login Name</label></td> <td><input type="text" trim="true" dojoType="dijit.form.TextBox" value="" name="userName" id="userName"/></td> </tr> <tr><td><B>Or</B></td></tr> <tr> <td colspan="2"><label>Enter Your Email Address</label></td> <td><input type="text" trim="true" dojotype="dijit.form.TextBox" value="" name="email" id="email"/></td> </tr> <tr> <td align="right"> <button dojoType="dijit.form.Button" type="submit" onclick="validate1()" id="reset">Ok </button></td> <td align="right" valign="top"><button dojoType="dijit.form.Button"

type="submit" onClick="hideDialog()" </td></tr> </table> </form> </div>

id="cancel1">Hide Dialog </button>

<script> function validate(){ userId = document.getElementById('userId').value password = document.getElementById('password').value errMsg=" "; if(userId == ""){ errMsg +="Please enter User Name\n"; } if(password == ""){ errMsg +="Please enter Password" ; } if(errMsg!= " "){ alert(errMsg); return false; } document.forms['loginForm'].submit(); } </script> <script> function showDialog() { dijit.byId('dialog1').hide(); var dlg = dijit.byId('dialog2'); dlg.show(); } function validate1(){

userName = document.getElementById('userName').value email = document.getElementById('email').value errMsg=" "; if(userName == "" && email == ""){ errMsg +="Please enter userName Or email address\n"; } var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; if (!(email == "")){ if(reg.test(email) == false) { errMsg+='Invalid Email Address'; } } if(errMsg!= " "){ alert(errMsg); return false; } document.forms['resetPasswordForm'].submit(); }

function hideDialog(){ var dlg = dijit.byId('dialog2'); dlg.hide(); dijit.byId('dialog1').show(); } </script> </body> </html>

Output:

If you click on the "Show Dialog" Command button then you get:

Dojo SplitContainer
In this section, you will learn about the dojo SplitContainer. SplitContainer: This is also a container that contains multiple children widgets. All are displayed side by side (horizontally or vertically). There is a bar between each of the children, and you can adjust the relative size of each child by dragging the bars. You must specify the size (width and height) for the dojo SplitContainer. Try Online: SplitContainer Here is the code of SplitContainer Example:
<html> <head>

<title>SplitContainer Example</title> <style type="text/css"> @import "../dijit/themes/tundra/tundra.css"; @import "resources/dojo.css" </style> <script type="text/javascript" src="dojo.xd.js" djConfig="parseOnLoad: true"></script> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dijit.layout.SplitContainer"); dojo.require("dijit.layout.ContentPane"); </script> </head> <body class="tundra"> <div dojoType="dijit.layout.SplitContainer" orientation="horizontal" sizerWidth="10" activeSizing="true" style="border: 1px solid #FF00FF; width: 600px; height: 205px;"> <div dojoType="dijit.layout.ContentPane" sizeMin="10" sizeShare="10"> <p><b>Introduction to Dojo and Tips</b></p> This tips is light towards people with some JavaScript knowledge, priestly used another JavaScript (Ajax) framework before, now have a real need to use some of the features found in dojo. In this tips, learn about the dojo and its directory structure. </div> <div dojoType="dijit.layout.ContentPane" sizeMin="10" sizeShare="10"> <p><b>Benefits of Dojo</b></p> * Associative arrays<br>

* Loosely typed variables<br>

* Regular expressions<br> * Objects and classes<br> * Highly evolved date, math, and string libraries<br> * W3C DOM support in the Dojo

</div> </div> </body> </html>

Output of the SplitContainer Example:

Dojo TitlePane
In this example, you will learn about the dojo TitlePane. TitlePane: A TitlePane is a pane that contains a title on the top. Which can be opened and collapsed. If an arrow button is left to right then the tilepane is collapsed and top to bottom then it is opened. In opened format you can see the all contents that has TitlePane. If you enter the title of titlePane then you enter the title tag. Try Online: TitlePane

Here is the code of Program:

<html> <head> <title>Dojo TitlePane Example</title> <style type="text/css"> @import "../dijit/themes/soria/soria.css"; @import "/resources/dojo.css" </style> <script type="text/javascript" src="dojo.xd.js" djConfig="parseOnLoad: true"></script> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dijit.TitlePane"); </script> </head> <body class="soria"> <div dojoType="dijit.TitlePane" title="<b>Welcome to Roseindia Dojo Tutorial</b>"> This tips is light towards people with some JavaScript knowledge, priestly used another JavaScript (Ajax) framework before, now have a real need to use some of the features found in dojo. In this tips, learn about the dojo and its directory structure. The purpose of this tips, for a new user learn to dojo then you need to know about the what is dojo and its directory structure. </div> </body> </html>

Output:

Dojo ToolTipsDialog
In this example you will learn how to develop a dojo tooltipsdialog. You see the following code and follows the following code and crate a ToolTipsDialog. If you click on the "Change Password" command button the you get a dialog box under this command button. Similarly, you get the whenever, you click on the the "Forgot Password" command button the you get a dialog box under this command button.

Try Online: ToolTipsDialog Here is the code:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Show and hide Dialog example</title> <style type="text/css"> @import "../dijit/themes/soria/soria.css"; @import "/resources/dojo.css"; </style> <script type="text/javascript" src="dojo.js" djConfig="parseOnLoad: true"></script> <script > dojo.require("dojo.parser"); dojo.require("dijit.form.Button"); dojo.require("dijit.Dialog"); dojo.require("dijit.form.TextBox"); dojo.addOnLoad(showDialog); dojo.addOnLoad(hideDialog); function showDialog() { dijit.byId('dialog1').show(); } </script> </head> <body class="soria"> <div dojoType="dijit.Dialog" id="dialog1" title="Login"> <form action="Login" method="post" validate="true" id="loginForm"> <table width="258"> <tr> <td><label>Login</label></td> <td><input type="text" trim="true" dojoType="dijit.form.TextBox" value="" name="login" id="userId"/></td> </tr> <tr >

<td><label>Password</label></td> <td><input type="password" trim="true" dojoType="dijit.form.TextBox" value="" name="password" id="password"/></td> </tr> <tr> <td colspan="2" align="center">

<table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center" valign="top" width="40%"> <!-- button ok --> <button dojoType="dijit.form.Button" type="submit" id="LoginButton" onClick="return validate();">User Login</button></td> <td align="left" valign="top" width="40%" > <!-- button cancel -->

<button dojoType="dijit.form.Button" type="submit" onclick="document.Login.reset()" id="Cancel">Cancel</button></td> </td>

</tr> </table>

</td> </tr>

</table> <table width="180" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <div dojoType="dijit.form.DropDownButton"> <span>Change Password</span> <div dojoType="dijit.TooltipDialog" id="dialog12" title="First Dialog" execute="checkPw(arguments[0]);"> <table> <tr> <td><label for="name">Old Password: </label></td> <td><input dojoType="dijit.form.TextBox" type="password" name="oldpw" id="oldpw"></td> </tr> <tr> <td><label for="loc">New Password: </label></td> <td><input dojoType="dijit.form.TextBox" type="password" name="newpw" id="newpw"></td> </tr> <tr> <td><label for="desc">Confirm New Password: </label></td> <td><input dojoType="dijit.form.TextBox" type="password" name="confirmpw" id="confirmpw"></td> </tr> <tr> <td colspan="2" align="center"> <button dojoType=dijit.form.Button type="submit" onclick="changePassword();">Submit</button></td> </tr> </table> </div> </div> </td> <td> </td> <td> <div dojoType="dijit.form.DropDownButton">

<span>Forgot Password</span> <div dojoType="dijit.TooltipDialog" id="dialog11" title="First Dialog" execute="checkPw(arguments[0]);"> <table> <tr> <td><label>Enter UserId: </label></td> <td><input dojoType="dijit.form.TextBox" type="text" name="userId"></td> </tr> <tr><td>Or</td></tr> <tr> <td><label>Enter Email Address: </label></td> <td><input dojoType="dijit.form.TextBox" type="text" name="email"></td> </tr> <tr> <td colspan="2" align="center"> <button dojoType=dijit.form.Button type="submit"> Submit</button></td> </tr> </table> </div> </div> </td> </tr> </table> </form> </div> <script> function validate(){ userId = document.getElementById('userId').value password = document.getElementById('password').value errMsg=" ";

if(userId == ""){ errMsg +="Please enter User Name\n"; } if(password == ""){ errMsg +="Please enter Password" ; } if(errMsg!= " "){ alert(errMsg); return false; } document.forms['loginForm'].submit(); } </script> <script> function validate1(){ userName = document.getElementById('userName').value email = document.getElementById('email').value errMsg=" "; if(userName == "" && email == ""){ errMsg +="Please enter userName Or email address\n"; } var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; if (!(email == "")){ if(reg.test(email) == false) { errMsg+='Invalid Email Address'; } } if(errMsg!= " "){ alert(errMsg); return false; }

document.forms['resetPasswordForm'].submit(); } </script> <script> function changePassword(){ newpw=document.getElementById('newpw').value confirmpw=document.getElementById('confirmpw').value if (newpw!=confirmpw){ alert('Please enter correct confirm password.'); } else{ alert('You can do any type of action'); } } </script> </body> </html>

Output:

Click on the Change Password Command button:

Click on the Forgot Password command button:

Dojo TimeSpinner

In this section, you will learn about the dojo TimeSpinner. This is same as the dojo NumberSpinner. But the NumberSpinner only worked on the an integer type data. That means you increase and decrease an integer number. Similarly the TimeSpinner button provides you to increase and decrease the time through the TimeSpinner button in AM and PM. If you enter before 12:00 then it displays the time in AM and after 12:00 it displays the time in PM. Try Online: TimeSpinner Here is the code of Program:
<html> <head> <title> Dojo TimeSpinner Example</title> <style type="text/css"> @import "../dijit/themes/soria/soria.css"; @import "/resources/dojo.css"; </style> <script type="text/javascript" src="dojo.js" djConfig="parseOnLoad: true"></script> <script type="text/javascript"> dojo.require("dojox.widget.TimeSpinner"); dojo.require("dojo.parser"); // scan page for widgets </script> </head> <body class="soria"> <h1>Dojo TimeSpinner Example Demo</h1> <br> <input id="timeSpinner" dojoType="dojox.widget.TimeSpinner" value="12:30 PM" name="timeSpinner" hours="12" id="timeSpinner" /> </body> </html>

Output: When you run this program then you get:

Your inputted time is after 12:00 then you see the following output time is in PM.