Setting up your environment

This section discusses how to setup a test/development environment for Jaxer+DWR development.

Install Tomcat

Download Apache Tomcat 5.5. Installation is done simply by decompressing the archive you downloaded. Move the resulting folder to the location on your drive where you want Tomcat to live. In the following steps, we will configure Sysdeo so it can locate Tomcat allowing it to manage Tomcat for us.

Install Eclipse

The Eclipse Foundation doesn't distribute a standalone plugin for Java development. Since you'll need Java for your servlet development, you'll need to install the "Eclipse IDE for Java Developers" for your platform: Eclipse Downloads.

Install Aptana Studio Plugin

Now that Eclipse is installed, we'll need to install the Aptana Studio plugin so we can take advantage of Aptana's built-in Jaxer Server and Studio's HTML and XML editing support. Follow the directions as described at the Aptana Studio Update Site.

Install Sysdeo

For this demo, we'll use the Sysdeo tomcat plugin to manage Tomcat and our servlet deployment. You can download the plugin and view installation directions at the EclipseTotale site.

After you have started Eclipse with the -clean option as described on the EclipseTotale site, you will need to point the Tomcat plugin to your copy of Tomcat that you installed earlier. Open the Eclipse Preferences dialog and select the "Tomcat" node.

Select "Version 5.x" under the "Tomcat version" panel. Click the "Browse" button and navigate to your Tomcat directory. Note that you want to select the Tomcat's root directory and not a descendent of that directory. Click the "Apply" button and you should see the "Configuration file" and "Contexts directory" text boxes fill in automatically. Sysdeo is a now setup to manage Tomcat and to deploy Tomcat projects.

Hello World

In this section we will create a simple Hello World Jaxer application which will invoke a method on a Java class and then display the results of that call in our HTML document.

Create a new Tomcat Project

Select "File->New->Project...". Under the Java folder, you should see "Tomcat Project". Select that item and click the Next button. Name your project "HelloWorld" and click the "Finish" button.

Include DWR in your Project

In order to use DWR in our servlet, we need to add jaxer-dwr.jar to the WEB-INF/lib directory. Download the file by clicking the above link and then drag the file from your download location to the WEB-INF/lib folder in your Package Explorer. The content of that jar file will now be available to all your servlet's Java classes. However, we also need to update the build path so Eclipse can build our servlet properly. Right-click (or option-click) your project and select "Build Path->Configure Build Path...".

Make sure the "Libraries" tab is selected and click the "Add JARs..." button. Navigate to the WEB-INF/lib folder in your project and select the jaxer-dwr.jar file. Click the "OK" button to confirm your selection. Click the "OK" button to apply your new build path settings. Note that the Package Explorer will no longer display the jar file in the WEB-INF/lib folder even though the file still exists in that directory. That jar is now located under the "Referenced Libraries" node in your project.

Configuring the Servlet

This next step is a bit easier to do in the Aptana perspective, so switch to that now. Right-click (or option-click) the WEB-INF folder and select "New->XML File". Name the file "web.xml" and click the "Finish" button. Make sure the contents look like the following.

The two most important parts of this file are the servlet-class and the url-pattern elements. The servlet-class points to DWR's Servlet class which is responsible for coordinating and translating data over the Java/JavaScript bridge. The url-pattern is the base URL we will use to access the DWR functionality. This URL will be used in our HTML sample below to load the DWR engine and a wrapper for our Java class.

Creating the Java class

Right-click (or option-click) the "WEB-INF/src" package folder and select "New->Class". Name the class "HelloWorld" and click the "Finish" button. Make sure your class looks like the following

This class simply returns a string that says "Hello" to whomever is passed in as its only argument.

Creating the HTML page

This next step is a bit easier to do in the Aptana perspective, so switch to that now. Right-click (or option-click) your project in the Project View and select "New->HTML File". Name the file index.html and click the "Finish" button. Type in the following:

The first script element loads the DWR code that is responsible for handling the traffic between the DWR servlet and Jaxer. The next script element causes the servlet to generate a JS wrapper to give access to an instance of our HelloWorld class. Note that we use the autoload="true" attribute to make these two scripts available in callbacks. Although we are not using callbacks in this sample, it is good to get into the habit of including this attribute to save you some potential troubleshooting later. The last script element runs during initial page processing in Jaxer. This code invokes our HelloWorld.getHello() method and places the results into the page that will be served to the client. This code is called after the page has loaded within Jaxer via the onserverload attribute on the body element.

Previewing the results

Make sure the Jaxer server is running. The Jaxer icon in the coolbar should show a green light

If the light red, then simply click the button. The light will change to yellow while the server is starting up, then it will change to green when it is running. Next, we need to make sure Tomcat is running. You can do that by clicking the Tomcat icon (the one on the left) in the coolbar

Now that both Jaxer and Tomcat are running, you can click one of the browser tabs in index.html's editor. The light on that tab should turn orange indicating that the file was successfully processed by Jaxer and you should see "Hello, Jim" in the content of the file.

Conclusion

So, we've covered a lot of ground most of which was getting our Eclipse environment setup to code with Aptana Studio, Aptana Jaxer, DWR, and Tomcat. You now have the necessary framework in place to start experimenting further with the Jaxer/DWR integration.