6.893 User Interface Design & Implementation
Fall 2003
PS4: Toolkits
Due 12:30 pm, Wed October 29
In this individual assignment,
you will port a small user interface from Swing to another user
interface toolkit,
and use that experience to compare and
contrast the toolkit with Swing.
The user interface you will implement is an application for drawing
trees, like family trees or organization charts. Here are some
screenshots:
Here are the key features of the interface that you should implement:
- A scrollable, resizable window that displays the tree.
- A menu bar with File/Exit and Edit/Delete commands, with keyboard
shortcuts Ctrl-Q and Del, respectively.
- A tool bar with an image button and a font size combo box.
- Tree nodes are displayed as text.
- Tree links are displayed as
lines. Each tree node may be linked to any number of children,
but at most one parent.
- Clicking on a node selects it, making selection handles appear
around it. Clicking on the background clears the selection.
- Dragging a node moves it, along with its links.
- The selected node can be deleted by Edit/Delete, Del, or the
scissors button. If no node is selected, these commands appear
disabled.
- Double-clicking on a tree node starts editing it "in place" (as
shown in the second screenshot). Pressing Return, Escape, or
clicking away stops editing.
- A new node is created by clicking on the background (when nothing
is selected). The new node appears in editing mode.
- A node's parent can be changed by clicking on the
red circle and dragging out the link to a different
parent.
- The font size combo box shows the size of the selected node and
allows it to be changed.
A reference implementation of this interface has been written for you
using Java Swing. Its source code is available for you to
examine, compile, and run:
Choose a user interface
toolkit and reimplement this interface. Needless
to say, do not choose Swing or AWT,
since the reference implementation already shows how to do it that way.
Here are some possible toolkits you might use:
If you want to use a toolkit that isn't on this list, check with Rob
&
Jaime first.
Don't worry about graphic design or
usability. The reference implementation itself is aesthetically
unappealing and has
some serious usability bugs (e.g., you can drag a node outside the
window and lose it entirely). In this problem set, your goal is
not to get all the usability details right, but to implement the major
features of the user interface. You don't have to copy the look
and feel of the reference implementation precisely, either, but do
implement everything mentioned in the bulleted feature list above.
Think about your software architecture.
You may notice that the reference implementation represents tree nodes
as view objects (a subclass of JLabel), but tree links as
strokes.
You don't have to do it that way. Design your implementation in
the way that makes the most sense for the toolkit you chose. You
may also notice that the reference implementation doesn't have a
separate model, in the MVC sense. The tree consists entirely of
view objects. That decision limits its portability, since the model
can't be decoupled and reused in another interface. But it makes
the
program smaller and simpler, which is appropriate when our primary goal
is to compare toolkits. You can make a similar decision in
your implementation.
Implement a bit at a time.
Don't try to port everything at once. Gradually learn about the
toolkit by building up the user interface, starting with a hollow
shell. The reference implementation was constructed one feature
at a time, roughly in the order of the bulleted feature list above.
What to Think About
When you're comparing and contrasting the toolkit with Swing, think
about the following issues:
- event loop
- input event handling
- view hierarchy
- component model and stroke model
- stroke drawing
- configuration and use of widgets
- extension and reuse of widgets
- propagating values around the interface, e.g. disabling buttons
based on the selection, setting the combo box based on font size
- automatic layout
- form builder (if any)
- toolkit layering: is the toolkit layered on top of other
toolkits? Does it expose the underlying layer's view hierarchy or
widgets? What are the implications of that?
Also ask yourself:
- How broad is the toolkit? Does it support the widgets,
input features, and output features that you need?
- How extensible is it?
- How easy is it to learn?
- How easy is it to use?
- What are the pitfalls? What parts are smooth sailing?
- How much time did you spend learning and using different aspects
of
the toolkit?
- How much more work would it be to tweak your implementation into
an attractive, usable interface?
What to Hand In
By 12:30 pm on Wednesday,
October 29, you should hand in the following:
- a hardcopy report,
printed out and handed in at class, that describes your
implementation experience. In
this report, you should:
- Briefly describe the toolkit you chose (name, programming
language, maker, age, purpose, salient or unusual features).
- Include 2 screenshots of your implementation, like the Swing
screenshots above: one should show a selected node, and the other
should show a node being
edited.
- Compare and contrast the toolkit with
Swing. Your discussion should be based on the issues and
questions in the What to Think About section above, but you can also
think more widely. This part should be 2-3 pages long.
- a ZIP file, sent by
email to both Rob
Miller (rcm@mit.edu) and Jaime Teevan (teevan@ai.mit.edu), that
contains:
- The source code for your implementation
- The compiled binary form of your implementation
- A README file describing how to run the compiled binary
