Home Dojo Dojo-1.0.2 Dojo Button, Dojo Button onclick, Dojo Buttons
Questions:Ask|Latest


 
 

Share on Google+Share on Google+

Dojo Button, Dojo Button onclick, Dojo Buttons

Advertisement
Complete Java Server Faces (JSF) Tutorial - JSF Tutorials. JSF Tutorials at Rose India covers everything you need to know about JSF, This JSF Tutorial contains readable and interesting content organized in proper and sequential manner. Each concept has been explained by simple examples so that you can understand easily and implement immediately into your java web application. It provides coverage of key JSF concepts such as User Interface(UI) components, Renderers, Backing beans, Validators, Converters, Navigation, Event handling, Expession language, Messages etc...

Dojo Button

        

In this tutorial, you will learn how to create a button using dojo toolkit. When user clicks on the button, JavaScript function is called which displays "Hello Dojo" message as alert.

Try Dojo Button Online

Create a Button

The following example code imports the required dojo style and script file.

<script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad: true"> </script> <style type="text/css""> @import "dijit/themes/tundra/tundra.css"; @import "dojo/resources/dojo.css"; </style> <script type="text/javascript"> dojo.require("dijit.form.Button"); </script>

dojo.require("dijit.form.Button"): This line instructs the browser to load the dijit button widget. 

Following code creates the button and adds the JavaScript onclick event.

<button dojoType="dijit.form.Button" id="helloButton">
Click Me
<script type="dojo/method" event="onClick">
console.log('you pressed the button');
alert("Hello Dojo!");
</script>
</button>
        

 Here is the full code of dojo button program: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dojo Button Demo</title>
<script type="text/javascript" src="dojo/dojo.js"
djConfig="parseOnLoad: true">
</script>
  <style type="text/css"">
  @import "dijit/themes/tundra/tundra.css";
  @import "dojo/resources/dojo.css";
  </style>
  <script type="text/javascript">
  dojo.require("dijit.form.Button");
  </script>
</head>
<p><b>Dojo Button Demo</b></p>
<p>Click on the button below</p>

<body class="tundra">
  <button dojoType="dijit.form.Button" id="helloButton">
  Click Me
  <script type="dojo/method" event="onClick">
  console.log('you pressed the button');
  alert("Hello Dojo!");
  </script>
  </button>
</body>

Output of program:

 

After clicking the "Click Me" command button, you get:

 

Try Dojo Button Online

Advertisement

Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: April 18, 2011

Ask Questions?    Discuss: Dojo Button, Dojo Button onclick, Dojo Buttons  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments
DMCA.com