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:

The controls in the HTML pages that you are going to develop will use the widgets developed in the toolkit and are all documented in the widget folder of the source code. The next picture shows the expanded view of the widget folder. As you can see, there are various .js files which include the DatePicker, Button, and AccordionContainer related files. The various .js files are required for the functionality of the controls, the various events raised, the various functions and so on. The reader is encouraged to open the .js files in Word and review their contents.

Adding a dojo button object to the page

The following code may be used in displaying a default button in the dojo tool kit. The necessary scripts are in the <head /> section of the file. The dojo.require() adds the required reference to the control. In this way only necessary references are included.

<HTML> 
<HEAD> 
<TITLE> </TITLE>
<script type="text/javascript">
var djConfig = {isDebug: true};
</script>
<SCRIPT type="text/javascript" src="http://localhost/DoAjax/dojo.js"> 

</script>
<script type="text/javascript">
dojo.require("dojo.widget.Button");
</script> 
</HEAD> 
<body> <h2>Test</h2>
<button dojoType="button" >Hi Dojo!</button>
</body> 
</HTML>

This file when browsed with IE 7.0 displays the button as shown in the picture. It is a very nice looking button indeed!