XMLterm: A Mozilla-based Semantic User Interface
June 7, 2000
Introduction
| Table of Contents |
|
•Introduction |
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
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
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.
|
|||
|
• 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/ | |||
|
|
|||