 |
 |
|
 |
 |
 |
Zulu: UI Design
Authors: Steve Mansour, Eric
York, Greg
Scallan
Updated: 16 October 1998
The way time-based information is graphically displayed centers around
these fundamental classes:
-
TimebarCanvas - a canvas with time significance
-
TimebarContext - definition of the timespan applied to a TimebarCanvas
-
TimebarContextController - something which makes changes to a TimebarContext
-
CalendarCanvas - a container for TimebarContexts, TimebarContextControllers.
A Calendar View is made up of a collection of these fundamental classes.
Calendar Views will be defined in an XML definition. The definition
may define a static layout, or it may define one or more rules describing
how the view can append new parts to itself. For example, a user
may sweep out three days on a small month calendar control, intending for
the view to display three days side by side.
A Calendar View is not limited to traditional calendar elements such
as events, to-dos, or journal entries. Anything having a time significance
can be displayed. For example, a URL history list could be graphically
displayed based on the time the URL was visited. Another example
could be an e-mail inbox displaying links to messages based on the time
the message was sent.

<tbd>
A Timebar View
The example below shows a very simple Timebar interface for showing a day's
appointments in a horizontal view. The image is not meant to show what
the user would see. The specific look and feel of the rendering will described
by the UE folks. Instead this diagram shows the outline of each timebar-related
component and its function. The text and rendering within each box suggest
what might appear in the real implementation.
The interface consists of:
-
a header to display the date
-
a scale showing the time of day
-
a canvas area in which the events are displayed.
-
various context controllers
All these components reference a single TimebarContext object (shown in
green). They all keep in sync with it as well. When it changes, the components
are updated to reflect the change. For example, the figure below shows
the visible time range from about 7:30am to 12:30 pm on October 13, 1997,
Changing the DTTop and DTBottom values to 8:00am and 6:00pm on October
13, 1997 would cause the header, the scale, and the canvas area to redisplay
and reflect the changes.
Changes to the TimebarContext values are done with TimebarContextControllers.
For example, the arrow button on the right side of the page might be given
the function of adding an hour to the DTTop and DTBottom values. This would
have the effect of shifting what the user sees by an hour. Similarly, other
decorators could be used to change dates, the duration of time shown in
the canvas area, etc.

A Multi-Day View
This view can display any arbitrary collection of days. The image below
was rendered by the implementation of the Multi-Day View in Zulu. The interesting
thing about this view is the small miniature calendar (the minical) in
the upper right corner. It is a Timebar Context Controller that is capable
of selecting multiple days (by using the mouse to sweep rows or columns
of data). The canvas containing the two days worth of events is capable
of receiving a vector of days from the minical and replicating event canvases
for each date. This provides a powerful view capable of showing any collection
of dates that can be indicated on the minical.

The XML listed below builds this view: week.cal
A Group Week View
This example shows how the components can be arranged to produce a weekly
view for a group of schedules. The image is not meant to show what the
user would see. The specific look and feel of the rendering is described
in the Zulu UE Specification. Instead this diagram shows the outline of
each Timebar-related component and its function. The text and rendering
within each box suggests what might appear in the real implementation.
All TimebarCanvas elements in a particular column refer to a single
TimbarContext that specifies the date and time displayed in that column.
Each column uses a different scale, in the second row, to identify the
section of the day being shown. The rows of this table, beginning at the
3rd row, represent different peoples' calendars. The calendar is constant
along the rows. The first column contains a NameHeading and is linked to
the calendar of the TimebarComponentCanvas in the second column.

The XML listed below builds this view:
Muilt Week View XML
|
 |
 |