In this tutorial, you will learn how to create a "Hello World" example in Dojo. Before creating any examples or applications you must be follow the its directory structure.
Create a Button
The following example we are going to create a button "Hello World!". To create a button in dojo you need to a Button Widget that contains three visual states as: mouseOut, mouseOver and mouseDown. To follow the following steps for creating a dojo button widget:
// Load Dojo's code relating to widget managing functions
// Load Dojo's code relating to the Button widget
dojo.require("dojo.widget.*"): It instructs you to include the dojo widget (Not load all the widgets) for managing functions.
dojo.require("dojo.widget.Button"): This line instructs you to load the Dojo button widget. If you don't include this line, the markup code for the button would not be evaluated by Dojo upon loading, resulting in a plain HTML button instead of what you expect.
Insert the following code into the HTML body:
<button dojoType="Button" widgetId="helloButton" onClick="helloPressed();">Hello World!</button>
The key attribute of this HTML element to notice is the
dojoType attribute. This is responsible for instructing Dojo on how
to process the element when the page is loading. In this case you will use a
element for the button that is used to
input element - Dojo will
work with either as long as the
dojoType attribute is present.
This is replaced with
id="helloButton" without the
functionality being affected - Dojo's widget system is smart enough to convert
id attributes to
widgetId's if no widgetId`
attribute is explicitly named.
Connecting an Event to the Widget
When you click the command button then it doing something? We specify an onClick event handler for the given command button.
Above code we use "dojo.event.*" that includes all events functionality of Dojo (But not all widgets).
Following function that will called by the button when we clicked. After clicking the "helloPressed" method is called and it displays an alert message like: "Click on the Hello World Button".
alert('Click on the Hello World Button');
Here is the code of program:<html>
Output of program:
After clicking the "Hello World!" command button, you get:
Posted on: April 18, 2011 If you enjoyed this post then why not add us on Google+? Add us to your Circles