Newsletter sign-up
View all newsletters

Enterprise Java Newsletter
Stay up to date on the latest tutorials and Java community news posted on JavaWorld

Sponsored Links

Optimize with a SATA RAID Storage Solution
Range of capacities as low as $1250 per TB. Ideal if you currently rely on servers/disks/JBODs

JavaWorld.com > Java Enterprise Edition >

Introduction to the Dojo toolkit, Part 1: Setup, core, and widgets

Object-oriented JavaScript programming for Java developers

By Sunil Patil, JavaWorld.com, 01/20/09

  • Print
  • Feedback
.

Page 3 of 6

Developing a Hello World application

Once you've set up your development and debug environment, you're ready to try building a sample "Hello World" application using Dojo. The simplest way to do this would be to set up an HTTP server, create a static HTML page, and use Dojo in that page. Alternately, you could create a dynamic HTML page using the technology of your choice, such as Java EE, PHP, or .NET. For this exercise we'll create a Java EE Web application.

Hear this: Nate Shutta on tools for Ajax

Foundations of Ajax co-author Nate Shutta talks about JavaScript libraries, debuggers, and frameworks in a JavaWorld podcast with Andrew Glover. Listen now!

You can use your IDE of choice to create the HelloDojo Web application. Or you can use a text editor and a build script that allows you to package your code in a .war file. I developed the sample code using the Eclipse IDE for Java EE Developers, which provides tools for creating dynamic Web applications and for deploying application code on the Apache Tomcat server from within the IDE. It allows you to try out your changes rapidly.

Follow these steps to create the Hello World sample application:

  1. Download dojo-release-1.2.3.tar.gz from the Dojo Download site.
  2. Unzip dojo-release-1.2.3.tar.gz in the workspaceroot/HelloDojo/WebContent/js folder.
  3. Create an index.html page (shown in Listing 1) in the workspaceroot/HelloDojo/WebContent folder.

    Listing 1. The index.html file

    <html>
    <head>
        <title>Hello World</title>
        <script type="text/JavaScript" src="js/dojo/dojo.js"
         djConfig="parseOnLoad: true">
        </script>
        <style type="text/css">
                @import "js/dijit/themes/tundra/tundra.css";
                @import "js/dojo/resources/dojo.css";
        </style>
        <script type="text/JavaScript">
                dojo.require("dijit.form.Button");
        </script>
    </head>
    <body class="tundra">
        <button dojoType="dijit.form.Button" id="helloButton">
                Hello World
               <script type="dojo/method" event="onClick">
                       alert("Hello Dojo.");
               </script>
        </button>
    </body>
</html>

    The index.html file is a simple HTML document that generates one button using the dijit.form.button widget. When you click on that button the application displays "Hello Dojo" in an alert message. Lets take a closer look at each of these elements:
    • The dojo.js file is the main component in the Dojo toolkit. You can use Dojo by including this file in your page:

      <script type="text/JavaScript" src="js/dojo/dojo.js"
        djConfig="parseOnLoad: true"> </script>

      In the sample code, we want to use the Dojo framework .js files that are unzipped in the Web application's WebContent/js folder, so you must use the js/dojo/dojo.js path. The djConfig attribute is used for configuring the Dojo runtime, which I'll talk about more in the next section.
    • We want to use Dijit's button widget, so you must include the Dijit style sheet, as shown here:

      <style type="text/css">
                @import "js/dijit/themes/tundra/tundra.css";
       </style>

      Dijit allows you to choose a theme to use. The default theme is tundra, which we use in our sample code by including tundra.css in index.html.
    • Dojo uses the concept of modules, which are similar to Java packages. (I'll provide more detail about modules later in this article.) Before you use functionality from a particular package, you must include that package in your page. The dojo.require() call -- similar to Java's import statement -- is used for importing a Dojo module:

      <script type="text/JavaScript">
                dojo.require("dijit.form.Button");
        </script>

      The line dojo.require("dijit.form.Button") tells Dojo to load the dijit.form.Button class on your page.
    • You can use a Dijit widget by using the same markup as that of the normal HTML element. The only difference is that you must add the dojoType attribute indicating name of the Dijit widget that you want to use:

      <button dojoType="dijit.form.Button" id="helloButton">
                Hello World
               <script type="dojo/method" event="onClick">
                       alert("Hello Dojo.");
               </script>
        </button>

      You want to generate a button based on the Dijit button widget, so this code adds the dojoType="dijit.form.Button" attribute to the HTML button element. Dojo also allows you to attach event handlers in a convenient way by declaring them inline. If you don't feel comfortable with this convention you can declare a function in a script element and specify its name as a value of the onClick attribute.
  4. Next, change the web.xml file for your Web application to set index.html as the application's default page:

    <?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
    <display-name>HelloDojo</display-name>
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>
</web-app>
  5. Deploy the HelloDojo Web application on your application server. If you use Eclipse and Apache Tomcat, then you can just right-click your HelloDojo project and select Execute on server to install the HelloDojo Web application on Tomcat.
  6. Once the Web application is deployed and started, try accessing it using the application-server-specific URL. If you deployed your application on Tomcat, you can access it at http://localhost:8080/HelloDojo. You should get a page that looks like Figure 1 when you click on the Hello World button.

    Viewing the application.

    Figure 1. Viewing the application


    As you can see in Figure 1, Dojo has generated additional markup for the button. If you go to the Net tab, you will notice that your one request to HelloDojo is resulting in quite a few requests for additional resources such as .js, .css, and .html files. All the resources are requested from the same location where dojo.js resides.

  • Print
  • Feedback

Resources

More from JavaWorld