Rich Internet Applications with Dojo Toolkit 101 - The DatePicker and Accordion widgets
(Page 4 of 5 )
The Date Picker
One of the strengths of the dojo UI is its support for elements not in the HTML DTD, like DatePicker, Tree, Accordion and so on. You can see how easy it is to provide a DatePicker as shown in the next code.
<HTML>
<HEAD>
<TITLE>Widgets </TITLE>
<script type="text/javascript">
var djConfig = {isDebug: true};
</script>
<SCRIPT type="text/javascript"
src="http://images.devshed.com/da/stories/
http://localhost/DoAjax/dojo.js"> </script>
<script type="text/javascript">dojo.require("dojo.widget.*");</script>
</SCRIPT>
</HEAD>
<BODY> <div dojoType="datepicker" widgetId="x"></div> </BODY>
</HTML>
With just this reference you will get a nice looking DatePicker object in your page as shown. You could also easily interact with the DatePicker.
The Accordion widget
The Accordion widget may consist of several content panes which can be selectively displayed by clicking on the desired pane. In version 0.4, the AccordionContainer will contain the panes. The individual panes may be independently styled as shown in the listing. It so happens that the AccordionContainer.js file is in a different location and hence there is an extra src reference (in red).
<HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Accordion Pane Demo</title>
<script type="text/javascript">
var djConfig = {isDebug: true };
</script>
<script type="text/javascript" src="http://images.devshed.com/da/stories/
http://localhost/DoAjax/dojo.js"></script>
<script type="text/javascript"
src="http://images.devshed.com/da/stories/
http://localhost/DOAjax/src/widget/AccordionContainer.js"></script>
<script type="text/javascript">
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.AccordionContainer");
</script>
</head>
<BODY>
<!-- div container for accordion-->
<div dojoType="AccordionContainer"
style="float: left; margin-right: 30px; width: 400px;
height: 300px;
overflow: scroll;">
<!-- the content panes--> <div dojoType="ContentPane"
label="Htek" selected="true" ;
style="color:green; overflow: scroll;
background-color:yellow;">
A thing of beauty is a joy for ever </div>
<div dojoType="ContentPane" label="Hodentek" selected="true"
style="color:red;overflow: scroll;
background-color:#FFFF80;">
<a href="http://hodentek.blogspot.com">My Blog</a> <br/>
</div> <div dojoType="ContentPane" label="ASPFree"
selected="true"
style="color:blue;overflow: scroll;
background-color:#FF8040;">
A thing of beauty is a joy for ever</div>
...
</div>
</BODY>
</HTML>
The next two pictures show the opened panes as seen on the browser. No event was necessary to get to the panes. If you just click on the labels the panes move apart.
Of course the content panes are containers too, and you could place other widgets in them as shown in the following code.
<HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Accordion Pane Demo</title>
<script type="text/javascript">
var djConfig = {isDebug: true };
</script>
<script type="text/javascript" src="http://images.devshed.com/da/stories/
http://localhost/DoAjax/dojo.js"></script>
<script type="text/javascript" src="http://images.devshed.com/da/stories/
http://localhost/DOAjax/src/widget/AccordionContainer.js"></script>
<script type="text/javascript">
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.AccordionContainer");
</script>
<script type="text/javascript">
function showup(){
alert ("Hello, from button a inside an accordion");
}
</script>
</head>
<BODY>
<!-- div container for accordion-->
<div dojoType="AccordionContainer" style="float: left;
margin-right: 30px; width: 400px; height: 300px;
overflow: scroll;">
<div dojoType="ContentPane" label="Htek"
selected="true" ;
style="color:green;overflow: scroll;
background-color:yellow;">
A thing of beauty is a joy for ever <br/>
<button dojoType="Button" widgetId="dojo Welcome"
onClick=showup>Hi Dojo!</button> </div>
<div dojoType="ContentPane" label="Hodentek"
selected="true"
style="color:red;overflow: scroll;
background-color:#FFFF80;">
<a href="http://hodentek.blogspot.com">
<div dojoType="datepicker" widgetId="foo">
</div> <p></p>My Blog</a> <br/>
</div>
<div dojoType="ContentPane" label="ASPFree"
selected="true"
style="color:blue;overflow: scroll;
background-color:#FF8040;">
A thing of beauty is a joy for ever</div>
...
</div>
</BODY>
</HTML>
Next: How do the widgets look in various browsers? >>
More JavaScript Articles
More By Jayaram Krishnaswamy
/ 11 
