Java Data & Java User Code: JSP-XML Data Duality

User Code: JSP-XML Data Duality

Java Server Pages technology functions best in the Transformation and Presentation layer, and with these pages dynamic material can be easily incorporated. JSP can also function as the main entry point and controller of the application, the role frequently played by servlets.

On the other hand, XML is best known as a standard for defining both presentation formats, as well as formats for data representation and interchange.

Now, both these technologies are used here, one to fetch the data and the other to represent the underlying data to the browser in a dual form without an another trip to the server. As you know, a JSP should look like a readable HTML page with a little dynamic content, rather than a Java program with embedded markup, or even a balance of scriptlets and markup. But there is one change that may be done: just replace HTML with XML.

Here, I’m going to show you a user interface that allows users to view the same section of data in a dual form. Let’s use as our example a production company that wants to display its stocks and its specifications to customers. This can be achieved by providing a separate Web page for each item (i.e., production and specification). This usually requires a round trip to the server whenever a client switches between the production and specification Web page. But what if we provide a total data set at one go and then let the client do the viewing. This can be achieved by sending a single page to generate two views and hide one of the views with DHTML. This solution would duplicate the data being sent across the Internet.

The only better solution is to use XML and XSL. Data would be sent only once and
the rendering choice handled on the client. XML is ideal for this scenario.

Functionally, the following steps would occur:

  1. Read the database with JSP and generate XML out put.
  2. Send XML and two XSL style sheets to the client in a JSP.
  3. Client-side script loads XML and applies appropriate XSL document.

The views developed are shown below:

For those of you who want to see the functional representation, here it is:

To build the block, our first step is to set up the database and the
tables they’re in. I used the WebLogic 6.1 server and Cloudscape database server for this project. The two Java files (simplesql_dd and simple_sqldd1) are provided with their class files in the source bundle to develop the tables accordingly. To retrieve the data, JSP is used and then directly output to XML. In order to accomplish this XML response, one line of code has to be placed first:


The main page, jspxmldd.jsp, is provided to the client, which loads the XML and XSL using MSXML. In order to allow the user to switch between two views of the XML, a transformation is done using one of the two XSL style sheets.

1. ProductA.xsl (For
production View) 

2. Prodspec.xsl ( For Specification View)

In order for this transformation to take place, we need to create two instances of the DOM using MSXML as follows:

source = new

style = new ActiveXObject(‘Microsoft.XMLDOM’);

One is used to store the XML and the other to hold the transformed content . On firing of Onload() event function called init() in jspxmldd.jsp
loads XML  and held in XML DOM called source. This then calls the toggleXSL() function, which chooses the appropriate structure for the view as per  user requirements.

function toggleXSL(xsldoc)
// load a new XSL
styleURL = xsldoc;

The other DOM object style holds the
transformed content. The transformed XML is then placed in between <DIV>
placeholders as follow:

document.all.item(‘xsltresult’).innerHTML =

There are several situations where this sort of application may be very useful. Here, I have not inherently referred the same physical data but offer the user different views of the data. Using the same technique, the client may be allowed to alter the XML and upload the same back to the server too.


Download demo project =11 Kb

Download source = 10 Kb

This article was contributed by
Yashodhar Desai.

Latest Posts

Related Stories