Dojo Hello World: Output of Program

Dojo Hello World
<html>
<head>
<title>button</title>
<script type="text/javascript">
dojo.require("dojo.event.*"); // Load Dojo's code relating to an onClick event handler
dojo.require("dojo.widget.*"); // Load Dojo's code relating to widget managing functions
dojo.require("dojo.widget.Button"); // Load Dojo's code relating to the Button widget
function helloPressed()
{
alert('Click on the Hello World Button'); // This function is called when button is clicked
}
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:
Dojo Checkbox
<html>
<head>
<title>checkbox</title>

dojo.require("dojo.parser");
dojo.require("dijit.form.CheckBox"); // For creating checkbox you 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

<html>
<head>
<title>Radio</title>

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
<html>
<head>
<title>combobox</title>

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


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
<html>
<head>
<title>InlineEdit Demo</title>
</style>

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 it opens in editable mode:
After editing, save it:
Then you get:

Dojo inline DateTextBox
<html>
<head>
<title>InlineEdit Date Demo</title>
</style>

dojo.require("dijit.form.InlineEditBox");
dojo.require("dijit.form.DateTextBox");
</script>
</head>
<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
<html>
<head>
<title>Number Spinner Demo</title>
</style>
<script type="text/javascript" src="dojo.xd.js" djConfig="parseOnLoad: true"></script>
dojo.require("dijit.form.NumberSpinner");
</script>
</head>
<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
<html>
<head>
<title>Slider Example 1</title>
</style>
<script type="text/javascript" src="dojo.xd.js" djConfig="parseOnLoad: true"></script>
dojo.require("dijit.form.Slider");
</script>
</head>
<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>
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
<html>
<head>
<title>Stack Container Demo</title>
</style>
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.StackContainer");
dojo.require("dijit.form.Button");
</script>
</head>
<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>
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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TabContainer Demo</title>
</style>
<script type="text/javascript"
src="dojo.xd.js" djConfig="parseOnLoad: true"></script>
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.TabContainer");
</script>
</head>
<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>
title="Second Tab" closable="true">
Second Tab
</div>
title="Third Tab" closable="true">
Third Tab
</div>
</div>
</body></html>
Output of the Program :

Dojo Menu and Menu Item
<html>
<head>
<title>Menu Demo</title>
</style>
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>
<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">
onClick="alert('Submenu 1!')">
Submenu Item One</div>
onClick="alert('Submenu 2!')">
Submenu Item Two</div>
</div>
</div>
</div>
</body>
</html>
Here is code of program:
Submenu:

Dojo Hello World: Output of Program

Uploaded by

Copyright:

Available Formats

You might also like

Dojo Hello World: Output of Program

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Dojo Hello World: Output of Program

Uploaded by

Copyright:

Available Formats

Dojo Hello World

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

Dojo Radio Button

<script type="text/javascript" src="dojo.xd.js"

<script type="text/javascript" src="dojo.xd.js"

When you click the following text it opens in editable mode:

After editing, save it:

Then you get:

<script type="text/javascript" src="dojo.xd.js"

Output of the program:

Output of the Program:

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

<title>Slider Example 1</title>

Output of the Program:

<p id="Page2" dojoType="dijit.layout.ContentPane">

Output of the Program:

Output of the Program :

<div dojoType="dijit.Menu" id="submenu1"

Here is code of program:

You might also like