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

release-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()"  id="cancel1">Hide Dialog </button>

</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 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.