Use Jruby on Rails and XML to Supercharge Ajax with a Java Application Server Learn How XML Can Improve the Efficiency of Your Jruby on Rails and Ajax Development

Use JRuby on Rails and XML to supercharge Ajax with a Java Application Server Learn how XML can improve the efficiency of your JRuby on Rails and Ajax development

Skill Level: Intermediate

Tyler Anderson ([email protected]) Freelance writer Backstop Media

27 May 2008

The Ruby on Rails framework has handy XML features that will make developing with and serving database data in XML format to your JavaScript applications easier than ever. JavaScript also has built-in XML parsing capabilities that make it a snap to receive and parse data in XML format. But what if you now want to hook into Java™ applications without having to deploy another server? That's where JRuby comes in. JRuby on Rails is the Java implementation of the Ruby on Rails framework, bringing the benefits of Rails to Java programming by allowing deployment of Ruby apps to Java application servers. In this tutorial, you'll develop a JRuby on Rails application deployable to a Java application server that will serve database data in XML format to an Ajax client that you'll build for film lovers to manage their online films database. You'll also deploy a couple of Java Server Pages pages on the same Java application server to assist the Ajax client in adding and updating films.

Section 1. Before you start

This tutorial is recommended for XML developers interested in using JRuby on Rails, Java technology, and a database. It's also for those XML developers who wish to reduce their development time as they leverage the JRuby on Rails framework to use scaffolding without having to sacrifice the option of also using Java code.

About this tutorial

This tutorial shows how to develop Ajax applications more efficiently with the help of JRuby on Rails and Java Server Pages (JSP) technologies hosted on a Java application server, IBM® WebSphere® Application Server Express. You'll use the framework set up by JRuby on Rails to give simple access, through XML, to your database of films, and you'll use JSP technology to add new films to and edit existing films in the database. In all, you'll learn to do the following:

• Install WebSphere Application Server Express • Install and set up your first JRuby project • Install the Goldspike plugin to your JRuby project for deployment to WebSphere Application Server Express • Set up your JRuby project to use Derby as the database • Get a working JRuby on Rails 2.0.2 project to properly send XML requests to the Ajax client • Develop JSP files to handle adding and editing film entries by utilizing XML requests made by the Ajax client • Develop an all-Ajax client to manage your films • Deploy and test on WebSphere Application Server Express To accomplish the above, you'll develop an example application for the online film industry where lovers of film will be able to manage, tag, and be redirected to their library of online videos. The Ajax application will receive communications in XML format from JRuby on Rails and send XML communications to JSP applications running a single Java application server instance.

Prerequisites

For this tutorial you'll need the following downloads:

• WebSphere Application Server Express —Get a trial version of WebSphere Application Server Express from IBM (this tutorial uses V6.1). You'll use WebSphere Application Server as a full featured Java application server to host your JRuby on Rails Web application. However, please note that you can use any application server, such as Apache Tomcat or Apache Geronimo. • JRuby —JRuby is a Java-based interpreter for Ruby, allowing deployment

to Java application servers through the Goldspike plugin with full integration with Java libraries. This tutorial uses JRuby version 1.1.1, and Rails version 2.0.2. Rails will be downloaded and installed by RubyGem, which is part of the JRuby package. • Database—The example application requires a database to store and retrieve film entries. This tutorial uses the version of Derby that comes with WebSphere Application Server Express, though you can use any version. Derby is nice because it's free and lightweight. Knowledge of JSP and Rails technology is useful for this tutorial, but not required.

Section 2. Introduction

This section gives an overview of how to leverage the XML features of JRuby on Rails, JSP and Ajax technology, and how WebSphere Application Server Express brings them all together.

XML, Rails, Java and Ajax technologies

Frequently used acronyms

• Ajax: Asynchronous JavaScript and XML

• DOM: Document Object Model

• XML: Extensible Markup Language

With built-in XML features of JRuby on Rails, you can access to database data in XML format with little effort, and with JRuby's greater Java compatibility you bring a host of other Java features into your arsenal. Thus in a single Ajax application, as you'll build in this tutorial, your Ajax application will reference both JRuby on Rails and JSP code to combine the strengths of both programming languages in a single Web application. These strengths include the easily used Ruby on Rails framework, and the power of Java programming in a JSP page.

Next you'll see how WebSphere Application Server Express fits in.

How WebSphere Application Server Express brings them all together

WebSphere Application Server Express is a Java Servlet container, and thanks to JRuby and the Goldspike plugin, you can now deploy JRuby on Rails applications to Java application servers as packaged WAR files. It doesn't stop there, either. You can deploy JSP files within the Ruby application, to have them work alongside your Ruby files.

In Figure 1 is a sneak peek into the application that you'll develop.

Figure 1. Showcase of the example application

You'll code the film management application in Ajax complete with the ability to add new films, and view, edit, and delete each individually.

Before the fun begins, however, first you'll do a quick installation and setup of WebSphere Application Server Express and JRuby.

Section 3. Quick WebSphere Application Server Express installation guide

Installing WebSphere Application Server Express is pretty simple. Simply follow along and you shouldn't run into any problems.

Installing WebSphere Application Server Express

To begin the installation, unzip the file you downloaded, navigate to the WebSphere Application Server directory, and open the install.exe file. This should bring you to the welcome page (Figure 2).

Figure 2. Welcome page

Click Next to view the license agreement (Figure 3).

Figure 3. Accept the license agreement

Select the I accept both the IBM and the non-IBM terms radio button to accept the license agreement. Click Next to open the Install Sample applications page (Figure 4).

Figure 4. Installing sample apps

Check the Install the sample applications box and click Next. This brings you to the installation location page (Figure 5).

Figure 5. Choose installation location

Choose your destination, and click Next to open the page where you'll set up administrative security (Figure 6).

Figure 6. Enabling admin and samples security

Choose any username and password you wish. For this tutorial, username and password, respectively, were chosen. Click Next to open the installation summary page (Figure 7).

Figure 7. Installation summary

If everything looks correct, click Next. After installation completes, you see the installation results page (Figure 8).

Figure 8. Installation success

Click Finish to complete the installation.

You can play with the First steps console if you wish, but you don't have to worry about it for now. To start the server, simply click Start > Programs > IBM WebSphere > Application Server - Express V6.1 > Profiles > AppSrv01 > Start the server.

And installing WebSphere Application Server Express is as simple as that! Next you'll install JRuby.

Section 4. Quick JRuby installation and first project setup guide

Installing JRuby is simple enough as well, but involves a few more command line details. In this section you install JRuby, and all necessary add-ons including Rails. To finish off the section, you create your first JRuby project complete with the Goldspike plugin, and set up your project for deployment to WebSphere Application Server Express for testing.

Installing JRuby

Remember the jruby-bin-1.1.1.zip file you downloaded earlier? To install JRuby, you unzip this folder to your applications directory (C:\apps\ on the test machine). Next, add the JRuby\bin and WebSphere\AppServer\java\bin directories to your path.

With that set, you're ready to install Rails, ActiveRecord-JDBC, and other required gems using RubyGem, a package management tool that comes with JRuby. Enter the commands in Listing 1.

Listing 1. Installing Rails and the JDBC adapter

gem install -y --no-rdoc --no-ri rails gem install -y --no-rdoc --no-ri activerecord-jdbc-adapter

The first of these two commands downloads and installs Rails. The second downloads and installs the JDBC adapter that you'll use to connect to the Derby database later in the tutorial.

Your first JRuby project

Now you'll use JRuby on Rails to create your film project. Enter the two commands in Listing 2. Note that each of these two JRuby commands should be on a single line.

Listing 2. Creating the film project with the Goldspike plugin

jruby -S rails film cd film jruby script\plugin install http://jruby-extras.rubyforge.org/svn/trunk/ rails-integration/plugins/goldspike

The first command creates the project and accessory files. The second opens the right directory, while the third installs the Goldspike plugin into your film project. It's the Goldspike plugin that makes it possible to create a WAR file for deployment to the application server, so you'll need that before you go too much further.

Now you need to update several files to finalize the configuration and ensure proper functioning of the project.

First up is the database.yml file. Edit it to point to the proper development database (see Listing 3).

Listing 3. Updating config/database.yml

development: adapter: jdbc driver: org.apache.derby.jdbc.EmbeddedDriver url: jdbc:derby:c:\apps\rubyapps\film\db\development;create=true test: adapter: jdbc driver: org.apache.derby.jdbc.EmbeddedDriver url: jdbc:derby:c:\apps\rubyapps\film\db\test;create=true production: adapter: jdbc driver: org.apache.derby.jdbc.EmbeddedDriver url: jdbc:derby:c:\apps\rubyapps\film\db\production;create=true

Note you simply defined three databases, one for each of the three environments: development, test, and production. In this tutorial you only need to worry about the development database, which is a Derby database in this case.

Now you'll update the war.rb file with some prerequisites for the final application (see Listing 4).

Listing 4. Updating config/war.rb

... #maven_library 'mysql', 'mysql-connector-java', '5.0.4' # Add the Derby library to the WAR include_library 'derby', '10.1.3'; # Add the ActiveDirectory-JDBC adapter to the WAR add_gem 'activerecord-jdbc-adapter', '0.8'; @result.rails_env= 'development';

In this file you add a few lines to tell Goldspike to include the Derby WAR file, the JAR file for the activerecord-jdbc-adapter plugin, and to tell WebSphere to deploy the application in development mode. Finally, you need to update the routes.rb file (see Listing 5).

Listing 5. Updating config/routes.rb

ActionController::Routing::Routes.draw do |map| map.resources :films map.update 'films/:id/update', :controller => 'films',

:action => 'update' ...

You'll see how this information comes into place later in this section, but for now understand that you're adding a couple of new routes to make sure things run smoothly. Now you're ready to generate the scaffolding for your films database (see Listing 6). Note the command shown is meant to be entered on a single line.

Listing 6. Generating scaffolding, model and views for the films database

jruby script\generate scaffold films title:string url:string tags:string vibe:integer dateadded:date notes:text

Rails 2.0 is quite different from previous Rails versions in that rather than load the database first, then generate the scaffolding, you can generate the scaffolding, and the model and controller will be built for you, accordingly. (You'll create the database from these parameters in a moment.) Note that you specify the fields (columns) of the films table as:

• Title as string • Url as string • Tags as string (keywords defining the video) • Vibe as integer (number between 1 and 10 that specifies how much you like the video) • Dateadded as date • Notes as text Before going into the generated scaffolding code, you'll need to update the application.rb file (see Listing 7).

Listing 7. Updating app/controllers/application.rb

... # Uncomment the :secret if you're not using the cookie session store protect_from_forgery :secret => 'f0acb4610baa60661ff5208183e85263' end ...

This is required by the Rails application for it to work properly, since by default on this project, the cookie session store is not being used.

Next, you need to do a few more thing to get the Rails scaffolding files created into a functional state.

Finalizing the JRuby on Rails application

The Rails scaffolder quickly creates several files. First, you need to edit the index.html.erb file (see Listing 8).

Listing 8. Updating app/views/films/index.html.erb

... <%=h films.notes %> <%= link_to 'Show', :action => 'show', :id => films %> <%= link_to 'Edit', :action => 'edit', :id => films %> Destroy <% end %> ...
<%= link_to 'New Film', :action => 'new' %>

Next you'll update edit.html.erb (see Listing 9).

Listing 9. Updating app/views/films/edit.html.erb

... <%= error_messages_for :films %> <% form_for(:films, :url => update_url(:id => @films.id)) do |f| %>

Title
... <% end %> <%= link_to 'Show', :action => 'show', :id => @films %> | <%= link_to 'Back', :action => 'index' %>

As shown in Listing 9, use the new route you added back in Listing 5 (update_url). This correctly creates the URL for the edit form to submit to. Lastly, update the two links at the bottom as you did in Listing 9. The same goes for the show.html.erb file (see Listing 10).

Listing 10. Updating app/views/films/show.html.erb

...

<%= link_to 'Edit', :action => 'edit', :id => @films %> | <%= link_to 'Back', :action => 'index' %>

And again, update the new.html.erb file (see Listing 11).

Listing 11. Updating app/views/films/new.html.erb

... <% end %> <%= link_to 'Back', :action => 'index' %>

With all of the links and files ready to roll, the last file that you need to update is the films_controller.rb file (see Listing 12).

Listing 12. Updating app/controllers/films_controller.rb

... def index @films = Films.find(:all) respond_to do |format| format.html # index.html.erb format.xml { render :xml => @films } end end ... def create @films = Films.new(params[:films]) respond_to do |format| if @films.save flash[:notice] = 'Films was successfully created.' format.html { redirect_to(films_url) } ... def update @films = Films.find(params[:id]) respond_to do |format| if @films.update_attributes(params[:films]) flash[:notice] = 'Films was successfully updated.' format.html { redirect_to(films_url) } ...

The first required update is to the index action. You need to update this action so that it displays XML properly. It previously didn't have the format rules to display XML, and with this update you are ready. The last two updates require changes to the redirect_to statements in the create and update actions: Replace @films with films_url.

Lastly, you'll need to create and initialize the database, as in Listing 13.

Listing 13. Initializing the database

mkdir lib\java cp "c:\Program Files (x86)\IBM\WebSphere\AppServer\derby\lib\derby.jar" lib\java\derby-10.1.3.jar jruby -S rake db:migrate

Note that the copy command (cp) should be all on one line. The first two commands create and add the Derby JAR to your project. The last command creates the database based on the auto-generated db/migrate/001_create_films.rb (the auto-generated migration based on parameters that are passed to the scaffolder, as you've done here, is a cool new JRuby on Rails feature).

That completes the JRuby on Rails project. Next you'll deploy and test it on WebSphere Application Server Express.

Deploy to WebSphere Application Server Express

Once you deploy your JRuby on Rails project to WebSphere Application Server Express, you can test it and initialize the database with test data. To deploy the application, you need to create a WAR file. Rake lets you to do that easily with the following command: jruby -S rake war standalone: create.

Now to actually deploy the WAR file, point your browser to: http://localhost:9061/admin and log in to the WebSphere Application Server admin console.

Use the username and password you entered previously (see Figure 7). Once logged in, expand the Applications heading on the left side, and click on Install New Application. This should bring you to the page in Figure 9.

Figure 9. Installing the film Web application

Fill the form out as seen in Figure 9, then click Next four times to proceed. Finally, click Finish. The application then installs, as noted in Figure 10.

Figure 10. Installation successful

To save the configuration and start the film application, click Save. You've now deployed the film Web application using the WebSphere Application Server administration console.

To easily redeploy the application, you can create a JACL script to automate the process of creating and deploying the WAR file. The first step is to create JACL script to help with redeploying the films Web application to WebSphere Application Server Express (see Listing 14).

Listing 14. A JACL redeploy script for the JRuby on Rails Web application (redeploy.jacl)

> $AdminApp uninstall film_war > $AdminConfig save > $AdminApp install "/film.war" {-appname film_war -node -cell -server -contextroot /film -usedefaultbindings} > $AdminConfig save > set applicationManager [$AdminControl queryNames cell=,node=, type=ApplicationManager,process=,*] > $AdminControl invoke $applicationManager "startApplication" film_war > $AdminConfig save

You will need to fill in everything between <...> with data pertaining to your own system. To find out your , look in the \profiles\AppSrv01\config\cells directory. You can find the corresponding in the \profiles\AppSrv01\config\cells\\nodes directory. Lastly, to find your , look in the \profiles\AppSrv01\config\cells\\nodes\\servers directory.

Note that the greater than (>) characters in the redeploy.jacl script in Listing 14 should not go in the file (see the redeploy.jacl in the source code package as an example). Simply put, each line beginning with > specifies a single command and should remain on a single line.

Next, create another script for Web deployment of the JSP pages you'll create later (see Listing 15).

Listing 15. A JACL redeploy script for the JSP pages (redeployJSP.jacl)

> $AdminApp uninstall jsp_war > $AdminConfig save > $AdminApp install "C:/apps/rubyapps/jsp/jsp.war" {-appname jsp_war -node tandersonNode02 -cell tandersonNode02Cell -server server1 -contextroot /jsp -usedefaultbindings} > $AdminConfig save > set applicationManager [$AdminControl queryNames cell=tandersonNode02Cell,node=tandersonNode02, type=ApplicationManager,process=server1,*] > $AdminControl invoke $applicationManager "startApplication" jsp_war > $AdminConfig save

The same notes that applied to the JACL script in Listing 14 apply here in Listing 15.

When you're ready, execute these scripts with the two commands in Listing 16 (note each is on its own line).

Listing 16. Deploying the film Web application

jruby -S rake war:standalone:create cd c:\\bin wsadmin.bat -f c:\apps\rubyapps\redeployROR.jacl -user username -password password

The first command creates the WAR file, and the second deploys it to WebSphere Application Server. Excellent! Your application will be ready for testing as soon as you initialize the database.

Initializing the database

Now, before you test and make sure your application's XML features work correctly, initialize the database with some test data.

Point your browser to http://localhost:9081/film/films/new, and create a new film as shown in Figure 11.

Figure 11. Adding a new film through JRuby on Rails

Fill it in with any film data you wish, and click Create. You should then see the list page (Figure 12).

Figure 12. New film successfully created and listed

Great! The new video is alive and well inside the database, and you should be able to see it.

Next, test the built-in XML features of JRuby on Rails!

Testing the XML features of JRuby on Rails

JRuby on Rails has some cool features that allow you to get all the film entries from the database in XML format. This will work wonders later for the Ajax client that you will build. To test, point your browser to the URL in Figure 13, and you'll also see the XML listing shown therein.

Figure 13. XML listing of films, care of JRuby on Rails

Next you'll learn how to access film entries individually. Point your browser to the following URL: http://localhost:9081/film/films/.xml, and replace with the ID of the film entry that you just added (likely 1 if it was your first film entry, or you can see it in the XML that you pulled up in your browser back in Figure 12). Figure 14 shows the XML that will subsequently come up.

Figure 14. XML listing of a single film, care of JRuby on Rails

You'll use this functionality to access individual films in the Ajax client that you're about to build.

Next you'll work on creating JSP pages to capture XML data send from the Ajax client to update film entries, and to also create new ones.

Section 5. Developing the server side JSP pages

In a production environment, you'll want the most robust an environment possible to add and edit information in the database. In all likelihood, this will mean Java servlets, possibly using SpringMVC and Hibernate, to enhance security and reliability. You'll also want to use a Java parser, rather than manually examine the text of the request.

All of that is beyond the scope of this tutorial. To simply demonstrate the connection between the XML received and the database commands executed you'll create two

simple JSP pages, one to add new films, and another to edit existing ones.

Adding new films

Here you create a new JSP page that your Ajax client will call and send XML data to, in order to add new film entries to the database.

Create a new file, new.jsp, and place it in the public/ directory of your film JRuby on Rails application. Now define it, as in Listing 17.

Listing 17. Creating public/new.jsp

<%@ page import='java.io.*' %> <%@ page import='java.util.*' %> <%@ page import='java.sql.*' %> <%@ page import='java.sql.Date' %> <%@ page import='org.apache.derby.jdbc.EmbeddedDriver' %> <% if(request.getMethod().equals("POST")){ String result = ""; try { // try1 read the raw data ServletInputStream poststrm = request.getInputStream(); // get data from inputstream int count; byte[] s = new byte[100]; try { // try2 while ((count = poststrm.readLine(s, 0, 100)) > 0) { byte[] s2 = new byte[count]; int k; for (k = 0; k < count; k++) { s2[k] = s[k]; } result = result + new String(s2); } } catch (java.io.IOException e) { out.print("Exception during processing of "+ "raw POST data: "); e.printStackTrace(); } } catch (java.io.IOException e) { out.print("Exception during attempt to read http"+ " input stream: "); e.printStackTrace(); }

String title = result.substring(result.indexOf("")+7, result.indexOf("")); String url = result.substring(result.indexOf("")+5, result.indexOf("")); String tags = result.substring(result.indexOf("")+6, result.indexOf(""));

String vibe = result.substring(result.indexOf("")+6, result.indexOf("")); String dateadded = result. substring(result.indexOf("")+11, result.indexOf("")); Date dadded = Date.valueOf(dateadded); String notes = result.substring(result.indexOf("")+7, result.indexOf(""));

Driver driver = null; try { // try3 driver = (Driver) (EmbeddedDriver.class).newInstance(); } catch(Exception e) { out.println("Unable to load, " + "instantiate, or register driver " + driver + ": "+e.getMessage()); } try { // try4 Connection conn = driver. connect("jdbc:derby:c:\\apps\\rubyapps\\"+ "film\\db\\development;", new Properties()); String sql = "insert into films "+ "(title, url, tags, vibe, dateadded, notes)"+ "values (?, ?, ?, ?, ?, ?)"; PreparedStatement statement = conn.prepareStatement(sql); statement.setString(1, title); statement.setString(2, url); statement.setString(3, tags); statement.setInt(4, Integer.parseInt(vibe)); statement.setDate(5, dadded); statement.setString(6, notes); statement.execute(); } catch(Throwable e) { e.printStackTrace(); out.println(e.getMessage()); out.println("Error executing query"); out.write("error"); } out.write("Success!"); } %>

Note that this file won't do anything unless it gets a POST request. The next two nested try statements retrieve the RAW POST data, as sent from the Ajax client and convert it to a Java string. The following six blocks of code parse the XML using Java code to extract the new film data you need to create a new film entry in the

database. The third try statement then grabs an instance of the Embedded Derby driver, which you use to connect to the development version of the Derby database in the fourth try statement. Here you also set up an INSERT INTO PreparedStatement, set each of the six variables, respectively, and execute. "Success!" is then returned to the caller, in this case the Ajax client.

You'll test this code later when you add new films through the Ajax client.

Editing films

Now you'll create a new JSP file that you'll use to send XML data to through the Ajax client. This JSP file will then extract the relevant data and update the corresponding film entry in the database.

Create a new file, edit.jsp, and add it to the public/ directory in your JRuby on Rails application. Now define it, as in Listing 18.

Listing 18. Creating public/edit.jsp

... out.print("Exception during attempt to read http "+ "input stream: "); e.printStackTrace(); }

String id = result.substring(result.indexOf("")+4, result.indexOf("")); String notes = result.substring(result.indexOf("")+7, result.indexOf("")); String tags = result.substring(result.indexOf("")+6, result.indexOf("")); String vibe = result.substring(result.indexOf("")+6, result.indexOf(""));

Driver driver = null; try { driver = (Driver) (EmbeddedDriver.class).newInstance(); ... Connection conn = driver. connect("jdbc:derby:c:\\apps\\rubyapps\\"+ "film\\db\\development;", new Properties()); String sql = "update films set vibe=?, notes=?, tags=? "+ "where id=?"; PreparedStatement statement = conn.prepareStatement(sql); statement.setInt(1, Integer.parseInt(vibe)); statement.setString(2, notes); statement.setString(3, tags); statement.setInt(4, Integer.parseInt(id));

statement.execute(); ...

Note here that only the differences between edit.jsp and new.jsp are shown, so please refer to new.jsp to fill in the blanks.

The data is extracted from the RAW post data just as before, except this time an UPDATE PreparedStatement is with fewer variables that need to be set (as not all fields in a film entry are modifiable). Executing the statement updates the film entry in the database.

Next, you'll deploy the JSP pages to WebSphere Application Server Express.

Deployment

With JSP pages in hand, you're ready for deployment. Create the following directory structure (see Listing 19).

Listing 19. JSP project file and directory structure

--+ jsp --- new.jsp --- edit.jsp ----+ WEB-INF ----- web.xml ------+ lib ------derby-10.1.3.jar

Grab the Derby JAR from the same location as you did for the lib/java directory in the film JRuby on Rails application. Now define the web.xml as in Listing 20.

Listing 20. Writing an empty web.xml file

Now zip up all the files in the jsp project directory, and rename the created file to jsp.war. Now you're ready to deploy the JSP project to WebSphere Application Server Express. Go back to the Install New Application page in Figure 15.

Figure 15. Installing the JSP project

Fill out the form as in Figure 15, click Next four times, and Finish once to open the Installation successful page (Figure 16).

Figure 16. Installation successful

Click Save to save the configuration and start the JSP Web application. You should see the following started applications, as in Figure 17.

Figure 17. Live applications

You can now redeploy this project. Rezip the jsp directory, rename it to jsp.war, and type the two commands in Listing 21 (each on a single line).

Listing 21. Redeploy the project

cd c:\\bin wsadmin.bat -f c:\apps\rubyapps\redeployJSP.jacl -user username -password password

Section 6. Developing the Ajax client

With the JSP and Ruby code set up to help facilitate your Ajax client, you're ready to begin development! This section shows you how to develop the complete Ajax client that you saw in Figure 1.

Before moving on, however, I'd like to draw your attention to a difference between

this project and a production application. To show what actually happens under the covers, so to speak, you'll manually handle Ajax requests. For your actual application, you will likely want to use one of the many frameworks available, such as Prototype. These libraries account for browser differences and make your life much easier.

But in the meantime, look at what actually happens.

Retrieve and send XML and HTML data

First, set up the core send/receive functions that you'll use throughout your Ajax client. Create a new file, downloadurl.js, and define it, as in Listing 22.

Listing 22. Retrieving XML and HTTP support functions

request = getRequestObject(); request.open("GET", url, true); request.onreadystatechange = function(){ if(request.readyState == 4){ func(request.responseText); } }; request.send(null); }

Here you have four functions. Essentially, the first one fetches XML into a DOM document object and returns it to the caller. With it, you'll list all film entries, as well as individual film entries. The second is a helper function to the third and fourth functions that retrieves the appropriate XMLHttpRequest object based on the current browser. The third function sends RAW XML data to the edit.jsp and new.jsp files when adding new film entries and editing existing ones. The fourth function deletes existing entries in calls to the JRuby on Rails destroy action.

Next you'll begin development of the core HTML file where you'll also add several JavaScript functions throughout the rest of this tutorial.

The core HTML and DIV tags

Where you hear Ajax mentioned, you will see div tags mentioned because they're a convenient container for content that you can identify with an id attribute. Next, you'll create an HTML file to house the Ajax client. Delete the current index.html file in the public/ directory, create a new one, and begin to define it as in Listing 23.

Listing 23. The main HTML page

Ajax Film Lover's Web Page

Note here the downloadurl.js is included into the HTML. Then where you see the "..." is where you'll add all the JavaScript functions from now until the end of this tutorial.

Here the important div tag, where you'll place all the interactively updated HTML, is the HTMLcontent div tag.

Next you start to develop the core Ajax functions.

Listing all films

Begin in natural order and list all film entries currently in the database. This will provide other links where you can create new film entries, or where you can display, edit, or delete existing entries.

Continue to define the index.html file, as in Listing 24.

Listing 24. Listing all films through JavaScript and JRuby on Rails

First, hardcode the three base URLs that you'll use constantly, as you'll modify them based on the user input from the Ajax client. Next, create several helper functions to display various HTML elements, and the one (getChildValue) to get the text value elements in the XML file.

The next function, processXML, takes in a DOM Document and type. If the type is list (as it will be for listing all films) it sets up a table for displaying the XML data. Next the script fetches all film children from the XML document, and displays all fields in the table with Show, Edit and Delete links. It then returns the table along with a link to create a new film entry.

Lastly, note the main list() function sets up the proper link to grab the XML from the JRuby on Rails application, storing the response in res, and setting the HTMLcontent div to what's returned from the processXML function.

Check it out in action in Figure 18.

Figure 18. Listing all films

Here you can see all the links just created. Note that they aren't defined yet, and so the page might or might not load due to these undefined functions.

Next you'll define the show function, to allow the display of individual film entries.

Showing individual films

Now you can list film entries. With the functionality you add here, you can view them individually. Continue to edit the processXML function in the index.html file, as in Listing 25.

Listing 25. Displaying single films using JavaScript and JRuby on Rails

...

tagStr = tagStr + '
New Film'; return tagStr; } else if(type == 'show'){ items = xmlDoc.getElementsByTagName("films"); item = items.item(i); title = getChildValue(item, "title"); url = getChildValue(item, "url"); tags = getChildValue(item, "tags"); vibe = getChildValue(item, "vibe"); dateadded = getChildValue(item, "dateadded"); notes = getChildValue(item, "notes"); id = getChildValue(item, "id"); tagStr = displayShow('Title', title) + displayShow('URL', url) + displayShow('Tags', tags) + displayShow('Vibe (number between 1 and 10 '+ 'to specify how much you like the video)', vibe) + displayShow('Date Added (YYYY-MM-DD)', dateadded) + displayShow('Notes', notes) + '
' + displayLink('edit', id) + '
' + displayLink('list', ''); return tagStr; } ... } function show(num){ var url = filmsbaseurl + "/"+num+".xml"; var res = processXML(loadXML(url), "show"); document.getElementById("HTMLcontent").innerHTML = res; } ...

The new portion in the processXML function, where type == 'show', is more or less similar to what happens when type == 'list', except here you know there is only a single film entry and there is no for loop. The big change comes in the show() function where the ID chosen to look up is appended to the filmsbaseurl followed by ".xml". The returned HTML data displaying the individual film entry is finally set to display in the HTMLcontent div.

See the show function in action in Figure 19.

Figure 19. Displaying an individual film

And there you have it! You can, from here, go back to the list/index page, or edit the individual film entry, which you'll code next.

Editing film entries

Now that you can list and view film entries, it's time to be able to edit them, and complete the processXML function. Continue to edit the processXML function in the index.html file, as in Listing 26.

Listing 26. Editing a film entry using JavaScript

...

'

Edit
Index'+ '

'; return tagStr; } else if(type == 'edit'){ items = xmlDoc.getElementsByTagName("films"); item = items.item(i); title = getChildValue(item, "title"); url = getChildValue(item, "url"); tags = getChildValue(item, "tags"); vibe = getChildValue(item, "vibe"); dateadded = getChildValue(item, "dateadded"); notes = getChildValue(item, "notes"); id = getChildValue(item, "id"); tagStr = displayShowEdit('Title', title) + displayShowEdit('URL', url) + displayEditNew('Tags', 'tags', tags, 50) + displayEditNew('Vibe (number between 1 and 10 to '+ 'specify how much you like the video)', 'vibe', vibe, 2) + displayShowEdit('Date Added (YYYY-MM-DD)', dateadded) + displayEditNew('Notes', 'notes', notes, 50, 10) + displayButton('save', 'saveedit', id) + '
' + displayLink('show', id) + '
' + displayLink('list', ''); return tagStr; } } function edit(num){ var url = filmsbaseurl + "/"+num+".xml"; var res = processXML(loadXML(url), "edit"); document.getElementById("HTMLcontent").innerHTML = res; } ...

This time (in the processXML function) when type == 'edit', code execution continues here. This portion of code is much like the Show functionality, except here three of the fields are editable (tags, vibe, and notes), and a Save button appears that calls the saveedit function.

See it in action in Figure 20.

Figure 20. Editing an existing film

Feel free to make some edits to your film entry. The Save button won't work yet, but that's what you'll work on next.

Saving edited films

The form for editing films is live, but not hooked to anything. Now you'll write the saveedit function to connect to the edit.jsp file sitting on WebSphere Application Server Express, which will in turn save the new data into the film entry. Continue to define the index.html file, as in Listing 27.

Listing 27. Saving edited film data back to the edit.jsp file using JavaScript

... function saveedit(num){ var url = editbaseurl; inputTags = document.getElementById("HTMLcontent"). getElementsByTagName("input"); var xmldata = '' + num + ''; for (var i = 0; i < inputTags.length; i++) { var tag = inputTags.item(i); if(tag.name !== 'save'){ xmldata = xmldata + "<" + tag.name + ">" + tag.value + ""; } } inputTags = document.getElementById("HTMLcontent"). getElementsByTagName("textarea"); var name = inputTags.item(0).name; var value = inputTags.item(0).value; xmldata = xmldata + "<" + name + ">" + value + ""; xmldata = xmldata + ''; sendData(url, xmldata, reload2); } function reload2(text){ alert(text); setTimeout("list()", 500); } ...

Here the URL to call is the editbaseurl pointing to the edit.jsp file. The next several lines including the for loop grabs all HTML elements of type input from the HTMLcontent DIV, and places them in an XML document (ignoring the Save button). The next several lines after the for loop grabs the textarea field from the HTTP to add the notes field to the XML document. With the XML document complete, the data is sent to the edit.jsp file with the call to sendData with reload2 set as the callback URL. When this URL is called, the result displays in an alert box ( Figure 21).

Figure 21. Edit confirmation

Click OK to bring up the index/list page where all film entries display in a table as before (see Figure 22).

Figure 22. Listing the updated film

The film entry is updated. Now you'll add the functionality to delete film entries.

Deleting film entries

Since you can edit film entries, why not delete? That's what you'll do here, and good news, deleting film entries is the easiest of all the tasks. Continue to define the index.html file, as in Listing 28.

Listing 28. Deleting entries through JavaScript and JRuby on Rails

... function reload(){ setTimeout("list()", 500); } function deleteMe(num){ var url = filmsbaseurl + "/destroy/"+num; downloadUrl(url, function(response) {}); reload(); } ...

Here you define the deleteMe function that sets up the URL needed to destroy the specified film entry. However, now the downloadUrl function is called with a dummy callback function that does nothing. A reload happens after 500 milliseconds, enough time for the entry to be deleted, and then the list() function is called, reloading the film entries, as in Figure 23.

Figure 23. Deleting a film entry

Now you only lack the ability to add new films. You'll work on that next.

Adding new films

With the ability to do everything but add new film entries, it's about time to add this functionality. Continue to define the index.html file, as in Listing 29.

Listing 29. Adding new entries through JavaScript

... function neww(){ tagStr = displayEditNew('Title', 'title', '', 50) + displayEditNew('URL', 'url', '', 50) + displayEditNew('Tags', 'tags', '', 50) + displayEditNew('Vibe (number between 1 and 10 to '+

'specify how much you like the video)', 'vibe', '', 2) + displayEditNew('Date Added (YYYY-MM-DD)', 'dateadded', '', 50) + displayEditNew('Notes', 'notes', '', 50, 10) + displayButton('save', 'savenew', '') + displayLink('list', ''); document.getElementById("HTMLcontent").innerHTML = tagStr; } ...

Note here that you simply set the HTMLcontent div to display a form for entering new film data (see Figure 24).

Figure 24. Adding a new film

But beside that, the neww() function is similar to the edit portion of the processXML function except that here nothing has a previous value, and every field gets its own input box or textarea. Next you'll define the savenew() function, the function tied to the Save button.

Saving new film data

Like the edit film entry form, here you'll send the new form to the new.jsp file rather than to edit.jsp. To complete the definition of the index.html file, add one last function, as in Listing 30.

Listing 30. Saving new film data back to the new.jsp file using JavaScript

... function savenew(){ var url = newbaseurl; inputTags = document.getElementById("HTMLcontent"). getElementsByTagName("input"); var xmldata = ''; for (var i = 0; i < inputTags.length; i++) { var tag = inputTags.item(i); if(tag.name !== 'save'){ xmldata = xmldata + "<" + tag.name + ">" + tag.value + ""; } } inputTags = document.getElementById("HTMLcontent"). getElementsByTagName("textarea"); var name = inputTags.item(0).name; var value = inputTags.item(0).value; xmldata = xmldata + "<" + name + ">" + value + ""; xmldata = xmldata + ''; sendData(url, xmldata, reload2); } ...

Note that this function is very much like saveedit(), except here you send the RAW XML data to new.jsp instead of edit.jsp, and the XML data contains data for each of the six fields required to create a new film entry. When the call to sendData() comes back, a confirmation displays (Figure 25).

Figure 25. Adding a new film confirmation

Click OK to return the view to the index/list area where you can see the new film entry (Figure 26).

Figure 26. Listing the new film

Now you can redeploy the film JRuby on Rails application to include your newly created Ajax client. Type the commands in Listing 31 (again place each command on its own line).

Listing 31. Redeploying the film JRuby on Rails application to include the Ajax client

cd c:\\bin wsadmin.bat -f c:\apps\rubyapps\redeploy.py -user username -password password

You now have a fully functioning Ajax client to manage your online film database with the help of JRuby on Rails and JSP programming!

Section 7. Summary

Wrapup

You successfully mastered how to run and communicate XML between your Ajax client and Java and JRuby on Rails applications on a Java application server, deployed within the same Web application! You also created a slick fully functional Ajax client that can create new films, edit, delete, and display through XML communication using two different programming languages (Ruby and Java) without ever again having to load a new HTML page from the server.

Downloads

Description Name Size Download method Example source code x-jrorajax.zip 11KB HTTP

Information about download methods

Resources

Learn • Riding the Rails with WebSphere: Part 1: Combine Ruby on Rails with WebSphere Application Server and get rapid development with security, scalability, and reliability (Ryan Shillington, developerWorks, January 2008): Check out this useful article for more information on using Ruby on Rails with WebSphere and why you might want to join them together • Ruby on Rails screencasts: Discover a collection of screencasts covering Ruby on Rails. • Crossing borders: What's the secret sauce in Ruby on Rails? (Bruce Tate, developerWorks, May 2006): Read an article that explores the compromises and design decisions that went into making Rails so productive within its niche. • IBM WebSphere Application Server zone: Find the secure, scalable, resilient application infrastructure you need for SOA in the WebSphere Application Server, the foundation of the IBM WebSphere software platform • Overview on DB2's XML Capabilities (Cindy Wong, developerWorks, November 2003): Explore the SQL/XML functions available with DB2 UDB version 8 and the DB2 XML Extender. • XML programming with SQL/XML and XQuery: See this IBM research paper on an integrated database architecture that enables SQL applications with XML extensions as well as XQuery applications to operate on the same data. The architecture allows for a seamless flow from relational data to XML and back. • Introduction to XML tutorial (Doug Tidwell, developerWorks, August 2002): Need a more basic introduction to XML? Try the this tutorial and other educational offerings, which cover the most fundamental topics. • XML and Java technology: A return to basics (Brett McLaughlin, developerWorks, October 2007): Read this article that revisits some XML basics, from document structure to the age-old attributes versus elements issue. • Reading and writing the XML DOM in PHP (Jack Herrington, developerWorks, December 2005): Explore three methods for reading XML: the DOM library, SAX parser, and regular expressions. • IBM XML certification: Find out how you can become an IBM-Certified Developer in XML and related technologies. • XML technical library: See the developerWorks XML Zone for a wide range of technical articles and tips, tutorials, standards, and IBM Redbooks. • developerWorks technical events and webcasts: Stay current with technology in

these sessions. • The technology bookstore: Browse for books on these and other technical topics. • Podcasts: Tune in and catch up with interesting interviews that include IBM technical experts. Get products and technologies • JRuby: Get the Java powered Ruby implementation. • WebSphere Application Server Express: Get a trial version of WebSphere Application Server Express V6.1. • IBM trial software for product evaluation: Build your next project with trial software available for download directly from developerWorks, including application development tools and middleware products from DB2®, Lotus®, Rational®, Tivoli®, and WebSphere®. Discuss • Participate in the discussion forum for this content. • XML zone discussion forums: Participate in any of several XML-related discussions. • developerWorks XML zone: Share your thoughts: After you read this article, post your comments and thoughts in this forum. The XML zone editors moderate the forum and welcome your input. • developerWorks blogs: Check out these blogs and get involved in the developerWorks community.

About the author

Tyler Anderson Tyler Anderson has graduated with a degree in computer science in 2004 and a Master of Science degree in computer engineering in December, 2005, both from Brigham Young University. Tyler is currently a freelance writer and developer for Backstop Media.

Trademarks

Adobe, the Adobe logo, PostScript, and the PostScript logo are either registered

trademarks or trademarks of Adobe Systems Incorporated in the United States, and/or other countries. IBM, the IBM logo, ibm.com, DB2, developerWorks, Lotus, Rational, Tivoli, WebSphere, and pureXML are trademarks of IBM Corporation in the United States, other countries, or both. Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both. Other company, product, or service names may be trademarks or service marks of others.

Use Jruby on Rails and XML to Supercharge Ajax with a Java Application Server Learn How XML Can Improve the Efficiency of Your Jruby on Rails and Ajax Development

Welcome Film Lovers!!