XML.com: XML From the Inside Out
oreilly.comSafari Bookshelf.Conferences.

advertisement

XMLterm: A Mozilla-based Semantic User Interface

June 07, 2000



Introduction

Table of Contents

Introduction

XMLterm Overview

CLI vs. GUI: A Matter of Style?

Altering Styles Interactively

A Web Application: XML-RPC Help Client

Conclusion

World-wide dissemination of information on the Internet has evolved through three different stages. It began with the textual stage (involving protocols like gopher), was followed by explosive growth during the graphical stage (with HTML/HTTP), and is now entering the semantic stage (with XML). The evolution of the Web in some ways parallels the evolution of the user interface (UI) between humans and computers. The early UIs for mainframe computers were textual and command-line oriented. This was followed by the graphical UI (GUI), which helped promote rapid growth in the use of personal computers. If one were to stretch this Web and UI analogy further, the next stage in the evolution of the UI should be ... the semantic UI!

Like the semantic web, a semantic UI should clearly separate the functions of the UI from its visual appearance. Superficial forms of this separation already exist, in the form of themes and skins for GUIs, but we are talking about a more radical form of separation here, where the complete visual structure of the UI may be altered. The XML framework is a natural choice for achieving this separation. We can use XML to represent the semantics of the UI, and use styling mechanisms to control its visual appearance. For example, a semantic UI may have both a textual and a graphical representation, with style sheets allowing the user to switch between the two. Such an approach could help address accessibility issues, and also facilitate alternative UI technologies such as voice-control.

The open source browser platform, Mozilla, provides a nice test bed for experimenting with semantic UIs. The Mozilla browser itself clearly separates the browser functionality from the visual UI, allowing vendors other than Netscape to easily provide their own GUIs for the browser engine. Mozilla can display both HTML and XML documents, using Cascading Style Sheets (CSS). It also provides UI description languages like XUL (XML-based UI Language). In this article we describe a prototype semantic UI called XMLterm, implemented using the Mozilla platform.

XMLterm Description

XMLterm is a terminal emulator application providing a command line interface (CLI), like an Xterm or an MS-DOS window. It uses the Mozilla layout engine as its front end and a Unix shell program as its back end. An XMLterm window can display any marked-up content that can be rendered by the Mozilla layout engine, including HTML, XML, MathML, and, in the near future, even SVG. XMLterm is implemented as a component of Mozilla, and is currently at the alpha stage of development.

The basic design philosophy of XMLterm is that the user interface is a dynamic XML document. The user and the computer interact by taking turns appending this document. The plain text content of the XML document (i.e., excluding any mark-up) corresponds to the plain text that would be displayed by an Xterm. The design goal of XMLterm is to enable a CLI user to access many GUI capabilities in a seamless manner. To this end, XMLterm aims to be fully backwards compatible with the Xterm.

An XMLterm session corresponds to an XML document having the following structure:

<session>
     <entry>
            <input>
                   <prompt> ... </prompt>
                   <command> ... </command>
            </input>
            <output>
                   <stdout> ... </stdout>
                   <stderr> ... </stderr>
                   ...
            </output>
     </entry>
     ...
</session>

A new <entry> element is appended for each command input by the user. The computer generates the <prompt> content. The user may then use either the keyboard or the mouse to input a shell <command> that is executed. The shell command may write either plain text or text with mark-up to its standard output (<stdout>), using an "escape sequence" to distinguish between the two. This allows plain text to be freely interspersed with graphical images and clickable hypertext. HTML document fragments in the standard output are inserted directly as child nodes of the <stdout> element, whereas XML/HTML documents are rendered using a child <html:iframe> element. The command output is displayed below the command line, causing the display to scroll upward.

Since Mozilla's implementation of an XML-based application platform is not yet complete, XMLterm makes extensive use of the HTML namespace at the moment. The examples in this article also use the HTML namespace, although the concepts illustrated therein are not HTML-specific, and apply to any XML document displayed using CSS rules. (See the recent XML.com article on displaying XML in Mozilla, by Simon St. Laurent, for more information.)

CLI vs. GUI: A Matter of Style?

The appearance of an XMLterm window is controlled using CSS rules. The default CSS settings mimic a plain text terminal like an Xterm. Figure 1 shows an XMLterm screenshot with the default setting. Note the textual command prompt, followed by the command xls, which is an XML-aware version of the Unix ls command. (The ls command lists the contents of a directory, like the dir command in MS-DOS.)

Figure 1 - Directory listing, with Icons style off

Figure 1 - Directory listing, with Icons style off

The user can interactively change the XMLterm Icons style setting, using the select box shown at the top of Figure 1. When the user turns on the Icons style setting, the display changes to that shown in Figure 2.

Figure 2 - Directory listing, with Icons style on

Figure 2 - Directory listing, with Icons style on

The textual prompt has been replaced by an iconic prompt, and there is a file icon displayed above each filename in the directory listing. The file icon is clickable, as in a GUI. The user now has a choice of viewing/opening a file either by clicking on the file icon using the mouse, or by typing the appropriate shell command using the keyboard. Indeed, when the user clicks on the mozilla2.gif file icon, the GIF image is displayed using the xcat command, as shown in Figure 3. (The xcat command is an XML-aware version of the Unix cat command, which is used to view files.)


Figure 3 - Viewing an image in XMLterm

An XMLterm user can choose to activate or deactivate the GUI features by altering the style sheet interactively. A recurring discussion topic in various public forums is "CLI vs. GUI," i.e., arguments over whether the CLI or the GUI is inherently superior. In the context of XMLterm, these disagreements simply become matters of style rather than substance!

Altering Styles Interactively

In this section we describe how XMLterm alters styles globally, an important feature of any semantic UI. In Mozilla, the following JavaScript function is used to dynamically alter the style sheet:

function AlterStyle(ruleName, propertyName, propertyValue) {
  var sheet = document.styleSheets[0];
  var r;
  for (r = 0; r < sheet.cssrules.length; r++) {
    if (sheet.cssrules[r].selectortext == rulename) {
      var style = sheet.cssrules[r].style;
      style.setproperty(propertyname,propertyvalue,"");
    }
  }
}

The above function uses the document object model (DOM) API, Level 2, which is partially supported by Mozilla.

The xls command outputs an HTML table element, with a cell entry for each filename and icon. The HTML fragment used to display the filename mozilla2.gif in the directory listing shown in Figure 1 has the following form:

<TABLE frame="none" border="0">
   <TR class="icons">
     <TD>
       <IMG height="48" width="48" src="file:///home/user/mozilla2.gif"
               onclick="return HandleEvent(event,'click',
                        'xcat',-3,'mozilla2.gif','/home/user/')">
     </TD>
     ...
   </TR>
 
   <TR>
     <TD>
       <SPAN onclick="return HandleEvent(event,'click',
                         'xcat',-3,'mozilla2.gif','/home/user/')">
        mozilla2.gif</SPAN>
     </TD>
     ...
   </TR>
  ...
</TABLE>

Note the onClick event handlers associated with the icon and the filename. These event handlers execute a JavaScript function that generates a shell command to open/view the file when the user clicks on the file icon or the filename.

The default CSS rule for displaying the above HTML fragment is:

    TR.icons {display: none}

This hides the icon display, as seen in Figure 1.

When the user turns on the Icons style setting, the following JavaScript function call is executed:

    AlterStyle("TR.icons", "display", "table-row");

This interactively changes the CSS rule to expose the icons associated with the filenames, as seen in Figure 2:

    TR.icons {display: table-row}

Voila! The CLI has become a GUI!

In addition to the Icons style setting, XMLterm also has a User Level style setting. This allows additional help information to be displayed for novice users, while being hidden from advanced users.

A Web Application: XML-RPC Help Client

To get a better feel for the XMLterm interface, let us build a simple web-based application that runs under XMLterm: an XML-RPC client that lists the names of all the RPC methods available on a remote server. (XML-RPC is a protocol for remote procedure calling using HTTP as the transport and XML as the encoding.) We would also like the XML-RPC client to allow the user to click on a method among those listed, causing help information to be displayed for that method. To test this client, we shall use a public XML-RPC server located at <http://xmlrpc.usefulinc.com/demo/server.php>. This server happens to support a method named system.listMethods(), which returns a string array containing all the method names it knows about. It also supports another method, system.methodHelp(string), which returns a string containing help information associated with a particular method name.

A sample client that satisfies the above requirements may be easily written in Perl, using the CPAN XML-RPC module Frontier::RPC developed by Ken MacLeod. Here's the Perl script, called xrpchelp:

#!/usr/bin/perl
# Usage: xrpchelp <server-URL> [<method-name>]

use Frontier::Client;

die "Usage: xrpchelp <server-URL> [<method-name>]\n"
    unless (@ARGV == 1) or (@ARGV == 2);

my $url = shift @ARGV;                # XML-RPC server URL

$server = Frontier::Client->new( 'url' => $url, 'debug' => 0 );

my $cookie = $ENV{LTERM_COOKIE};      # Cookie for security
print "\e{S$cookie\007";              # Escape sequence for start of HTML

if (@ARGV) {                          # Print help string for method

    print $server->call("system.methodHelp", @ARGV), "\n"; # Print method help

} else {                              # List all method names

    my $list = $server->call("system.listMethods", @ARGV); # Get method names

    print "<OL>\n";                   # Ordered list start tag

    foreach $method (@$list) {        # For each method name, add list element
        print qq%<LI><SPAN CLASS='textlink' onClick="return HandleEvent(event,
              'click','sendln',-\#,'xrpchelp $url $method')">$method</SPAN>\n%;
    }

    print "</OL>\n";                  # Ordered list end tag
}

print "\000";                         # Escape sequence for end of HTML

After initialization, the script writes an XMLterm escape sequence to its standard output, signaling the beginning of an HTML fragment. If the script is invoked with two arguments, the URL for the XML-RPC server and the method name, it queries the server using system.methodHelp and prints out the help string for the method, which is assumed to be an HTML fragment.

If the script is invoked with just one argument, the server URL, it queries the server using system.listMethods and obtains a string array containing the method names. Following this, the ordered list start tag <OL> is written to the standard output. An <LI> tag is then output for each member of the method name array. The method name is embedded in a <SPAN> element that has an onClick JavaScript event handler associated with it. If the user clicks on the list element, the event handler causes XMLterm to execute the command xrpchelp <server-URL> <method-name>. Figure 4 shows a screenshot of the xrpchelp script in action.


Figure 4 - XML-RPC client in action

The first xrpchelp command line in Figure 4 was typed in by the user. The following two xrpchelp command lines were generated by XMLterm when the user clicked on the method names system.listMethods and examples.sortByAge using the mouse. Note that the name-age pairs in the output of the last xrpchelp command are displayed using a fixed-width font, unlike the remaining text. That's because they are contained within a <PRE> element in the help string returned by the server. XMLterm, of course, renders this mark-up.

Conclusion

Computer users have always been free to choose between the CLI and the GUI at the macro level, i.e., for a work session involving a whole sequence of commands. Many Unix users routinely run CLI work sessions using Xterms alongside GUI applications on the desktop. XMLterm allows users to switch between the CLI and GUI at the micro level, i.e., for each command within a work session. It also displays a textual history of the user's GUI actions, because each GUI action is translated into a command line. This allows the user to easily repeat a complex chain of commands, possibly with modifications.

When one thinks of a web application, what usually comes to mind is a program having its own GUI window. This is not true in the case of XMLterm, where many applications share the same window, reducing window clutter. The XML-RPC client example shows how a simple web application can seamlessly blend into the command line, while still retaining GUI-like features. The GUI implementation can be based solely upon web standards like HTML, CSS, ECMAscript (the standardized version of JavaScript), and DOM. This would allow the web application to run on any platform supported by Mozilla and XMLterm.

In our example, the XML-RPC client added some mark-up to the (mostly) plain text output received from the server. However, an XML-RPC server could very well return complex XML documents or fragments, instead of plain text. The semantic content received from the server could then be rendered in the XMLterm window, using a style sheet customized to the user's preferences. The semantic content could also be "piped" to another shell command, Unix-style, allowing post-processing of the output. This would allow the full power and speed of the CLI to be exercised even in a web-based graphical environment.

The screenshots shown in this article were produced using the Linux version of Mozilla, M15 milestone release, which includes XMLterm in the Tasks menu.

Resources
  • XMLterm Home Page: http://xmlterm.org
  • Mozilla Home Page: http://mozilla.org
  • XML.com: XML Web Pages with Mozilla
  • XML-RPC Public Server and Resources: http://xmlrpc.usefulinc.com
  • Frontier::RPC Perl Module: http://bitsko.slc.ut.us/~ken/xml-rpc/