Dojo Button Image, Dojo Button, Dojo Button onclick, Dojo Buttons

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 Image


In this tutorial, you will learn how to add image on the button using dojo toolkit. When user clicks on the print button, JavaScript function is called which displays "You clicked on Print Button" message as alert.

Try Dojo Button Image 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">
	<style type="text/css"">
			@import "dijit/themes/tundra/tundra.css";
			@import "dojo/resources/dojo.css";
	<script type="text/javascript">

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("You clicked on Print Button!");

 Here is the full code of dojo button image program: 

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dojo Button Image Demo</title>
<script type="text/javascript" src="dojo/dojo.js"
djConfig="parseOnLoad: true">
  <style type="text/css"">
  @import "dijit/themes/tundra/tundra.css";
  @import "dojo/resources/dojo.css";
  <script type="text/javascript">

<body class="tundra">
<p><b>Dojo Button Image Demo</b></p>
<p>Click on the button below</p>

  <button dojoType="dijit.form.Button" id="helloButton">
  <img src="print.gif" width="32" height="32">
  <script type="dojo/method" event="onClick">
  console.log('you pressed the button');
  alert("You clicked on Print Button!");
  <p><a href="dojobuttonimage.shtml">Back to Dojo Button 
 Image tutorial page.</a></p>

Output of program:


After clicking the "Print" command button, you get:


Try Dojo Button Image Online

Share on Google+Share on Google+

Dojo Button Image, Dojo Button, Dojo Button onclick, Dojo Buttons

Posted on: April 18, 2011 If you enjoyed this post then why not add us on Google+? Add us to your Circles



Discuss: Dojo Button Image, Dojo Button, Dojo Button onclick, Dojo Buttons  

Post your Comment

Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
June 12, 2013

This atrcile keeps it real, no doubt.