XML and CDF: GCA's XML Conference Web Site		Table of contents		Indexes		Datasheets and Databooks at Fairchild Semiconductor

HyperWizard

Kipp, Neill A.
Phanouriou, Constantinos

XML

scripting

XML and Scripting: Using the "HyperWizard" to Drive CGI with XML

Blacksburg

KSS Technologies
Kipp, Neill A.

Virginia

Neill A. Kipp
Senior Consultant, KSS Technologies

319 New Kent Road
Blacksburg (Virginia) 24060
Email: nkipp@vt.edu

Biographical notice

This is Kipp's tenth year working with advanced structured document systems: XML, SGML, and HyTime. He is nearly finished with his dissertation work in Computer Science on User Interfaces for Digital Libraries and hopes to find the perfect job after his 1999 graduation. In the past ten years, he has developed software for the Networked Digital Library of Theses and Dissertations, was employed as Vice President of Software Development for TechnoTeacher, Inc., and contributed to the Standard Music Description Language (SMDL) on behalf of the Center for Music Research, Florida State University. Since March of this year, Kipp has become quite the expert in neonatal pediatrics.

Blacksburg

Digital Library Research Laboratory, Virginia Tech
Florida State University

HyTime

PhD

Phanouriou, Constantinos

SGML

SMDL

Standard Music Description Language (SMDL)

neonatal pediatrics
pediatrics, neonatal

Constantinos Phanouriou
Graduate Research Assistant, Digital Library Research Laboratory, Virginia Tech

P.O.Box 0825
Blacksburg (Virginia) 24063-0825
Email: phanouri@vt.edu

Biographical notice

Phanouriou is a PhD candidate in the Department of Computer Science at Virginia Tech, from which he also received his MS degree in 1997. His research focuses on Web applications, Digital Libraries, and automated user interface generation.

CGI, Common Gateway Interface

HTML, Hypertext Markup Language

Abstract

While HTML and CGI adequately handle bi-directional information exchange on Web, HTML has few semantics and CGI lacks robustness and scalability. The HyperWizard language solves these problems by providing a semantic XML layer over HTML/CGI; meanwhile the HyperWizard support software implements the CGI functionality. The resulting HyperWizard system allows development of interactive Web applications to be built faster and more easily than HTML/CGI directly. Furthermore, XML authors who are not programmers can also create HyperWizards. We show system diagrams, give excerpts from HyperWizard documents, and provide preliminary evaluation results of the HyperWizard system.

Introduction

Bush, Vannevar

GUI, Graphical User Interface

Graphical User Interface (GUI)

Licklider, J.C.R.

dialog box
digital library
modal application
next button

wizard

History, Definitions, Literature

The fathers of digital libraries, Vannevar Bush and J.C.R. Licklider, predicted that dialog-based interactive machines would help us manage and access a global library of online materials (Bush, 1945, Licklider, 1965). In the years since, while hypertexts have remained modal applications with graphical user interfaces (GUIs) strive to be modeless and therefore more usable (Hix and Hartson, 1993). Menu items and buttons in purely modeless applications are never turned gray: if an application function is available at any time, then it is available all the time.

When modes are required, one solution lets a "modal" dialog box guide a user through a modal interaction. Modal dialogs do not significantly affect the application's overall usability. The application enters "dialog mode" as follows. First, all application functions are turned off and the application's title bar becomes gray. Next, the attention of the user is focussed on a single dialog box layered over the regular application display. The user interacts with the dialog box before finally resuming the application. The dialog box offers a familiar, usable way to have modes in an otherwise modeless application.

Modal dialogs can layer on top of one another, separating users further and further from their applications. To solve this, designers invented dialogs that are chained with a "next" button rather than stacked. Using the next button, modal dialogs are chained along instead of stacked atop one another, making a cleaner display and a happier user, and therefore "wizards" came to be. The foremost wizard example is the application setup wizard, a miniature application designed to configure software installation. Other wizards guide users to configure their checkbooks, Internet connections, slide show formats, and manipulate spreadsheet data to form charts and graphs (see Figure). Through these ubiquitous examples, personal computer users have become familiar with wizards.

Chart wizard in Microsoft Excel.

CGI, Common Gateway Interface

Common Gateway Interface (CGI)

Extensible Markup Language

Interactive Electronic Technical Manual (IETM)

MID

Metafile for Interactive Documents (MID)

W3C

Web

Web delivery
Web server

XML

electronic documents
hypertext nodes

hypertext theory

In hypertext theory, wizard panes are analogous to hypertext nodes in a linked web of nodes, while pane data travels across the links between the nodes. On the World Wide Web without "Common Gateway Interface" (CGI), nodes are merely linked to one another as named HTML pages---no data travels across the links. "Wizard" interaction with a Web server is possible, however, using CGI. While Web servers without CGI deliver plain pages and images according to users' requests, servers with CGI can evaluate variables, perform logical operations, and consult databases before generating a personalized page for the remote user. Because the CGI paradigm is so simple, a wide variety of small application programs can be created quickly using it.

Modal interaction appears in large-scale systems as well, such as the Metafile for Interactive Documents (MID), part of the Interactive Electronic Technical Manual (IETM) project of the US Navy (http://navycals.dt.navy.mil/mid/). MID offers a robust, modal, standards-based interactive hypertext solution for IETM delivery. MID was designed to be a bridge between large databases of system information and user applications for training or repair sessions. MID, like HTML, is an application of SGML. Besides the MID, other popular architectures for modal interaction include customized client programs like Brown University's Hypertext System, INSO's DynaText, and Knowledge System's KMS.

Finally, the Extensible Markup Language (XML) is a subset of SGML designed for use with the Web (http://www.w3.org/XML/). XML structures the semantics of electronic documents. Using one or more applied styles XML documents can be translated into HTML (beforehand or as needed) for Web delivery.

ASP, Active Server Pages

Active Server Pages (ASP)
CGI programmer

CGI, Common Gateway Interface

ETD
Electronic Thesis and Dissertation (ETD)

Graduate School

HTML, Hypertext Markup Language

HyMid

Java

LaTeX
Lynx

MID

NDLTD

Networked Digital Library of Theses and Dissertations (NDLTD)

architecture-neutral
configurability

library

single-source/multiple-target
thesis
usability
utility
wizard paradigm

Motivation, Needs

Our project was created to fill a need of the Electronic Thesis and Dissertation initiative at Virginia Tech. Virginia Tech requires the electronic submission of its theses and dissertations. Students prepare their electronic theses and dissertations (ETDs) using a variety of desktop document development tools, including SGML, LaTeX, Word, and Word Perfect, and use common Web browsers with CGI to submit their ETDs to the Graduate School for review. The Graduate School reviews the ETDs online and notifies the library when each ETD is accepted. Unfortunately, the current system has utility and usability problems. Students who are asked to resubmit a single file to the Graduate School are required to resubmit all files of the thesis as well as rekey all metadata (title, author, creation date, ..., abstract).

Furthermore, Virginia Tech is the founding member of a growing international consortium of universities, the Networked Digital Library of Theses and Dissertations (http://www.ndltd.org/). Each member university plans to accept ETDs, and each will require similar ETD upload software, translated into the member university's native language or languages. NDLTD library sites might not have trained CGI programmers (being one of the many victims of the infamous technical support crunch) so simple, usable configurability is required.

HTML lacks rich semantics. Perl/CGI does not scale. Active Server Pages (ASP), although designed specifically to make CGI programming easier, are not relocatable to the client and are not standard. The MID application "HyMid" requires several megabytes of client software and only works on one client architecture. Indeed, some users may be behind firewalls or be using text-based browsers like Lynx. Other sites may encourage client-side processing as much as possible and will therefore need a solution built with Java applets. Clearly, we must provide an architecture-neutral implementation with good language support that is easy to use and easy to learn how to use.

We applied modal hypertext theory, the wizard paradigm, XML, and the MID to build a generic Web application we call the "HyperWizard." The HyperWizard is an XML application layered over CGI that enforces a consistent and usable style, and supports internationalization. The HyperWizard implements a single-source/multiple-target document-driven solution. It can run as easily on the server through CGI as it can on the client---running as a Java applet, and costs much less than developing a stand-alone client application. It uses the usable wizard metaphor to solve the ETD submission/review/acceptance problem for Virginia Tech, and furthermore is easily modifiable for other institutions in the NDLTD.

HyperWizard

HyperWizard Description

The HyperWizard system is composed of three parts: language definition, software, and a HyperWizard document instance.

DTD, Document Type Definition

Document Type Definition (DTD)

HyperWizard

grammar

syntax

widgets

HyperWizard Language (wizard.dtd)

The HyperWizard Language is defined as an XML Document Type Definition (DTD) by which the HyperWizard grammar and syntax are made explicit. The DTD is divided into these sections: major containers, block-level layout elements, text-level layout elements, widget elements, script elements, expression elements, and pool elements. Consult the table for a complete listing of elements and our Web site (http://etd.vt.edu/hyperwizard/wizard.htm) for full element descriptions.

  Elements in the HyperWizard DTD, grouped by type.
  Type
Element names

    MAJOR
  wizard pane title

    BLOCK
  p hr table row cell ol ul li

    TEXT
  a b br image i font

    WIDGET
  textfield password label message button fileupload textarea radiobuttons radio column checkbox popup popitem transclude

    SCRIPT
  script assign increment decrement if then else while foreach goto text

    EXPRESSION
  var func xeno eq ne lt le gt ge not and or

    POOL
button
checkbox
goto
macro
pool
reusable widgets
script
transclude
 wizard 
  pool target

Thewizard element contains pane elements. Eachpane corresponds to one screenful on the browser display. Each pane has a title and may contain one or more of the block-level elements, such as paragraph (p ) ortable . Paragraphs can contain any of the text-level elements, but also can contain any the widget-level elements, such astextfield ,checkbox , or button . With eachbutton is a corresponding script that runs when the button is pressed. The script may loop, branch, or usegoto to cause a new pane to be displayed.

Of particular note is the widget-level elementtransclude . The transclude element is a hyperlink whose function is to borrow an element subtree from somewhere else in the XML document. Authors can create apool of reusable widgets and transclude them as needed. Transclusion is also useful for text that appears more than once in the wizard and for implementing scripts as macros.

CGI POST

CGI, Common Gateway Interface

HyperWizard Software (wizard.pl)

The HyperWizard software reads a HyperWizard document instance, generates HTML forms, and acts on CGI POST responses (see Figure). The HyperWizard software package is less than 2500 lines of Perl code. HyperWizard grove initialization requires the canonical output of an XML parser.

The operation of the software is simple:

The software determines which wizard pane is to be displayed.

It formats the wizard pane data into an HTML FORM, which it sends to the requesting client, having carefully encoded the CGI ACTION and HIDDEN and visible INPUT names and values.

It awaits the CGI POST response from the user.

When the user clicks on one of the displayed buttons, the software receives the CGI POST data and performs the script associated with that button. Each button script must goto another pane.

HyperWizard System Architecture

formatting

personalized interfaces
var

The HyperWizard component for formatting makes formatting decisions based on the elements it finds in the XML document. For example, when var appears in a paragraph, the variable will be evaluated and the value will be sent to the client. This is useful for personalizing interfaces (see Figure).

The system asks for the user's name.


 <textfield width="30">
    <var>username</var>
    <label>Name</label>
    <message>Please enter your
      name in the space provided.
    </message>
  </textfield>

The system uses the user's name as a variable.


 <p>Welcome to the lecture,
  <var>username</var>.
  </p>

Raoul receives his personalized welcome message. Welcome to the lecture, Raoul.

database search
xeno

HyperWizard Example: Searching a Site

A simple but useful application of the HyperWizard is to guide the user through a database search. First the system must present the user with a search box, instructions, and a submit button (Figure 4a). When the user clicks on the submit button, the search is performed, and the results are returned. Thexeno element makes the external function call to the search routine.

HyperWizard pane that offers the user an opportunity to search a database.

database results


  <pane id=search help="search.help">
    <title>Search the Database</title>
    <textfield width="10" >
      <var>searchString</var>
      <label>Enter Search</label>
      <message>Enter your search 
      in the blank below, then click 
      the button labeled "Submit."</message>
    </textfield>
    <button>
      <label>Submit</label>
      <script>
        <if><not><var>searchString</var></not>
          <goto target="search"/>
        </if>
        <assign>
          <var>choiceList</var>
          <xeno name="search"><var>searchString</var></xeno>
        </assign>
        <goto target="results"/>
      </script>
    </button>
  </pane>

The results of the search appear in an unordered list (ul ) with each result appearing as an item (li ) of that list. The user has the opportunity to search again or to proceed to the next pane.

HyperWizard search results pane.


  <pane id="results">
    <title>Search Results</title>
    <p>Your search resulted in the following:
      <ul>
        <foreach>
          <var>whichChoice</var>
          <var>choiceList</var>
          <li><var>whichChoice</var></li>
        </foreach>
      </ul>
    </p>
    <button>
      <label>Search again</label>
      <script><goto target="search"/></script>
    </button>
    <button>
      <label>Next</label>
      <script><goto target="listOK"/></script>
    </button>
  </pane>

ETD submission

Graduate School

Kyra (ETD submission scenario)
online review

HyperWizard Scenario for ETD Submission (etd-upload.wiz)

The HyperWizard for ETD Submission has 28 panes that guide graduate students in the ETD submission process (http://etd.vt.edu/hyperwizard-cgi/wiz/upload.wiz). The following scenario will help illustrate its operation.

In the first pane, the system gives Kyra the option of submitting a new ETD or resubmitting an old one. Kyra is submitting for the first time. She enters her user name and the password she would like to use for her submission. The system prompts her for her full name, her ETD title, her defense date, her degree, her major, and other bibliographic data. She responds to each request, clicking the next button each time. She uses the browser's file dialog to select files for upload. Last she clicks on the radio buttons of the survey questions and then submits her ETD. The next day, the Graduate School says they are missing her fourth chapter. She accesses the ETD Submission Wizard again, gives her user name and password, then selects to edit the files she has uploaded. She uploads chapter four and resubmits. This time the Graduate School approves her ETD and Kyra graduates.

Web application development
XML compiled
application development, Web

evaluation

file size

grove database
usability review

validation

Evaluation Results

The HyperWizard software has not yet undergone a full validation and usability review. However, we have quantitative results based on the former methods of collecting ETDs and paper abstracts.

HyperWizard file sizes are smaller than the corresponding CGI scripts that perform the same tasks (see Figure 5).

Web application development is significantly faster.

Execution speed improves, but only when the following is true:

HyperWizard source file (XML) is compiled prior to running the software

Document tree data structure is built (and stored as a grove in a database) prior to running the software

Number of panes versus lines of new application code, CGI and HyperWizard.

authorability
consistent look and feel

maintainability

time-to-deployment

validation

The following are qualitative results from some early HyperWizard users:

Guarantees a consistent look and feel

Lacks the ability to make final formatting adjustments in the displayed page

Exposes deficiencies in application's help information

Improves authorability

Improves maintainability

Speeds validation and time-to-deployment

Myst

Riven
XML to HTML conversion

XSL

collaborative system
computer-supported collaborative work (CSCW)
courseware, online
dog-ear, electronic
library user, empowered
margin notes, electronic
online courseware
portability
standardized solution
tree transformation

Future

The next step of the HyperWizard is to complete the NDLTD application suite and perform usability testing on the result. Meanwhile, we can port the entire HyperWizard application to the Java applet client and determine if an overall savings of Internet bandwidth can be achieved. We would like to provide better styles support; particularly, if XSL tree transformation can be used to handle the XML to HTML conversion, then we would achieve a more standardized solution, better portability, and some savings in source code length.

In all, the HyperWizard has a bright future. The HyperWizard will be useful for courseware delivery---including online quizzes and intelligent remediation. It is powerful enough to handle some IETM applications, particularly those bent toward systems training. In the coming months, we plan to use the HyperWizard for digital library access and configuration, particularly for the empowered library user: one who can rearrange library materials, dog-ear pages, and make margin notes. Also, the HyperWizard may deliver online adventure games in the style of Myst or Riven. Indeed, the HyperWizard (or a similar, XML-based derivative) could allow multiple users access to an interactive collaborative system for education or collaborative work.

"As We May Think"
"Libraries of the Future"
Atlantic Monthly

Bush, Vannevar

Hartson, H. Rex
Hix, Deborah

Licklider, J.C.R.

user interface development

Bibliography

Bush, Vannevar, "As We May Think." Atlantic Monthly, July 1945.

Hix, Deborah, and H. Rex Hartson, User Interface Development: Ensuring Usability through Product and Process. John Wiley and Sons, New York, 1993.

Licklider, J.C.R.,Libraries of the Future , MIT Press, Cambridge, Mass., 1965.


XML and CDF: GCA's XML Conference Web Site		Table of contents		Indexes		Datasheets and Databooks at Fairchild Semiconductor