Overview of JSite's User Interface

Before continuing the discussion of defining the website using EarthStones' .web files, it is useful to present an overview of the standard user-interface components included with JSite. These standard components are customized in the .web files and by extending EarthStones' class library.

The user interface is designed to present the viewer with a consistent, visually-appealing experience that focuses attention on crucial information and allows intuitive navigation throughout the web site. The website's underlying site/section/chapter/page organization is reflected in both its visual presentation and the opportunities presented for user response.

Visual Elements

The general layout of the user interface is depicted in the diagram above. The banner and footer panels frame the page at top and bottom and both unify the site by maintaining consistency throughout its sections while at the same time permitting sufficient variation to meet their differing functional needs. The graphic and document panels are designed to integrate the presentation of a graphic image with its accompanying text without forcing each page into this two-panel format.

The role of each user-interface component in implementing these design goals is described below:

Behind the Scenes

Before moving on to a discussion the details of customizing and extending the user-interface, its behind-the-scenes operation will be briefly described.

Although some events (e.g., filling out information in a form) do not fall into this category, the prototypic user action on the web is a mouse-click which requests a new web page. In JSite, this can occur either through a footer panel event or a hyperlink event in a document (or graphic) panel. JSite handles these two classes of events slightly differently:

Footer events. These events use the methods of Web subclasses (e.g., JavaWeb and HtmlWeb) to handle user actions. Schematically, a footer event generates a method call of the form:

WebSite.thisSite.section(sectionId).[cont]
chapter(chapterId).page(pageId).show()

Although this is not quite the exact syntax, it expresses the essential notion that a show() message is being sent to a particular page of a particular chapter of a particular section of the current website thisSite. The show() message, in turn, does two things. First, it resets the variable WebSite.thisWeb.thePage to the page referenced by the show() command. And second, it sends a

WebSite.thisWeb.update()

message. Web subclasses respond to this message by sending a cascade of update() messages down through the hierarchy of components registered in their charge. For example, JSite's JavaWeb subclass of Web sends update() messages to its banner, footer, graphic, document, and altDoc panels. Each of these components compares its current state to that implied by the new value of WebSite.thisWeb.thePage and, if they are different, 1) loads the data consistent with the new page, and 2) sends an update() message on to each of its own subcomponents. As a result, every element of the user interface now displays the appropriate information, from the text in the document panel to the appropriate footer icons waiting for the next user event.

The functionality built into JavaWeb allows much to be accomplished by a single mouse click without additonal programming by the web developer. For example, moving between and within most of the sections of EarthStones' website not only loads the requested HTML document into the document panel but at the same time displays a new, randomly-selected image in the graphic panel.

This is where the Java programmer comes into the picture. Although a web developer can use the .web files to customize JSite's standard components within certain limits, EarthStones' class library provides limitless opportunities to extend JSite's look and behavior. Its high-level classes (documented in the supplied source code examples in your EarthStones/source directory) allow the Java programmer to concentrate on developing new user-interface panels. Then, by creating a custom extension of the Web class and supplying these new panels and their subcomponents with the appropriate update() methods, the desired functionality can be accomplished without getting mired in the details of how this is accomplished.

Hyperlink events. The action of a hyperlink event, on the other hand, is much simpler and parallels HTML in this regard: a specific document (referenced by the <a> tag's href attribute) is loaded into a particular frame or panel (designated by its target attribute). Such events both provide a way to mimic the behavior of HTML and also allow virtually unlimited flexibility (e.g., in moving to pages entirely outside the website) that is not possible within the website's own structure and predefined behavior.

Finally, hyperlink events even permit a hybrid approach. Using a syntax borrowed from javascript, EarthStones allows a hyperlink of the form

<a href="javascript: WebSite.thisSite.section(sectionId).[cont]
chapter(chapterId).page(pageId).show()">

where the phrase javascript: (itself interpretable in HTML as a reference to a javascript method) is used instead to indicate that what follow should be seen as a Java method call.