JAVASCRIPT

Rich Internet Applications with Dojo Toolkit 101

The need for RIA (Rich Internet Applications) is driven by the desire to take the user to the next level in user interaction. There are various technology options for creating rich Internet applications, such as Lazlo, XUL, XForms, Flex2, Java, Dojo, and so on. This tutorial looks at just one aspect of using the Dojo toolkit. Simply stated, dojo is a JavaScript toolkit which can be used for developing rich Internet applications.

Author Info:

By: Jayaram Krishnaswamy

Poor Best

Rating:

/ 18

January 17, 2007

TABLE OF CONTENTS:

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