Rich Internet Applications with Dojo Toolkit 101 - Displaying a simple button
(Page 2 of 5 )
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!
Next: Adding an event and styling >>
More JavaScript Articles
More By Jayaram Krishnaswamy
/ 10 
