Every problem in software development can be approached in multiple ways. Graphical user interface (GUI) development is no exception to this rule. With increasing numbers of Web-based and e-commerce applications around the globe, the greatest demand so far - which is growing every day - has been for thin clients or Web clients. The question is whether XML can help in this area. The answer is yes, but only if it satisfies your solution requirements.

In this article we'll see how XML can be used to develop Web-based user interfaces. XML may present an elegant approach to Web UI development, but it has to overcome the challenge of being able to work in today's Web browsers and be cross-browser compatible. This is the article to read before you invest in XML for developing Web clients.

What Is a Web UI?
Generally speaking, a Web UI means a program that can be executed within any entity that acts as a gateway to the WWW or the Internet. The most common Internet gateways so far have been the Web browsers such as Internet Explorer (IE) or Netscape Communicator. Because of Internet bandwidth limitations and security constraints, most Web UIs consist mainly of HTML pages. Anyone who has written HTML code or scripts knows how difficult it can be to manage and maintain the code. Moreover, it's a real nightmare to support and maintain multiple versions of your HTML pages when customers ask for a different look and feel to your presentations. Thanks to the latest Web technologies, such as JavaServer Pages (JSP), Servlets and XML, you can provide a simple, robust, scalable, maintainable and reusable programming model to generate static and dynamic contents for Web browsers.

Figure 1 shows an example of a Web-based system that generates dynamic HTML.

JSPs are used to receive HTTP requests from Web clients. (The detailed architecture and functionality provided by JSPs is beyond the scope of this article.) In brief, JSP is an extension of Servlet technology that provides an easy way to build reusable, component-based Web pages with dynamically generated platform-independent content. JSP pages are dynamically compiled into Java Servlets that actually act as a Controller interacting with the business logic or data transformation layer. The business logic layer can be implemented using Enterprise JavaBeans (EJB). The data that is obtained from business logic in XML form can be converted to HTML form using XML transformation (XT) tools, as shown in Figure 2. The XT component applies XSL (Extensible Stylesheet Language) business data to generate the HTML. The following section describes XML, XSL and XT in more detail.

XML-Based UI?
How exactly does XML help in developing Web UIs? The answer to that question lies in how XSL and XT actually work. XSL is used to specify rules for transforming input XML files into HTML. Note that XSL can also be used instead of HTML to convert from one XML format to another. Before you begin defining rules, you must know the input XML and the output HTML. Based on the output requirements, you can start defining templates or rules using the XSL specification. These rules define how to process tags within XML documents. Once you've finished defining your XSL rules, you can apply those rules to the XML document using one of the XSL transformation (XT) tools. Several XT transformation tools or utilities are available in the market (see references at the end for hyperlinks).

Figure 2 shows how XT generates HTML from XML and XSL inputs.
Typically, you can apply XT on your XML/XSL documents from the command line or through JavaBeans or Java Applets. In the following section we'll see how to apply XT from the command line as well as in a program to generate an HTML page.

Why Use XML in UI?
There are a number of reasons for application developers to be motivated to use XML in their applications and for generating Web contents. Owing to its self-describing and semistructured nature, XML can be widely used to describe the metacontent of documents. It can be used for publishing and exchanging database contents, and as a messaging format for communication between application programs. XML and XSL together provide a clean separation between presentation and data. This means you can have various XSL for the same XML data to produce various HTML pages, each with a potentially different look and feel. This can be useful for personalization and customization of Web applications. You can also use XSL efficiently to set up different kinds of filters on XML data to display or process only a subset of the data. Use of XSL doesn't require any special graphic components such as applets or ActiveX controls. This helps to keep your Web UI lightweight and pure HTML.

In addition, XML documents can handle international character sets. The XML 1.0 Recommendation is defined based on the Unicode character set, which is crucial for developing global cross-enterprise applications in today's world. In the future, you may not even have to apply the XSLT transforms manually because the Web browser will render the XML documents appropriately based on the specified XSL. In fact, IE 5.0 already supports this capability and Netscape is expected to provide this ability in their next release. Following is an example that shows partial XML data for a real estate application and its corresponding XSL for processing the XML.

XML tags for realestate.xml

<HOUSE>
<PRICE>150000</PRICE>
<BEDROOMS>2</BEDROOMS>
</HOUSE>

XSL rules for processing the XML tags in realestate.xml

<!-- For each HOUSE element contained in the HOUSES
document element, process the content of the
xsl:for-each as a template. -->
<xsl:for-each select="HOUSE">
<!-- The '.' context is now the "HOUSE" element -->
<TR>
<TD class="cell">
<!-- gets the text from the "PRICE" element -->
<xsl:value-of select="PRICE"/>
</TD>
<TD class="cell">
<!-- gets the text from the "BEDROOMS" element -->
<xsl:value-of select="BEDROOMS"/>
</TD>
<TR>

Why Not HTML?
You may be wondering why, if XML can be used to generate HTML, you can't write the same HTML directly yourself. The answer is that XML is much more flexible and maintainable than simple HTML. HTML is a simple markup language, with a fixed set of tags that are used only for Web documents. Moreover, most of these tags pertain to the presentation of the document on the Web. There isn't much support for extracting data from within an HTML document in a flexible fashion independent of its presentation tags. Thus the problem of limited flexibility can be solved with XML.

With XML, you can define your own set of tags by means of a DTD (document type definition). XML separates presentation and data and allows dynamic data interchange. In addition, you can easily perform data validation and represent complex data structures with rich relationships using XML. XML can be used to create much richer documents than HTML.

Web browsers are lenient when they render HTML documents on the Web. This means that even if some of the tags are ignored or handled incorrectly, the browser doesn't really complain. The information will be displayed on the screen in a reasonable fashion. The human reader will have to read it and make sense out of it. This will cause problems if you're developing complex Web applications. With XML, validating parsers can be made responsible for generating well-formed and valid documents.

Another area in which XML can be more useful than HTML is for representing metacontent or metadata. HTML has limited tags (such as TITLE and META) for accommodating metacontent. In addition, these tags can be used only within the HTML document. That means that it's not possible to search through the metacontent without downloading the whole HTML document. XML's various metacontent formats such as RDF, CDF and OSD can be used to store the metacontent externally to an XML file. This provides flexibility, extensibility and performance benefits in e-commerce environments. Thus the benefits of XML far outweigh those of simple HTML. In the next section we'll work with a practical example to see how to generate HTML content by using XML and XSL.

XSL and XT
Before you begin, make sure you've downloaded the necessary classes and packages for parsing XML and XSL and applying XT. In the example James Clark's parsers and XT packages are used for transformation. Here, XML data is defined in a file called realestate.xml (see Listing 1) and XSL rules are defined in realestate.xsl (see Listing 2). Assuming you've installed the XT package in your C:\xt\ directory, one way to generate HTML would be from the command line using the following:

C:\xt> xt xml_file.xml xsl_file.xsl > html_file.html

In our example,

C:\xt> xt realestate.xml realestate.xsl > realestate.html

This would produce HTML code in realestate.html, which can be directly displayed in the browser.

Now let's see how you can achieve the same results programmatically by calling XT from within a Java Servlet to generate HTML and send the response back to the browser. In the code snippet in Listing 3 we create a new instance of an XML parser and XSL processor. Then we set the ServletOutputStream as the output stream for the XSL processor. Next we set the XSL as the stylesheet input. Finally, we feed the XML input to the parser and that's it! The result of XT, which is an HTML, is streamed as a ServletResponse back to the browser and the browser displays the same HTML as shown in Figure 3.

The code in Listing 3 is the function that transforms XML to HTML by applying XSL. This can be implemented as part of the servlet or as a bean that will be called from the servlet. To keep the demo code simple, error checking and exception-handling code is not shown in the listing.

So, What Is the Challenge?
So far we've seen how XML/XSL can provide an elegant approach to dynamically generating rich Web contents. XML adds more flexibility, reusability and maintainability to your presentation layer when compared to pure HTML. But, as with almost every solution, this solution has its own issues and challenges that can make it unsuitable for some applications. To start with, XML technology itself is immature. Standards and specifications for XML and XSL are still evolving, and change frequently. This means frequent updates to your XML document definitions, grammar and XSL templates. In addition, you may be required to keep up with the rapidly changing versions of XML tools (such as the XML parser and XT). Another issue with XSL is the learning curve for someone who hasn't worked with any type of markup language. Depending on the type of XML you want to process, the XSL stylesheet can be quite complicated. For example, if you have a highly nested and hierarchical data structure that you want to represent as a complex tree, or an HTML table as a Web page, XSL rules can be quite complex. Also, as the complexity and size of the data grows, it will have an effect on the overall performance of the transformation process using XSLT.

Browser and XSL Issues
In developing a browser-based application, the normal tendency is to assume that code that works in one browser will run under other browsers or different versions of the browser. If you don't want to be disappointed at the end, get rid of that assumption! Netscape and IE, for example, are different in the way they interpret some of the HTML and JavaScript code. The best practice would be to test your application (code) under both browsers with as many different browser versions as you need to support. If you have a wide customer base that you need to support, it would be a good idea to choose a browser type and version that you want to support based on the lowest common denominator. Different browsers have different ways of interpreting certain special characters. You may face this problem even with XSLT because certain versions of XT tools have special meaning for certain special characters such as "%." This means that if you have any of these characters in your XSL, XT may fail to generate the correct HTML code unless the characters are encoded in a special fashion.

There are some subtle issues you may have to tackle while writing XSL. For example, syntax that's acceptable as XML may not be valid as HTML. For example, if you have the following line in your XSL file:

<SCRIPT language="JavaScript" src="filename.js"></SCRIPT>

When compiled, using XT, the generated HTML would look like this:

<SCRIPT language="JavaScript" src="filename.js"/>

This is valid XML but not valid HTML and can cause severe problems (since the script tag isn't closed, your JavaScript functions will probably not be available). Here's one solution. By adding something between the tags, the result will be correct.

<SCRIPT language="JavaScript"
src="filename.js"><xsl:comment>some
text</xsl:comment></SCRIPT>

The foregoing line yields valid HTML as:

<SCRIPT language="JavaScript" src="filename.js"><!-- some text --></SCRIPT>

There will be more issues and inconsistencies that you'll encounter once you begin coding for cross-browser-, cross-version-compatible applications.

Conclusion
An XML-based approach is one of many approaches to developing Web-based applications. XML provides promising and flexible technology for developing Web applications that need to integrate seamlessly in a heterogeneous environment (a typical e-commerce environment). The XML/XSL model provides a useful way of representing or publishing your enterprise data on a Web page. But you need to evaluate your requirements carefully to avoid unexpected pitfalls. Various other technologies can be used along with XML/XSL to overcome some of the deficiencies while exploiting the benefits of XML. These include JSP, applets and ColdFusion.

One thing to keep in mind is that a technology that's relatively less efficient but open and easy to understand - and that provides more flexible solutions compared with its competitors - will have a better chance to win in the Internet world. Good luck!

XML References
XML Repository: www.xml.org
W3C consortium: www.w3c.org
Sun: http://java.sun.com/xml
IBM: www.alphaworks.com
OASIS: www.oasis-open.org
Webmethods: www.webmethods.com
Bluestone: www.bluestonecom
Sun's ProjectX: http://developer.java.sun.com/developer/products/xml/