Monday Nov 26, 2007

Setting up NetBeans 5.5 for Dojo AJAX Development

Inserting the Dojo Toolkit into NetBeans 5.5

1. Download the latest version of Dojo Toolkit

At the time I'm writing this, the toolkit is currently on version 1.0.1
www.dojotoolkit.org

2. Unpack the Packaging.
This will create a directory called “dojo-release-1.0.1”. Save this directory in a location which you will
use it later.
Picture 2.png

In my case, I'm copying this directory into my Development folder.

3. Start up NetBeans 5.5

Picture 3.png

4. Create a new Project.

File->New Project->Web->Web Application

Picture 4.png

and press the Next button.

5. Define the New Project.

Project Name: HelloDojo

You can leave the rest unless you need to save the project in another location.

Picture 5.png

Click the Finish Button.

6. Examining the Web Project's Directory Structure

NetBeans should display the following..

Picture 6.png

The Directory Structure Represents the two important directories: (we will ignore the rest for now)

a. Web Pages - The HTML, JSP, CSS and Image files. Also this contains XML files used by the Server.
b. Source Packages - Server-side Java Implementations (Servlets and Enterprise Beans)

7. Copy Dojo Toolkit into the Web Pages Directory

Picture 7.png

NetBeans will reflect this change. (highlighted below)

Picture 8.png

Congrads.. You are now ready to start your Dojo Development!

Writing your first Dojo Application

1. Setting up Dojo in your Page

This example has been taken directly from the “The Book of Dojo” section entitled Hello World - Dojo for the Attention-Impaired. Full credit should be given to “lance” who is the author. I'm adding to this example the NetBeans work we did in the previous section.

The first thing we will do is:

a. Load a Cascading Style-Sheet (CSS). We will be using “Tundra” from the Dijit theme library.
b. Insert a script element into the head element. This loads the Dojo JavaScript to enable Dojo.
c. Place the “tundra” CSS class into the body tag
d. I changed the default “JSP Page” title to “HelloDojo Page”

Picture 10.png

2. Load the Required Widget/Modules

In this step, we will load the Button widget. (see “SECTION 2”)

Picture 11.png

3. Add the Widget to the HTML

Inside the BODY tag, place a new instance of the Button widget on the page.

Picture 12.png

At this time, you can actually try something out. Press the “Run Main Project” button to construct a WAR file to be installed on TomCat.

Picture 13.png

We now have a button. It doesn't do anything, but we have a button!

4. Add an Event to the Button

We are adding a specialized script tag in the above button to handle a mouse click event.

Picture 14.png

This mouse click will cause an Alert to Popup. If you run it, and click on the button, you should see the following..

Picture 15.png

This is it.. you have a very basic AJAX application working on NetBeans 5.5. Next week, I will show out the Server-side Java will provide more useful information than just a PopUp.

Final Thoughts..

I hope you found this information useful. I will be continuing this series further to include our new AJAX-based Web Client (code named Kendo). Please stay tuned..

Technorati Tags: , ,

About

I'll be writing about topics that would interest users and developers of Sun Java Communication Suite.

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today