Scribd
Upload
30 views

Dojo Hello World: Output of Program

The document shows code for creating different Dojo widgets like Button, Checkbox, Radio button, Combo box, Auto completer, Inline edit box, Date text box, Number spinner, Slider, Stack container and Tab container. Each widget code is followed by the output when run, describing the functionality provided by the widget.

Uploaded by

kenjo138
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
30 views

Dojo Hello World: Output of Program

The document shows code for creating different Dojo widgets like Button, Checkbox, Radio button, Combo box, Auto completer, Inline edit box, Date text box, Number spinner, Slider, Stack container and Tab container. Each widget code is followed by the output when run, describing the functionality provided by the widget.

Uploaded by

kenjo138
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 12

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>
<!-- check box -->
<script type="text/javascript">
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>
<!-- 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
<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
<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
<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 it opens in editable mode:

After editing, save it:

Then you get:


Dojo inline DateTextBox
<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
<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
<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
<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
<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
<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:

You might also like