GUI Design Studio

User Manual



Version 2.4
October 2007




















Copyright 2007 Caretta Software Ltd
All rights reserved



2


3
Contents

Welcome to GUI Design Studio ................................................................................................ 7
Getting Help............................................................................................................................... 8
Getting Started ......................................................................................................................... 10
The User Interface.................................................................................................................... 12
The Project Panel ................................................................................................................. 13
The Elements Panel.............................................................................................................. 14
The Icons Panel .................................................................................................................... 15
The Annotations Panel ......................................................................................................... 16
The Storyboard Panel........................................................................................................... 17
The Notes Panel ................................................................................................................... 18
Keyboard shortcuts .............................................................................................................. 19
Mouse controls..................................................................................................................... 20
How to Work with Projects...................................................................................................... 21
Projects overview................................................................................................................. 21
Creating a new project ......................................................................................................... 21
Opening an existing project ................................................................................................. 21
Structuring projects .............................................................................................................. 22
Adding links to other projects.............................................................................................. 23
Adding links to folders......................................................................................................... 24
Refreshing the file tree......................................................................................................... 25
How to Work with Design Documents .................................................................................... 26
Creating a new design.......................................................................................................... 26
Opening an existing design.................................................................................................. 26
Look and feel ....................................................................................................................... 27
Adding elements .................................................................................................................. 28
Selecting elements................................................................................................................ 28
Changing element properties ............................................................................................... 29
Deleting elements................................................................................................................. 29
Printing designs.................................................................................................................... 30
Exporting designs................................................................................................................. 30
Duplicating designs.............................................................................................................. 31
Deleting designs................................................................................................................... 32
How to Arrange Elements........................................................................................................ 33
Moving and resizing elements ............................................................................................. 33
Edge snapping...................................................................................................................... 34
Aligning elements ................................................................................................................ 35
Making elements the same size............................................................................................ 36
Spacing elements evenly...................................................................................................... 37
Changing the front-to-back order......................................................................................... 38
Using Design Grids.............................................................................................................. 39
How to Work with Fonts.......................................................................................................... 42
Changing element fonts ....................................................................................................... 42
International language support............................................................................................. 42
Font preferences................................................................................................................... 44
How to Use Bitmap Images ..................................................................................................... 45
Adding images to a design................................................................................................... 45
Resizing an image ................................................................................................................ 45
Cropping an image............................................................................................................... 45


4
Restoring image dimensions ................................................................................................ 46
Grabbing and using screenshots........................................................................................... 46
How to Use Icons..................................................................................................................... 48
Adding icons to a design...................................................................................................... 48
Resizing an icon................................................................................................................... 48
Choosing your icon editor.................................................................................................... 49
Creating a new icon.............................................................................................................. 50
Editing an existing icon........................................................................................................ 51
Deleting an icon ................................................................................................................... 52
How to Annotate a Design....................................................................................................... 54
Annotations overview.......................................................................................................... 54
Adding annotation elements................................................................................................. 54
Connecting your annotations with lines............................................................................... 55
Deleting annotations ............................................................................................................ 55
Hiding or displaying your annotations................................................................................. 56
How to Create an Interactive Design ....................................................................................... 57
Interactive capabilities ......................................................................................................... 57
Running the simulator.......................................................................................................... 57
Stopping the simulator ......................................................................................................... 58
Creating a storyboard document .......................................................................................... 58
Selecting a representative element ....................................................................................... 58
Selecting a main design........................................................................................................ 60
Adding navigation links....................................................................................................... 60
Deleting navigation links ..................................................................................................... 61
Changing navigation link properties .................................................................................... 62
Positioning windows and elements ...................................................................................... 64
Closing windows.................................................................................................................. 65
Using navigation overlays.................................................................................................... 65
Adding message boxes......................................................................................................... 66
Adding scenario options....................................................................................................... 67
Working with combo boxes ................................................................................................. 69
Working with structured menus........................................................................................... 70
Working with tabbed windows ............................................................................................ 72
How to Use Component Designs ............................................................................................. 75
Adding component designs.................................................................................................. 75
Thumbnail components........................................................................................................ 76
Opening component designs ................................................................................................ 76
Overriding component element properties........................................................................... 76
Restoring component overrides ........................................................................................... 77
How to Create Wireframe Mockups ........................................................................................ 78
Wireframe Mockups ............................................................................................................ 78
Wireframe Preference Settings ............................................................................................ 80
How to Create Web Application Designs ................................................................................ 82
Web applications overview.................................................................................................. 82
Using image and text placeholders ...................................................................................... 82
Creating Web headers and footers ....................................................................................... 84
Creating dynamic content .................................................................................................... 85
Rollover Effects ................................................................................................................... 85
Back and Forward navigation support ................................................................................. 87
How to Share Designs.............................................................................................................. 88


5
Distributing design files ....................................................................................................... 88
Creating a distribution file ................................................................................................... 89
Designing within a team...................................................................................................... 89
How to Create Specification Documentation........................................................................... 91
Describing your design ........................................................................................................ 91
Generating the documentation ............................................................................................. 93
Customising RTF and PDF documentation ......................................................................... 95
Customising HTML documentation .................................................................................... 97
Index....................................................................................................................................... 101





6


7
Welcome to GUI Design Studio






Design

Specify

Prototype

Demonstrate

Document


GUI Design Studio is a professional tool created specifically for designing graphical user interfaces
(GUIs) for application software.

It is purely a design tool and requires no software development or coding. Everything is created
graphically on screen. You can design entire applications or individual windows, dialogs and component
parts. Combine them to create further designs, representative screenshots or link them together as a
storyboard and run the Simulator to create interactive prototypes.

GUI Design Studio will compliment any software development environment that targets the Microsoft
Windows platform. This means that you are free to design first and then choose your implementation
tool later. By separating the two you can quickly focus on application design without getting distracted by
implementation detail.

GUI Design Studio can be used whenever you need to draw what an application should look like or show
how its parts connect and flow together such as:

! designing entire applications
! documenting product ideas
! creating project proposals
! requirements capture
! creating screen mock-ups
! producing detailed specifications for developers
! annotating usability issues with existing products
! suggesting enhancements to existing products
! temporary screenshots for user manual creation
! + many more uses

Create presentations to users and stakeholders or even just to yourself to:

! verify designs
! explore alternatives
! evaluate different usage scenarios


8
Getting Help

If you have any difficulty using GUI Design Studio or just need further information, there are a number of
ways to get help:
! Context Help
! Online Reference
! Online Tutorials
! Web Site
! Customer Support


Context Help

Also known as "What's This?" help. Practically everything in the user interface has associated help
information that describes what it is or what it does. These appear in popup windows such as the one
below. Some topics have links to other related popup topics or pages in the online reference.




Context help can be accessed in a number of ways depending on what part of the application you need
help on:

1. For dialog boxes, this can be accessed by:
! right-clicking the control you want help on (this does not work for edit boxes that have a right-click
context menu)
! hitting F1 with the keyboard focus on the control
! clicking on the help button on the title bar to enter "What's This?" mode then clicking on the
control


2. For tabbed Property editor dialogs that don't have a "What's This?" help button on the title bar:
! right-click the control you want help on (again, this does not work for edit boxes that have a
right-click context menu)
! hit F1 with the keyboard focus on the control
! click on the Help button on the title bar to get general property editor help


3. For everything else in the user interface:
! hit F1 with the keyboard focus on the control, window or menu item
! hit Shift+F1 to enter "What's This?" mode then click on the item


9
! use the "What's This?" command in the Help menu to enter "What's This?" mode then click on the
item
! click on the "What's This?" toolbar button to enter "What's This?" mode then click on the item



Online Reference

This is the help file you are reading right now. It is a good source of general information with detailed
how-to instructions for performing the tasks required to use the software.

The Help menu contains direct links to the Contents and Index sections of the file. If you can't find what
you are looking for in the Contents then try the comprehensive Index. If you still can't find what you are
after, try a keyword Search.


Online Tutorials

If you are new to GUI Design Studio then it is strongly recommended that you follow the "Quick Start
Tutorial" from the Help menu. This covers the basics and will get you familiar with most aspects of the
software in the shortest possible time.

Further tutorials will be made available for download from the Caretta Software web site. These will
cover specific aspects of using the software for particular GUI design tasks.


Web Site

If you have tried Context Help, looked through the Online Reference, worked through the Online
Tutorials and still can't find the information you are looking for then you may find it on the Caretta
Software web site.


Customer Support

Having exhausted all other options, please use email to contact our Customer Support department
(support@carettasoftware.com) for further assistance.






10
Getting Started

While every attempt has been made to create a fairly intuitive tool for the design of Graphical User
Interfaces, there are a few very important concepts and techniques that need to be learned in order to
get the best out of it. Here are some suggestions for getting started with GUI Design Studio:


The User Interface

By now you have probably explored the user interface in the application itself already but some of the
features may not be entirely clear to you. Take a look at the User Interface topics for a brief overview
and to familiarise yourself with the purpose of each panel, the mouse controls and the keyboard
shortcuts.


Important Concepts

Scan the Contents of this help file to see if there are any particular topics you think you should know
about. In particular, you should take a look at the Projects Overview and related topics because projects
play an important role in GUI Design Studio.

The Design Documents topics may not hold many surprises but the topic on Creating a New Design is
vitally important because you will be doing a lot of that and the most obvious method is not necessarily
the one you will want to use (there is a better way!).

Unlike most applications that involve drawing and arranging graphical objects, GUI Design Studio does
not use a regular snapping grid. Instead, it uses a Magnetic Edge technology to align elements. Take
a look at the Edge Snapping topic to see how this works.


Interactive Demonstration Prototypes

A great strength of GUI Design Studio is its ability to bring designs to life in the form of demonstration
prototypes without writing any code or scripts. You can create application storyboards and workflows
then run them in the Simulator. Start with the Interactive Capabilities topic in the Interactive Design
section and read through the related topics. It is also a good idea to familiarise yourself with the different
types of Navigation Links.


Specific Design Techniques

In general, creating GUI designs is very straight-forward. You simply choose the elements you want and
arrange them on a design document. However, there are a few design challenges requiring techniques
that you are unlikely to discover by trial and error. These are described in the following topics:

! Working with combo boxes
! Working with structured menus
! Working with tabbed windows


Quick Start Tutorial

The "Quick Start Tutorial" is available from the Help menu and uses a hypothetical application to take
you step by step through the process of creating a project, creating screen designs, laying out
screenshots, creating storyboards and running the prototype in the Simulator.

The best way to learn is to carry out each step in the tutorial but if you don't want to do that, we
recommend that you at least read it through to get a better understanding of how GUI Design Studio
works. All of the associated tutorial files are provided in the associated sample project.


11


Just Try Things Out

With an almost limitless level of undo available, the best thing is to just try things out and see what you
can achieve. We hope you have fun using the tool and agree that GUI Design Studio is the fastest and
easiest way to create user interface designs and prototypes.


Enjoy!





12
The User Interface

The GUI Design Studio workspace is shown below. Scroll down for a more detailed description.



Multiple Documents
You can open and edit multiple design documents at the same time and easily switch between them
using the document tabs under the toolbar or by using Ctrl+Tab to activate the next document in the
sequence (Shift+Ctrl+Tab activates the previous document). All open documents may also be selected
for activation from the Window menu.

Design Bar
The Design Bar may be docked to the left or right of the main application window or it can be floated
according to your preference as set in the View menu. Each tab provides access to different elements
for creating your designs as follows:

Project For access to all of your project design documents and image files.

Elements For categories of the elemental building blocks of a GUI design including windows
and controls.

Icons For project icons and categories of common icons that may be used in your
designs.

Annotations Annotate your designs with overlay text boxes, highlight rings and other markers.

Storyboard For building flow control in a design to create a simulated prototype.

Notes For recording notes associated with a design document.


Working Area
The working area displays your open design documents for editing. You have full, interactive control
over the zoom level of each design view to quickly inspect the smallest detail or gain an overview of a
large design.


13
The Project Panel



The Project panel on the Design Bar provides access to all
of your project design documents and image files.

From here you can quickly create new project folders to
organise your files, create new design documents,
duplicate existing designs and import images from the
clipboard.

You can also add links to other projects or folders to gain
access to all of their design documents and image files.
This is particularly useful for accessing common
components in library projects or images stored elsewhere
on your computer.

When you select a project or folder from the list, its file tree
appears below.

Double-click a design file to open it or drag & drop it as
a component onto another open design. Use the right
mouse button for drag & drop to create a thumbnail of
the component.

Use the right mouse button for drag & drop to add a
thumbnail version of the component.

Double-click or drag & drop image files to add them to
an open design.







14
The Elements Panel



The Elements panel on the Design Bar provides access to
all of the windows and controls that can be used to create
an application GUI.

Elements are organised into categories. When you select
a category from the list, its elements appear in the palette
window below.

Each element is a representative example and some
categories contain multiple variations of the same element
for convenience.

Once you have placed an element on a design you can
change its properties such as text and style as appropriate
for the particular element.

Double-click or drag & drop elements to add them to an
open design.

Double-click an element on a design to edit its
properties.








15
The Icons Panel



The Icons panel on the Design Bar provides access to
common icon images and those within the main project
and any others that have been linked in from the Project
panel.

The common icons are organised into categories. You can
create additional category folders for new icons.

When you select a category from the list, its icons appear
in the window below. You can filter which icons to show by
size and/or by colour depth.

From this panel you can also create new icons and edit
existing icons via an external editor.

Double-click or drag & drop icons to add them to an
open design.

Use the command buttons to create new icons and edit
existing icons using an external editor.








16
The Annotations Panel



The Annotations panel on the Design Bar provides access
to special elements such as overlay text boxes, highlight
rings and markers.

The annotation elements always appear on top of other
design elements.

Double-click or drag & drop annotation elements to add
them to an open design.

Double-click an annotation element on a design to edit
its properties.

Use the Make Connection toolbar command to
draw a line between annotation elements.

Use the View | Annotations menu command to hide or
show annotations while working on a design.








17
The Storyboard Panel



The Storyboard panel on the Design Bar provides access
to special elements for building flow control in a design to
create a simulated prototype.

The storyboard elements always appear on top of other
design elements.

Double-click or drag & drop storyboard elements to add
them to an open design.

Double-click a storyboard element on a design to edit
its properties (if it has any).

Use the Make Connection toolbar command to link
elements together and build the flow of control of the
application being designed.









18
The Notes Panel



The Notes panel on the Design Bar provides editors for
recording notes associated with a design document and its
elements.

These can be used to provide popup descriptions and to
generate specification documents.

Unlike all of the other panels, the content of the Notes
panel changes to reflect the active design document.

Enter formatted notes for the active design document in
the top editor and provide an ID for the design if you
want.

Select an element and enter formatted notes for it in the
bottom editor along with an ID and Label if desired.

Right-click words underlined in red to correct spelling
mistakes if necessary.

Use the Spell Check buttons to correct spelling for the
whole entry at once.









19
Keyboard shortcuts

F1 Display Help.
Shift+F1 Enter context sensitive help mode.

F4 Toggles Make Connection mode.
Shift+F4 Toggles sticky Make Connection mode for multiple connections.

F5 Refresh the current design document or project file tree depending on what has the keyboard focus.
Ctrl+F5 Refreshes all open design documents.

F8 Toggles the display of annotations on the active design document.
F9 Runs the simulator on the active design document.
Ctrl+F9 Runs the simulator on the designated Main design document (if any).

F10 Makes the selected element the representative element of the design document.

Ctrl+N Creates a new, untitled design document
Ctrl+O Opens an existing document
Ctrl+Shift+O Opens the selected component design
Ctrl+S Saves the active document
Ctrl+Shift+S Saves all open documents that have been modified
Ctrl+P Prints the active document

Ctrl+Tab Activates the next open design document
Ctrl+Shift+Tab Activates the previous open design document

Ctrl+A Selects all elements in the active design document.

Ctrl+Shift+C Copies the entire screen design to the clipboard as a bitmap image
Ctrl+C Copies the selected elements onto the clipboard.
Ctrl+X Cuts the selected elements onto the clipboard.
Ctrl+V Pastes elements from the clipboard.
Delete Deletes the selected elements.

Ctrl+Z Undoes the last editing action.
Ctrl+Y Redoes the last undone editing action.

Alt+Enter Opens the property editor for the selected element.
Esc Closes current modal window in the Simulator
Shift+Esc Exits the Simulator

Numpad + Zoom in to see more detail.
Numpad - Zoom out to see more of the design.
Numpad * Set the zoom level to 100%

Ctrl+1 Aligns the left edges of selected elements
Ctrl+2 Aligns the right edges of selected elements
Ctrl+3 Aligns the top edges of selected elements
Ctrl+4 Aligns the bottom edges of selected elements
Ctrl+5 Aligns the horizontal centres of selected elements
Ctrl+6 Aligns the vertical centres of selected elements
Ctrl+7 Creates even horizontal spacing between selected elements
Ctrl+8 Creates even vertical spacing between selected elements
Ctrl+9 Makes selected elements the same width
Ctrl+0 Makes selected elements the same height

Alt+1 Activates the Project tab on the Design Bar
Alt+2 Activates the Elements tab on the Design Bar
Alt+3 Activates the Icons tab on the Design Bar
Alt+4 Activates the Annotations tab on the Design Bar
Alt+5 Activates the Storyboard tab on the Design Bar
Alt+6 Activates the Notes tab on the Design Bar

Alt+Left Arrow Back navigation in the Simulator.
Alt+Right Arrow Forward navigation in the Simulator.



20
Mouse controls

The Design Editor makes use of a number of mouse controls for editing and navigation:

Left Click Selects an element.
Ctrl + Left Click Toggles the selection of an element.

Right Click Opens a pop-up context menu.

Left Drag 1. On a selected element handle: resizes the element.
2. Otherwise on a selected element: moves the selected elements and their children.
3. Otherwise: selects all elements within the drag box.

Ctrl + Left Drag As for Left Drag except for:
3. toggles the selection of all elements within the drag box.

Shift + Left Drag As for Left Drag except for:
2. moves the selected elements but not their children

Alt + Left Drag Scrolls the view both horizontally and vertically.
Alt + Right Drag Zooms the view smoothly to any level.


Ctrl + Scroll Wheel Zooms the view in steps.
Scroll Wheel Depending on user preferences either:
1. Zooms the view in steps, or
2. Scrolls the view vertically.
Tilt Wheel Scrolls the view horizontally.












21
How to Work with Projects

Projects overview

With GUI Design Studio, all of your work will normally be done within projects. A project has its own
folder structure on disk and may contain design documents, bitmap image files and project-specific
icons. The project file is stored within the project folder and has the .GDP extension.

Sometimes you will want to access the files within one project from another project, such as:
! Using a library of common design components.
! Referencing a set of GUI design guidelines.
! Building on an older version of a project within a new development project.
! Using another project as a reference example.
! etc.

GUI Design Studio provides a linking mechanism for this to allow referenced project files to be directly
accessible just like the files for the project itself. There is a similar mechanism to allow you to reference
any disk folder. This is most useful for getting access to shared image files.

The project and folder link references and the list of open documents are stored within the project file so
that they are instantly available the next time you open the project.

All changes made to the project itself (rather than design files within it) are automatically stored in the
project file so there is no "Save Project" command or need to worry about saving project changes.



Creating a new project

Menu command: File | New Project...

When you create a new project you must enter a name and select a root folder for the project files.

You can also opt to create reference links to any of the existing sample projects. You will most likely
want to link to the "Standard Components" project and perhaps the "Design Collection" project. You can
add further links and remove links at any time once the project is open.



Opening an existing project

Menu commands: File | Open Project...
File | Recent Projects > {project file}

Open an existing project by browsing for its .GDP file. This will be found within the project folder that was
chosen when the project was created.

You can also re-open your 10 most recent projects using the "Recent Projects" list from the "File" menu.

When you open a project, the current project will be closed since only one project may be open at a time.
You will be prompted to save changes, if necessary, and may then cancel the open operation.

TIP: If you want to work on multiple projects at the same time, you can either add a link to the other
projects within a master project or open another copy of GUI Design Studio for each of the other
projects.



22
Structuring projects

Menu command: Project | New Folder...
Project | Delete File/Folder

At its most basic level, a project can be a simple list of all the design documents and image files it
contains. For more complex projects, it makes more sense to organise your projects into a hierarchy of
folders, just as you would organise files on your hard disk.

For example, you may want to create generic sub-folders for:
! Main Windows
! Dialogs
! Menus
! Screenshots
! Storyboards

Or you may want to create sub-folders related to the different modules in your application.

IMPORTANT: To maintain referential integrity between files, there is no facility to rename folders and
files or move them to other folders.


Creating Folders

Form the Project panel on the Design Bar, select the parent folder and use the "Project | New Folder..."
menu command or the "New Folder..." button above the file tree to create a new sub-folder.



Deleting Folders

To delete a folder, including all of the sub-folders and files it contains, select the folder in the tree and
use the "Project | Delete File/Folder" menu command, the "Delete File/Folder" button above the file tree
(shown below) or just hit the Delete key. Unless the folder is empty, you will be prompted to confirm
deletion. In any case, deleted folders and files are sent to the Windows Recycle Bin and may be restored
from there.



23


NOTE: If a deleted design document is open for editing then it remains open and may be re-saved to
restore the file on disk. However, since the containing folder will have been deleted, you will be
prompted for a new file name and may re-create the folder from there.




Adding links to other projects

Menu command: Project | Add Project Link...

Sometimes you will want to access the files within one project from another project, such as:
! Using a library of common design components.
! Referencing a set of GUI design guidelines.
! Building on an older version of a project within a new development project.
! Using another project as a reference example.
! etc.

Linked projects are listed under the open project at the top of the Project panel:



When you select a linked project, its file tree appears for you to access any of the design documents and
other files it contains, just like for the main project. The only difference is that you cannot access any of
the project and folder links within the linked project.

Use the "Project | Add Project Link..." menu command or the "Add Project Link" button at the top of the
Project panel and browse for a project .GDP file to add. Linking to another project does not modify that
project in any way.



24
You can remove any link using the "Project | Remove Link" menu command or the "Remove Link" button
at the top right of the Project panel. This only removes the link from the project and does not affect the
linked project files in any way.



Adding links to folders

Menu command: Project | Add Folder Link...

If your project uses existing graphic image files then it may be better to reference them directly rather
than copy them into a project folder. You do this by creating a link to the folder within the project.

Linked folders are listed under the open project and any linked projects at the top of the Project panel:



When you select a linked folder, its file tree appears for you to access any of the files it contains, just like
for the main project.

Use the "Project | Add Folder Link..." menu command or the "Add Folder Link" button at the top of the
Project panel. This opens a file browser dialog rather than a folder browser so that you can find the
desired folder based on its content using thumbnails and other facilities built into the Windows browser.
The name of the selected file (if any) does not matter since it is the folder we want:



You can remove any link using the "Project | Remove Link" menu command or the "Remove Link" button
at the top right of the Project panel. This only removes the link from the project and does not affect the
linked folder or its files in any way.




25
Refreshing the file tree

The file tree on the Project panel reflects changes within the project but can lose synchronisation if
changes are made to the underlying file and folder structure in an external application such as Windows
Explorer.

To refresh and re-synchronise the current file tree, press the "Refresh Files" button just above the file
tree:



Alternatively, with the keyboard focus on the tree, you can use the F5 shortcut key.





26
How to Work with Design Documents

Creating a new design

Menu commands: File | New
Project | New Design...

There are two methods for creating design documents. The first uses the "File | New" menu command or
"New" toolbar button to create and open a blank, untitled document ready for editing. You can then save
this file wherever you want but to make it part of a project, you will have to browse to the correct project
folder. You may also need to refresh the file tree afterwards. This is a useful technique for doing quick
experiments and one-off designs.

Most of the time, however, you will want to create a design document within your open project and will
know what you want to call it before-hand. In this case, it is better to select the folder first in the Project
panel file tree then use the "Project | New Design..." menu command or the "New Design" button just
above the tree:


You will be prompted for just the document name without having to browse any further. The file will then
be created and opened ready for editing.





Opening an existing design

Menu commands: File | Open...
File | Recent Files > {design file}

The best way to open a design document within the open project or one of its linked projects is to
double-click it in the file tree on the Project panel.

Alternatively, or if the file is elsewhere, you can use the "File | Open..." command to browse for the .GUI
file directly.

You can also re-open your 10 most recently opened files using the "Recent Files" list from the "File"
menu.

You can open as many design documents as you like and use the document tabs or the Ctrl+Tab and
Shift+Ctrl+Tab shortcut keys to switch between them.



27
Look and feel

Menu commands: File | Preferences...

The look and feel of an application generally describes the visual appearance of its windows and
controls, the way they behave and an overall consistency to the application.

These aspects are normally taken care of by a combination of the operating system, the users chosen
style and colour scheme (theme) for their operating system environment, the development system used
to create the application and any particular custom control libraries. For example, Java-based
applications typically use a cross-platform, standardised look and feel rather than using the Windows
standards. Other applications might use custom controls to emulate Microsoft Office applications which
have their own look and feel.

Look

Using the "File | Preferences..." menu command, GUI Design Studio Version 2 allows you to choose
between 3 visual styles: "Windows Classic", "Windows XP" and "Windows XP Classic" and a number of
colour schemes that work with all styles.

The "Windows XP Classic" style is a mix that uses XP styling for window frames and scroll bars and
classic styling for everything else. This is a typical look for transitional applications built without an XP
manifest and running on XP.




You can also manipulate the styles to create the look of a rough mockup that may help to elicit more
feedback from people reviewing your designs during the early stages.

Whatever style you choose to use, the important thing is to capture the essence of a GUI design rather
than necessarily create a pixel perfect rendition of the final target application. This means ensuring that
the overall appearance and workflow of the application are correct and that the required inputs, outputs
and other interactive elements are provided. There will almost always be some differences when
implementing the designs with the actual application development environment.

Feel

The Simulator does not attempt to implement the interactive 'feel' aspects of the control elements.
Instead, they behave more like hyperlinks making windows appear and disappear to obtain an overall
idea of application workflow and behaviour.


28

Custom Colour Schemes

You can create custom colour schemes that will appear in the Colour Scheme drop-downs. This is
useful when you have corporate standards or an unusual display type such as an inverted colour,
low-power LCD panel.

Although there is no GUI for setting this up, you can edit the "CustomSchemes.ini" file within your
installation using a simple text editor (such as Notepad). You can base your new scheme on an existing
one so that you only have to enter the colours that you are changing. There are about 35 different colour
items you can set and the file contains 2 examples to get you started.

If you require help creating a custom colour scheme then please contact support@carettasoftware.com.



Adding elements

Design elements include all of the windows, dialogs, controls, menus, toolbars and other widgets that
appear in an application. These can be found on the Elements panel on the Design Bar.

To add an element to a design document, simply double-click it or drag and drop it to the desired
location.

Many of the control elements are provided in multiple states on the Elements palette. For example, there
are Check Boxes in the checked, unchecked and intermediate states. This saves you the time of having
to add a generic, single state version then change its properties. However, these controls can also be
altered through their properties to turn, say, a checked box into an unchecked one.

If you don't see exactly the element you want then it may be that another element can be adapted by
changing its properties. For more elaborate controls, you may need to create your own control
component.



Selecting elements

To select an element for manipulation, click on it using the left mouse button. If you hold the Ctrl key
down then this will toggle the selection of the element without affecting any other selected elements
allowing for multiple selection.

You can also select multiple elements by dragging a selection box using the left mouse button. All
elements fully enclosed by the box will be selected. Again, the Ctrl key can be used to toggle selections
and add to or remove elements from the selection set.



Selected elements have a thin border with square handles for resizing. When multiple elements are
selected, one of them is known as the Primary Selected Element and displays with normal, solid
handles. All others are called Secondary Selected Elements and display with hollow handles.

This difference is used to determine the effect of many of the manipulation commands such as
alignment and size matching. When moving and resizing elements with the mouse, only the Primary
Selected Element is taken into account for edge snapping.


29
Changing element properties

Menu command: Edit | Properties... Alt+Enter

Each type of element has its own set of properties. You can change the properties of only one element at
a time. Select the element with the mouse then use the Alt+Enter shortcut key, or simply double click the
element, to open its property editor dialog.

For example, this is the property editor for Text Buttons:



Any changes you make in the dialog are immediately applied to the element so that you get an instant
preview, except in the case of edit boxes where you must use the "Apply" button to see the change.

Hitting "Cancel" will dismiss all changes and restore the element to the state it was in before the property
editor was opened.

Hitting "OK" will accept all changes but you can always use the "Undo" command if you don't like them
("Edit | Undo" menu command, toolbar button or Ctrl+Z).


TIP: In a property editor dialog, you can normally use the Enter key to close the dialog with the default
"OK" button. However, if the keyboard focus is on a multiple line edit box such as the Text Button "Label"
shown above, then the Enter key will instead introduce a new line into the text. Rather than reach for the
mouse to close the dialog, simply hit Tab (usually once) to move the focus to another control then hit
Enter. Similarly for "Cancel" and the Escape key.



Deleting elements

Menu command: Edit | Delete Delete

Select the elements you wish to delete then use the "Edit | Delete" menu command or just hit the Delete
key.

You can use the Undo command ("Edit | Undo" menu command, toolbar button or Ctrl+Z) if you change
your mind afterwards.

If you wish to place the elements on the clipboard for pasting elsewhere then use the "Edit | Cut"
command instead (Ctrl+X).





30
Printing designs

Menu commands: File | Print...
File | Print Preview
File | Print Setup...

Print the active design document using the "Print..." command where you can select the printer and
number of copies.

Note that this version of GUI Design Studio will try to fit the design on a single piece of paper (whatever
size you have set up with your printer). This means that large designs will be shrunk to fit. Use the "Print
Preview" command first to check that the result will be acceptable.

The "Print Setup" command allows you to select default printer, paper and orientation settings for the
current session.



Exporting designs

Menu commands: File | Export...
Edit | Copy Design Image

You can export your GUI designs as images to use in another application such as a word processor for
producing specification documents.

Use the "File | Export..." command to export the entire active design document to an image file on disk.
This file can then be inserted into other application documents or emailed, etc.

Alternatively, you can use the "Edit | Copy Design Image" command (Ctrl+Shift+C) to copy the entire
design onto the clipboard as a bitmap image for pasting directly into another application.


IMPORTANT:

Both techniques require the creation of a suitable bitmap image in memory that is either placed on the
clipboard or written to file. The amount of memory this requires depends on the size (width x height) of
the design at 100% zoom determined by a bounding box surrounding all elements. Within this box, the
number of elements on the design or their detail does not matter.

For large designs, you may have insufficient memory to perform the operation which will then fail. If this
happens, you could try re-arranging the design to reduce the overall area the elements cover. You may
want to create a duplicate first and manipulate that instead or use it as a backup.

Alternatively, try choosing the "Enhanced Metafile (*.emf)" file format when exporting. While this is not a
raster image file format, it supports much larger designs and can be imported into many other
applications. The file sizes can be very large though.





31
Duplicating designs

Menu command: Project | Duplicate Design...

One of the benefits of using GUI Design Studio is that it allows you to quickly and easily create
alternative designs for evaluation without the time and tedium associated with developing prototype
code.

In many cases, what you want is a slight variation on an existing design rather than something
completely different. Maybe you just need to re-arrange a few controls. The best way to do this is to start
with a duplicate of an existing design.

One way to do this is to simply copy and paste all of the elements from one design into a new document.
You can use the "Edit | Select All" (Ctrl+A) command before copying to ensure you get everything but
you still have to create a new design document and paste the elements back in. You also need to have
the original design document open in the first place.

A better way is to use the "Duplicate Design" feature. First ensure that the design you want to duplicate
has been saved to disk. Then select it in the file tree on the Project panel. You can then use the "Project
| Duplicate Design..." menu command or the "Duplicate Design" button just above the file tree to create
an exact copy:



The new file will be placed in the same folder as the original and must be given a unique name:







32
Deleting designs

Menu command: Project | Delete File/Folder

To delete a design document or image file, select it in the file tree on the "Project" panel and use the
"Project | Delete File/Folder" menu command, the "Delete File/Folder" button above the file tree (shown
below) or just hit the Delete key.



You will be prompted to confirm deletion. Deleted files are sent to the Windows Recycle Bin and may be
restored from there.

NOTE: If a deleted design document is open for editing then it remains open and may be re-saved to
restore the file on disk.



33
How to Arrange Elements

Moving and resizing elements

Having selected one or more elements, you can move or resize them. Dragging any of the square
handles on any of the selected elements (whether primary or secondary selected) will resize all of them
together while taking into account any Fixed Width or Fixed Height restrictions.

Dragging anywhere else on a selected element will move all of the selected elements including any child
elements placed on top of them. If you wish to move elements without also moving their children then
hold the Shift key down when starting the drag.

The element shown above has no resize restrictions. The two elements below show the resize handles
that are available if an element has Fixed Width or Fixed Height respectively:

If an element is neither Fixed Width or Fixed Height then it may be set to have a Fixed Aspect Ratio. In
this case, only the corner handles are shown and resizing the element maintains the width-to-height
ratio:

If an element is both Fixed Width and Fixed Height then it cannot be resized with the mouse at all.
Because this would result in no resize handles and therefore make the selection status very difficult to
see, it is instead shown with a thicker selection border as follows:

You can change the Fixed Width or Fixed Height restrictions for an element through the common
Position properties. You can also change the position and size of an element through the Position
properties dialog regardless of the settings:



34






Edge snapping

Menu command: Layout | Snap to Edges

Toolbar button:


GUI Design Studio incorporates a unique system of Magnetic Edges to provide automatic alignment
of elements with a magnetic effect that snaps them into place. This is similar to traditional grid snapping
except that the snapping is not confined to a regular grid and the edges themselves can be dynamic and
highly specialised.

TIP: You can turn edge snapping on and off using the "Layout | Snap to Edges" menu command or
associated toolbar button. You can also temporarily reverse this setting by holding down the Ctrl key
while moving and resizing elements. This allows you to leave it turned on most of the time and just use
the Ctrl key when you need to make fine adjustments without the snap effect getting in the way. You can
also use the cursor keys to reposition elements since these ignore edge snapping rules.


Most of the elements have snapping edges around their bounding box so that they adjoin each other
without leaving a gap. Some of the elements, such as Windows and Frames, have internal edges so that
other elements can fit neatly within them.

The menu and toolbar elements have specialised edges designed to overlap each other and make
application window building easy. In the image below, shown at 200% zoom, you can see a Menu Bar
element being moved into place within an Application Frame Window (the Menu Bar has been
de-selected for clarity):





35
As the Menu Bar approaches the edge of the frame, it snaps into place. Notice how it overlaps the inner
border of the Frame Window to create a new inner border.



All of the toolbars and control bars work the same way and have been carefully designed to build upon
one another with selectable edge styles.

TIP: When placing control bars around a frame, you may need to adjust the front-to-back order of the
elements to get the borders to look right. Vertical side bars should normally appear in front of the
horizontal menu bar, button toolbars and status bar.


NOTE: When multiple elements are selected, only the Primary Selected Element is taken into account
for edge snapping.



Aligning elements

Menu commands: Layout | Align | Left Ctrl+1
Layout | Align | Right Ctrl+2
Layout | Align | Top Ctrl+3
Layout | Align | Bottom Ctrl+4
Layout | Align | Horizontal Centre Ctrl+5
Layout | Align | Vertical Centre Ctrl+6
Layout | Align | Left to Right Edges
Layout | Align | Top to Bottom Edges

Toolbar buttons:


These commands move all of the Secondary Selected Elements to align their chosen edges or centres
with that of the Primary Selected Element which retains its position.

Aligning "Left to Right Edges" (or "Top to Bottom Edges") has the effect of moving the Secondary
Selected Elements so that they join up with the Primary Selected Element on its nearest side. If the
Primary is between two secondaries, then they will end up stuck one on each side. This functionality can
be useful when constructing complex controls from constituent parts though it is often just as easy to
move the elements with the mouse and rely on edge snapping.



36
Making elements the same size

Menu commands: Layout | Make Same Size | Width Ctrl+9
Layout | Make Same Size | Height Ctrl+0
Layout | Make Same Size | Both
Layout | Make Same Size | Span Width
Layout | Make Same Size | Span Height

Toolbar buttons:


The "Width", "Height" and "Both" commands resize all of the Secondary Selected Elements to match the
width and/or height of the Primary Selected Element which retains its size.

The "Span Width" and "Span Height" commands resize just the Primary Selected Element so that its
width or height matches the span of all of the Secondary Selected Elements. This is extremely useful
for aligning group boxes or list boxes, etc. in dialog boxes, for example:

Before:


After using the "Span Width" command:







37
Spacing elements evenly

Menu commands: Layout | Space Evenly | Horizontally Ctrl+7
Layout | Space Evenly | Vertically Ctrl+8

Toolbar buttons:


These commands move selected elements so that the spacing between them is exactly the same. This
is achieved by trying to keep the outer elements fixed in position while redistributing the available space
between the other elements.

For horizontal space adjustments, the left-most element always remains fixed. To maintain even
spacing, the right-most element may be adjusted slightly.

For vertical space adjustments, the top-most element always remains fixed and the bottom-most
element may be adjusted slightly.

At least 3 elements must be selected to use these commands.


Example

Here is an example of some unevenly spaced elements:



After applying even horizontal spacing, they look like this:




Then after applying even vertical spacing, they look like this:



38




Changing the front-to-back order

Menu commands: Layout | Layer | Send to Back
Layout | Layer | Bring to Front
Layout | Layer | Back One
Layout | Layer | Forward One
Layout | Layer | Send to Back of All

Toolbar buttons:


Elements on a design appear in a particular order. When you place a new element onto a design, you
are putting it on top of (in front of) all of the other elements, obscuring anything underneath.

Sometimes, you need to be able to change the order of the elements. For example, if you have created
a dialog and then decide to use a Design Grid to improve the margins and layout, you will need to push
the grid to the back of the dialog otherwise you will not be able to get at the control elements you have
already placed.

When an element is placed on top of another element so that it is completely enclosed by that element,
it becomes that element's child. Child elements stick to their parent when the parent is moved with the
mouse. These layering commands may cause the parent/child relationship of elements to change.

The "Send to Back" command re-orders the selected element so that it is behind all of its sibling
elements, making it the first child of its parent.

With "Send to Back of All", the element will end up behind all other elements. This will cause it to lose
and be obscured by any parent it had. This command is generally only used for top level, overlapping
elements.

NOTE: These commands only operate on a single selected element at a time. You may need to use a
command more than once to make any visual difference depending on the ordering of elements at the
time.



39
Using Design Grids

A Design Grid is a special kind of element intended to aid in the layout and positioning of other elements.
They are normally shown using feint lines in Design mode and become invisible when run in the
Simulator but the lines and grid cells can optionally be made visible as part of the design if required.

With edge snapping turned on, elements will snap to the grid lines, making layout easy.

Design Grids are useful in all sorts of circumstances but are commonly used for dialog layouts. Here is
an example of a basic Design Grid added to a dialog:




The lines are very feint but you should be able to see a gutter margin all around the dialog (called the
"Outer Margin") and a further margin on the right-hand side (called the "Inner Margin") intended for a
column of buttons. Specifying an inner margin automatically adds internal spacing for the main control
elements.

The example below, shows an alternative grid layout with an inner button margin at the bottom:




Having chosen a basic layout, the inner 'working area' of the Design Grid can be set to have a specified
number of rows and columns or rows and columns based on absolute spacing. The example below
shows how a 4-column grid with regular 21-pixel high rows has been used to create a neat and
consistent dialog layout. Even the buttons are aligned to the grid:



40



Because of the way Magnetic Edges and Design Grids work, the horizontal and vertical grid lines
extend to the edges of the grid element, across both the inner and outer margins. For grids with many
rows and columns, this might become awkward. You can, of course, place grids within grids. The
example below shows this. The inner grid has horizontal and vertical lines every 7 pixels with no spacing
between them and no margins. This emulates a traditional grid snapping scheme:




The final example shows what can happen if you turn cell borders on and give them a fill colour. This is
the same basic grid as the first example but with multiple columns and rows:






41
Although all of the examples here have focused on dialogs, Design Grids can be used for a variety of
purposes on top of any element.





42
How to Work with Fonts

Changing element fonts

Menu command: Edit | Properties... Alt+Enter

You can change the font of all text-based elements from the "Font" tab of its properties editor. For
example, this is the property editor for Text Buttons:



You can change the Typeface, Size and basic attributes of the font. The Typeface may also be set to
"(Default Font)" in which case the Default Font Typeface set in the Preferences will be used. This is
extremely useful when you want to use a common Typeface throughout your designs and change this at
will.

The most recently selected fonts and other fonts that appear on opened design documents are available
from the Quick Pick list. The Typeface list also provides access to recently used typefaces.


NOTE: The Default Font preference is currently an application setting. If you share your designs with
others or distribute them for review using the Viewer application then the recipients will need to change
their preferences to see your designs in the same way. Also, since fonts are not embedded within
designs, you should ensure that the recipient has the same fonts installed on their machines.



International language support

From version 2.2, GUI Design Studio has full support for creating designs using any language including
right-to-left mirroring where necessary.

If you do not choose a specific font that supports the language characters you are using then Microsoft
Windows will do a fairly good job of choosing a suitable match based on the typeface and size you have
chosen. If the exact font is important then you will need to choose this explicitly.

When you need to mirror elements for right-to-left languages such as Arabic and Hebrew then you must
check the "Mirror for Right to Left" property for those elements. The location of this setting depends on
the individual element. For example, Frame Window elements have this property on the "Window" tab
and Table elements have it on the "Options" tab.

For some elements, such as single line Edit Boxes, the "Mirror for Right to Left" option does not exist and
you should instead set the Alignment field to "Right".


TIP: If you are going to create many designs that require right-to-left mirroring, you should set the "Mirror
elements by default for right to left layout" Preferences option ("File | Preferences..." menu command):



43


This will save you having to change the option for each element you add to your designs. However, you
will still need to set "Right" alignment for elements that don't support this option or choose the
right-aligned version from the Elements palette.


Example

The following example shows an English tabbed dialog containing a variety of controls:




When translated into Hebrew, the entire design has been correctly mirrored including the scroll bars,
frame window caption bar and tabs, and all of the text has been aligned to the right:



44



Font preferences

Menu command: File | Preferences...

For text-based elements, you may explicitly set their font to any available font on your machine. You
may also choose to select the "Default" font. This allows you to change the overall font of a design:



The default Typeface for the Default Font is "Microsoft Sans Serif". If you are working in a language
other than English then you may need to choose a more appropriate typeface. Microsoft Windows will
automatically choose a suitable font for you if the characters can't be represented in your selected font
but it may not be what you want.

Another reason you might want to change the Default Font is to give your designs a more unfinished,
rough look by choosing a handwriting, script or otherwise unusual typeface.

Unfortunately, not all fonts appear at the same size or are equally legible at the same point size. For
example, "Times Roman" can easily be read at 10 pt but "Jinky" cannot. For that reason, you can scale
the Default Font by between 0.5 and 2 times the normal size. The adjustment is made in real time so you
can see the effect directly on your design as you move the slider.


NOTE: The Default Font preference is currently an application setting. If you share your designs with
others or distribute them for review using the Viewer application then the recipients will need to change
their preferences to see your designs in the same way. Also, since fonts are not embedded within
designs, you should ensure that the recipient has the same fonts installed on their machines.


45
How to Use Bitmap Images

Adding images to a design

Menu command: Design | Add Bitmap

Adding bitmap images to a design document is easy in GUI Design Studio. One method is to use the
"Design | Add Bitmap..." menu command to search for an image file on disk to add.

However, if you are working with a lot of images on a regular basis and they are kept in the same folder,
you can add a folder link to the project so that all of the graphic files within that folder, and any
sub-folders, will be available for dragging and dropping directly from the file tree on the Project panel. Of
course, you can add as many folder links as you like to the project.


Resizing an image

Like other elements on a design, bitmap images may be resized to fit whatever space you require. You
can resize elements using the mouse or by adjusting the Width and Height properties directly in the
property editor.

If the Placement property is set to "Stretch" then the image will be stretched or shrunk to fit the bounds of
the resized element.

If set to "Tile", then as many copies of the image, or parts thereof, as necessary will be used to fill the
element space, starting from the top-left of the element and cropping to the edge of the element.

If set to "Align", then a single copy of the image will appear within the element, aligned appropriately. If
the element is larger than the image then the areas around the image will be transparent. If the element
is smaller then the image will be aligned top-left (regardless of the alignment properties) and cropped
accordingly.

See also: Restoring image dimensions


Cropping an image

If you are using an image on a design but don't want to display all of it then you can crop the edges to
extract just the area you need, without affecting the original image file or creating another image in an
image editing program.

To do this, select the image element, open its property editor and select the "Image Area" tab. Then set
the clipping margins. If you use the spinners then you will get a real-time preview of the changes on your
design:





46
NOTE: The clipping is applied before tiling or stretching the image to fit the element.



Restoring image dimensions

When you place a bitmap image onto a design, its containing element defaults to the actual size of the
image. If you resize the element to stretch or tile the image, you may later want to change it back to its
original size.

To do this, select the image element, open its property editor and select the "Position" tab:



Now click on the "Set to Original Size" button to restore the element to its original image Width and
Height.



Grabbing and using screenshots

Menu command: Project | Paste Image to File

It is often useful to include screenshots from existing applications in a design. These may be used for
annotation purposes or as design elements. You can even place hotspots over parts of the image such
as buttons to use as navigational links.

The only disadvantage of using screenshot images rather than creating the layout from scratch is that
the image will not respond to changes in colour scheme preferences.

Grabbing screenshots

There are many tools on the market for copying parts of your computer screen to the clipboard but
Windows also has a few mechanisms built in. If your keyboard has a "Print Screen" key, this may be
used as follows:

Print Screen Captures the entire contents of the screen.

Alt + Print Screen Captures the currently active window. This can be any modal or modeless
dialog or an application window. It does not work for capturing document
windows.

The Alt key will typically close any open menu so If you want to have a menu
visible, use the Alt + menu hotkey ('F' for "File" for example) to open the menu
then keep the Alt key held down while you press Print Screen.

Note that the Shift and Ctrl keys are ignored when using Print Screen except that the special Shift + Alt
+ Print Screen key combination may be set up within Windows to activate high contrast mode so is best
avoided.


47
Note also that the Print Screen key may be labelled PrtScr or some other abbreviation on some
keyboards, particularly laptops. In all cases, it should be located near the Insert and Delete keys.

Manipulating the image

Having captured a screenshot to the clipboard you can now paste it into your favourite image editing
program to extract the part you want, modify the image or save it to an image file on your hard disk.

Pasting into GUI Design Studio

Within GUI Design Studio, you can also paste a clipboard image directly into a named file in a project
folder. The image can be copied to the clipboard from any application or by using the Print Screen
method above.

For example, to quickly get a dialog box into a design:

1. Open the dialog to be captured in the appropriate application.

2. Press Alt + Print Screen. The dialog image is now on the clipboard.

3. Switch to GUI Design Studio.

4. Open the Project panel and select the destination folder.

5. Use the "Project | Paste Image to File" menu command (or the button above the file tree) and
choose a file name and type. The image file now appears in the tree.

6. Drag and drop the image file from the tree onto the design.







48
How to Use Icons

Adding icons to a design

Menu command: Design | Add Icon

The chances are that your application will require icons for toolbar buttons and other purposes. GUI
Design Studio comes with a set of pre-defined icons but you can easily create your own and make them
accessible from any project or specific to an individual project.

The Icons panel contains a list of the shared icon folders and the icon folders belonging to the open
project and the projects linked to it. The "New Folder" button above the list allows you to create your own
shared folder for new icons. When you select a folder, the icons within it are displayed in the palette
according to the size and colour depth filters you set.

To add an icon to a design document, simply double-click it in the palette or drag and drop it to the
desired location.

A less common technique is to use the "Design | Add Icon..." menu command and locate an ICO file on
disk to add the first image from that.


Using your existing icons

If you have an existing set of icons that you want to use (i.e. elsewhere on your hard disk or network)
then you will need to create a shared folder and use Windows Explorer or some other application to copy
them across. The folder path will depend on where you installed GUI Design Studio but, typically, it will
be something like this:

C:\Program Files\GUI Design Studio\Icons\{your folder}\


Alternatively, you can copy them to the "_Icons" sub-folder of a particular GUI design project.


NOTE: Although you can create a folder link to the original icons from the Project panel, they will only
appear in the project file tree as ICO document files. You can still use them from there but you will not be
able to see all of the icon images or filter them by size and colour depth.




Resizing an icon

Sometimes the icon you want for a particular purpose is not quite the right size. In the real application
you would probably want to create a new icon of the correct size but, for design purposes, there is no
need to spend time doing this, especially not until you know exactly what you want.

By default, icons are not resizable but by changing their properties they can be resized and stretched
just like most of the other design elements.

1. Double-click the icon to open its Properties dialog.
2. Select the desired resizing options: Fixed Width, Fixed Height, Fixed Aspect Ratio.
3. Hit "OK".
4. Position and resize the icon as required.


Just like bitmap images, you can easily restore the icon back to its original size if required.



49
Choosing your icon editor

Menu command: File | Preferences

Having a library of pre-defined icons is all very well but you will probably want to create and edit your
own icons that are specific to your application designs.

For maximum flexibility and to allow you to work with your icon editor of choice, we designed GUI Design
Studio to integrate with an external icon editor program. If you already use an editor that you are familiar
with and like then it can probably be integrated with a suitable configuration file. Otherwise, you can use
the Icon Express editor that comes with GUI Design Studio.

Your choice of editor will affect the available options when creating new icons. GUI Design Studio tries to
offer only those icon formats that are supported by the chosen editor.

To select your editor, use the "File | Preferences..." menu command to open the Preferences dialog and
locate the "Icon Editor" setting:



Simply select from the drop-down list of available icon editors. These are the editors for which a
configuration file exists in the "IconEditorProfiles" installation folder and have been detected as installed.

Configuration files have been provided for most of the popular icon editors. If the one you use is not
listed then use Windows Explorer to check for the configuration file (e.g. in "C:\Program Files\GUI
Design Studio\IconEditorProfiles\"). If it does exist then it could be that you installed the editor to a
different location than its preferred default and may need to edit the file. You can use any basic text
editor such as Notepad to do this.

If there is no configuration file for your editor then you can create a new one using the example below as
a guide:

[IconEditor]
Name = Icon Editor Display Name
Producer = Company or Author Name
WebSiteURL = http://www.producer-domain-name.com
ProgramEXE = C:\Program Files\full\path\to\editor.exe
OpenArguments = {Filename}
NewArguments =
SupportsNewCmdLine = 0
SupportsAnySize = 1
NeedsFullPalette = 0
NativeSizes = 16,24,32,48,64,72,96,127
SupportedBitsPerPixels = 4,8,24,32


Explanations:
ProgramEXE If the editor cannot be found from this entry then it will not be
available
OpenArguments Supports macros: {Filename} and {Index}
NewArguments Leave this blank
SupportsNewCmdLine Leave this set to 0
SupportsAnySize Set to 1 if the editor can work with any size of icon, otherwise 0
(usually 1)
NeedsFullPalette Set to 1 if the editor needs to be given a colour palette or 0 if it
creates its own (usually 0)
NativeSizes Comma separated list of pixel sizes
SupportedBitsPerPixels Comma separated list of any of the following: 1, 2, 4, 8, 16, 24, 32


50


If you require help creating a suitable configuration file for your editor then contact
support@carettasoftware.com.



Creating a new icon

Menu command: Project | New Icon

You can create a new icon in the open project, any of its linked projects or any of the shared icon folders.

From the Icons panel, select the desired project or folder for the new icon and use the "Project | New
Icon..." menu command or the "New Icon" button above the icon palette:



Give the new icon a name and select its size and colour depth in the dialog. The available options will
depend on those supported by your chosen icon editor.



Once you hit "OK", the new icon file will be created and opened in the editor. Although icon files can
contain multiple icon images, the "New Icon" command will always create a new file for each icon. If you
want to create further images within the same file, you can do this from within the icon editor.


When you have finished editing the icon, save the file in the editor and use the "Refresh Icons" button
above the icon palette in GUI Design Studioto view the change:



51



TIP: If you want to create a non-square or custom size icon and your editor supports this, create an icon
of an arbitrary size then use the facilities in the icon editor to add the custom format and delete the
arbitrary sized icon format.



Editing an existing icon

Menu command: Project | Edit Icon

From the Icons panel, select the icon you want to edit and use the "Project | Edit Icon..." menu command
or the "Edit Icon" button above the icon palette:




52

The selected icon file will be opened in your chosen editor. However, icon files may contain multiple icon
images. Most editors only support the concept of opening a file rather than an individual icon within it so,
unless the selected icon is the first image in the file, it may not be the one that appears in the editor. In
this case, simply use the editor facilities to select the actual icon image you want to edit.

Note that Icon Express does support opening a specific icon within a file and will display the correct
image ready for editing.


When you have finished editing the icon, save the file in the editor and use the "Refresh Icons" button
above the icon palette in GUI Design Studioto view the change:



NOTE: GUI Design Studio will allow you to open an icon in a read-only file for editing. In this case, your
editor will prompt you to save it with a new file name. When you refresh the palette, the newly edited icon
will appear in addition to the original read-only one.



Deleting an icon

Menu command: Project | Delete Icon File

IMPORTANT: GUI Design Studio only supports the deletion of entire icon files and not individual icon
images within multiple-image icon files. GUI Design Studio always creates new icons within their own file
so this is not really much of an issue.

To delete an icon file, select one of its icon images in the palette on the Icons panel and use the "Project
| Delete Icon File" menu command or the "Delete Icon File" button above the palette:



53


You will be prompted to confirm deletion. Deleted files are sent to the Windows Recycle Bin and may be
restored from there.

IMPORTANT: If a deleted icon has been used in a design then it will appear as a black box with red
cross hatching to show that it no longer exists. There are no referential checks for icon usage so use this
command with care.





54
How to Annotate a Design

Annotations overview

By annotating your designs, you can add explanations or describe intended functionality to clarify
anything that may be uncertain. The better able you are to fully specify your design and point out areas
of particular importance, the more likely your designs will transform into a successful implementation.

Annotations work in exactly the same way as design elements except that they appear on a separate
layer on top of them and may be hidden out of the way to work on the underlying design. Annotations are
also hidden when the design is run in the Simulator.

In addition to placing annotation elements on top of a design document, you can add formatted text
notes to a design on the Notes panel. These appear as popups during design and/or simulation.

TIP: You can use annotations to review any existing piece of software. Simply grab a screenshot of the
application and place it on a new design document then add your annotations over the top. You can use
the same technique to comment on someone else's design without modifying their working document.
Just add their design as a component to a new design document and annotate.



Adding annotation elements

Annotation elements work just like regular design elements except that they can be found in their own
palette on the Annotations panel and are drawn on top of all the design elements. Annotations include
text boxes, markers, curly brackets and highlighting rings.

To add an annotation element to a design document, simply double-click it or drag and drop it to the
desired location.

Text boxes have an optional title, border and background fill. They can also have a drop shadow to make
them stand out from the underlying design. A common method of use is to place them around a design
and use markers and connecting lines to point at the elements of interest. Once placed on an element, a
marker becomes attached as a child of that element and will move around with it so the annotation box
remains connected.

With a default border size, the rectangular and elliptical ring targets are designed to snap to the
bounding box of other elements such that they contain them with a small margin rather than sit directly
on top and obscuring them. You can change this margin in the properties.

TIP: The sample markers on the palette are set to be fixed size by default. If you want to resize them,
you can select them and use the Shift+Arrow keys rather than change their properties and drag the
resize handles with the mouse.







55
Connecting your annotations with lines

Menu command: Design | Make Connection F4 (or Shift+F4)

Toolbar button:


Having placed annotation text boxes and markers on your design, you will probably want to connect
them together.

Use the "Design | Make Connection" menu command, toolbar button or F4 key to enter 'Connection
mode'. The mouse cursor changes to a line-drawing pencil. As you move over connectable elements
they are highlighted with an orange box.

Click on the element representing the start or source of the connection. This can be any annotation
element but some design elements, such as Buttons, also support connections. A rubber-band line will
then appear as you move the mouse and a further orange highlight box will appear when you point at an
element that can be connected.

Click on the target element to end the connection. A straight line will be drawn between the two and they
will remain connected as the elements are moved around until the connection is deleted.

If the Shift key was held down when starting connection mode, you can then continue to make new
connections without having to re-select the command.

Use the Escape key to end connection mode without making a connection or just use the "Make
Connection" command again to turn it off.

You can select a link and edit its properties to change its colour and width if you wish.


NOTE: Annotation elements can always connect to other annotation elements. The colour and width of
the line is determined by the colour of the target element. Any connectable design element can generally
also be connected to any annotation element. However, the reverse is not true. For example, you can
start a connection at a Button and end it at an annotation text box but if you start at the text box, you can't
then connect to the Button.




Deleting annotations

Menu command: Edit | Delete

Select the annotation elements or connection lines you wish to delete then use the "Edit | Delete" menu
command or just hit the Delete key. Deleting an element will also delete any connection lines that are
attached to it.

You can use the Undo command ("Edit | Undo" menu command, toolbar button or Ctrl+Z) if you change
your mind afterwards.

If you wish to place the elements on the clipboard for pasting elsewhere then use the "Edit | Cut"
command instead (Ctrl+X). Note that connection lines cannot exist without the elements they are
connected to so you need to cut them out together for them to appear on the clipboard.





56
Hiding or displaying your annotations

Menu command: View | Annotations F8

Annotations can sometimes get in the way while you are working on a design and you might want to
temporarily hide them.

You can use the "View | Annotations" menu command or the F8 shortcut key to toggle them on and off.

NOTE: If you place an annotation marker on top of a design element then move that element, the
marker will move with it whether it is visible or hidden.





57
How to Create an Interactive Design

Interactive capabilities

Being able to quickly create designs for individual screens is extremely useful but the real power of GUI
Design Studio is in its ability to let you graphically describe the workflow of an application and then to
simulate the running of that application.

The purpose of this is to create simple prototypes that can demonstrate the design and ideas behind it.
Armed with this, you can get feedback from others and start to explore alternatives and "what if?"
scenarios.


However, it is important to understand the limitations of these prototypes. This is a user interface design
tool not an application development tool. The only behaviour that is currently supported is the ability to
navigate between windows; to click on a screen element and make another modal or modeless window,
panel or other item appear or disappear. This includes the creation of cascading menus, popup modal
dialogs, combo box drop-downs, tabbed interfaces and many other idioms.

Beyond such behaviour, the controls themselves are non-interactive. So, for example, you can't type
into edit boxes or change the check state of check boxes. To do so would be somewhat pointless without
coded functionality to act on the data or state changes. Such functionality is beyond the scope of the
tool.

One of the key factors in the design of GUI Design Studio was to keep it graphical and avoid the use of
any requirement for scripting or coding. By introducing scripting to provide richer behavioural
functionality, there would have been a tendency for GUI Design Studio to become more of a
development tool with an ever increasing set of functions. The real danger for designers though would
be to get distracted with implementation and spend too much time and effort producing what is
essentially a throwaway prototype.

If you need to create more complex, coded functional prototypes then there are some very good Rapid
Application Development (RAD) tools on the market.



Running the simulator

Menu command: Simulator | Run Simulator F9
Simulator | Run Simulator on Main Design Ctrl+F9

To run the Simulator on the active design document, use the "Simulator | Run Simulator" menu
command, the toolbar button or simply hit F9.

If you have set a main design for the project then you can run the simulator on that design using the
"Simulator | Run Simulator on Main Design" menu command or the Ctrl+F9 keyboard shortcut.

This will open a full screen window and display the representative element for the design (or the whole
design if no representative element has been set).

You can then interact with the design by following any navigation links on that design. These are
indicated by the mouse cursor changing to a hand icon.

NOTE: Annotations and other design-only items such as grid lines do not appear during simulation.




58
Stopping the simulator

Keyboard: Escape
Shift+Escape

When you close a window and there is nothing left to display, the Simulator will automatically close. For
example, if your design consists of a single dialog and you hit the "OK" or "Cancel" buttons.

The Simulator will also close if you navigate to an "Exit" box in the design.

You can close all of the windows at the current modal level by hitting the Escape key. Repeatedly hitting
the Escape key will therefore close the Simulator. You can also use Shift+Escape to close the Simulator
immediately from any modal level.



Creating a storyboard document

Menu commands: File | New
Project | New Design...

Creating a new storyboard document is exactly the same as creating a new design document. In fact,
there is no real difference between the two, only a conceptual one.

Think of a basic design document as the layout for an individual screen such as an application window,
dialog box or control panel, etc. Use this document to annotate the design, record notes and provide any
combo box drop-downs.

Then think of a storyboard document as an assembly of design components that describes how you
navigate from one screen to another. By placing the workflow design in a separate document you make
the overall project much more manageable and you can create different storyboards and alternative
workflows by reusing the same designs.



Selecting a representative element

Menu command: Design | Set Representative Element F10
Design | Clear Representative Element
Design | Use Default Representative Element

When you run the Simulator on a design document, especially a storyboard, it needs to know which is
the top-level or representative element so that it knows where to start. Otherwise, it will assume that all
elements on the design are part of the same screen and display them all.

Example:



59
If this design is run in the Simulator, then both the dialog and the list belonging to the combo box will be
shown (without the connecting arrow). By selecting the dialog box element and using the "Design | Set
Representative Element" menu command or F10 key, the Simulator will know our intention and just
display the dialog box. The representative element is indicated on a design by a green box surrounding
it:




Default Representative Element

To simplify use in the vast majority of cases, the back-most element on a design (normally the first
element added) can be automatically chosen as a default representative element so save you having to
set it manually. This is shown using a feint green box:



Enable this option by checking the "Design | Use Default Representative Element" menu option. This is
disabled if a representative element has been explicitly set.

Uncheck the option if you are creating concept wireframe designs where you want every element on the
design to be part of a single screen.

This option is checked by default for all new designs but to maintain backwards compatibility with
designs created in versions prior to 2.4, existing design files have this option unchecked. This is to keep
the existing behaviour in cases where no explicit representative element has been set.

Removing The Representative Element

If you need to remove the selected representative element setting, use the "Design | Clear
Representative Element" menu command. This will revert to the automatically chosen element if the
"Use Default Representative Element" option is checked in the menu for the design. Otherwise, it will
remove it entirely.





60
Selecting a main design

Menu commands: Project | Set Main Project Design To: Ctrl+F10
Project | Clear Main Project Design
Simulator | Simulator Options...

When you run the Simulator you have the option of starting from the main design file for the project, if
one exists, or from the currently active document. By starting from the main design you can make
changes to other design files and immediately run the Simulator from the main design without having to
find it first. This can be a real time saver.

To designate the main, representative design for the project, open the design file or click on its tab (if
already open) to make it the active design, then use the "Project | Set Main Project Design To:
{filename}" menu command. The design file will then appear in the Project file tree with a green icon as
a visual indicator:



NOTE: If you need to remove the representative design setting so that there is no main design for the
project, use the "Project | Clear Main Design" menu command.



Adding navigation links

Menu command: Design | Make Connection F4 (or Shift+F4)

Toolbar button:


Navigation links are the key to creating workflow storyboards and turning these into working
demonstration prototypes. A navigation link is simply an arrow from one element, such as a Button, to
another element, such as a Dialog Box, to indicate that when the Button is pressed, the Dialog should
appear.

There are different types of link that can cause windows to appear or disappear and be modal or
modeless. See ' Changing navigation link properties' for a description of each of these. You can also
decide how to position the windows that are made visible.




61
Creating the links

Use the "Design | Make Connection" menu command, toolbar button or F4 key to enter 'Connection
mode'. The mouse cursor changes to a line-drawing pencil. Not all elements support connections. As
you move over connectable elements they are highlighted with an orange box.

Click on the element representing the start or source of the connection. A rubber-band line will then
appear as you move the mouse and a further orange highlight box will appear when you point at an
element that can be connected to the first.

Click on the target element to end the connection. A straight line will be drawn between the two and they
will remain connected as the elements are moved around until the link is deleted.

If the Shift key was held down when starting connection mode, you can then continue to make new
connections without having to re-select the command.

Use the Escape key to end connection mode without making a connection or just use the "Make
Connection" command again to turn it off.

When not in connection mode, you can select links to change their properties such as line colour and
width, the type of link and how it is triggered.



Deleting navigation links

Menu command: Edit | Delete Delete

Navigation links are deleted in the same way as regular elements. Select the links you wish to delete
then use the "Edit | Delete" menu command or just hit the Delete key.

You can use the Undo command ("Edit | Undo" menu command, toolbar button or Ctrl+Z) if you change
your mind afterwards.

NOTE: Links must connect between elements and are not allowed to be left dangling. Therefore, when
an element is deleted, all of the links connected to that element are also automatically deleted.

Although you can also use the "Edit | Cut" command (Ctrl+X) to remove links, since they cannot exist in
their own right, this results in an empty clipboard. However, you can cut and copy links for pasting
elsewhere so long as the elements they connect are also selected for cutting or copying with them.






62
Changing navigation link properties

Menu command: Edit | Properties... Alt+Enter

Navigation links have their own set of properties. You can change the properties of only one link at a
time. Select the link with the mouse then use the Alt+Enter shortcut key, or simply double click the link, to
open its property editor dialog:



Any changes you make in the dialog are immediately applied to the link so that you get an instant
preview, except in the case of edit boxes where you must use the "Apply" button to see the change.

Hitting "Cancel" will dismiss all changes and restore the link to the state it was in before the property
editor was opened.

Hitting "OK" will accept all changes but you can always use the "Undo" command if you don't like them or
make a mistake ("Edit | Undo" menu command, toolbar button or Ctrl+Z).

You will probably want to leave the Line Colour and Width alone unless you are using a contextual
coding system.

The Event Trigger lets you select the mouse button event that triggers the navigation. You can choose
between left, right or middle clicks or double clicks and also Mouse Over, Enter or Leave events. You
can create more than one navigation from the same source element (e.g. button). All links that match the
mouse event used will be navigated in the order the links were created.



Note that Mouse Over events are triggered both when the mouse enters and leaves the element. Mouse
Over is equivalent to connecting both Mouse Enter and Mouse Leave events using the same navigation.
It therefore makes most sense when used with Toggle Window (see below).



63
The Navigation Type controls what happens when navigating to the target element or window, as
follows:

Modal Popup

Opens the target as a modal window on top of all other windows
which become inactive until all windows at the same modal level
(usually just a single dialog window) are closed.
Modal Choice Popup

Similar to Modal Popup but intended specifically for popup menus
and other temporary selection windows. Once opened, clicking
outside of the target window will automatically close (cancel) it.
Also, when the window is closed, all prior Modal Choice Popup
windows are automatically closed. This is how nested, cascading
menus and combo box drop-downs work but it can also be used for
any popup selection window.
Show Window

Displays the target window at the same modal level so existing
elements at that level are still active. Use this, for example, to open
document windows or make extending dialogs.
Hide Window

Hides the specified target window.
Toggle Window

Shows or hides the target window according to whether it is already
visible or not.
Replace Window

Causes the target window to appear and replace another window
which then becomes hidden. If the target is connected to a Window
Placeholder Anchor then it replaces all other windows connected to
that same anchor. Use this for tabbed dialogs and panels, etc. If it
is connected to a Window Position Anchor or no anchor at all then it
replaces the main window being called from. Use this technique for
wizards and sequenced presentations, etc.
Replace Top Window

Causes the target window to appear and replace all other windows
at the current modal level which then become hidden. Use this,
particularly with thumbnail components, for navigating between
Web pages in a Web application design. This supports a
navigation history allowing for "Back" and "Forward" navigations.












64
Positioning windows and elements

When your design calls for a window to be opened using a navigation link, by default, the Simulator will
simply place it in the centre of the screen. For modal dialogs, this is fine but in most other cases, you will
want to place the window in a particular position.

This is achieved with the use of Placement Anchors on the Storyboard panel:




By connecting the target window or element to one of these Anchors, you can specify exactly where you
want it to appear. By changing the Anchor properties, you can select any corner to align to or the centre.
If you place the Anchor on free space (not on top of another element) then the target will be positioned
relative to the calling element window (the one being navigated from).

By changing the Align To property of an anchor, you can make the target window appear relative to the
mouse cursor rather than the Anchor box itself. Use this option when you want to create context menus
and other similar popup windows.

In many cases, the two types of anchor are functionally similar and interchangeable but from version 2.0
there are some important differences that you should be aware of.


Window Placeholders

The larger Anchor is called a "Window Placeholder". By default, this is resizable and although the actual
size is not actually relevant (only the alignment corner or centre position), it provides a useful guide and
indication of intent when you want to create tabbed panels and dialogs. The panels can simply be made
the same size as the Placeholder.

Window Placeholders are typically used with "Replace Window" navigation links to create tabbed
panels and dialogs (in fact, they are rarely used for anything else). There are special rules for "Replace
Window" that allow them to be used for sequential designs and other situations too.

With Window Placeholders, "Replace Window" always replaces only elements attached to the
Placeholder.


Window Position Anchors

The small, square Anchor is called a "Window Position Anchor". These are of fixed size since it is only
the alignment corner or centre positions that are relevant though you can change the size through the
properties if you want.

These are used in every case when you want to specify the position of a target window and you are not
replacing another window or panel at that position when a Window Placeholder would be more
appropriate.

With Positioning Anchors, "Replace Window" always replaces the main window or element (the caller) in
the mode containing the link regardless of how many other target elements are attached to the Anchor.






65
Closing windows

You can create navigation links in your designs to open different design windows when you run them in
the Simulator. Having done that, you need to be able to close them again.

There are 4 Storyboard panel elements that can be used as navigation targets to close windows:



Closes all windows at the current modal level. Typically, this is just
a single window such as a dialog box but if that window contains
other 'switched in' windows or panels (such as in the case of a
tabbed dialog) then they will also be closed. If there are no other
windows left then the Simulator itself closes and returns to design
mode.


This is functionally identical to the "Close and Accept" box above
but the two are included to make designs clearer to understand
(especially when used as specifications for developers), and also
for future proofing designs for a time when they might be handled
differently by the Simulator.


Closes just the parent window of the element connected to the
"Close" box. You would typically use this to close document and
application frame windows. If there are no other windows left then
the Simulator itself closes and returns to design mode.


Exits the prototype application, closing the Simulator and returning
to design mode.


Because dialog boxes are very common in designs and it can get a bit tedious to keep adding "Close
and Accept" and "Close and Cancel" boxes and connecting them to the "OK" and "Cancel" buttons, the
following buttons have built-in default 'close' behaviour (default behaviour is indicated by a small circle
on the button that is invisible when run in the Simulator):






Using navigation overlays

Menu command: View | Navigation Overlays

There are times when you want to navigate from an element that does not normally support navigation.
For example, you might want to respond to clicks on a list box or tree item. You might want to create
graphic buttons or create multiple hyperlinks from specific areas of a single bitmap image.

To do this, use a Navigation Overlay from the Storyboard panel:




Place this over the area you wish to navigate from then add a navigation link in the usual way. When you
run the Simulator, the Navigation Overlay will be invisible.



66
Navigation Overlays can also be used to override default navigation behaviour on an element. By
placing the Overlay on top of the element, it will get the mouse click first.

You can also hide all overlays to get a clearer view of the underlying design by using the "View |
Navigation Overlays" menu command but they must be made visible again to create connections from
them.

Example: Creating an information popup from a piste map






Adding message boxes

You can use a Message Box in your design to describe some functionality that would occur at that point
in the real application or to substitute for part of the design that you haven't yet produced.

For example, you can describe some complex behaviour that is difficult or impossible to reproduce in the
GUI Design Studio prototype or is simply easier to describe in a few words than to actually try and
emulate.

Message Boxes can be found on the Storyboard panel. When you add them to your design you can set
the Title and Message text and they appear like this:




When you run the Simulator and the Message Box is navigated to (e.g. by clicking on a button
connected to the Message Box), then a real message box will popup to display the message:




67



When you hit the "Close" button, any navigations from the Message Box on the design will be executed.
If there aren't any, then the popup will simply close and return to the previous screen.



Adding scenario options

Menu command: Simulator | Simulator Options...

Once you have a basic design, you might want to explore different scenarios such as error conditions
that might occur in the real application. When these occur, developers might be able to display a simple
error message box but you may want to design some very specific error handling user interface.

You may also be considering multiple versions of a dialog box (for example) and want to demonstrate
each one to other people in the context of your running application without having to switch back to
design mode and change connections in between or create entirely different designs for each one
(which would be very problematic if you had more than one set of alternative design sections).

Whenever you want to offer a choice in your design, GUI Design Studio provides a Condition Box for this
purpose on the Storyboard panel. When you add these to your design you can create any number of
scenario entries and connect each one to anything else.

Note that the first scenario in the list is special. Although it may contain any text, it should always be
reserved for the 'Normal' case when that is relevant. The other scenarios are usually exception cases
but you can use them for anything.

Condition Boxes appear on a design like this:




The boxes either side of the scenario text is where the onward connections are drawn to. If you insert,
delete or re-order scenarios they maintain their onward connections.

Normally, when you run the Simulator and the Condition Box is navigated to (e.g. by clicking on a button
connected to the Condition Box), then the Select Scenario dialog appears:



68



Select the desired scenario in the list then hit the "Select" button (or just double-click the entry in the list).
If the scenario is connected to anything in the design then that navigation (or navigations) will be
executed. Otherwise, or if the "Cancel" button is pressed, the dialog will simply close and return to the
previous screen.


Scenario Options

If you have added a lot of Condition Boxes to your design, you might not want the scenario choice
popups appearing all over the place the first time you demonstrate your prototype to someone. Instead,
you might want to focus on the 'Normal' case to start with and then demonstrate the other conditions
later on.

The "Simulator | Simulator Options..." menu command opens the "Simulator Options" dialog that lets
you control what happens when the Simulator encounters a Condition Box in your design. The default
displays the popup dialog (shown above) with the list of scenarios for you to choose from. Alternatively,
you can choose to always display the first (normal) case, the second (error condition) case, to cycle
through the scenarios each time or, just for fun, select a random scenario:







69
Working with combo boxes

Combo Boxes are unlike all other standard controls in that they change size and shape during operation
with their drop-down lists. In GUI Design Studio, Combo Boxes are represented by just the permanent
part and the drop-down has to be added separately:

This has two advantages:

1. The content of the drop-down can be seen as part of the design document rather than being
hidden within the element properties.
2. The drop down is not restricted to a text list and can be easily replaced by any other element or
component, for example, to create a colour or line style selector.


The example design shown below is taken from the "Design Collection" sample project:





The "Shape" Combo Box is connected to a standard text list (an element of type "Combo Box Drop List").
The navigation link type automatically defaults to "Modal Choice Popup" because this is nearly always
what you want. Also note that there are no positioning anchors. When the Simulator is run and the
Combo is clicked, the popup will automatically be placed, left-aligned, underneath the Combo Box itself
unless you place a positioning anchor to override this. For best effect, you will want to resize the text list
to make it the same width as the combo box itself.

The second Combo Box shows how it can be adapted to provide a "Colour" picker. The text is set to
blank and a rectangle is placed over the top to indicate the current colour. Instead of linking to the text list,
the Combo is simply connected to the "Colour Picker" component from the "Standard Components"
project. In this case, the width of the popup is not altered.

The "Planet" Combo Box uses exactly the same principles. The only difference is that the component it
connects to is a complex list control that actually sorts when you click a column header.




70
Restrictions / Limitations

Although the drop-down will appear during simulation so that you (and whoever you are demonstrating
to) can see all the options, selecting an item from the popup will not change the content of the actual
Combo Box. This is in keeping with all of the other control elements that do not actually work and must
be set up to illustrate a particular scenario in use.

It is possible to show and hide other elements to create changes in the interface as a result of clicking an
option in the popup but, in practice, this usually turns out to be more effort than it's worth. Instead, it
might be better to document your intent with annotations or notes.

In the "Colour" example above, the coloured rectangle obscures the Combo Box. During simulation, this
will block clicks to the underlying Combo Box so you just need to remember to click on the drop-down
arrow button to make the popup appear.



Working with structured menus

Creating a basic top level menu bar is very straight forward but adding cascading pull-down menus
needs a bit of explanation.

The Menu Bar

Start with an Application Window and attach a Menu Bar to it:




Some default, standard menu items are already included on the Menu Bar but you can edit the
properties to change these:






71
TIP: If you are going to add many menu items, type each name into the box and use the Alt+I hotkey to
"Insert" them. This will put the focus back to the input box ready for the next item, keeping your hands on
the keyboard so that you don't have to reach for the mouse.


Pull-Down Menus

The pull-down menus are added to the design separately as "Popup Menus". For convenience, you will
find some common menus already created for you in the "Standard Components" project. Locate and
open the "Common_Menus.gui" file then copy and paste the menus you need. You can then adapt them
as necessary.

Having created your pull-downs, you simply connect the Menu Bar items to them with navigation links.
These will automatically default to the correct "Modal Choice Popup" type. You do not need to create
positioning anchors as the pull-downs will automatically be placed correctly below the menu items when
run in the Simulator, though you can use an anchor to override this if you want:




Cascading Sub-Menus

You create cascading sub-menus in exactly the same way as for pull-down menus off a top-level menu
bar. Create your sub-menus as separate popups and simply connect them from the individual menu
items. You should set the type of the parent menu item to "Popup" so that the arrow appears:



72



Just as with the Menu Bar above, you do not need to create positioning anchors as the sub-menus will
automatically be placed correctly to the side of the menu items when run in the Simulator, though you
can use an anchor to override this if you want.

No limit is imposed on the number of sub-levels you can create since one simply connects to and pops
up the next. However, for the sake of good design, you should limit nesting to no more than 1 or 2
sub-levels.

Note that if you re-arrange the items in the parent menu, they will remain correctly connected. You can
also connect your menu items to any other element if you wish. The type of navigation link will decide
what happens. If you use "Modal Choice Popup" (i.e. for sub-menus) then the previous menus will
remain open until the last one in the chain is closed. If you use "Modal Popup" (e.g. for a dialog box) or
any other type, the menus will close immediately.


Restrictions / Limitations

In a real application, once you have activated a menu system with a mouse click, pull-downs and
sub-menus will automatically appear as soon as you roll the mouse over the associated menu item. In
the GUI Design Studio Simulator, you will need to click the mouse button to make these appear each
time.





Working with tabbed windows

Designing tabbed dialogs and other kinds of dynamic user interfaces that switch between different
windows or panels depending on what you click on can be quite challenging. You need to create each of
the tabbed panels but they all take up the same space on the design.

Fortunately, GUI Design Studio has a mechanism for dealing with this situation that visually indicates
exactly what goes where. The individual panels are added to the same design screen as the tabbed
window. Each tab is then connected to its associated panel with a "Replace Window" navigation link.

That alone will cause the whole window to be replaced when you click a tab. The key to making tabbed
interfaces work is to add a Window Placeholder that is connected to and shared between all of the
panels. This tells the Simulator to replace all of the other panels with the one attached to the tab being
clicked.

The simple example below shows how this is done. It is an adaptation of the "Dialog_Tabbed.gui" design
from the "Standard Components" sample project:



73


Note that the two panels are different sizes. In practice, you will probably make them all the same size as
the placeholder (the box made of dashed lines) but they only need be large enough to hold their content.
The Tab Panel elements contain inherent borders to help create a consistent margin for each one
without the need for a Design Grid in most cases.

A more comprehensive example can be found in the "Design Collection" sample project called
"TabbedDialogExample.gui" but it is essentially the same as this example just with more tabs.


The tabbing concept put to further use

Although both examples are of tabbed dialogs, the same technique can be used in many situations;
whenever you want to click on one of a set of elements (tabs, buttons or anything else) and cause a
panel to change within the interface. The switching elements do not have to be located anywhere near
the panels since it is the Placeholder that determines where they appear.

You can also place tabbed panels within other tabbed panels if required. This is very useful if you are
designing a modal kind of application where practically the whole screen changes when you switch
modes and some of the modes have tabbed elements within them.

Another use for this technique is in creating report-style grids or lists where the rows can be sorted by
clicking on column headers. An example of this can be seen in the "Planets_DropDown.gui" design
document in the "Design Collection" sample project. However, this requires the creation of multiple
pre-sorted lists and probably isn't worth spending time on. In practice, it would be enough to annotate the
design to specify that the column headers cause sorting. This technique has also been superseded in
Version 2 with the introduction of a proper Table element.


Restrictions / Limitations

GUI Design Studio does not currently support the concept of default panels that appear when a window
is made visible. Therefore, when a tabbed dialog appears, for example, although the 'selected' tab will


74
display as selected, the panel content will not be shown until you actually click on the tab. This is not
ideal but easy to explain in a demonstration situation.

One way to get around this problem is to replicate the content of the selected tab on top of the
placeholder. This is especially easy if each tab panel has been created as a separate design component.
The two copies of the content will then remain synchronised when any changes are made. However, this
technique only works if all of the tab content panels are at least as large as the default selected panel.
Otherwise, that panel will show through around the edges when you select a tab with a smaller panel.





75
How to Use Component Designs

Adding component designs

Menu commands: Design | Add Component Design...
Design | Refresh F5
Design | Refresh All Ctrl+F5
File | Save All

Components (also known as Masters) play a key role in getting the best out of GUI Design Studio. By
dragging GUI design documents from the Project panel file tree onto a design, you add them as
components to the design. Alternatively, you can use the "Design | Add Component Design..." menu
command to browse for a GUI design file.

When a component is added, all you see is the representative element (if one has been set) and no
annotations. Most importantly, all of the navigational functionality attached to that element is included.
This means that you can create complex sub-systems and custom controls that you can then include
within other designs just like a standard element.

Components appear as a single entity. The individual elements within a component design are available
for the creation of navigation links. For example, you could create a generic dialog with an "Action"
button that's not connected to anything. You can then include the dialog on another design and connect
up the "Action" button there.

If a button (or other any other element) on a component has some navigation action associated with it,
you can override this behaviour by connecting the button to something else on the containing design.

You can also override the properties of any element within a component design.


IMPORTANT: If you modify the component design, you will need to save it to disk and use the "Design
| Refresh" menu command (F5 key) on the containing design document to see the changes. If the
component has changed size then you may also need to open its "Position" properties and click on the
"Set to Original Size" button. This is normally done automatically but if you have manually resized the
component element to fit a particular space you can set an option on the component element to prevent
this.

TIP: If you are working with a lot of components and constantly modifying them, you might want to get
into the habit of performing "File | Save All" followed by "Design | Refresh All" (Ctrl+F5). Designs are also
automatically refreshed when the Simulator is run.

NOTE: In theory, you could create infinite nesting by including Design1 as a component on Design2 and
Design2 as a component on Design1. However, there are guards in place to stop this causing a
problem.





76
Thumbnail components

If you use the right mouse button to drag and drop a design from the Project panel file tree then this will
produce a thumbnail version of the component such as this example:



This is useful to save space if you are only interested in creating a navigation to the component. This is
typical when using Modal Popup Dialogs or when navigating between Web pages in a Web application
design.

However, thumbnails have restricted functionality. You cannot create navigation links from within a
thumbnail or override their properties. All existing navigations within the component do still function
though.



Opening component designs

Context menu command: Open Component Design

Component designs can be opened directly from the Project panel file tree just like any other design but
quite often you will be working with another design and want to open a component contained within it.

To do this, first select the component then right-click and select "Open Component Design" from the
popup context menu. This applies to all components whether full size or thumbnail.



Overriding component element properties

It is extremely useful to be able to create reusable component designs with generic features that can be
changed when the component is actually used on another design. For example:

1. Highlighting the active Web page on shared navigation bars.
2. Changing the filters and file names on a generic File Open dialog.
3. Changing the text of a generic message or alert box.


You can override the properties of any element within the component, even if the element is within a
further component within the component. This works to any depth. To perform the override you need to
use the "Component Item Selection Mode" button on the Toolbar:



First select the component and then select the element you want to change which is then shown with an
orange border. For example, here's the File Open dialog from the Standard Components sample project:


77



You can then edit any of its properties in the normal way either by double-clicking it, using the "Edit |
Properties..." menu command or the Alt + Enter shortcut key combination. Here's the dialog again after
being modified:




Note that both the file type filter and the file name have been changed. It would have been possible to
add further files to the list but they would not have had icons. Further icons could have been placed on
top of course.



Restoring component overrides

Context menu commands: Restore Component
Restore Component Item

If you override the properties of an element within a component and need to restore them to their original
state, first select the element then right-click and select "Restore Component Item" from the popup
context menu.

You will need to use the "Component Item Selection Mode" button on the Toolbar to select the element:



Alternatively, in any selection mode, you can select the component and use the "Restore Component"
command from the right-click context menu to remove all overrides from the component.


78
How to Create Wireframe Mockups

Wireframe Mockups

Wireframe mockups are (visually) low-fidelity designs that present the essential aspects of a design
without the distraction of visual perfection.

Most of the time you will probably design your screens with a natural, finished look. That doesn't mean
that you will necessarily spend more time than you should when creating a quick prototype, only that the
windows and controls will have roughly the same look as in the final application.

At the conceptual stage of an application design, you may want to start with simple, labelled boxes to get
a feel for the overall layout. The best way to do this is to use layers of Rectangle shapes with Buttons
and textual Hyperlinks for navigation. You can create entire prototypes with this technique. See example
1 below.

Sometimes, when you present your designs for feedback you may find that if it looks too complete or
polished that people are less inclined to provide criticism because they don't want to undo all the work
they think you've done so far. Or they might focus on the wrong aspects of the design such as the
colours or visual appeal instead of the information content, work-flow and other usability aspects.

In some cases, the people you're presenting to may even get the wrong impression and think that the
entire application is almost complete. Of course, that depends on who they are and how you present it.

In any case, it can be useful to create a design that looks nothing like a finished application and cannot
be mistaken for anything other than a mockup. GUI Design Studio provides a quick and easy way to
achieve this using Preferences to transform the look of your design. See example 2 below.



Example 1: Quick Wireframe Layout

Here is a conceptual layout design for a Web site constructed entirely out of Rectangle shapes in about
5 minutes. Margins have been set on some of the shapes to offset the text where necessary.




79
Example 2: Wireframe Transformations Using Preference Settings

Here we have a typical dialog designed using the "Windows XP" Look and Feel with the "XP Green"
colour scheme and standard "Microsoft Sans Serif" Default Font:




Simply by changing the Preferences, we can transform this design into a wireframe mockup with a very
unfinished look. In this case, we have a "Windows Classic" Look and Feel with an "Outline Blue" colour
scheme. The Default Font is set to "Kristen ITC" at 0.9 Scale:






80
Wireframe Preference Settings

Menu command: File | Preferences...

The simplest way to turn any design into a low-fidelity mockup is to change the Preference settings.

Choose one of the "Outline" colour schemes (Charcoal, Blue, Green or Red) so that all of the standard
elements are drawn using simple outlines and solid fills. These work best with the "Windows Classic"
Look and Feel.

You may want to design using a more natural colour scheme and only choose the "Outline" scheme for
presentation of your design in the Simulator:




Then choose a Default Font that has an irregular, 'handwriting' feel to it. If you don't have any actual
handwriting fonts installed then some of the script-based fonts can work quite well though most of them
are too illegible. In that case, go for more of a 'fun' type font.

Not all fonts appear at the same size or are equally legible at the same point size. For example, "Times
Roman" can easily be read at 10 pt but "Jinky" cannot. For that reason, you can scale the Default Font
by between 0.5 and 2 times the normal size. The adjustment is made in real time so you can see the
effect directly on your design as you move the slider:






81
Here are a few fonts that we have found to work quite well along with the suggested scaling factor to use
and our rating for suitability and legibility:

Typeface Scale Rating
AirCut 1.3 !!!
Bradley Hand ITC 1.1 !!!!
Calligraph421 BT 1.1 !!!
Cataneo BT 1.2 !!!
Chiller 1.6 !!!!!
Comic Sans MS 1.0 !!!
Dael Neu 2.0 !!
Freestyle Script 1.7 !!!!
I Hate Comic Sans 1.1 !!!!!
Jinky 2.0 !!
Kristen ITC 0.9 !!!!!
Ninja Penguin 1.8 !!!
One Stroke Script LET 1.5 !!!
Pagoda SF 1.3 !!!!!
Pristina 1.5 !!!
Staccato222 BT 1.4 !!!
Tall Paul 1.8 !!!!
Tempus Sans ITC 1.1 !!!!!
Viner Hand ITC 1.1 !!!






82
How to Create Web Application Designs

Web applications overview

Web applications are becoming increasingly more like rich, thick client, desktop applications and so they
do share many features. However, they tend to differ in the way information is presented and navigated,
often with long pages full of related information rather than having it split across multiple tabbed windows
or panels.

GUI Design Studio has a number of design elements aimed at making Web prototype design faster and
easier. There's also a special "Replace Top Window" navigation type that can be used for page links.
These work well when used with shared navigation components and thumbnails.

In addition, there is a new Browser Mode that changes the way the Simulator presents the design. It
provides a simple browser bar at the top with "Back" and "Forward" buttons and aligns pages at the top
rather than centring them. It also has a different background. Browser mode is triggered automatically if
the main or representative element of your design is a Web Page but you can switch between Browser
and Non-Browser modes at any time.



Using image and text placeholders

Many Web applications are rich in text and image content but it is usual for that content to be unavailable
when designing the application. So instead of using the real content, 'greeked' text and image
placeholders may be used in their place until it becomes available.

Text

There are a few pre-formatted Headings to get you started and a block of greeked text:



NOTE: The greeked text contains a very large block of Latin text. If you only require a small block, it will
be better to delete some of the content as it can otherwise slow down drawing performance because the
whole lot needs to be examined for alignment purposes.




83
Images

The Image Placeholder element has options to allow you to set the text and a background colour if
desired:



You can also set margins that can help to align other elements against the image:


Or you can use the margins to provide a border around the image. Then when you obtain a proper image,
you can snap it into place on top of the Placeholder and have a ready-made frame, as shown below:







84
Creating Web headers and footers

A typical Web site or Web application will have common elements on every page such as headers and
footers. These usually contain link elements to navigate between pages.

In GUI Design Studio, you can create shared component designs for each of these and add them to
every page as required. For page-level navigations, use the "Replace Top Window" navigation type.
This will replace the current page with the target page. To save space, use thumbnail versions of the
target page designs by using the right mouse button to drag and drop them from the Project panel file
tree onto the shared design.

Here is an example Header that uses Web Tabs as navigational elements and also a Text Link List in the
top-right corner:



You can just about see from the picture that each of the four target pages include the Header itself as a
component at the top of the page and also a common Footer component at the bottom. This does
generate a cyclical reference to infinity but it's handled as a special case and is not a problem.

However, what you might find to be a problem is that the number of contained references dramatically
increases if you include more than one shared component that links to the same page. Although it is
handled well, it will slow down loading of the designs (though it shouldn't affect the Simulation
performance).

TIP: Therefore, if you have a Header and Footer (say) that both contain links to a particular page then it's
better to just hook up one of them such as the main link on the Header. This will speed up design
loading.


Active Page Indicators

What you may not be able to see in the very small thumbnails above is that each of the pages overrides
properties on the Header component to indicate the current page. Here is the top of the "Home" page
where the "Home" tab has been modified:




85


In general, you will want to design your shared page elements so that the containing pages can modify
them as necessary for the particular page they are on.



Creating dynamic content

Dynamic content on Web pages applies to changing small sections of a page rather than the whole page
in response to clicking links or other events.

How you achieve this in GUI Design Studio might depend on the type of effect and how much of the
page will change. If you need to make large changes then the use of component masters and the fact
that pages will load much faster in the Simulator than on a real Web site mean that it might be easier to
replace the whole page using "Replace Top Window" (which also supports Back and Forward
navigation).

For smaller changes, create tiny Web Page panels for each of the different states and connect them
using a combination of "Show Window", "Hide Window", "Toggle Window" and "Replace Window"
navigation types.

The only real restriction is that the layout of the underlying page cannot change so if a panel is meant to
expand, for example, you cannot push all of the elements below it down to make room and make the
page longer. Instead, you will either need to provide space for the expanded version and accept that, for
prototyping purposes, there may be gaps between panels and elements, or create versions of the entire
page content for each panel in its expanded and contracted state. The latter approach may look more
realistic but it doesn't allow for multiple panels to expand and contract independently without getting
unmanageable.

Where the page layout does not need to change, you can easily create a whole host of dynamic effects
by changing panels, including the use of "Mouse Over" events.



Rollover Effects

Although they are common within Web applications, rollover effects can be applied in any application
design.

GUI Design Studio provides three different event triggers for rollovers:
! Mouse Enter
! Mouse Leave
! Mouse Over



86
The example below is taken from the "Simple Web Site" sample application. Each of the navigations
attached to the Thumbnail images uses a Mouse Enter event trigger to "Replace" the main product
image when the mouse enters the thumbnail:




Mouse Over events perform the same navigation when the mouse enters and leaves the activation area.
It's equivalent to hooking up both Mouse Enter and Mouse Leave events to the same navigation. This
is most commonly used with the "Toggle Window" navigation to make a window or panel appear only for
the duration that the mouse is over the activation area.

This example shows how a popup "Business Card" can be made to appear as the mouse hovers over
"Person B" within the tree of a Contacts application:






87
Note that a positioning Anchor is used to place the popup and a Navigation Overlay is being used for the
activation area because Tree elements don't naturally allow navigations from elements (in the current
version).



Back and Forward navigation support

Web browsers maintain a navigation history while you move from one Web page to another and offer
"Back" and "Forward" commands so that you can go back and forth across the pages you've visited.

GUI Design Studio supports this feature to a limited extent so that your Web applications can behave in
a similar way during simulation.

The "Replace Top Window" navigation type maintains a navigation history. Other navigation types can
be used to make local on-page changes for dynamic Web pages but these do not affect the history.

In Browser mode, the Simulator provides "Back" and "Forward" buttons for navigating between pages
traversed using "Replace Top Window" in a similar way to a real Web browser. These commands are
also available through the right-click context menu and by using the Alt + Left Arrow and Alt + Right
Arrow keyboard shortcuts.

In your designs, you might want to allow navigation to the previous (top-level) page without creating an
explicit link to that page. This is especially useful if the previous page is not known. You can do this by
hooking up the "Back" navigation box from the Storyboard panel:




The "Forward" box is not likely to be useful for page navigation within a design but can be used to
incorporate a Web browser application into your design.

For example, if you really wanted the simulation to look like it was being run within a particular browser,
use a screenshot of the header of the browser application on a Master component design that you use
for every page and use Navigation Overlays on the "Back" and "Forward" buttons to hook up the
commands:




However, this is probably not worth doing in practice!





88
How to Share Designs

Distributing design files

One way to let other people see your designs is to send them all of the individual files concerned,
including project files (.gdp), design files (.gui), image files (.bmp/.gif/.jpeg/.png) and icons (.ico). They
can then view the project using GUI Design Studio or the free Viewer program.

When you include a component design, image file or icon on a design, GUI Design Studio stores a
reference to that file rather than embedding the entire thing. These references are stored using a relative
path if the file is within the same project. If it is within the install folder then an application relative path is
stored. Otherwise, a full path is stored.

This means that you can move the whole project to another location while keeping referential integrity to
other project files and standard components within the install folder. Absolute paths are also maintained
if copied or moved on the same machine.

However, if you are sending your designs to someone else or copying them to another machine, you
must ensure that any files (usually images) that are external to the project, and therefore stored with
absolute full paths, are also copied across into the same folder structure as the original. Otherwise those
elements will not be found and will appear in the designs as black boxes covered with red hashed lines:




One way to avoid this problem is to ensure that you keep all of the required files within the project folder
structure. You can copy or move them using Windows Explorer or another file management program.

TIP: If you are going to put all of the files into a ZIP or equivalent archive file for sending then make sure
that you set the compression options to store the relative paths so that the project folder structure is
maintained when the file is expanded.


Distributing all of the individual files is a good option if you want the recipient to be able to edit the files
and send back modifications or even to use your designs as templates or examples. If you are working
as a team on the same project then you might want to consider alternative team sharing approaches.

If the person you are sending your designs to only needs to view the designs and not edit them then a
much better approach is to create a single distribution file to send them. This will automatically contain
everything they need to see your complete design within the free Viewer application or within GUI
Design Studio.





89
Creating a distribution file

Menu command: File | Create Distribution File...

If you need to send a design to someone for review and they don't need to edit the design then the best
method by far is to create a Distribution File using the "File | Create Distribution File..." menu command.
This single file can be emailed and opened in the free Viewer.



Select whether you want to include all project files, only files within the selected folder in the Project file
tree or just the currently active design file. In all cases, any referenced file will automatically be included
no matter where it is stored so you can be sure that the recipient has everything they need to view your
design.

You can choose to make the Simulator automatically run when the distribution file is opened and also to
close the Viewer afterwards. This means that double-clicking the file in Windows Explorer will run the
design as if it were a standalone application.



Designing within a team

What we mean here about designing within a team is working with multiple designers on the same
project as opposed to working as the sole designer within a project development team. This introduces
challenges when more than one person wants to edit the same file.

There are a few ways to deal with this:

1. Place the project files on a shared network drive. Each designer then works directly with the same
copy. Any changes are seen by everyone whenever a design refresh or file tree refresh is performed.
This may or may not be a good thing. This simple technique works well with small teams on a local
area network (LAN) but file access across the LAN may cause performance issues. All image files
must also be kept within the project or on shared network drives that everyone can access using the
same drive letter or path name.

2. Keep local copies of project files and synchronise them. Each designer in the team works on an
independent copy and occasionally or frequently synchronises their files with other team members or
a centrally stored copy. This can be done manually or using an automatic file synchronisation
program. This technique also works for small teams, especially when they are widely distributed but
can involve a lot of effort if files are synchronised manually.



90
3. Use a version control system. Each designer works with a local copy and synchronises with a
version stored within a central repository. Unlike option 2, this technique uses special version control
systems that are typically used within software development teams. Some enforce a locking
mechanism that prevents two people from editing the same file at the same time. Others allow
simultaneous editing and merge changes. Most have facilities for working with remote team members
and all maintain a history of all changes made. This is the preferred solution, especially with larger
teams, but it does involve specialist software that needs to be set up and configured. GUI Design
Studio design files are optimised for version control.


In all cases, try to avoid having more than one designer in a team working on the same part of a project
to minimise change conflicts.





91
How to Create Specification Documentation

Describing your design

In addition to adding Annotation elements to your design, the Notes panel provides an area for you to
enter a formatted text description for the active design document and the selected element.

For example, you might want to:

! create a specification for the design before starting
! create a description of the design as a whole
! describe the purpose of every control element
! list functionality that needs to be provided
! maintain a simple to-do list for the design
! jot down anything that comes to mind while working on the design


The notes are associated (and stored) with each individual design document. If you duplicate a design
document then the notes are also copied into the new document.

All notes are included within the generated specification documentation.


ID Fields

If you are following a rigorous design methodology then you can enter a unique ID for each design
and/or element, as required, to use as a cross-reference with other requirements documents or for any
purpose you need.


Element Labels

A label may be entered for each element as a short description of what that element represents. Often,
this will match an associated text prompt on the design if it has one.

Many elements, such as Frame Windows and Buttons, contain text that will be used as an implicit label
if no explicit label is provided. Some elements, such as Edit Boxes and Combo Boxes, contain text but
these are not normally useful for describing the element itself and are therefore not used as implicit
labels.

When no label has been provided and no implicit label can be formed, the element's type is used as a
generic label in generated documentation. It is therefore a good idea to enter labels wherever possible.


Popup Annotations

Any element that contains descriptive notes (not just a label or ID) will be indicated with an annotation
marker in its top-right corner:



When you generate documentation, the "#" symbols are replaced with a numerical sequence keyed to
table entries containing the descriptive text.



92
When you hover over an annotation marker, a popup tool-tip will appear to show the element label, ID (if
it has one) and description:




Note that the annotation markers can be turned off along with other annotations for a clearer view of your
design by using the "View | Annotations" menu command or F8 shortcut key.

There is a separate command to show or hide these during simulation in the Simulator menu and in the
Simulator Options dialog ("Simulator | Simulator Options..." menu command):








93
Generating the documentation

Menu command: File | Generate Documentation...

To generate user interface specification documentation for your project, use the "File | Generate
Documentation..." menu command to open the generator dialog:



Output Type

Select the type of documentation you want to create from the Output Format drop down list. This
currently includes HTML, RTF and PDF documentation. Each type has its own set of options to
customise the way the documentation is generated. Further customisation is possible with some format
types using template files.

Most of the documentation content will come from your designs and associated notes and will therefore
be in whatever language you used to type them in. However, the documentation generators use
additional text for section and table headings (such as "Description"). Select an appropriate Output
Language to have the translated in the generated documentation.

If your language is not available or if you find errors in the translated text then please contact us at
support@carettasoftware.com.


Inclusion

Select whether you want to include all project files, only files within the selected folder in the Project file
tree or just the currently active design file.

When generating documentation for the active design file only, you also have the option to include all of
the component design files that it uses and the files that they use, etc. This option produces complete


94
documentation for the chosen design file. Note that any update date range only applies to the selected
design file. It does not apply to the component files.

The Output File or Folder (as appropriate for the selected Output Format) will be suggested
automatically but you can edit this field to whatever you like. In some cases, you might also want to add
a Date and Time suffix to maintain each generated copy separately or remove spaces from the name if
posting it on the Internet or an Intranet for example.


Full or Update Documentation

The first time you generate documentation, and at appropriate intervals, you will want to generate full
documentation. This will include all designs within the project or folder, or the current design according
to the selected Include option.

For large projects, this can take several minutes to generate.

You also have the option of creating incremental update documentation. In this case, the generator will
only consider design files that have been modified within the specified date and time range. The most
common option here is to generate documentation only for files that have been modified since the last
full or update documentation was generated and there are some handy buttons to set the dates and
times accordingly.

Not only is this faster, it results in smaller files (in the case of single file generators such as RTF and PDF)
that only contain the changes, making it easy to highlight what is different since the last set of designs
were examined. You can use this, for example, to see what designs were changed during a specific
week or day.

If the update range means that there is nothing to generate then you will be notified and no
documentation will be generated.

NOTE: When generating HTML update documentation, if you specify the same path as existing (full)
documentation, the updated pages will overwrite the existing, older pages. The previous index file will be
copied to a new file and the newly generated index file will contain a link to the previous copy so that all
pages will still be accessible. Remember though, that although you can navigate back to the previous
index file, the pages it links to will be the new, updated documentation and not the old documentation!


Documentation Structure

Generally speaking, a Heading 1 section (for RTF and PDF documentation) or page (for HTML
documentation) is created for each design document. This contains an image of the design as a whole
and any associated description and appropriate annotations.

If the design contains multiple screens then a further Heading 2 sub-section or page is created for each
screen containing the description for that screen element, annotations, elements and navigation actions.

If there is only one screen on the design with no additional documentation to generate then its
description and certain other properties are merged into the overall design section or page to avoid
redundancy wherever possible.


Output Sort Order

All the designs within a folder are output before any sub-folders are processed. Designs within a folder
are generally sorted in ascending order of (file) Name.

You may also choose to sort first by the ID assigned to each design. This allows you to more carefully
control the order of output. In this case, designs with an assigned ID will come before those with no ID.


95
Designs within the same folder that have been assigned the same ID and those without an ID will appear
in ascending Name order.



Customising RTF and PDF documentation

The RTF and PDF generators are based on the same documentation engine so have the same options:




The generated documentation is based on the selected Template File. All RTF files found in the
following location will appear in the list so you can create your own templates to include corporate logos,
copyright notices or other items:

{install_folder_where_EXE_is_located}\Features\DocGenRTF\Templates\


Section headers are numbered but you have the option of adding a Heading Prefix such as another
number (e.g. "3.") in case you intend to incorporate the specification into another larger requirements
document.

The Options should be fairly self explanatory except perhaps Include blank property entries. Some
output sections list certain properties within a table. These properties vary depending on the section and
are reserved for future expansion. Check this option to see all available properties even if they have no
assigned values.


Page Numbering

Although it is possible to use macros to insert page numbering within the Header or Footer, you will get
better results in most cases by adding page numbering to the header or footer of the template RTF file.
See the Default.rtf file for an example.


Macros

The following macros can be used within the RTF Template File and within the Header or Footer:



96

%%APPNAME%%
The name of the application generating the documentation (i.e.
GUI Design Studio). This can be used if you want to insert a
message such as "Documentation generated by GUI Design
Studio".

%%APPVERSION%%
The version of GUI Design Studio used to generate the
documentation.

%%APPWEBURL%%
The Web site URL associated with GUI Design Studio.

%%FILENAME%%
The name of the RTF or PDF file being generated including just the
name and extension but not the full path.

%%GEN_LONG_DATE%%
The date of generation in long format according to current
Windows regional settings, for example "20 September 2007".

%%GEN_SHORT_DATE%%
The date of generation in short format according to current
Windows regional settings, for example "20/09/2007".

%%GEN_TIME%%
The time of generation according to current Windows regional
settings, for example "10:45:29".

%%GUIDESIGN%%
Place this macro within the template where you want to insert the
generated documentation. This macro must not be used within the
Header or Footer.

%%PAGENUM%%
Use this in the options Header or Footer section to insert the
current page number. Note that a better technique is to use the
native RTF page numbering mechanism within the template file's
header or footer.

%%PAGES%%
Use this in the options Header or Footer section to insert a count of
the total number of pages. Note that a better technique is to use the
native RTF page count mechanism within the template file's header
or footer.

%%PATHNAME%%
The full path name of the RTF or PDF file being generated.

%%PROJECT%%
The name of the project for which documentation is being
generated. You will typically include this on a title page within the
template file and also in the Header or Footer if desired.

%%TOC%%
Insert this into the template file where you want a table of contents
to appear. Note that this does not include a "Contents" heading.
You should add that to the template in whatever style you want.

%%UPDATEINFO%%
If this is update documentation being generated then this macro
will contain the date range being included. For full documentation,
this will be blank.

%%UPDATETITLE%%
If this is update documentation being generated then this macro
will contain the text "UPDATED", translated into the selected
output language. For full documentation, this will be blank.

%%YEAR%%
The current year, e.g. "2007". This is useful for inserting into
copyright notices: "Copyright (C) %%YEAR%%".










97
Customising HTML documentation

The options for the HTML documentation generator allow you to change the size of generated images
and control some of the included content:



Customisation

Most of the customisation facilities are provided by the use of template files and macros contained within
them. Major sections of content can be included or excluded by including or excluding the appropriate
macros in or from the appropriate template files.

Stylesheets are used to customise the presentation.

The template scheme is extremely flexible and simple default templates are provided for documentation
with or without using frames. Framed output lets you keep one panel in the browser open with the tree of
pages while another panel displays the design documentation. In contrast, frame-less output can
contain more summary information for each design file link but you need to click back to the index file to
view a different design.

Use the default templates provided as a basis for your own templates while keeping the following points
in mind:

1. All images, such as company logos, should be placed within an "images" sub-folder. This is
where generated images will be created and where the %%IMAGE_PATH%% macro will point to.
Although you could place them elsewhere, you will need to add the appropriate relative path to
the templates yourself.

2. The target frame for design documentation links generated by the %%PAGETREE%% macro is
"designfile" so if you create your own frame-based templates, be sure to name the target frame
correctly.

3. The 3 template files that must be provided are:
index.html
_designfile.html
_screen.html


98

The file extension does not actually need to be .html so you are free to create .shtml, .php, .aspx
or other templates if you desire.

4. All sub-folders contained within the template folder and all their content are copied to the Output
Folder. So are all additional files within the template folder except for stylesheets (.css files) and
files starting with an underscore. This means that you can include whatever additional files you
like to support your templates (such as scripts) and structure them however you want.

5. With support for JavaScript, PHP and ASP.NET templates, you could, with the right skills, create
documentation that includes feedback forms on each design, for example.



Content Macros

The following macros can be used within any of the HTML template files:


%%ACTIONS%%
Inserts an actions table including all of the navigation events within
the current screen. Use this macro in the "_screen" template file.

%%ANNOTATIONS%%
Inserts an annotations section including the appropriate visible
annotations on the current design or screen. Use this macro in the
"_designfile" and "_screen" template files.

%%APPNAME%%
The name of the application generating the documentation (i.e.
GUI Design Studio). This can be used if you want to insert a
message such as "Documentation generated by GUI Design
Studio".

%%APPVERSION%%
The version of GUI Design Studio used to generate the
documentation.

%%APPWEBURL%%
The Web site URL associated with GUI Design Studio.

%%ATTRIBUTES%%
Inserts a table of attributes for the current page including project
information.

%%CSS%%
The name of the CSS stylesheet file suitable for use in the href
setting.

%%ELEMENTS%%
Inserts a table containing all of the elements within the current
screen or, according to the options, just the elements that have
associated documentation notes. Use this macro only within the
"_screen" template file.

%%GEN_LONG_DATE%%
The date this generation started in long format according to current
Windows regional settings, for example "20 September 2007".

%%GEN_SHORT_DATE%%
The date this generation started in short format according to
current Windows regional settings, for example "20/09/2007".

%%GEN_TIME%%
The time this generation started according to current Windows
regional settings, for example "10:45:29".

%%IMAGE%%
Inserts an image representing the current design file or screen.
Use this macro in the "_designfile" and "_screen" template files.

%%IMAGE_FNAME%%
The file name of the image file representing the current design file
or screen relative to the page file. This macro is less useful than
%%IMAGE%% but can be used in the "_designfile" and "_screen"
template files.

%%IMAGE_PATH%%
The relative path of all image files for the current page. This is
useful for adding additional images such as company logos. Use
this macro in any template file.


99

%%LONG_DATE%%
The date of generation of the current page in long format according
to current Windows regional settings, for example "20 September
2007".

%%NAME%%
The name of the current design file or screen. Use this within a top
level heading for the "_designfile" and "_screen" templates.

%%NOTES%%
Inserts the descriptive notes for the current design file or screen.
Use this macro in the "_designfile" and "_screen" template files.

%%PAGES%%
Inserts a table containing every design file that has been generated
along with a shortened description if available. Use this in the index
file of a frame-less template.

%%PAGETREE%%
Inserts a tree of every design file that has been generated using
nested lists. Use this in the index file of a frame-less template or
within an appropriate framed template file.

%%PROJECT%%
The name of the project for which documentation is being
generated. You will typically include this on a title page within the
template file and also in the Header or Footer if desired.

%%SCREENS%%
Inserts a table containing links to the screens for the current design
file. Use this macro only within the "_designfile" template file.

%%SHORT_DATE%%
The date of generation of the current page in short format
according to current Windows regional settings, for example
"20/09/2007".

%%TIME%%
The time of generation of the current page according to current
Windows regional settings, for example "10:45:29".

%%TITLE%%
The title of the current page. Use this macro within the HTML title
tag in the page header.

%%YEAR%%
The current year, e.g. "2007". This is useful for inserting into
copyright notices: "Copyright (C) %%YEAR%%".





Stylesheets

The beauty of HTML documentation is that the presentation can be altered to a certain extent by
changing the CSS stylesheet. Each template can provide a number of alternative stylesheets to choose
from.

Use the supplied "styles.css" file as a basis for your own stylesheets. If you need help understanding
where each style is applied the please contact support at: support@carettasoftware.com





100


101
Index

A
Adding annotations, 54
Adding bitmap images to designs, 45
Adding component designs, 75
Adding component thumbnails, 76
Adding elements, 28
Adding icons to designs, 48
Adding links to folders, 24
Adding links to projects, 23
Adding message boxes, 66
Adding navigation links, 60
Adding scenario condition boxes, 67
Aligning elements, 35
Anchors, 64
Annotation markers, 91
Annotation tool-tips, 91
Annotations, 16, 54, 55, 56
Annotations\:Adding, 54
Annotations\:Deleting, 55
Annotations\:Hiding, 56
Annotations\:Overview, 54
Annotations\:Showing, 56
Annotations\:The Annotations panel, 16
B
Back navigation, 87
Bitmaps, 45, 46
Bitmaps\:Adding to a design, 45
Bitmaps\:Cropping, 45
Bitmaps\:Grabbing screenshots, 46
Bitmaps\:Pasting to a file, 46
Bitmaps\:Resizing, 45
Bitmaps\:Restoring original dimensions, 46
Browser mode simulation, 82
C
Capturing screenshots, 46
Changing fonts, 42
Choosing an icon editor, 49
Clearing the main project design, 60
Clearing the representative element, 58
Closing windows in the simulator, 65
Colour schemes, 27
Colour schemes\:Customising, 27
Combo boxes, 69
Component item selection mode, 76, 77
Components, 75, 76, 77
Components\:Adding, 75
Components\:Opening, 76
Components\:Overriding properties, 76
Components\:Restoring properties, 77
Components\:Thumbnails, 76
Condition boxes, 67
Copying design documents, 31
Creating design documents, 26
Creating folders, 22
Creating icons, 50
Creating projects, 21
Creating storyboard documents, 58
Cropping bitmap images, 45
Custom colour schemes, 27
Customising HTML documentation, 97
Customising PDF documentation, 95
Customising RTF documentation, 95
D
Default font, 44
Default representative element, 58
Deleting annotations, 55
Deleting design documents, 32
Deleting elements, 29
Deleting folders, 22
Deleting navigation links, 61
Design Bar, 13, 14, 15, 16, 17, 18
Design Bar\:The Annotations panel, 16
Design Bar\:The Elements panel, 14
Design Bar\:The Icons panel, 15
Design Bar\:The Notes panel, 18
Design Bar\:The Project panel, 13
Design Bar\:The Storyboard panel, 17
Design grids, 39
Design notes, 91
Designing within a team, 89
Designs, 26, 30, 31, 32, 45, 48, 60, 66, 67, 69, 70, 72, 75,
76, 77, 88, 89, 91
Designs\:Adding bitmap images, 45
Designs\:Adding icons, 48
Designs\:Clearing main project design, 60
Designs\:Combo boxes, 69
Designs\:Component properties, 76, 77
Designs\:Component thumbnails, 76
Designs\:Components, 75, 76
Designs\:Condition boxes, 67
Designs\:Creating, 26
Designs\:Deleting, 32
Designs\:Distribution, 88, 89
Designs\:Duplicating, 31
Designs\:Embedding, 75, 76
Designs\:Exporting, 30
Designs\:Main project design, 60
Designs\:Menus, 70
Designs\:Message boxes, 66
Designs\:Notes, 91
Designs\:Opening, 26
Designs\:Printing, 30
Designs\:Refreshing, 75
Designs\:Representative design, 60
Designs\:Scenarios, 67
Designs\:Sharing, 88, 89
Designs\:Tabbed windows, 72
Distributing designs, 88, 89
Distributing designs\:Distribution files, 89
Distributing designs\:Individual files, 88
Distributing individual files, 88
Distribution files, 89
Documentation, 93, 95, 97
Documentation\:Generation, 93
Documentation\:HTML documentation, 93
Documentation\:HTML options and customisation, 97
Documentation\:Output language, 93
Documentation\:Output sort order, 93
Documentation\:PDF documentation, 93
Documentation\:PDF options and customisation, 95


102
Documentation\:RTF documentation, 93
Documentation\:RTF options and customisation, 95
Documents, 26, 30, 31, 32, 91
Documents\:Creating, 26
Documents\:Deleting, 32
Documents\:Duplicating, 31
Documents\:Exporting, 30
Documents\:Notes, 91
Documents\:Opening, 26
Documents\:Printing, 30
Duplicating design documents, 31
Dynamic content, 85
E
Edge snapping, 34
Editing icons, 51
Elements, 14, 28, 29, 33, 34, 35, 36, 39, 42, 58, 64, 69, 70,
72
Elements\:Adding, 28
Elements\:Alignment, 35
Elements\:Combo boxes, 69
Elements\:Deleting, 29
Elements\:Design grids, 39
Elements\:Edge snapping, 34
Elements\:Fonts, 42
Elements\:Make same size, 36
Elements\:Menus, 70
Elements\:Moving, 33
Elements\:Positioning in the Simulator, 64
Elements\:Primary selection, 28
Elements\:Properties, 29
Elements\:Representative, 58
Elements\:Resizing, 33
Elements\:Secondary selections, 28
Elements\:Selecting, 28
Elements\:Tabbed windows, 72
Elements\:The Elements panel, 14
Embedding component designs, 75, 76
Error condition handling, 67
Event triggers, 62
Exporting design documents, 30
F
File Tree, 13, 25
File Tree\:Refreshing, 25
Folders, 22, 24
Folders\:Adding links, 24
Folders\:Creating, 22
Folders\:Deleting, 22
Folders\:Referencing, 24
Fonts, 42, 44, 80
Fonts\:Default font, 44
Fonts\:Preferences, 44
Fonts\:Wireframe mockups, 80
Forward navigation, 87
Full documentation, 94
G
Generating documentation, 93
Grabbing screenshots, 46
Greeked text, 82
Grid snapping, 34, 39
H
Handling error conditions, 67
Hide Window, 62
Hiding annotations, 56
How to create combo boxes, 69
How to create menus, 70
How to create tabbed windows, 72
HTML documentation, 93
HTML documentation macros, 98
HTML documentation options, 97
I
Icon editor, 49
Icon editor\:Choosing, 49
Icons, 15, 48, 49, 50, 51, 52
Icons\:Adding to a design, 48
Icons\:Choosing an editor, 49
Icons\:Creating, 50
Icons\:Deleting, 52
Icons\:Editing, 51
Icons\:Importing, 48
Icons\:Resizing, 48
Icons\:The Icons panel, 15
Image placeholders, 82
Images, 45, 46
Images\:Adding to a design, 45
Images\:Cropping, 45
Images\:Grabbing screenshots, 46
Images\:Pasting to a file, 46
Images\:Resizing, 45
Images\:Restoring original dimensions, 46
Importing icons, 48
Interactive capabilities, 57
Interactive zooming, 20
International languages, 42
L
Language support, 42
Library projects, 23
Limitations, 69, 70, 72
Look and feel, 27
M
Main project design, 60
Making notes, 91
Menus in your designs, 70
Message boxes, 66
Missing elements in a design, 88
Mockups, 78, 80
Mockups\:Examples, 78
Mockups\:Fonts, 80
Mockups\:Preferences, 80
Mockups\:Wireframe, 78
Modal Choice Popup, 62
Modal Popup, 62
Mouse controls, 20
Mouse enter, 85
Mouse leave, 85
Mouse over, 85
Mouse over effects, 85
Moving elements, 33


103
N
Navigation history, 87
Navigation link, 64
Navigation links, 60, 61, 62, 65
Navigation links\:Adding, 60
Navigation links\:Deleting, 61
Navigation links\:From bitmaps, 65
Navigation links\:From list box and tree items, 65
Navigation links\:Overlays, 65
Navigation links\:Properties, 62
Navigation links\:Trigger events, 62
Navigation links\:Types, 62
Navigation overlays, 65
Non-browser mode simulation, 82
Notes, 18, 91
Notes\:The Notes panel, 18
O
Opening component designs, 76
Opening design documents, 26
Opening projects, 21
Other projects, 23
Output language, 93
Output order for documentation, 93
Overriding component properties, 76
Overriding navigation behaviour, 65
P
Panels, 13, 14, 15, 16, 17, 18
Panels\:The Annotations panel, 16
Panels\:The Elements panel, 14
Panels\:The Icons panel, 15
Panels\:The Notes panel, 18
Panels\:The Project panel, 13
Panels\:The Storyboard panel, 17
Panning, 20
PDF documentation, 93
PDF documentation macros, 95
PDF documentation options, 95
Placeholders, 64, 82
Placeholders\:Greeked text, 82
Placeholders\:Images, 82
Popup annotations, 91
Positioning windows in the simulator, 64
Primary selected element, 28
Printing design documents, 30
Projects, 13, 21, 22, 23, 24
Projects\:Adding links, 23, 24
Projects\:Creating, 21
Projects\:Creating folders, 22
Projects\:Deleting folders, 22
Projects\:Libraries, 23
Projects\:Opening, 21
Projects\:Overview, 21
Projects\:Referencing others, 23
Projects\:Saving changes, 21
Projects\:Structuring, 22
Projects\:The Project panel, 13
Property editing, 29
Prototyping, 57
R
Red hashed boxes, 88
Reference projects, 23
Refreshing Designs, 75
Refreshing file tree, 25
Replace Top Window, 62, 87
Replace Window, 62
Representative design, 60
Representative elements, 58
Resizing bitmap images, 45
Resizing elements, 33
Restoring component properties, 77
Restoring image dimensions, 46
Restrictions, 69, 70, 72
Right to left layouts, 42
Rollover effects, 85
RTF documentation, 93
RTF documentation macros, 95
RTF documentation options, 95
S
Same size, 36
Scenarios, 67
Screen capture, 46
Screenshots, 46
Screenshots\:Grabbing and using, 46
Screenshots\:Pasting images to a file, 46
Secondary selected elements, 28
Selecting a representative element, 58
Selecting elements, 28
Setting the main project design, 60
Sharing designs, 88, 89
Sharing designs\:Distributing individual files, 88
Sharing designs\:Distribution files, 89
Show Window, 62
Showing annotations, 56
Simulation, 82
Simulation\:Browser mode, 82
Simulation\:Non-browser mode, 82
Simulator, 57, 58, 60, 64, 65, 66, 67
Simulator\:Closing windows, 65
Simulator\:Condition boxes, 67
Simulator\:Interactive capabilities, 57
Simulator\:Message boxes, 66
Simulator\:Positioning windows and elements, 64
Simulator\:Running, 57
Simulator\:Scenarios, 67
Simulator\:Starting design, 60
Simulator\:Stopping, 58
Snapping, 34
Sort order for documentation, 93
Specification documentation, 93
Storyboard panel, 64, 65
Storyboard panel\:Close and Accept box, 65
Storyboard panel\:Close and Cancel box, 65
Storyboard panel\:Close box, 65
Storyboard panel\:Exit box, 65
Storyboard panel\:Navigation overlays, 65
Storyboard panel\:Window placeholders, 64
Storyboard panel\:Window position anchors, 64
Storyboarding, 17
Storyboarding\:The Storyboard panel, 17
Storyboards, 58
Storyboards\:Creating, 58
Structuring projects, 22


104
T
Tabbed windows, 72
Teams of designers, 89
Text fonts, 42
Toggle Window, 62
U
Update documentation, 94
Use default representative element, 58
Using design grids, 39
V
View, 20
View\:Panning, 20
View\:Zooming, 20
Visual style, 27
W
Web applications, 82, 84, 85
Web applications\:Active page indicators, 84
Web applications\:Dynamic content, 85
Web applications\:Headers and footers, 84
Web applications\:Shared components, 84
Web headers and footers, 84
Windows, 64, 65
Windows\:Closing in the Simulator, 65
Windows\:Positioning in the Simulator, 64
Wireframe, 78, 80
Wireframe\:Examples, 78
Wireframe\:Fonts, 80
Wireframe\:Mockups, 78, 80
Wireframe\:Preferences, 80
Working with combo boxes, 69
Working with menus, 70
Working with tabbed windows, 72
Z
Zooming, 20