Home | JSP | EJB | JDBC | Java Servlets | WAP  | Free JSP Hosting  | Spring Framework | Web Services | BioInformatics | Java Server Faces | Jboss 3.0 tutorial | Hibernate 3.0 | XML

Tutorial Categories: Ajax | Articles | JSP | Bioinformatics | Database | Free Books | Hibernate | J2EE | J2ME | Java | JavaScript | JDBC | JMS | Linux | MS Technology | PHP | RMI | Web-Services | Servlets | Struts | UML


 

Java Tutorials


 

 

Struts Tutorials

Struts Resources

Visit Forum! Post Questions!
Jobs At RoseIndia.net!

Dojo Hello World

                           

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:

<script type="text/javascript">
            // Load Dojo's code relating to widget managing functions
            dojo.require("dojo.widget.*");

            // Load Dojo's code relating to the Button widget
            dojo.require("dojo.widget.Button");
</script>

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 button element for the button that is used to input element - Dojo will work with either as long as the dojoType attribute is present.

widgetId="helloButton":  This is replaced with id="helloButton" without the functionality being affected - Dojo's widget system is smart enough to convert regular 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.

dojo.require("dojo.event.*");

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". 

          function helloPressed()
      {
      alert('Click on the Hello World Button');
      }

Here is the code of program:

<html>

<head>
<title>button</title>
    <script type="text/javascript">
      dojo.require("dojo.event.*");
      dojo.require("dojo.widget.*");
      dojo.require("dojo.widget.Button");

      function helloPressed()
      {
      alert('Click on the Hello World Button');
      }

      function init()
      {
      var helloButton = dojo.widget.byId('helloButton');
      dojo.event.connect(helloButton, 'onClick', 'helloPressed')
      }

    dojo.addOnLoad(init);
    </script>


</head>

<body bgcolor="#FFFFCC">

<p align="center"><font size="6" color="#800000">Welcome to Roseindia Dojo Project</font></p>

<button dojoType="Button" widgetId="helloButton" onClick="helloPressed();">Hello World!</button>
<br>
    
</body>

</html>

Output of program:

After clicking the "Hello World!" command button, you get:

 

                          

Ask programming questions?

 

 

Add This Tutorial To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 

Current Comments

0 comments so far (post your own) View All Comments Latest 10 Comments:
  JDO Tutorials
  EAI Articles
  Struts Tutorials
  Java Tutorials
  Java Certification

Tell A Friend
Your Friend Name

 

 
Browse all Java Tutorials
Java JSP Struts Servlets Hibernate XML
Ajax JDBC EJB MySQL JavaScript JSF
Maven2 Tutorial JEE5 Tutorial Java Threading Tutorial Photoshop Tutorials Linux Technology
Technology Revolutions Eclipse Spring Tutorial Bioinformatics Tutorials Tools SQL
 

Home | JSP | EJB | JDBC | Java Servlets | WAP  | Free JSP Hosting  | Search Engine | News Archive | Jboss 3.0 tutorial | Free Linux CD's | Forum | Blogs

About Us | Advertising On RoseIndia.net  | Site Map

India News

Send your comments, Suggestions or Queries regarding this site at roseindia_net@yahoo.com.

Copyright 2007. All rights reserved.

[an error occurred while processing this directive]