Prototyping with GUI Design

tools and Dialog Editors

Cristian Bogdan
cristi@kth.se

Overview
GUI Design Studio (Caretta Software)
a simple tool for rapid prototyping
does not generate code
Comparison with Director (open forum)
Achieving similar simple prototyping with
Dialog editors in Programming tools (IDEs)
Integrated Development Environment
Eclipse, Visual Designer
Comparison with prototype tools

1
 GUI Design Studio
http://www.carettasoftware.com/
http://www.carettasoftware.com/access/gdstrial.html
"Create User Interface Designs And Interactive
Prototypes the Easy Way Without Writing A
Single Line of Code"
Probably in response to many visual editors today
Small footprint (10 Mb) editor, plus a free, even
smaller interface viewer
But expensive otherwise (free for 30 days,
academic licenses available)

GUI Design Studio prototypes

High-fidelity
The "look"
Not so much the "feel"
Low tech
The prototypes do nothing but illustrate the
concept
To make up for the lack of any data, you can
use "scenarios" to exemplify what happens if
something goes wrong, or goes right but in
another way

2
 GUI Design Studio documentation
There is a nice Tutorial in Help
Also in PDF format here
http://www.carettasoftware.com/downloads/Tutorial_manual.pdf

The main concepts will follow

The Project tab

File/New will create a new project
Also allows you to open predefined
projects to copy (using clipboard or drag
and drop) goodies from
It is advised to make small projects, e.g.
one project per dialog that you design
And then copy the dialogs to "storyboard"
projects which connect a number of
dialogs

3
 The Elements & Icons tabs
Drag and drop various types of widgets and
icons
Maybe start with a window
Then add buttons, lists, icons, text, etc
You can align things, send them to front or back,
use grids for alignment
The menus that pop up from menu bars can be
just anywhere
You will typically use popup menus in storyboards
only since they are not visible in "static" dialogs

The Storyboard tab

Adds dynamic to the static boxes
Dynamic is expressed with the "Connection" tool
Works better if the Edge Snapping tool is on
Draws an arrow from one element to another
e.g. from one button, menu item, popup menu item, listbox,
combobox
to e.g. another window, a popup menu
or to a terminal state like
Close window (and accept/cancel)
Exit program
Scenario

4
 Storyboards
You can start a storyboard by pressing the
simulation button
Typically only one window should be
visible in the beginning. Select that with
Design/Set Representative Element (F10)
If a connection leads to a scenario, a
dialog will appear during simulation,
asking you to choose a scenario

Annotation Tab
You can annotate various parts of your
design so they are visible to others
Nice communication tool
E.g. the "template" designs come with
explanations as annotations

5
 Comparison to Director
Different storyboard paradigms
Caretta has no Lingo, no need for coding
No annotations in Director? (maybe off the scene)
None generates application-quality code (Caretta none
at all)
Director is multiplatform, multidevice
Maybe the user can be easier involved with GUI Design
Studio
Maybe designs/prototypes can be easier shared via e.g.
e-mail with GDS, to be viewed with the free viewer
Other issues?

GUI Design vs Dialog Editing

There seem to be few "GUI Design"-like tools on the
market
Many more Dialog Editors (or Form Editors, or RAD
tools)
Some tools do both (IBM Visual Age for Java, now dead)
The main differences
dialog editors only help you design individual windows/dialogs
you typically will need a bit of code to make a prototype with a
dialog editor, to link between windows
dialog editors generate code, GUI designers not always
(Carretta doesn't)
Some DEds can also read code and show you the dialog, and
manage changes in between (round-trip)
main advantage: programmers can continue directly from the
prototype

6
 Eclipse
An Integrated Development Environment
(IDE) from IBM, open-source
In fact, a platform where many other apps can
be built
Allows construction of plugins
The Visual Editor is an Eclipse plugin
made by the Eclipse project itself
http://www.eclipse.org/vep/WebContent/faq.html#install_howto

Using the Visual Editor

Can be used in any Java project
A new project: File/New/Project/Java
Within the Java project, start the editor
New/Other/Visual Class
AWT: old style graphics
SWT: Eclipse specific graphics
Swing: modern style graphics
RCP: Eclipse specific, powerful "Rich Client Platform"
Package: separates "folders" of Java classes
Name: the name of your dialog type
Type: you can create as many dialogs of that type as you want
When you make a new dialog, you have to chose the
window type

7
 Java dialog types (examples)
Frame: typically main application window
Window: Frame without title bar, etc.
Panel: typically included in another Window or Panel,
use this when you want to "repeat"
Dialog: typically windows that pop up during an
application execution
ScrollPane: a Panel with two scroll bars (horizontal,
vertical)
SplitPane: a Panel split in two sides of variable sizes
TabbedPane: a Panel including multiple panels,
identified by "tabs"
Applet: a Panel that shows up in a WWW browser

Making dialogs
Works almost as easily as the GUI Design studio
You select a type of component, then click on
the panel/frame/dialog where you want to insert
it
there are issues with Layout, you have to know
which layouts are available and how they work
A larger variety of components
A large variety of properties that can be set for
each type of component

8
 Storyboarding
Select an event on a component
Right-click on component and chose Events
E.g. actionPerformed on a button
or windowClosing on any window
You have to know which types of events you can work with
Then you need a bit of code, so show the code split
pane
The cursor will be positioned on the piece of code triggered by
the event.
E.g. to show a dialog box
new BDialog(AFrame.this).setVisible(true);
To close this window (e.g. in reply to windowClosing)
setVisible(false);

Visual Editor issues summary

You have to know
Types of windowing platforms available (not generally
an issue)
Types of windows/frames/panes
In GUI Design studio these are just exemplified
Types of components
In GUI Design studio these are just exemplified
Properties
Editing properties is a bit more cryptical comparing to GDS
Types of events
In GDS, mostly clicks are treated, Visual Editors let you treat
a much larger variety but at a price
In GDS, "connections" made from events are nicely visible.
Harder to see in Java code

9
 Lab
Take one of the themes you worked with
at the course
Prototype in either Caretta GUI Design
Studio or a visual editor (interface builder)
of your choice
If you need to write code, keep that to a
minimum and reflect on how feasible it is
to prototype in the tool that you chose

10