Justinmind Prototyper Userguide

User Guide
Justimind Prototyper User Guide
Table of Contents
Introduction................................................................................................................................... 4
Prototyping Environment ............................................................................................................. 5
Getting Started............................................................................................................................. 6
Drawing Screens....................................................................................................................... 7
Your First Interactive Protoype.................................................................................................. 8
Annotations............................................................................................................................... 8
Publish Online........................................................................................................................... 8
Creating Prototypes.................................................................................................................... 10
Workspace.............................................................................................................................. 10
Adding Content to Screens..................................................................................................... 30
Arranging Widgets.................................................................................................................. 30
Guides and Grid...................................................................................................................... 32
Widgets...................................................................................................................................... 34
Static widgets.......................................................................................................................... 34
Shapes.................................................................................................................................... 37
Input widgets........................................................................................................................... 39
Selection widgets.................................................................................................................... 42
Navigation widgets.................................................................................................................. 45
Data Grids............................................................................................................................... 49
Web widgets........................................................................................................................... 51
Styles and Formatting................................................................................................................. 53
Formatting............................................................................................................................... 53
Default Styles.......................................................................................................................... 57
Copy Styles............................................................................................................................. 58
Events and Interactions.............................................................................................................. 59
Events Panel........................................................................................................................... 59
Links....................................................................................................................................... 62
Interactive images................................................................................................................... 63
User Events............................................................................................................................ 64
Actions.................................................................................................................................... 65
Simulated rules and conditions............................................................................................... 77
Data Simulation.......................................................................................................................... 79
Importing Real Data................................................................................................................ 79
Expression Builder Overview.................................................................................................. 80
Smartphones and SAP............................................................................................................. 106
Reuse....................................................................................................................................... 106
Templates............................................................................................................................. 106
Masters................................................................................................................................. 109
Custom widget libraries......................................................................................................... 111
Import and Export Prototypes...............................................................................................113
Publish Online.......................................................................................................................... 115
Export to HTML........................................................................................................................ 117
Include/Exclude comments................................................................................................... 117
Optimize code....................................................................................................................... 117
Scenarios.................................................................................................................................. 118
Creating Scenarios............................................................................................................... 118
Validating Prototypes............................................................................................................ 119
Keyboard Shortcuts.................................................................................................................. 120
Additional Help......................................................................................................................... 124
Introduction
Justinmind Prototyper is a quick prototyping tool that allows you to create interactive and
accurate simulations of the applications you need. With Justinmind Prototyper, you can easily
incorporate any corporate image to your prototypes, export them in HTML format to
demonstrate them on-line or automatically generate all of the documentation in an Open Office
or MS Word file. And without requiring programming knowledge or a single line of code.
No Programming. Justinmind Prototyper is an intuitive tool. All thats required is to

drag the components or interactions you need from the palettes to the work area.
Instantaneous Simulations. With one click on the Simulate button, you will see the
prototype of your application in action. No waiting.
Documentation automatically generated. If you wish, your prototype comes with all
the necessary documentation; Justinmind Prototyper generates this documentation for
you; you only have to decide which format you want.
Exportable in HTML format. Without any effort, so that your customers or users can
see how it works on-line and give their opinion. Use it right from the beginning of your
projects for total assurance, saving you rework costs and any inconvenience to your
customers, and allowing you to create applications with easy usability.
Moreover, if you publish your prototypes in Justinmind Usernote, your customers can share
their remarks on-line in a collaborative effort. Follow their comments as if they were
conversation threads in a forum, and take advantage of their feedback; if you do it on a
prototype, you wont have to do it later on the application. Remember that Justinmind
Usernote integrates the leading online testing tools on the market.
Prototyping Environment
Getting Started
There are a few concepts the user must be familiar with in order to fully understand this user's
guide, so before proceeding any further we'd like to clarify the terms.
Key concepts
A prototype is a representation of a software program that includes only a few aspects of the
eventual application and resembles it up to some degree and whose purpose is to illustrate how
that application is to look and behave to get an impression of its capabilities and shortcomings.
It may also be referred to as mock-up or wireframe.
The user interface is the collection of all the visual components that make up an application's
screen and that have a graphical representation on it. It also comprises meta data on these
elements such as their layout disposition or their behaviour patterns under certain events.
A screen is a group of visual components gathered into a canvas or editing area. It may also be
referred to as page and is browsed at once.
A functional scenario is a graph of application components that represent the application's
general behaviour such as its navigability or its processing.
A comment is a user's written remark often related to an added piece of information on an
element of a prototype. It may also be referred to as annotation.
Starting the application
To start the Justinmind Prototyper you just need to go to the installation folder (or any shortcut
you may have chosen to create in the operating system menu/desktop) and double click on the
icon. After that, a start-up image with a loading progress bar displays for a short time, right
before the actual application interface comes up. If it is the first time you start the application or
if you have not disabled the functionality in the File > Preferences menu, a welcome window
which displays shortcuts for the most common tasks prompts. This window offers a handful of
options to quickly start off with the program.
Drawing Screens
From the components palette, drag and drop the item you want in the canvas. Once inside the
canvas, you can re-size and move it to fit in your design. To move it, select it and drag it to the
desired destination; you can also push it with the arrow keys (holding down the CAPS key will
speed it up). To help you debug your design, you also have the following instruments:
The automatic alignment system (blue guidelines).
The grid (see Mesh).
The Rules.
The Guides. To position them, click on the rules and drag them to the desired place. To
delete them, simply select them and press the "delete" key.
There is a toolbar related to the work area, between the lower part of the canvas and the
properties view. The two text fields indicate a reference resolution: you can change it by directly
editing these values. The zoom indicator is on the right side: magnify or reduce the size by
using this drop-down menu.
The elements on the screen keep a certain order of depth between them. You can see the order
in which they are arranged in the Content of the current screen. Thus, the highest ones block
out the ones below them. To change this order, right click the item (or select it in the content
view) and select the Sort option of your choice.
The Image component allows you to see which parts of the screen will be taken up by images.
Or you can replace these pictures with real images by selecting a file from the Properties view.
Create more screens in your prototype by clicking the "+" button on top of the list of
screens.
Rename it by right clicking it. Select Edit from the context menu.
If you want to delete one, right click it and click Delete.
And, to edit the content of an inactive screen, double-click it from the list of screens. Its
content is then loaded onto the canvas where you can easily change it.
Justinmind Prototyper allows you to copy and paste screen components within the
same screen or onto other screens. You can use the options in the Edit menu or the
usual keyboard shortcuts of Ctrl+C (copy) and Ctrl+V (paste). To duplicate elements,
drag them to the desired position by holding down the "Ctrl" key or with "CTRL + D"
(Mac keyboard shortcuts are different).
Remember: Whatever action you do, you can undo it or redo it from the Edit menu.
Your First Interactive Protoype

To convert a text in your prototype into a link, mark it with a specific style (for example, the
classic blue color and underlined) and drag it to the screen you want it linked to in the list of
screens. It is linked automatically. Thus, by activating the simulation mode, you can interact with
the defined components and navigate through the different screens.
If want to allow only part of the text to be clicked on, place an Image Map over it and then drag it
to the screen you choose to generate the link. The Image Map is not displayed when you click
the Simulate button but the area it occupies is still interactive.
You can also move the menu elements and nodes of the tree to other screens. Just drag them
onto the screen you choose (if you do the opposite, the results are the same).
Finally click on the simulate button at the top right of the canvas to see your prototype in action.
Remember: Any element dragged into a screen links the active screen to the assigned
one.
Annotations
With Justinmind Prototyper, you can add comments to your wireframes and website prototypes
in a click.
You can write notes and observations straight on the prototypes screens and even on its
components.
To add a note on one of the components, just right click on the component and choose add
comment.
In the comment tab, youll find everything you need to organize, search and filter all the
annotations of your website prototype. And if youre using Usernote, you can even import
external comments to Justinmind Prototyper so you can keep on improving your application
prototype. These comments will be automatically linked to the wireframes components.
Publish Online
At Justinmind, we think that a web prototype is the best communication tool between
customers/users and the software development team. If you have an application prototype at
the start of a project and it is as close as possible to the final application, the user can be
involved from the beginning, giving his opinion and validating it: the more key people get
involved, the more successful the project will be as a whole, reducing the number of final
adjustments made on the application and not on the prototype.
With Justinmind Usernote. All authorized key users can access your prototypes on the Internet.
They can collaborate by testing and commenting on them from their browser. Also, all their
notes are registered and centralized so that no details are lost. Through this service, you can
also integrate your prototype online with user test tools and remote tools.
Select the menu option Share Publish Online and enter in your Justinmind Usernote account.
Then push the upload prototype and select the prototype file that you want to publish (if you
want to publish the prototype that you are currently working on you should save it first to some
disk location). Once uploaded you can click on the name of that prototype to navigate it or invite
another users to review it.
Creating Prototypes
Workspace
This sections details the windows that compose the user interface of Justinmind Prototyper such
as the main menu, the tool bar and the edition tabs.
The Main Menu

Justinmind Prototyper's main menu is located at the top of the application and contains eight
root level items: File, with all the operations related to files, such as save, load, etc., Edit,
containing common edition operations, Insert contains two options, insert text and insert an
image file, View, containing operations that handle various visual aspects, Table, containing
operations to edit tables, Simulate to simulate your current prototype, Reports containing
operations to generate documentation, Share, containing controls to Publish your prototype
online or generate the HTML version of the prototype, and Help, with a variety of options
offering help, support and general information.
File Menu
The file menu contains some standard operations that act on files as well as other particular
actions that help the user perform specific tasks.
File menu > New
Use this entry to quickly create new elements. Put the cursor over this item to open a sub menu
with the elements that can be created.
Prototype Click on prototype to create a new prototype and open it.
Screen Click on screen to create a new screen in the current prototype. Enter the
screen name in the window that comes up, optionally select the template and click the
Ok button.
Data master Click on data master to create a new data master in the current
prototype. A new window comes up asking for the attributes and the name, but data
masters are fairly complex and we will cover them in detail later on in this document.
Template Click on template to create a new template. Enter the template's name in
the window that comes up and click the Ok button.
Scenario Click on scenario to create a new scenario. Enter the desired name and
description in the window that comes up and click the Ok button. The screen will
change to the Scenarios view.
10
File menu > Open

Click on open to open an existing prototype. The open dialogue comes up, from which you need
to select the VP file and click Open. This option closes the currently opened prototype. If you
want to open more than one prototype at the same time then you have to either launch two
Prototypers or double-click on the VP files of each.
File menu > Recently Opened Prototypes
This entry contains a list of prototypes that you have opened recently. To open one of these
prototypes just click on it.
File menu > Close
Click on close to close the current project. It is only available if there is a project opened.
File menu > Save
Click on save to save the unsaved changes in the current prototype. It is only available if the
current project has suffered changes since the last save. (Keyboard shortcut: Ctrl+s)
File menu > Save as...
Click on save as... to select a new prototype name and/or location to save the current prototype.
If the prototype was already saved in another location and/or name, it is conserved.
File menu > Print
Sends to the default printer the contents of the screen, scenario or navigation map that is
currently opened in the canvas.
File menu > Recover prototype
If you want to recover a backed up prototype, click on recover prototype. This entry opens the
prototype recovery window, which lets you select the backed up prototype to recover.
11
File menu > Preferences

Click on preferences to open the preferences dialogue. This dialogue offers the interface to
modify various program-level user preferences that are persisted after closing, so they will be
applied as you defined them the next time the Justinmind Prototyper is run. The dialogue has a
tree with a set of sections that group the preferences into logical pages.
File menu > Preferences > General
Here are the general preferences that apply to all aspects of the application.
Change the language by selecting the desired language in the Justinmind Prototyper
Language drop-down.
Enter the URL of your Justinmind Server provider in the Justinmind Usernote URL input
box to enable the integration of your prototyping suite with the server suite.
Tick or untick the Show welcome window at start-up to make or prevent the welcome
window from displaying at start-up.
Tick the Send error reports to Justinmind to allow error reports to be sent to Justinmind
in order to help us improve the product. We strongly recommend activating this option,
since we periodically publish product updates with bug fixes and performance issues
solved, most of them submitted by our customers.
Tick the Optimized HTML checkbox to generate HTML prototypes whose source code
has been minimized and optimized to perform better. It has, however, the shortcoming
of being less readable and more difficult to edit.
Tick the Include Comments in HTML checkbox to include the comments in the HTML
when you export the prototype to that format.
Tick the Check for updates automatically to allow the system to go online and check for
updates once after a defined amount of time.
Insert a number of minutes in Check for updates interval (in minutes) to define the
number of minutes that have to elapse between two update checks.
Tick Check for updates at start-up to allow the system to check for updates at start-up.
Change the value of the input URL for updates to modify the location where the updates
are looked up. Do not change this value if you are not completely sure of what you do.
File menu > Preferences > Backups

Under this entry are the preferences related to backup copies that are automatically created for
your prototypes to prevent data loss.
Tick or untick the Enable autosave checkbox to activate or disable prototype auto
saving.
12
If auto save is enabled, it occurs every a limited amount of minutes. To change this
amount, insert a number in the Autosave interval input box. The default value is 10
minutes.
Change the Max. number of back-ups value to increase or decrease the number of
backups stored by the system. More backups mean that more old versions are stored
per prototype.
File menu > Preferences > Functional Scenarios

This entry contains preferences related to functional scenarios look and feel. From here you can
change the scenario graphs colors, font face, line style, rulers preferences, grid type, etc. The
values are easy to understand and we consider that no further explanation is needed.
File menu > Preferences > Network connections
Use this screen to configure your network connection in case you use a proxy server to connect
to the internet. If you just don't know, you are probably not using a proxy, so leave it as it is.
Otherwise, contact your internet provider to obtain your proxy connection information and enter
it under the Manual proxy configuration radio button.
File menu > Preferences > User Interface
This last item contains the preferences related to the visual aspects of the screen editor. The
preferences set here apply to the behaviour of all screen components and to the edition canvas
of screens, templates and masters.
Tick the Show rulers checkbox to display rulers at the top and left of the canvas.
To change the ruler units, change the value from the Ruler units drop-down.
Tick the Show grid check box to display a grid over the screen canvas to help you
position components.
Tick the Snap to grid check box to make elements snap to their closest grid line when
moving or positioning them.
Change the grid spacing using the Grid spacing (in pixels) input box. The spacing must
be set in pixels.
Tick the Snap to geometry check box to make components to snap to each other's
boundary lines when dragging them across the canvas.
File menu > Import

This menu has a list of options to import components from other prototypes to the one that is
currently being modified.
13
File menu > Import > Prototype

Imports all the contents from a vp file into the prototype and checks if there are any conflicts.
This functionality is explained in detail in the Reuse section
File menu > Import > Screen
Adds a screen from another prototype to the screen list along with all its content and
interactions. That screen should be exported previously from the other prototype.
File menu > Import > Template
Adds a template from another prototype to the template list along with all its content and
interactions. That template should be exported previously from the other prototype.
File menu > Import > Master
Adds a master from another prototype to the master list along with all its content and
interactions. That master should be exported previously from the other prototype.
File menu > Import > Widget Library
Adds all the widgets from the selected library file to this installation of Justinmind Prototyper.
The widgets are included in the My Widgets tab. These widgets do not belong to the prototype
but to the Prototyper so you will find them there each time you open/create a prototype.
File menu > Export > Prototype
Export the contents of the prototype (data masters, screens and so on) into a new vp file. This is
extensively explained in the reuse section.
File menu > Export > Screen
Export the contents of a screen into a file that can be imported on other prototypes.
14
File menu > Export > Template

Export the contents of a template into a file that can be imported on other prototypes. The dialog
works the same way as the one to export screens.
15
File menu > Export > Master

Export the contents of a master into a file that can be imported on other prototypes. The dialog
works the same way as the one to export screens.
File menu > Export > Widget Library
Export the selected widgets groups into a file that can be imported in other Justinmind
Prototyper installations afterwards.
File menu > Exit

Closes the application and exits the program.
Edit Menu
The edit menu contains short-cuts to the usual edition actions that any worthy editor of any kind
must offer.
Click on Undo to undo the last operation and get back to the state right previous to it.
(Keyboard shortcut: Ctrl+z)
Click on Redo to redo the last undone operation. (Keyboard shortcut: Ctrl+y)
Click on Select All to select all the elements in the current editor, i.e., all the elements in
a screen. (Keyboard shortcut: Ctrl+a)
Click on Copy to copy the current selection to the clipboard. (Keyboard shortcut: Ctrl+c)
Click on Cut to cut the current selection from the editor and put it into the clipboard.
(Keyboard shortcut: Ctrl+x)
Click on Paste to paste to the current editor the contents of the clipboard. (Keyboard
shortcut: Ctrl+v)
16
Click on Align left, center, right, top, middle or bottom to align the selected elements to
the leftmost, center, rightmost, topmost, middle or bottommost element respectively.
Match width and Match height are available only when two or more user interface
elements (usually widgets) are selected.
To make all the elements be as wide as the last element selected click on
Match width
To make all the elements be as high as the last element selected click on
Match height
Clik on Find to open a search dialog to look for text terms in the components of your
prototype.
Insert Menu
The insert menu holds options to import image files into your prototype and a quick way to add a
text box.
Click on Image file.. to add an image file to your prototype..
Click on Text and a rich text (text box) will be added in the position 0,0.
View Menu
The view menu provides controls for managing various visual aspects of the application.
Click on Hide/show toolbar to toggle the main toolbar visibility off/on.
17
Click on the different options inside the Toolbars menu to select which toolbars are
going to be displayed in the main toolbar.
Click on Rulers to show/hide the rulers in the canvas.
Click on Grid to show/hide the grid in the canvas.
Click on Snap to geometry to activate/deactivate the automatic alignment system.
Click on Canvas Size to hide/show the grey lines in the canvas that indicate the canvas
resolution
Click on Templates to show/hide the templates panel.
Click on Masters to show/hide the masters panel.
Click on Data Masters to show/hide the Data Masters panel.
Click on Variables to show/hide the variables panel.
Click on Outline to show/hide the outline panel.
Click on Navigator to show/hide the navigator panel.
Click on Notes to show/hide the notes panel.
Table Menu
This menu contains options to edit a selected table in the canvas. They are only activated when
you select a table.
Click on New Column to add a new column to the right of the table. The styles of the
cells of that new column will be copied from the ones next to it.
Click on New Row to add a new row to the bottom of the table. The styles of the cells of
that new row will be copied from the ones just above it.
Click on Select Column when you have a table cell selected to select all the cells that
are above and below the one selected.
Click on Insert Column Right to create a new column to the right of the cell you have
selected.
Click on Insert Column Left to create a new column to the left of the cell you have
selected.
Click on Select Row when you have a table cell selected to select all the cells that are
right and left the one selected.
Click on Insert Row Below to create a new row below of the cell you have selected.
Click on Insert Row Above to create a new row above the cell you have selected.
18
Click on Split cell vertically to split the selected cell into two vertically.
Click on Split cell horizontally to split the selected cell into two horizontally.
Click on Merge Cells to combine more that one cells into one (the cells must be one
next to the other).
Simulate Menu
This menu has only one option and works the same as the simulate button
Reports Menu
Reports Menu has options to automatically generate specification documents from the
information of the prototype you are currently working on.
Click on Screens to generate a MS Word (it can be opened with OpenOffice too)
document including all the information regarding the screens such as screenshots,
events information and notes.
Click on Scenarios to generate a document including all the information regarding the
scenarios such as screenshots and comments.
Click on Data Masters to generate a document including all the information regarding
the data masters such as attributes.
Click on Customized to generate a document with all the information (Screens,

Scenarios and Data Masters) from the components of the prototype that you select.
19
Share Menu
This menu has options to share your prototype simulation with other users that don't have a
Justinmind Prototyper copy installed in their computers.
Click Publish Online if you want to publish your prototype in Justinmind Usernote and
invite people to review it and insert comments. The published prototype can be browsed
with the most common internet browsers.
Click on Export to HTML to export the prototype simulation into HTML files. You can
either send those files to your users or even chage the HTML code afterwards.
Click on Save to Image if you want to store the contents of the canvas in an image file.
You can do this for several screens and insert them into a slide show software.
Help Menu
This menu lists all the help options available to learn how to use Justinmind Prototyper.
Click on Quick Start Guide to open a PDF with the common controls of Justinmind
Prototyper.
Click on Show Welcome Window to show the welcome window
20
Click on Help Contents to open this help
Click on Video Tutorials to browse through our tutorials hosted in our web site.
Click on Support to ask for help to our employees.
Click on Search for Updates if you want to check if there is a newer version of
Justinmind Prototyper available.
Click on About Justinmind Prototyper to see the information about your current copy of
Justinmind Prototyper such as version number, license number and type or change
your current license.
Click on Visit Justinmind to go to our website where you can find tutorials and extras to
develop prototypes.
Toolbar
Justinmind Prototyper has a main toolbar right under the main menu. Remember that you have
to select the main menu option View Show Toolbar in order to see the toolbar.
User Interface
The User Interface tab holds all the tools and views necessary to define the contents and the
interactions of your prototype. In this section we will detail each of the panels inside that tab. All
the views can be displayed or hidden using the main menu option 'View'.
21
Components
These are the widgets that can be used to build the content of a screen. They are detailed one
by one in the Widgets section.
Properties
This panel shows and edit the properties of the component selected in the canvas. If no
component is selected then the screen properties are displayed. You will find a detailed
explanation of each property in the Formatting section.
22
Contents
Located at the top right inside the User Interface tab, the Contents panel list all the screens,
templates and masters created in the prototype.
23
The Templates panel list all the created templates of the prototype. By default a prototype has
one template but you can create as many templates as you need. The panel has one button to
create templates and if you click on one of them in the list the contents of that template are
displayed in the canvas. Check the Templates section for further information.
The Masters panel is very similar to the Templates panel. In both an options menu is displayed
when either a master or a template is selected using the right mouse button (or ctrl+click in OS
X). The masters can be dragged to the screens. You have further information in the Masters
section.
Canvas: Design
The central section of the User Interface tab is the canvas. Displays the content of the current
screen, template or master and allows to edit it.
24
Canvas: Navigation Map

This is an auto-generated navigation map. Taking the last selected screen as the root creates a
leave for each navigation event defined in the components of that screen and it does this
recursively. You can print the map using the main menu option File -> Print.
Events
The events panel list all the interactions defined in the selected component in the canvas. More
information about how to define events can be found in the Events & Interactions section.
25
Comments
This panel list all the comments associated with the selected component in the canvas. A
comment can be dragged to another component to change that association.
Data Masters and Variables

The Data Master panel list all the Data Masters created in the prototype. Drag them to the
canvas to build an input form automatically. If you right-click on one of them an options menu
will be displayed. Click on edit and the next screen will appear.
The Variables panel list all the variables created in the prototype to that moment. Create
variables using the + button on top of that panel. These variables can be used in the
interactions to simulate data interaction.
26
Outline, Navigator and Notes
Outline: display the list of the components that are currently in the canvas. You can
define the order of that components by drag and drop or using the green arrows at the
top.
Navigator: shows a preview of all the contents in the canvas and highlights the area
that is visible at that time.
Notes: write your own notes about the screen visualized in the canvas in this panel.
These notes will appear in the exported document too.
27
Scenarios
28
Comments
29
Adding Content to Screens

Use the Widget Panel to add these widgets to Screens, Masters and Templates.
There are two ways to add widgets to the page:

Drag and drop
To drag and drop a widget onto a screen drag a widget from the widget panel and release it on
the canvas.
Select and draw
To select and draw a widget on a screen click on a widget in the panel to select it and then click
and drag on the canvas to draw the widget.
Arranging Widgets
Align Widgets Relative to Each Other
When you align widgets relative to each, one of the widgets remains stationary. For example,
clicking Align Left aligns the left edges of all selected widgets with the left edge of the last
selected widget. To align widgets select at least two widgets, click on Edit in the Main Menu and
point to one of the following options:
Align left
Align center
30
Align right
Align top
Align middle
Align bottom
Distribute widgets equal distance from each other

In order to distribute wigets equal distance you need to select at least three different widgets in
the working area. Then select one of the following options in the toolbar:
Distribute vertically
Distribute horizontally
Move a widget forward or backward

Widgets in the canvas are sometimes stacked on top of each other. To move a widget forward
or backward over this 'depth' edge, right-click on the widget to open its contextual menu and go
to Order menu. Then select the option:
Bring to front
Send to back
Move forward
Move backwards
As an alternative, widgets can be moved forward/backward by pointing them in the Outline

panel and then selecting the options "Move up" or "Move down".
Group and Ungroup widgets
Group widgets in order to move and treat them like a single widget. To group or ungroup
widgets select two or more widgets and right-click on any of them to open the contextual menu.
Select the option:
Group
Ungroup
Move widgets into a Dynamic Panel

Widgets can be moved into a Dynamic Panel so you can have them grouped and move them
easily without having their relative position locked as with the groups. To automatically create a
Dynamic Panel which contains a set of widgets. First select the widgets and right-click on any of
them. Then select the option "Group into Dynamic Panels".
31
Lock or Unlock widgets

Widgets can be 'locked' so they cannot be moved or resized. To lock or unlock a widget, use the
right-click menu on the widget and select "Lock" or "Unlock". You will also find these options
enabled in the top toolbar or the Properties panel once the widget is selected.
Guides and Grid

Guides and grid can help you to arrange and align widgets on the page easily.
Grid
When the grid is activated a set of vertical and horizontal lines are painted on the canvas
background. If you also activate the "Snap to grid" option, when moving widgets through the
canvas they will automatically align to the nearest grid line found.
To activate or deactivate the grid you can either go to the View menu and check/uncheck the
option "Grid" or go to File->Preferences then select "User Interface" and check/uncheck the
option "Show grid". In the Preferences dialog you can also find the following options to configure
the grid:
Canvas size
Show grid
Snap to grid
Grid spacing
Snap to geometry
The option "Snap to geometry" can also assist you when positioning widgets on the page. When
this option is on, vertical and horizontal guide lines appear while dragging a widget to indicate
when it is aligned with other widgets on the page. The guide lines will appear following this
criterion:
Dragging the widget horizontally, vertical lines appear on the left and right sides
of other widgets meeting left and right side edges of the dragging widget.
Dragging the widget vertically, horizontal lines appear on the top and bottom
sides of other widgets meeting top and bottom side edges of the dragging
widget.
Horizontal and vertical lines will also appear together when the dragged widget's
edges meet horizontal and vertical side edges of another widget on the page.
Hold Alt key while dragging the widget to avoid snapping.
32
To activate this option go to the View menu and check the option "Snap to geometry". You can
find the same option in File->Preferences, inside the "User interface" section. The grid will never
be shown when simulating a prototype.
Rulers
Rulers can be shown on the top and left sides of the canvas to assist you when positioning
widgets.
To show or hide the rulers go to the View menu and check or uncheck the option "Rulers". This
option can also be changed in the Preferences menu: go to File->Preferences, select "User
interface" and check or uncheck the option "Show Rulers". In the preferences menu you can
also change the units used by the rulers. Select there the option:
Inches
Centimeters
Pixels (default option)
Ruler guides
Create horizontal or vertical guides on the rulers to help you align the widgets over an edge of
great precision.
To create horizontal or vertical guides point the cursor over the position on the ruler you want to
place the guide and left-click. Once a guide is created you can dragg it to change its position.
To remove a guide, right-click on its handler on the ruler and select the option "Remove guide".
As an alternative you can press the 'Supr' key once selected.
33
Widgets
Static widgets
The widgets located in the Static group of the widgets panel are those whose content cannot be
edited manually during the prototype's simulation.
Label
The Label is a single line text widget. It is typically used as a caption holding a text with a single
style.
Editing text
Double-click a Label widget to start text edition. Make the desired changes to the
text. To apply the changes press Return or click outside the widget. To cancel
edition without applying changes press Escape.
Select the Label and change its default text in the Properties panel.
Image
The image widget is a rectangle shaped widget which represents and displays an image. When
creating this widget on the canvas it displays no image by default showing a cross inside.
Changing image
Edit the image displayed by this widget in one of the following ways:
Double-click on the image widget. Browse through your file system, select the
desired image and press Open.
Select your image widget, then change the displayed image through the
Properties panel selecting the option 'Select an image file'.
Rich Text
This widget provides a multiple text line box whose content can be fully customized. It can
define different font styles for different parts of its contained text.
Editing text
Double-click a Rich Text to start text edition. Make the desired changes to the
text. To apply the changes click outside the widget. To cancel edition without
applying changes press Escape.
Select the Rich Text and change its default text in the Properties panel.
34
Editing style
1.
Double-click a Rich Text to start text edition.
2.
Select the text range you want edit using the cursor.
3.
Make your style changes using the Text section of the Properties panel or use
the top main toolbar.
4.
Apply the changes clicking outside the Rich Text or cancel them pressing
Escape.
Table
The Table widget is used to organize content in rows and columns. It is made of cells and each
cell is an individual container with container properties like layout and alignment. When a table
is created, it has 9 cells by default (three rows and three columns).
Selecting rows and columns
You can select a row:
Click on the left edge of the row when the cursor changes to
Right-click on a cell of the desired row and select the option Select Row in the
contextual menu.
Select a cell of the desired row and select the option Select Row in the Table
menu.
You can select a column:
Click on the top edge of the column when the cursor changes to
Right-click on a cell of the desired column and select the option Select Column in
the contextual menu.
Select a cell of the desired column and select the option Select Column in the
Table menu.
Inserting rows and columns

Rows and columns can be added to the existing ones. New rows will be added under the last
row and new columns at the right side of the last column:
35
Select the table widget and click on New Row or New Column in the Table menu.
Right-click on the table and select New Row or New Column in the contextual
menu.
Select the table widget and change its rows/columns number in the Properties
panel.
New rows and columns can also be inserted between other rows or columns.
Insert a new row between two other rows:
Select a table row and click on Insert Row Below or Insert Row Above in the
Table menu.
Right-click on a table row or a table cell and select Insert Row Below or Insert
Row Above in the contextual menu.
Insert a new column between two other columns
Select a table column and click on Insert Column Right or Insert Column Left in
the Table menu.
Right-click on a table column or a table cell and select Insert Column Right or
Insert Column Left in the contextual menu.
Removing rows and columns

Delete a column or row by selecting it and pressing Delete key. You can also remove them if
you select the option Delete in the contextual menu.
Resizing rows and columns
Columns width and rows height can be easily changed dragging their borders.
To resize a row drag its lower border when the cursor appears. To resize a column drag its
right border when the cursor changes to
.
Resizing cells
Individual cells can also be resized. Changing the size of a cell will automatically modify the size
of its column and row to fit the new cell size.
To resize a cell:
36
Select the table cell. Drag its sizing handles located at the bottom-right corner,
right edge or bottom edge.
Select the table cell and specify its size in the Properties panel.
Splitting and merging cells

Any table cell can be splitted into two parts of equal size. They can be splitted horizontally or
vertically. If a cell is splitted vertically the cell is divided in to different cells with half the width but
ame height. If a cell is splitted horizontally the cell is divided in two different cells with half the
height but same width. To split a cell:
Right-click on one table cell and select Split Horizontally or Split Vertically in the
contextual menu.
Select a table cell and select Split Horizontally or Split Vertically in the Table
menu.
A set of contiguous cells can be merged so they become only one cell. When a group of cells is
merged their content is also merged into the new cell. To merge cells first select them and make
sure they all share at least one edge one to each other, then:
Right-click on any of the selected cells and click on Merge Cells in the contextual
menu.
Select Merge Cells in the Table menu.
Copying cells content

You can copy the content of a row, column or individual cells to another part of the table using
the common copy and paste actions. To copy a set of cells first select them using the Control
key if necessary and select copy from the contextual menu or Edit menu. Then select the target
row, column or cell and select Paste.
You can, alternatively, paste the cells outside a table widget. Then a new table will be created
using the copied cells content and size.
Shapes
Rectangle
The Rectangle widget is a simple object shaped as a rectangle with only size, background and
border properties.
Dynamic Panel
The Dynamic Panel widget is an advanced widget that can be described as a group of panels
that act as containers. From all the containers only one is displayed at a time while all the others
remain hidden. When a Dynamic Panel is created it only has one single container.
37
Creating panels
To create a new panel:
1.
Select a Dynamic Panel.
2.
Click on the green icon
at the top-left corner of the widget.
Selecting panels
When you select a panel it will automatically show and the current one will hide letting you edit
the content of the selected panel. To select a panel:
1.
Select a Dynamic Panel. A set of tabs will appear along the top edge of the
current showing panel
. The tabs can also appear along the
bottom edge if there is no space to display them on the top.
2.
Select the tab you want to view.
Removing panels
When you select a panel it will automatically show and the current one will hide letting you edit
the content of the selected panel. To select a panel:
Right-click on the tab you want to remove and select the option Delete.
Select the tab you want to remove and press the Delete key.
Editing panel's name

The panels are automatically labeled when you create them but you can change their names in
order to organize your Dynamic Panel. To change a panel's name:
1.
Select a Dynamic Panel. A set of tabs will appear along the top edge of the
current showing panel.
2.
Double-click on the tab you want to edit.
3.
Make your changes.
4.
Press Enter or click outside the tab to apply the changes. Press Escape to cancel
the edition without applying changes.
The Default Panel

Every Dynamic Panel has a default panel which is the one that will be displayed when starting
the simulation of the prototype. Change the default panel in the Properties panel once the
Dynamic Panel is selected on the page.
38
Vertical Line
A vertical line that may be used to separate elements or zones, to lay out elements or just as a
design element. Its width and style (solid, dotted or dashed) can be changed in the Properties
panel.
Horizontal Line
An horizontal line that may be used to separate elements or zones, to lay out elements or just
as a design element. Its width and style (solid, dotted or dashed) can be changed in the
Properties panel.
Input widgets
Input widgets also known as input fields, are used as a means for a user to insert data into an
application. They are mainly used to create input forms. Text boxes are the most common input
field type, but there are several others. All of them have the particularity that their value can be
modified by the user during simulation through direct interaction. However, you can disable its
edition by unchecking the property 'Editable' in the Properties panel.
Text
The Text widget is component which holds a text as a value. The text widget have three
different styles that can be changed in the Properties panel:
Text: A single line text box.
Text Area: A text box which can hold different lines of text with automatic vertical
and horizontal scroll bars.
Password: A text box showing only a single line masked as a password.
Editing default text

When in the user interface editor:
Double-click a Text widget to start text edition. Make the desired changes to the
text. To apply the changes press Return or click outside the widget. To cancel
Select the Text widget and change its default text in the Properties panel.
Editing text in simulation

Text widgets will be editable during simulation only if they have this property enabled.
To change the text of a Text widget when simulating the prototype, click once on the widget to
start editing. Make your changes. Finally press Return or click outside the widget to apply the
changes or press Escape to cancel.
39
Check Box
The Check Box widget is component which can only represent two diferent and opposite states:
true (checked) or false (unchecked).
Editing default value
When in the user interface editor:
double-click on the Check Box widget to change its state.
Select the Check Box widget and change its default state in the Properties
panel's drop-down.
Editing value in simulation

To change the value of a Check Box widget when simulating the prototype, click once on the
widget to change its value.
Radio Button
This widget can only represent two diferent and opposite states like a Check Box: true
(checked) or false (unchecked). However, unlike Check Boxes, Radio Buttons cannot change its
value through direct interaction during simulation once they are checked. Events must be used
in order to change a Radio Button state to unchecked as they usually work together with other
Radio Buttons. The Radio Button's value edition is similar to the Check Box.
Date & Time

The Date widget is a text box usually used to represent dates and time in a standard format. It
appears as an input box with a calendar or watch icon next to it used to easily edit its value. The
Date widget has two different styles which can be changed in the Properties panel:
Date: A text box that prompts the user for a date in the format MM/DD/YYYY.
Date and Time: A text box that prompts the user for a date and time in the format
MM/DD/YYYY HH/mm.
Editing value
To edit its value double-click on the calendar or watch icon at the right side of the widget. A
dialog with a calendar will appear. Select the desired date or date and time and press ok.
Cancel the dialog to stop editing without applying changes. During simulation click only once on
the icon to start editing.
40
File Upload
The File widget is a single text line box used to indicate a path to one specific file in the file
system. It appears as an input box with a Browse button used to browse for a file into your file
system. The text held by this widget cannot be changed directly.
Editing value in simulation
To edit its value click on the Browse button. Browse for the desired file in the system dialog.
Press Open to use the path to the file selected or press Cancel to close the dialog without
applying changes.
41
Selection widgets
Selection widgets display a list of text values among which the user needs to select one (single
selection) or more (multiselection). The values displayed by these widgets can be changed and
may come from different data sources:
Fixed Values: A user defined list of fixed values.
Data Master Field: A list of category values coming from a Data Master field of
type Category or Multicategory.
Data Master: A list of all the Data Master instances using comas as a field
separator.
When a Selection widget is created it shows a list of fixed values. To change the data source of
a Selection widget, select the widget on the page and click on the Edit button
next to 'Value'
in the Properties panel. Select the data source Fixed Values, Data Master Field or Data Master
in the dialog. Notice that you need first to create a Data Master in order to use it (or its fields) as
data source.
Editing fixed values
1.
Select the widget and click on the Edit button

the 'Value' attribute. A dialog will display.
in the Properties panel, next to
2.
Click on the radio button Fixed Values.
3.
Edit the fixed values through the editor on the right.
Getting values from a Data Master Field

1.

42
2.
Click on the radio button Data Master Field. Notice that this option will be only
enabled if there is any Data Master with Category or Multicategory fields.
3.
Select the field you want to use on the list.
Getting values from a Data Master

1.

2.
Click on the radio button Data Master. Notice that this option will be only enabled
if there is any Data Master created.
3.
Select the Data Master you want to use on the list.
List Box
A multiple text line widget that displays a list of ordered values. This single selection widget has
the particularity that when one of its values is selected all the others remain unselected.
Setting default selection
To set one of its values selected by default, double-click on the desired value on the widget.
You can also change the default selected value through the attribute 'Value' in the Properties
panel.
Selecting values in simulation
Select a value of a List Box while simulating by clicking once on the desired value.
Selection List
A basic drop-down that can contain a list of ordered values. This single selection widget has the
particularity that when one of its values is selected all the others remain unselected and hidden.
Only the selected value is displayed in a single line.
To set one of its values selected by default:
1.
Double-click on the Selection List widget.
2.
Click again to open the drop-down and select the desired value.
Alternatively, you can set a value not defined in the selection widget values as the default value.
To set a diferent value as default, double-click on the widget and write the desired text like a
normal input text widget. Then press Return to apply the changes. You can do the same using
the attribute 'Value' in the Properties panel.
43
Select a value of a Selection List while simulating by clicking once on the widget to open the
drop-down. Then select the desired value or write another one like a common text input.
Multi-selection List
A multiple text line widget that displays a list of ordered values like a List Box widget. This multiselection widget has the particularity that can have more than one of its values selected at the
same time.
Select as many values as you need. Double-click again to an already selected value to deselect
it. You can also change the default selection through the attribute 'Value' in the Properties
panel.
Select a value of a Multi-selection List while simulating by clicking once on the desired value.
Click on an already selected value to deselect it.
Radio Button List

A selection widget that displays a list of ordered values together with a radio button for each
value. This single selection widget behaves like a List Box but has the particularity that the
values must be selected through radio buttons. Radio Button Lists have two different styles to
display their values:
Vertical: Values display in multiple lines vertically.
Horizontal: Values display in a single text line with the values next to each other.
Change the orientation of this widget in the attribute 'Orientation' in the Properties panel.
Double-click again to an already selected value to deselect it. You can also change the default
selection through the attribute 'Value' in the Properties panel.
Select a value of a Radio Button List while simulating by clicking once on the desired value.
Check Box List

A selection widget that displays a list of ordered values together with a check box for each
value. This multi-selection widget behaves like a Multi-selection List but has the particularity that
the values must be selected through check boxes. Check Box Lists also have two different
styles to display their values: Vertical and Horizontal (See Radio Button List).
44

Select as many values as you need. Double-click again to an already selected value to deselect
it. You can also change the default selection through the attribute 'Value' in the Properties
panel.
Select a value of a Check Box List while simulating by clicking once on the desired value. Click
again on an already selected value to deselect it.
Navigation widgets
Navigation widgets are designed to provide prototypes with the most common forms of
application navigation that one can find in the real world. All of them are fully customizable and
adaptable to every prototype's needs.
Button
The Button is a widget shaped as a common button which holds a single line of text. The edition
of its text works as for the Labels. Buttons are also the perfect candidates to place your events.
Editing text
Double-click a Button widget to start text edition. Make the desired changes to
the text. To apply the changes press Return or click outside the widget. To cancel
Select the Button and change its default text in the Properties panel.
Image Map
This widget shaped as a rectangle is usually used to create a transparent area to define events.
Image Maps are displayed as a slightly transparent green rectangle during the edition of the
user interface but become transparent and cannot be seen during the prototype's simulation.
Tip: Put image maps over images to create event zones For example, over
the main logo of your application in the upper banner.
Tree
Trees are a very common navigation component in applications. Tree widgets are made of Tree
Nodes organized in a hierarchical structure (Tree Nodes can contain other Tree Nodes). When
a Tree widget is created on a page it contains, by default, two root Tree Nodes and one subnode inside the first one.
Through the Properties panel you can customize the expand and collapse icons of your Tree as
well as the visibility of the Tree hierarchy lines.
Adding nodes
45
To add a new node to a Tree:
1.
Drag and drop a Tree Node widget over the position on the Tree you want to
place it. When dragging the node widget, an orange dotted line feedback will
guide you to place the new node.
2.
Enter the name for the new node in the displayed dialog.
3.
Click on the Ok button to apply and create the new node with the given name or
press Cancel to close the dialog without applying changes.
To add a new node as a subnode of a Tree Node:
1.
Drag and drop a Tree Node widget over another Tree Node. When dragging the
node widget inside another one a gray rectangular feedback will guide you to
place the new node.
2.
Enter the name for the new node in the displayed dialog.
3.
Click on the Ok button to apply and create the new node with the given name or
Removing nodes
To remove a node from a Tree, first select the node you want to delete. Then press Delete or
open the contextual menu with a right-click on the node and select Delete. If you delete a Tree
Node that contains other nodes they will be deleted as well.
Moving nodes
The order and hierarchy of tree nodes can be changed once they are created. To change a
Tree Node position within a Tree, drag and drop the node as you were creating a new one. The
corresponding feedback will guide you while dragging the node.
Changing expand/collapse icons
When a Tree widget is created it has, by default, a plus icon to expand nodes and a minus
icon to collapse them. These default icons can be changed in the Properties panel:
46
1.
Select the Tree widget on the screen.
2.
Click on the Browse button in the Properties panel.
3.
Browse for an Expand image in your file system using the dialog displayed and
press Ok.
4.
Browse for a Collapse image in your file system using the second dialog
displayed and press Ok.
When changing icons make sure both expand and collapse images have the same size.
Tree Node
A Tree Node widget can only be created inside an existing tree widget. To create a Tree Node
drag and drop it on a tree as explained in 'Adding nodes'.
Editing node's text
To change the text displayed by a node, first select the node you want to change and then edit
its text in the 'Value' field in the Properties panel.
Changing node's icons
Each tree node can display a different icon when expanded or collapsed. These icons can be
assigned through the Properties panel:
To set an icon when the node is expanded: Select the tree node widget and click
on the 'Select Expand Icon' option in the Properties panel. Then browse into your
file system and select the desired image.
To set an icon when the node is collapsed: Select the tree node widget and click
on the 'Select Collapse Icon' option in the Properties panel. Then browse into
your file system and select the desired image.
47
Menu
Menu widget can be used to create basic flyout menus. Like a Tree widget, Menus are made of
Menu Items also organized in a hierarchical structure (Menu Items can contain other Menu
Items). Menus have two common configurations that can be defined in the 'Orientation' attribute
in the Properties panel:
Horizontal: Like a main menu of a desktop application.
Vertical: Like a sidebar menu.
Adding items
To add a new menu item to a Menu:
1.
Drag and drop a Menu Item widget over the position on the Menu you want to
place it. When dragging the widget, an orange feedback will guide you to place
the new item.
2.
Enter the name for the new item in the displayed dialog.
3.
Click on the Ok button to apply and create the new menu item with the given
name or press Cancel to close the dialog without applying changes.
You can also add items before and after a Menu Item selecting the options 'Add Menu Item
After' or 'Add Menu Item Before' in the contextual menu of a Menu Item.
To add a new item as a submenu of another Menu Item:
1.
Drag and drop a Menu Item widget over another Menu Item. When dragging the
Menu Item widget inside another one a gray rectangular feedback will guide you
to place the new item.
2.
Enter the name for the new item in the displayed dialog.
3.
Click on the Ok button to apply and create the new item with the given name or
You can also add submenus of a Menu Item selecting the option 'Add Submenu' in the
contextual menu of a Menu Item.
48
Removing items
To remove an item from a Menu first select the Menu Item you want to delete. Then press
Delete or open the contextual menu with a right-click on the item and select Delete. If you delete
a Menu Item, all of its submenus will also be removed.
Moving items
The order and hierarchy of menu items can be changed once they are created. To change a
Menu Item's position within a Menu, drag and drop the item as you were creating a new one.
The corresponding feedback will guide you while dragging the item.
Menu Item
A Menu Item widget can only be created inside an existing menu widget. To create a Menu Item
drag and drop it on a menu as explained in 'Adding items' for Menus.
Editing item's text
To change the text displayed by a menu item, first select the item you want to change and then
edit its text in the 'Value' field in the Properties panel.
Changing item's icon
Each menu item can display an icon before its text that can be set and changed through the
Properties panel. To set the icon for a menu item, first select the Menu Item widget on the
screen and then select the 'Set Icon' option in the Properties panel. Browse for the desired
image and press Ok. When a menu item has an icon assigned change or remove it using the
buttons Browse and Delete next to the Icon field.
Data Grids
The widgets located in the Data Grids group are those related to Data Masters' visual
representation. These widgets will help you visualize the contents of your Data Masters as well
as some information related to them.
Data Grid
This widget displays the records of a Data Master as a list. This list's data source is always a
single Data Master which is selected when the list is created. This widget displays only one
header and one row when editing it in the user interface but it is expanded when simulating
replicating its rows displaying a different row for each Data Master's record instance.
In order to create a Data Grid for a particular Data Master:
1.
Click on the Data Grid widget on the Widgets' palette.
49
2.
A dialog will appear asking for information regarding the data source the Data
Grid will use. (If you have no Data Masters you will be first asked to create a new
one).
3.
Fill in all the requiered fields and press Ok.
4.
Once the dialog is closed, just click on the desired place on the canvas to finally
create the item.
Once a Data Grid is created you can change some of its properties including its identifier in the
Properties panel but you cannot change its Data Master association.
Selecting rows and columns
To select a row, click on the left edge of the row when the cursor changes to
To select a column, click on the top edge of the column when the cursor changes to
Inserting columns
You can insert new columns at the end of a Data Grid widget. To insert a new column, rightclick on the Data Grid widget and select 'New Column' in the contextual menu.
Removing columns
Delete a column by selecting it and pressing Delete key. You can also remove it if you select the
option Delete in the contextual menu of a column.
Ordering columns
50
The order of the Data Grid's columns can be modified once created. To move a column to a
different position within the Data Grid, drag and drop it to the desired position. An orange
feedback will guide you when placing the column between other columns.
Resizing rows and columns
Select a Data Grid's cell or an entire row or column and drag its sizing handles to resize them.
Changing Data Grid's properties
When a Data Grid widget is selected on a screen you can change some of its properties in the
Properties panel:
Find more information about Data Grids in the Data Simulation section.
Web widgets
These special widgets add extra functionality and a better look to your prototypes. These
widgets are like containers that can contain other kinds of elements common in the computer
world such as electronic documents, web sites or flash files.
HTML
The HTML widget can display HTML code using a web browser embedded in it. When you
create a HTML widget it displays a simple text in HTML by default. To change the HTML code
displayed by this widget:
1.
Select the HTML widget on the screen.
2.
Make your changes in the text box next to the HTML field of the Properties panel.
3.
Click outside the text box to apply the changes.
URL
This widget displays a web page using a web browser embedded in it. When you create this
widget it displays Justinmind's web page by default. To change the web page displayed by this
widget change its associated URL:
1.
Select the URL widget on the screen.
51
2.
Change the URL in the 'URL' field of the Properties panel.
3.
Press Enter to apply the changes or click outside the URL text box to cancel
them.
Document
The Document widget can display external text documents. The formats supported by this
widget are PDF, TXT and XML. When a Document widget is created it displays a PDF file as an
example by default. You can change the document displayed:
1.
Select the Document widget on the screen.
2.
Click on the Browse button in the 'File' field of the Properties panel and select the
desired document.
Requirement: In order to display the PDF files correctly you need to have
Adobe Acrobat Reader installed on your computer.
Flash
This is the widget used to display Flash files. When a Flash widget is created it displays a flash
file as an example by default. You can change the document displayed by this widget as well as
its parameters in the Properties panel:
1.
Select the Flash widget on the screen.
2.
Click on the Browse button in the 'File' field of the Properties panel and select the
desired document. Change the its input parameters using the parameters' table
under the 'File' field.
52
Styles and Formatting

Formatting
The appearance, requirements and properties of a widget may be altered to match any look and
feel and fit any layout through the Properties panel or the style toolbar. Each widget has its
particular styles, depending on its properties (if it has text, background, border, etc.). Hence,
you may not find all the formatting options defined here in every widget but in most of them.
General properties
Most of the widgets have some properties in common that you will always find in the General
group of the Properties panel.
Position and size

A set of controls are provided in order to change the position and size of any widget on the
canvas:
53
Layout
Widgets that can contain other widgets like Dynamic Panels has a 'layout' property which lets
you define how the contents of the widget will be distributed:
Background
Most widgets have a background layer displaying a color or an image that can also be defined
in their background properties:
Selecting a background color

To select the color of the background, click on the Color picker button and select the desired
color from the drop-down. If you do not find the color there, click on 'More colors...' option to
define your own color or 'Capture Color' to get the color from another widget. You can also
indicate the color you want typing its hexadecimal code directly into the text input next to the
color picker button.
If you just want your widget without background, select the option 'Transparent' from the color
picker drop-down.
Selecting a gradient
You can also decide to define a gradient as the background of your widget. To create a
gradient, click on the Color picker button and select the 'Create gradient' option:
54
Text
Widgets which have text have the following font format options to be changed:
55
Border
Customize the type, color and width of your widget's border using the controls provided:
HTML Website
This widget displays an entire HTML site you can have locally in your computer using a web
browser embedded in it. To create a new HTML website widget:
1.
Click on the HTML Website widget in the Widgets panel. A dialog will appear.
2.
In the first field 'Select a directory', select the website folder (folder where all the
site files -HTML, images, CSS, etc.- are contained). Use the Browse button to
navigate through your local disks.
3.
In the second field 'Choose an entry file', select an initial html file, usually the
index.html. It is recommended this file to be located inside the folder selected in
the previous step.
4.
Press Ok to accept the parameters and close the dialog. Then click on the screen
to finally create the widget
Summary
The Summary widget is a special text label which shows information about a Data Grid. This
widget cannot be directly edited like a normal Label as its content is automatically generated
using its associated Data Grid information. The information displayed by this widget is the total
number of rows and the currently displayed ones.
To change its associated Data Grid, select the Summary widget and select the desired Data
Grid in the Properties panel.
56
Index
The Index widget is a special text label which shows information about the Data Grid's pages.
This widget cannot be directly edited like a normal Label as its content is automatically
generated using its associated Data Grid information. The information displayed by this widget
is the index of pages of the Data Grid. The current page index will be highlighted using a bold
font style. Notice that the number of pages of a Data Grid will depend on the field 'Rows per
page' in the Data Grid widget's properties.
To change its associated Data Grid, select the Index widget and select the desired Data Grid in
the Properties panel.
Default Styles
A collection of default formatting attributes or styles are saved for every template of a prototype.
Every widget created in a screen will use the styles defined in the associated template as
default. All new projects start with a default template which defines all the styles for every
widget. This set of styles may be edited, but not deleted.
Tip: Use different templates with different styles to easily change the
look and feel of your prototype.
Editing default styles

To change the styles defined for a specific template, right-click on the template in the Templates
panel and select the option 'Edit Template Style'. A dialog will appear showing the current
formatting attributes for every widget.
57
Default styles for specific widgets can also be edited from the Properties panel. If we want to set
a widget's current style as default:
1. Select the widget on the screen.
2.
Click on the button 'Set as default style'
in the Properties panel.
Applying template styles

Once we have changed the default styles for a specific template, we may also want the styles to
be applied to all the already created widgets on the screens associated with this template. To
apply the styles, first make sure the desired template is correctly associated with the screens
you want to change the widgets' style from. Then right-click on the template and select 'Apply
Template Style'. All the widgets from all the screens associated with the template will get its
default style.
You can also apply a default stored style to one specific widget from the Properties panel. To
apply the default style to a widget:
1. Select the widget on the screen.
2.
Click on the button 'Apply Template Style'
in the Properties panel.
Copy Styles
Sometimes you may find the need to reuse the style from one widget created and formatted on
the screen and apply it to other widgets in order to save time. This can be accomplished with
the 'Copy Style' tool
that can be found on the Style toolbar. When you copy the style from
one widget to another, the target widget will get all the possible styles from the source. There
are some formatting attributes that will never be copied: position, size and layout.
To copy the style from one widget to another:
1. Select the widget you want to copy the styles from on the screen.
2.
Click on the 'Copy Style' tool in the Style toolbar. The cursor will get the brush shape
3. Click on the target widget.
58
Events and Interactions

Events are a key feature that provides Justinmind Prototyper with the ability to build fullyfunctional and interactive prototypes. The events that Justinmind Prototyper works with consist
of two main components: an event trigger (or user event) and a set of actions. Additionally, one
can define conditions for every interaction. Every event must be defined on a specific element
on the screen which will act as the source of the event trigger. All the events will be simulated
respecting any conditions and order defined in the user interface.
Events Panel
All the events defined on a widget can be seen, edited, deleted or created through the Events
panel once it is selected on the canvas.
User Events
The User Events' drop-down displays all the available event triggers that can be used to define
an event for a widget. Select the desired trigger before defining any action.
To know more about event triggers check User Events.
59
Events Toolbar
Interactions
All the interactions of a widget for a specific event trigger are displayed one on top of each other
in the Events panel so you can easily see the order they will be executed:
Creating interactions
To create a new interaction for a specific user event, click on the 'Add Interaction' button on the
events toolbar. For further information about creating interactions see Actions.
Other interaction's operations
60
Actions
Every 'interaction' will consist of a possible condition and a set of actions displayed horizontally.
The actions' execution will also have an order (from left to right), hence a particular action will
not be executed until the one before finishes its execution:
Selecting actions
The actions in the Events panel can be selected individually or as a group so you can copy,
delete or order them.
To select an action separately, just click on it with the mouse left button. A grey border
feedback will let you know when an action is selected.
To select a group of actions, click on them while holding the Control button.
You can define the order of the actions by drag and drop.
Other action's operations
61
Links
Links are used to create hyperlinks to screens. They are the type of event's action that provides
navigation through your prototype's screens.
Create a link with drag and drop

To create a link just drag the widget which should contain the link action and drop it on the
desired screen in the Screens panel.
Create a link using the contextual menu

You can also create a link through the contextual menu of any widget on a screen:
1. Right-click on the widget which should contain the link action and select the 'Add Link'
option. A dialog with a drop-down will appear.
2. Select the target screen from the drop-down labeled 'Internal Screen'.
3. Press Ok to create the link or press Cancel to close the dialog without creating the
action.
62
Interactive images
When defining an application, the graphic design phase is always included. Typically, the
designer presents his proposals in the form of static images that may be created with an
external image editor to represent a few screens. While the presentation and appearance of
these images can be excellent, the inconvenience is that they are completely static and do not
provide any type of interaction. It is therefore relatively easy to lose sight of the applications
usability and the navigation between screens. These graphic proposals are known as mockups.
Justimind Prototyper provides you with the necessary tools to add interactivity to these images
with minimal effort.
1. Set up each mockup that you have on a different screen of your prototype (remember
that you can drag files or images directly or copy and paste them).
2. Drag and drop the Image Map widget over the mockup areas representing buttons or
any other element that should cause a screen change when clicking on it.
3.
Drag the Image Maps you created and drop them on the screens you want them to link
in the Screens panel. Or see how links can be created here.
Tip: Even forms can be brought to life: place form fields over their
graphic representation, remove borders, and adjust size and font. Now
click on the Simulate button.
63
User Events
Events in Justinmind Prototyper consist of two main components: an event trigger and a set of
actions. Justinmind Prototyper offers a set of user interactions that can be recognized as event
triggers and, therefore, executes a set of actions consequently. These user interactions are:
On Click: Occurs when the user clicks with the mouse left button on the element upon
which we are defining the event.
On Double-click: Occurs when the user double clicks with the mouse left button on the
element upon which we are defining the event.
On Right-click: Occurs when the user clicks with the mouse right button on the element
upon which we are defining the event.
On Key Pressed: Occurs when a key is pressed on the keyboard. The key must be
specified when defining the event. If no key is specified the event will be triggered when
pressing any key.
On Mouse Over: Occurs when the mouse cursor is over the element upon which we are
defining the event.
On Mouse Enter: Occurs when the mouse cursor enters the area of the element upon
On Mouse Leave: Occurs when the mouse cursor leaves the area of the element upon
On Page Load: Occurs when the page that has the element upon which we are defining
the event loads (it first displays).
On Page Unload: Occurs when we leave the page that contains the element upon which
we are defining the event (we navigate to any other page).
On Change: Occurs when the value of the element -usually an input field- upon which we
are defining the event changes. The event will only be triggered if the input's value is changed
through direct user interaction.
64
Actions
Event actions are the processes that take place when a user event is captured during the
simulation of a prototype. Many actions can be defined for the same event trigger upon the
same widget so that they are taken sequentially.
To create an action for a specific user event over a widget follow the steps:
1. Select the widget which will trigger the event on the canvas.
2. Select the user event type from the drop-down in the Events panel.
3. Click on 'Add interaction' in the Events panel. A dialog will appear showing all the
available actions that can be defined.
Link to
Select the 'Link to' action to create navigation to another page of your prototype or an external
web page. You can also configure the navigation so the target page opens in a pop-up window.
To navigate to an internal screen, select the radio button 'Internal Screen' and then select the
screen you want the link to.
To navigate to an external web page, select the radio button 'External address' and type in the
address you want to navigate to.
65
Data Master action

This action is directly related to Data Masters. Select this action if you want to modify any Data
Master adding new records to it, modifying or deleting them.
To create any Data Master action, first click on the radio button to select the Data Master you
want to be modified from current Data Master's list. Then click on one of the following buttons:
New: Click on new to construct an expression to add a new record to the Data Master.
For further information about how to create the expression 'New' go to Data Simulation Create.
Modify: Click on modify to construct an expression to modify a Data Master's record or

a set of records. For further information about how to create the expression 'Modify' go
to Data Simulation - Update.
Delete: Click on delete to construct an expression to delete a record or set of records

from the Data Master. For further information about how to create the expression
'Delete' go to Data Simulation - Delete.
66
Pagination action
This action is directly related to Data Grids. Select this action if you want to navigate through the
pages of a Data Grid.
Tip: Distribute the records displayed by a Data Grid in Data Grid's pages
using the fild 'Rows per page' in the Properties panel. Remember Data
Grids only show one page with all its rows by default.
To create any pagination action, select the 'Pagination Action' radio button and then click on one
of the following buttons:
First Page: Click on 'first page' if you want to display the first page of a Data Grid.
Previous Page: Click on 'previous page' to display the page previous to the one
currently being displayed of a Data Grid.
Next Page: Click on 'next page' to display the page which follows the one currently
being displayed of a Data Grid.
Last Page: Click on 'last page' to display the last page of a Data Grid.
67
Hide/Show
This action makes a widget of the same screen appear (show) or disappear (hide). To create a
hide/show action follow the steps:
1. Select the widget you want to hide or show on the current screen displayed in the small
canvas or select it on the outline view.
2. Click on the radio button 'Hide' if you want to hide it or on 'Show' if you want to make it
appear.
Tip: Use this action on Dynamic Panels to change between its tabs. To do
this select a Tab of the Dynamic Panel as the target of the action.
68
Change style
This action changes the style of a widget of the same screen. Several formatting attributes can
be changed at once with this action. To create a change style action follow the steps:
1. Select the widget you want to change the style of on the current screen displayed in the
small canvas or select it on the outline view. A set of styles will appear under the small
canvas.
2. Select the styles you want to change checking them in the Styles' list.
3. Configure the attributes of the selected style to match the desired look and feel.
69
Enable/Disable input
This action enables or disables an input or a selection widget, making possible the user to
interact with it or not. Notice you can only apply this action to input and selection widgets. To
create a enable/disable action follow the steps:
1. Select the input or selection widget you want to enable/disable on the current screen
displayed in the small canvas or select it on the outline view.
2. Select enable or disable clicking on the corresponding radio button.
70
Set Focus on
This action sets the focus on a particular widget -usually an input field or a selection componentin the same screen. The Set Focus action is commonly used when we have a widget on the
screen which is out of the user view and we want it to be seen. When this action is executed the
canvas will scroll until the target widget can be seen. Moreover, if the target widget is a input, it
will also get the text focus.
To create this action, just select the target widget you want to focus on the current screen
displayed in the small canvas or select it on the outline view.
71
Set Value
This action sets a value to a particular widget in the current screen or to a variable. The value to
assign can be either a simple text or an expression involving other widgets and variables.
To create an action which sets a value to a screen's widget, follow the steps:
1. Click on the 'Screens' tab to indicate the target's type.
2. Select the widget you want to assign the value to on the current screen displayed in the
small canvas or select it on the outline view. Notice that only some widgets has the
property to display a value:
Input widgets.
Selection widgets.
Static widgets containing text: Label, Rich Text, Button.
3. Type the value in the 'Value' text box or click on 'Calculate' button to define a more
complex value involving other prototype's elements.
72
To create an action which sets a value to a variable, follow the steps:

1. Click on the 'Variables' tab to indicate the target's type.
2. Select the variable you want to assign the value to on the variables' list.
73
3. Type the value in the 'Value' text box or click on 'Calculate' button to define a more
complex value involving other prototype's elements.
Select Value
This action selects a value or group of values from a selection widget in the current screen. The
value or values to be selected can be defined either with a simple text or with an expression
involving other widgets and variables.
To create an action which selects a value from a single selection widget, follow the steps:
1. Select a single selection widget on the current screen displayed in the small canvas or
select it on the outline view. Notice that only the following selection widgets has the
property to be selected:
List Box.
Selection List.
Radio Button List.
2. Indicate the value you want to select from the values' drop-down or click on the
'Calculate' button to define a more complex value involving other prototype's elements.
74
To create an action which selects a set of values from a multi selection widget, follow the steps:
3. Select a multi selection widget on the current screen displayed in the small canvas or
select it on the outline view. Notice that only the following selection widgets has the
property have more than one value selected:
Multi-selection List.
Check Box List.
4. Indicate the value(s) you want to select clicking on the corresponding check boxes in
the values' list or click on the 'Calculate' button to define a more complex value involving
other prototype's elements.
Pause
This action pauses the current event's execution and delays the execution of forthcoming
actions defined for the same user event. Notice that it only pauses the execution of the current
event for the current element, hence already executing actions for other elements or newly
triggered events will be carried on normally.
75
To create this action, just specify the time you want the event's execution to be stopped in the
Time input. Introduce the time in milliseconds (1s = 1000ms).
76
Simulated rules and conditions

Rules, or conditions, can be set up for a given event's interaction in order to govern its actions'
execution. Using conditions one can split and organize the execution of an interaction into
different 'conditional blocks' and decide when to perform one action or another. An interaction
splitted into 'conditional blocks' would look like the following example in the Events panel:
There are two different types of conditions that can be defined with Justinmind Prototyper:
User decision: The interaction of the user is needed when the event is triggered to
decide what actions to execute.
Automatic evaluated condition: The condition is an expression that can be evaluated

automatically once the event is triggered.
Creating a user decision

To define a decision for an specific interaction that has been already created follow the steps:
1. Click on the widget that has the event defined on the canvas. Its events will display on
the Events panel.
2. Click on the 'Add condition' link above the actions you want to make conditional. The
Expression Builder dialog will appear.
3. Construct an expression with only a text string which will define the decision (Ej: "Does
the user exist?").
4.
77
5. Press Ok to create the decision. Select Cancel to close the dialog without applying
changes.
When simulating a user decision it will appear as a Yes/No decision box. If the user selects yes
the corresponding actions will be executed otherwise they will be ignored.
Creating an automatic condition

To define an automatic condition for a specific interaction that has been already created follow
the steps:
1. Click on the widget that has the event defined on the canvas. Its events will display on
the Events panel.
2. Click on the 'Add condition' link above the actions you want to make conditional. The
Expression Builder dialog will appear.
3. Construct a comparative expression using prototype's elements and functions (Ej:
Input_1 = "abc").
4.
5. Press Ok to create the condition. Select Cancel to close the dialog without applying
changes.
One can also define a decision or condition for an action when defining it. To create it click on
the 'Add condition' button in the Interactions dialog.
78
Data Simulation
You can add data to your prototype and interact with it during simulation to make it even more
realistic. You will also be able to pass data between different screens and use data to control
the event's execution.
Importing Real Data

Stakeholders tend to be more involved in the review of a prototype if they see real data on it.
With real data the hidden and forgotten requirements in the functional analysis raise clearly and
quite soon. Sadly the effort required to fill a prototype with real data is too high and often it's
filled with dummy data instead.
Justinmind Prototyper allows you to populate the data masters (and by extent data grids and
simulated queries) with data from a csv file. Than kind of file can be easily extracted from any
kind of data base. So that your prototypes can be filled with plenty of records coming from an
already existing data base.
To do so just open any of your data masters using the option 'edit' in the contextual menu of a
data master. Then select the 'View and edit records' tab.
79
Press the 'Import' button and a dialog will

appear asking you to select a csv file.
The only requirement to that file is that it
must have a first row with texts that
match the names of the attributes in the
data master (the order of the column
don't matter).
You can select which character is used
in your csv file to separate the values.
Finally you can either replace the current
records in the data master by the ones in
the file or add the ones in the file to the
already existing ones in the data master.
You can also export all the records in a data master to a csv file in order to import them in other
prototypes.
Please note that you can fill a drop down or a selection list with the values in a data master. The
import from csv comes in handy when you combine both options to have, for instance, a drop
down that displays all the countries in the world. That drop down could use a data master
'country' with just an attribute and you can download a full list of countries in a csv or excel file
and fill it with that file.
Expression Builder Overview

The business logic editor, also called expression builder is a new kind of editor introduced in
the version 3.0 of Justinmind Prototyper. It is a comprehensive front end to define complex
expressions used to basically evaluate a result out of some input data. The business logic editor
is used mainly for two purposes:
1. To specify a value to set in a 'Set Value' or 'Set Selection' event action.
2. To build the condition that an interaction's conditional block must meet in order to be
executed. In this case the result of the expression must be comparative with a boolean
(true/false, yes/no) result.
The expression builder layout is fairly simple. It has an area to edit the expression at the top and
two panels where you can find all the available functions and data sources.
80
81
Creating expressions
Every expression in Justinmind Prototyper is a combination of Functions and Data sources. To
create your own expression, just drag the functions you need from the Functions panel and drop
them on the editing area. Do the same with the Data sources you will find in the Data panel.
Notice that when dragging the functions or data elements over the expression, its structure will
dynamically change showing a feedback of the result.
Modifying expressions
The editing area is very interactive and you can move elements around by drag and drop and
delete elements by clicking on the feedback X that appears at the top-right corner when the
mouse is over an item.
Functions
General Functions
There is a great set of operations, or functions, that cover most of the processing and logic
needs of any prototype.
82
Numeric functions
These are operations whose operands are numbers (integers, floating point numbers, etc.).
Addition
Sum. Represented by the plus sign. Takes two numeric operands and combines
their quantity or value.
Subtraction
Minus. Represented by the dash sign. Takes two numeric operands and takes away
the quantity of the second from the quantity of the first.
Multiplication
Multiply. Represented by the cross sign. Takes two numeric operands, say X and Y.
X times Y (X multiplied by Y) results in adding X copies of Y together, or adding Y
copies of X together, for it has the commutative property.
Division
Division. Represented by a slash. Is the inverse of the multiplication. Takes two
numeric operands, say X and Y. X divided by Y results in the number of groups of
size Y one can form out of a group of size X.
Maximum
Max. Given two numbers, it returns the largest one in value.
Minimum
Min. Given two numeric parameters, it returns the smallest one in value.
Average
Avg. Given two numeric parameters X and Y, Avg(X, Y) returns the following: (X +
Y)/2 where + is the addition and / the division explained above.
Absolute
Abs. Takes a real number and returns its numerical value without regard of its sign.
Rounding up
Round. Takes two numeric parameters, a floating point number and an integer, and
returns an approximate representation of the first using only as many decimal
numbers as the second parameter's value.
Percentage
%. Takes two numeric operands and the result is the first number expressed as a
fraction of the second. For instance, X % of Y = (X x Y)/100.
83
Square root
Sqrt. Takes just one numeric operand X since the second is always two (square). It
returns a number R such that R2 = X, meaing R x R = X.
Modular arithmetic
Mod. Takes two numeric operands X and Y, and it returns the remnant of the division
of X by Y.
Comparators
Equal
Returns true if both elements at the two ends of the equal sign (=) have the same
value. Returns false otherwise.
Not equal
Is the result of applying the logical function Not explained above to the Equal
function explained in the previous subsection, so the Not Equal function returns true
if the elements at the two ends have a different value.
Greater
Returns true only if the value of the element at the left of the Greater sign represents
a neatly larger value than the element on its right.
Less
a neatly smaller value than the element on its right.
Greater or equal
a larger or equal value than the element on its right.
Less or equal
a smaller or equal value than the element on its right.
Logic
And
&. Given two boolean operands the AND it returns true if both are true, and returns
false otherwise.
Or
Or. Given two boolean operands, the OR operation returns true if either or both of
them are true and returns false otherwise.
84
Not
Not. Given a boolean operand, the NOT operation returns its opposite. NOT(true) =
false, NOT(false) = true.
Xor
Xor. Given two boolean operators, the XOR operation returns true if only one of them
is true, and false otherwise.
Text Functions
Count
This function takes a string parameter and returns a natural number representing the
number of characters of the incoming string.
Concatenation
Concat. This function takes two string parameters A and B and returns a string that
represents B appended to the end of A.
Substring
This function takes a string parameter A and two numeric parameters, X and Y, and
returns a sub-string of A that comprises from the character at the index X to that at Y,
given that strings' total range spans from 0 to n-1, where n is the number of characters of the
string.
Index of
IndexOf. This function takes two string operands, A and B, and returns an integer with
the index in A where the first occurrence of B starts. If B does not occur in a,
it returns -1.
To upper case
UpperCase. This function takes a string and returns a string which contains the same
characters in the same order where lower case letters have been replaced by capital
letters.
85
To lower case
LowerCase. This function takes a string and returns a string which contains the same
characters in the same order where capital letters have been replaced by lower case
letters.
First upper
FirstUpper. This function takes a string and returns a representation of the same string
where the letter at the index 0 has been capitalized.
Match regular expression
Regexp. This function takes a string A and a string representing a standard regular
expression R and returns true if A matches the expression R, and false otherwise.
If you need more information about regular expressions and how they can be created, please
refer to http://en.wikipedia.org/wiki/Regular_expression. However, you won't always need to
build your own regular expressions, for the Justinmind Prototyper provides some of the most
useful constructions ready-to-use. Refer to the Regular expression constants
Contains
Has. This function takes two input strings A and B. It returns true only if first string A
contains the whole string B.
Collection's Functions
Some data elements may be represented as collections and some other functions may be
needed. This is the case for Data Masters, Data Grids, Selection Components, etc.
86
Data selection
Select. This function takes two input parameters A and B. The A parameter represents
the data collection where the selection will be applied to (ej: Data Master), and
parameter B works as a selection filter represented by a Data Master's attribute. Hence, this
function will return the filtered data from A following B rules. The result will be generally a list of
values.
Distinct
Distinct. This function works as 'Data selection' returning the same list of values but
repeated items.
Filter
Filter. This function takes two input parameters A and B. The A parameter represents
the data collection where the filter is applied to (ej: Data Master), and parameter B
represents the filter condition. Parameter B is usually a conditional expression made of Data
Master's attributes and conditional operators. Hence, this function will return a list of Data
Master's instances following B rules.
Count
Count. This function returns the number of data instances the input collection has.
87
Summation
Sum. This function returns the summation of an input data list. The function needs two
parameters A and B: parameter A represents a data collection and B acts as a filter of
A as the 'Data Selection' operation does. Moreover, parameter B may contain number
operators. The filtered data collection must consist of numbers for the operation to work
properly.
Average
Avg. This function returns the mean from a data set by dividing the sum of data by the
number of items in the data set. The input parameters are the same as for the
Summation operation.
Maximum
Max. This function takes the same parameters as for Summation. For this case, it will
return the maximum number found in the input data set.
Minimum
Min. This function takes the same parameters as for Summation. For this case, it will
return the minimum number found in the input data set.
Concatenate
AddTo. This function represents the concatenation of two data collections. It takes two
input parameters each one representing a data collection and returns a list containing
both sets.
88
Substract
RemoveFrom. This function takes two input parameters A and B, each one
representing a data collection. It returns a list containing all the items from data set A
which do not appear in B.
Data sources
We call 'Data sources' to the data elements we can use and manipulate in the expression
builder to create expressions and calculations. These elements act as parameters of the
expressions.
There are mainly five kinds of data sources we can use to build our expression:
Screen's Widgets: The value displayed by a widget on the current screen can be used as a
parameter of your expression. To use them, drag and drop the widgets from the 'Screen' tab of
the Expression Builder to the editing area. Notice that only the widgets which can display a
value are permitted:
Input widgets.
Selection widgets.
Static widgets containing text: Label, Button and Rich Text.
Data Grids.
Data Grids' rows.
Variables: As explained in Variables page, variables act as generic containers for data which
can be used in expressions.
Data Masters: Use a Data Master in a expression to operate with all its records. You can also
use Data Masters' attributes in order to filter a Data Master among other functions.
Constants: There are several static elements you can use as parameters as:
Text constant: This element allows the user to input any desired string as a literal.
Date constant: Lets you select a date from a calendar.
System date: Gives the current system date.
System time: Gives the current system time.
Random number: Generates a random number between 0 and 1 that can be used to
include randomness in calculations. It is very useful to simulate a random or vague
behaviour.
Regular expression: Use the regular expressions to easily check if a value meets a 'rule'. Ej:
Check if a number is a correct postal code. See how to construct this expressions in the Text
Functions section. There are several regular expressions already created that you can use
together with the 'Regular Expression' function:
Number
This regular expression represents any number, with its sign and its decimal part
separated from the integer part by either '.' or ','.
/^[-]?[0-9]+[.|,]?[0-9]+$/
89
Email
This regular expression represents any valid email address according to the standard.
Check for the name, the @ symbol and the domain names.
/^[0-9a-zA-Z]+@[0-9a-zA-Z]+[.]{1}[0-9a-zA-Z]+[.]?[0-9a-zA-Z]+$/
Percentage
This regular expression accepts any number with an integer part up to two digits and a
decimal part up to two digits.
/^\d{0,2}(.\d{1,2})?$/
Money
This regular expression accepts any monetary value in the form $34,245,456.33, where
the dollar symbol and the decimal part are optional.
/^\$?[1-9][0-9]{0,2}(,[0-9]{3})*(.[0-9]{2})?$/
Phone
Accepts any number between six and ten digits, optionally separated in its second or
third digit by a dash or a white space.
/^[0-9]{2,3}-? ?[0-9]{6,7}$/
Postal code
Accepts any UK postal code, which are one or two town district letters, followed by one
or two digits, followed by a white space, followed by a digit, followed by two postal
district letters. Also any Spanish postal code is accepted, which are numbers of five digits.
/(^[A-Z]{1,2}[0-9]{1,2}) ([0-9][A-Z]{2}$)|(^[0-9]{5}$)/
Credit card
This accepts all Visa credit cards.
/^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[09][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|
(?:2131|1800|35\d{3})\d{11})$/
URL
This accepts all possible URLs, which are strings matching the following notation:
resource_type://username:password@domain:port/filepathname?query_string#anchor.
/^[A-Za-z]{2,}://(/)?([A-Za-z0-9]+:[A-Za-z0-9]+@)?[A-Za-z0-9.-]
{3,}(:[0-9]{2,10})?(/[A-Za-z0-9]+)*((?[A-Za-z0-9]+=[A-Za-z0-9]+)
(&[A-Za-z0-9]+=[A-Za-z0-9]+)*|/)?(#[A-Za-z0-9]+)?$/
90
Arithmetic Calculations
You can operate with data from any data source on your prototype like input widgets, text
widgets, Data Grids, Data Masters etc. The most basic and common operations are the
arithmetic ones which apply only to numbers. You will be able to operate with either integer or
decimal numbers. Notice that the only number formats understood by Justinmind Prototyper are
the following:
Integers matching the regular expression: [-+]?(?:(?:(?>\\d{1,3})[@](?=\\d\\d\\d))+
(?:\\d\\d\\d)|\\d*).
Examples:
25 (taken as 25)
25,134 (taken as 25134)
25.134.341 (taken as 25134341)
25,134,341 (taken as 25134341)
Decimals matching the regular expression: [-+]?(?:(?:(?>\\d{1,3})[@](?=\\d\\d\\d))+(?:\\d\\d\\d)(?:

[#]\\d*)?|\\d*(?:[#]\\d*)?).
Examples:
25,34 (taken as 25.34)
25.34 (taken as 25.34)
25.341 (taken as 25.341)
25.134,34 (taken as 25134.34)
25,134.34 (taken as 25134.34)
To create an arithmetic operation and store or display its result follow the steps:
1. Select a widget on the screen and follow the steps to create a Set Value action (see
Actions).
2. In the Interactions dialog click on the 'Calculated' button. The Expression Builder will
appear.
3. Create the desired arithmetic expression using numeric functions and the required data.
4. Press Ok to close the Expression Builder dialog.

5. Select a widget on the small canvas as the target to display the result of the expression
or select a variable to store it.
91
6. Press Ok to apply the changes.

You can also use arithmetic operations within a event's condition in order to compare the result
with any other data source.
Variables
Variables are pieces of data that can be written and read through the events' system. A Variable
value can be interpreted as a string, number, date, collection of Data Master's records or
anything depending on the calculations applied on it. Variables' lifespan is that of the simulation
of the prototype.
Creating variables
To create a new Variable, first select the option 'Variables' from the View menu to show the
corresponding panel. Then follow the steps:
1. Click on the green 'plus' button. A dialog will appear.
2. Introduce a name for the Variable in the input 'Name'. The name of the Variable must be
unique per prototype in order to identify them properly.
3. (Optional) Introduce a default value in the input 'Default Value'. This will be the value the
Variable will take when starting the prototype's simulation.
4. Click on Ok to create the Variable or click Cancel to cancel the changes.
Modifying variables
To modiy the name or default value of an existing Variable, double-click on it on the Variables
panel or right-click on it and select 'Edit'. Modify the parameters in the dialog and click on Ok.
Deleting variables
To delete a Variable, right-click on it on the Variables panel and select 'Delete'.
Setting a value
You can store any kind of information in a Variable during simulation using events and
interactions. Specifically, storing a value to a Variable must be done through a 'Set Value' action
using the desired variable as the action's target. Justinmind Prototyper offers you two different
ways to create this action for a Variable:
Using drag and drop

To store the value from a screen's widget to a Variable just drag the widget and drop it
on the desired variable on the Variables panel. This will create an 'On page unload'
event with an action that sets the widget's value to the variable.
92
Creating the action manually

To store the value from a screen's widget or any other data source (including the result
of complex calculations) use the Events panel to create a 'Set Value' action (see
Actions for more information about this action). Type a constant as a value or click on
the 'Calculated' button to use a data source or construct a calculation.
Getting the value

You can display the contents of a Variable during simulation also using a 'Set Value' action and
setting the Variable as the data source. Justinmind Prototyper offers you two different ways to
create this action:
Using drag and drop

To display the value of a Variable in a screen's widget just drag the Variable and drop it
on the screen's widget. Notice that the target widget must be compatible with the
Variable's value type. This will create an 'On page load' event with an action that sets
the Variable's value to the widget.
Creating the action manually

To display the value of a Variable on a screen's widget use the Events panel to create a
'Set Value' action (see Actions for more information about this action). In the
Interactions dialog select the screen's widget as the action's target, click on the
'Calculated' button and create an expression using the Variable as the only data
source.
93
Data Grids
Data Grids are a way to display the records of a Data Master as a list. This list's data source is
always a single Data Master which is selected when the list is created. A Data Grid displays
only one header and one row when editing it in the user interface but it is expanded when
simulating replicating its rows displaying a different row for each Data Master's record instance.
Find more information about creating a Data Grid in the Widgets topic.
Adding content to your Data Grid

Data Grids have a default structure which displays as many columns as Data Master's fields
indicated when creating it. However, they can be customized adding more information or
rearranging the default information provided.
New widgets can be added into a Data Grid's cell. However, notice that some widgets can have
a different behaviour inside a Data Grid's cell depending on their properties:
Associated to a Data Field: If the widget is associated to a Data Master's field which
belongs to the Data Master associated to the Data Grid, then it will display different
values depending on the row it is displayed showing the different Data Master's records
for this field.
Not associated to a Data Field: If the widget is not associated to any field, then it will
display the same value for each row of the Data Grid.
94
Hence, you can fully customize your Data Master's graphical representation:
Associate widgets to a Data Master's field

Not every widget can be associated to a Data Master's field. Only the following can:
Input widgets
Selection widgets
Image widget
In order to associate a widget to a Data Master's field, first select the widget on the screen and
then select the desired Data Master's field from the 'Data Field' drop-down you will find in the
Properties panel. The drop-down will show all the available fields which the selected widget can
be associated to.
Many specific functions and actions can be applied to Data Grids like filters. See some special
Data Grid functions here.
95
Create
Creating new records for a Data Master can be easily simulated through the event's system. To
create a new record instance for a specific Data Master, create the corresponding Data Master
action following the steps:
4. Click on the 'Data Master action' radio button.
5. Select the Data Master you want to add records to and click on the 'New' button. The
Expression Builder will appear.
6. Create the expression filling the required parameters with any data sources.
Example: This expression creates a new user in the Data Master 'Users' using
some form inputs on the screen.
7. Press Ok to all opened dialogs to apply the changes.

Notice that all the instances you create, modify or delete during simulation will be restored once
you stop simulating.
Read
You can get any information out of a Data Master or a Data Grid in order to use it for other
calculations or just to display it separately using event actions.
Reading entire record's instances
To get a specific Data Master's record instance or a collection of them use one of the following
data sources in the Expression Builder:
Data Master: Represents the collection of all the Data Master's instances.
Data Grid: Represents the collection of all the Data Master's instances currently
displayed by the Data Grid.
Data Grid's row: Represents the instance displayed by the current row.
Variable containing any of the mentioned data types above.
Additionally you can filter any of the data sources mentioned above in order to get a more
specific record instance. To do so, you will need to create a Filter expression in the Expression
Builder dialog.
96
Reading record instance's fields

To get a specific field from a Data Master's record instance in the Expression Builder you will
have to use the Select function. The Select function needs two parameters:
First parameter: Introduce here a Data Master's record instance or a collection of

instances. To do so, you can drag and drop any Data Master, Data Grid, Data Grid's
row or Variable containing record instances.
Second parameter: Introduce here the Data Master's field you want to get from the
instances' collection.
If the first parameter defines a collection of record instances, then the select operation will
return a list of values:
If the first parameter defines a single record instance, then the select operation will return a
single value:
Update
You can modify a specific record instance or a group of instances of a Data Master using
event's actions during simulation. To modify records from a specific Data Master, create the
corresponding Data Master action following the steps:
97
5. Select the Data Master you want to modify records from and click on the 'Modify' button.
The Expression Builder will appear with a modify expression.
6. Create the expression filling the required parameters with any data sources. Notice that
the first parameter of the expression refers to the record or records collection you want
to modify.
Example 1: This expression modifies all users from the Data Master 'Users' using
some form inputs as values.
Example 2: This expression modifies only users matching 'Username=Bob' using

some form inputs as values.

Delete
You can delete a specific record instance or a group of instances of a Data Master using event'
actions during simulation. To delete records from a specific Data Master, create the
corresponding Data Master action following the steps:
5. Select the Data Master you want to delete records from and click on the 'Delete' button.
The Expression Builder will appear with a delete expression for the Data Master
specified.
6. Create the expression filling the required parameter with a data source. Notice that the
first and only parameter of the expression refers to the record or records collection
you want to delete.
Example 1: This expression deletes all users from the Data Master 'Users'.
98
Example 2: This expression deletes only users matching 'Username=Bob'.

Attribute Types
Every Data Master has a set of attributes or fields which has a specific type. The type of each
attribute can be defined and changed through the Data Master edition dialog.
To open the dialog double-click on a existing Data Master or create a new one. There you will
be able to choose between the following types for each attribute:
99
Text (default type)

The text type defines a field which displays a plain text. This attribute type can have three
different graphical representations: text, text area (multi-line) or password. To select the correct
representation, select the attribute field on the 'Data Master Fields' table and click on the
"pencil" button. A new dialog will appear in order to select between three different styles:
Editing Text records

To edit a Text record just click on the corresponding cell in the 'Records Table' and type any text
you want as a value.
Date
The date type defines a field which displays a date using the format MM/DD/YYYY or a date
and time using the format MM/DD/YYYY HH:mm. This attribute type can have two different
graphical representations. To select the correct representation, select the attribute field on the
'Data Master Fields' table and click on the "pencil" button. A new dialog will appear in order to
select between the different styles:
100
Editing Date records

To edit a Date record just click on the corresponding cell in the 'Records Table' and type a date
in the format MM/DD/YYYY or MM/DD/YYYY HH:mm depending on the style you choose. Other
formats of text will not be accepted for this field type.
Category
The category type defines a field which displays a value from a range of predefined values.
This attribute is commonly represented by a single selection widget that can have three different
graphical representations. To select the correct representation and the desired range of values,
select the attribute field on the 'Data Master Fields' table and click on the "pencil" button. A new
dialog will appear in order to select between the different styles:
Editing Category records

To edit a Category record just click on the corresponding cell in the 'Records Table' and type
any text matching some of the values in the values' range defined. Other text not matching any
category's value will not be accepted. Ej: You can type 'Red' if you defined the values
'Red','Green','Blue' for the category field.
True/False
The true/false type defines a field which displays can only display true or false. It is always
represented as a check box widget as it is the only boolean widget.
Editing True/False records
To edit a boolean record just click on the corresponding cell in the 'Records Table' and type
'true' or 'false'.
101
File upload
The file upload type defines a field which can display a file path or an image file if the widget
used to represent it is an Image widget.
Editing File records
To edit a File record just click on the corresponding cell in the 'Records Table'. A browse and
delte button will appear. Click on the browse button and select a file (select an image file if you
want the file to be displayed).
Multicategory
The multicategory type defines a field which displays a set of values from a range of
predefined values. This attribute is commonly represented by a multi-selection widget that can
have two different graphical representations. To select the correct representation and the
desired range of values, select the attribute field on the 'Data Master Fields' table and click on
the "pencil" button. A new dialog will appear in order to select between the different styles:
Editing Multicategory records

To edit a Multicategory record just click on the corresponding cell in the 'Records Table' and
type any text matching some of the values in the values' range defined. You can type more than
one value in the range using comas to separate them. Ej: You can type 'USB,Firewire' if you
defined the values 'USB','Bluetooh','Firewire' for the multicategory field.
Changing attribute's type

To change the type of a Data Master's attribute, click on its type in the 'Data Master Fields' table
of the Data Master's dialog. A drop-down showing all the available types will appear. Select the
desired type from the drop-down. Press Ok to apply the changes.
102
Notice that changing the type of a Data Master's attribute will make all the widgets in the
prototype associated to this attribute to change according to the new type. Also the records for
this attribute will be restored to its default to match the new format.
Dynamic Selects
You can use a selection widget to display the contents of a Data Master.
Displaying Data Master's record instances

To make a selection widget display the Data Master's record instances: Select and drag the
selection widget you want to display the Data Master's values on the screen and drop it on the
desired Data Master on the Data Masters panel. Alternatively, you can drag the Data Master
and drop it on the selection widget on the screen. This process will associate the widget with the
Data Master.
You can also associate a selection widget with a Data Master following the steps:
1. Select the selection widget you want to associate on the screen.
2. Click on the 'pencil' button in the Value field of the Properties panel. A new dialog will
open.
3. Select the option Data Master clicking on the radio button.
4. Select the desired Data Master from the list.
5. Click on Ok to apply the changes.
Once associated, the selection widget will display all the Data Master's record instances
separating each field value with a coma. However, you can define which Data Master fields you
want the widget to display using the Data Master's descriptor:
103
Displaying Data Master's category field values

You can display the values defined for a Data Master's category attribute. To make a selection
widget to display these values, select and drag a single-selection widget on the screen and drop
it on the desired category attribute in the Data Masters panel. Alternatively, you can drag the
category attribute from the Data Masters panel and drop it on the selection widget.
You can also associate a selection widget with a Data Master's category attribute following the
steps:
1. Select the single-selection widget you want to associate on the screen.
2. Click on the 'pencil' button in the Value field of the Properties panel. A new dialog will
open.
3. Select the option Data Master Field clicking on the radio button.
4. Select the desired Data Master Field from the list.
5. Click on Ok to apply the changes.
Displaying Data Master's multicategory field values

You can display the values defined for a Data Master's multicategory attribute following the
same steps described above for the category attributes. Notice that in this case you will need a
multi-selection widget.
104
Auto-Forms
You may need to create a form out of some Data Master's fields. This is fast and easy with
Justinmind Prototyper with a simple 'drag and drop'.
To create a form using all the fields from a Data Master, just drag the Data Master from the
Data Master's panel and drop it on the canvas. A form will be created with Data Master's field
names as Labels with a corresponding input for each of them.
If you want a form with only some of the Data Master's fields, select the required fields on the
Data Master's panel and drag and drop them on the canvas.
105
Smartphones and SAP

Now you can easily prototype applications for Iphone, Symbian, Android, SAP and much more
thanks to the many widget libraries provided by Justinmind.
Find all the libraries needed for your mobile applications.
Find all the libraries needed for your SAP applications.
Reuse
Templates
The Templates are a way to share content between a prototype's screens in order to save time
and facilitate any global changes. In Justinmind Prototyper, Templates behave like a screen as
far as the user interface edition is concerned but, unlike the screens, they can define a set of
styles and can be associated to screens. Every screen in a prototype has one Template
associated which also defines the default styles of every widget.
In a screen, the contents of the associated Template are displayed slightly transparent during
edition so you can clearly see which contents belong to the Template and which ones to the
screen. Notice that the contents of a Template cannot be changed during a screen's edition. To
edit the contents of a screen's Template you first need to select it on the Templates panel to
open it.
Creating a Template
To create a new Template follow the steps:
1. Click on the 'plus' button in the Templates panel. A dialog will appear.
2. Introduce the name for the new Template in the 'Name' field. Remember the name must
be unique in the prototype.
3. Press Ok to apply the changes or click on Cancel to close the dialog without creating
the Template.
Alternatively you can create a Template by duplicating an existing one. To duplicate a Template,
right-click on the Template you want to duplicate in the Templates panel and select the
'Duplicate' option. Then follow the same steps described above.
106
Editing Template's name

If you want to change the name you gave to a Template, right-click on it in the Templates panel
and select 'Edit'. A dialog like the creation dialog will appear. Introduce the new name and press
Ok.
Setting a Template as default

If you want to make a Template the default Template for every new screen, right-click on it in
the Templates panel and check the option 'Set as default Template' in the dialog that will
appear. Then press Ok to apply the changes.
Associate a Template to a screen

To associate a Template to a specific screen so it can work as its Template, right-click on the
screen you want to associate the Template to and then select the 'Edit' option. A dialog showing
the current screen's name and Template will appear. Click on the Browse button next to the
'Template' field to open the Template selection dialog:
Select the Template and press Ok to apply the changes.
107
Deleting a Template
To delete a Template, first make sure the Template is not set as default or is being used by a
screen. Then right-click on it in the Templates panel and select 'Delete'.
Changing Template's styles

To change the styles defined by the Template, see the Default Styles section.
Exporting Templates
To export a Template, first select the Templates panel tab and follow the steps:
1. Click on the drop-down button at the top right corner of the Contents panel.
2. Select the 'Export Template' option. A new dialog will appear to select the Template you
want to export and location.
3. Select the Template you want to export from the drop-down field 'Select Template'.
Once selected a preview of the Template will be shown so you can check it is the
correct one.
4. Click on the 'Browse' button of the 'Export Location' field and select the export
destination in your file system as well as the name for the file.
5. Select Ok to export the selected Template or click on Cancel to close the dialog without
applying changes.
Importing Templates
To import a Template previously exported, first select the Templates panel tab and follow the
steps:
2. Select the 'Import Template' option. A new dialog will appear to select the Template file.
3. Click on the 'Browse' button of the 'Import Location' field and select the Template file
(.vpt extension) you want to import. Once selected the Template will be displayed in the
same dialog so you can check it is the correct one.
4. Select Ok to import the selected Template or click on Cancel to close the dialog without
applying changes.
Tip: You can also import a Template by drag and drop: just drag the file
from your file system and drop it on the Templates panel.
108
Masters
The Masters are, like the Templates, a way to replicate and share content across a prototype's
screens in order to save time and facilitate any global changes. In Justinmind Prototyper,
Masters also behave like a screen as far as the user interface edition is concerned but, unlike
the screens, they can be treated like a compound widget. Hence, Masters can be created into
screens or templates like a common widget but with a very big difference: every change you
make to a Master will spread to all the Master instances you created in your prototype.
In a screen or template, a Master instance is painted with a slightly transparent yellow color so
you can clearly see which contents belong to a Master. Notice that the contents of a Master
cannot be changed during the screen or template edition. To edit the contents of a Master you
first need to select it on the Masters panel to open it. You can, alternatively, double-click on a
Master instance on your screen or template to start editing it.
Creating a Master
To create a new Master follow the steps:
1. Click on the 'plus' button in the Masters panel. A dialog will appear.
2. Introduce the name for the new Master in the 'Name' field. Remember the name must
be unique in the prototype. Introduce a description into the 'Description' field if you need
it.
3. Press Ok to apply the changes or click on Cancel to close the dialog without creating
the Master.
Alternatively you can create a Master by duplicating an existing one. To duplicate a Master,
right-click on the Master you want to duplicate in the Masters panel and select the 'Duplicate'
option. Then follow the same steps described above.
Editing Master's name and description

If you want to change the name or description you gave to a Master, right-click on it in the
Masters panel and select 'Edit'. A dialog like the creation dialog will appear. Introduce the new
name and press Ok.
109
Adding a Master to a screen

You can create as many Master instances as you want per screen or template. To create a
Master instance just drag the Master like a common widget from the Masters panel and drop it
on the screen/template.
Deleting a Master
To delete a Master, right-click on it in the Masters panel and select 'Delete'. Notice that when
deleting a Master all the Master instances created in the prototype will also be deleted.
Exporting Masters
To export a Master, first select the Masters panel tab and follow the steps:
2. Select the 'Export Master' option. A new dialog will appear to select the Master you want
to export and location.
3. Select the Master you want to export from the drop-down field 'Select Master'. Once
selected a preview of the Master will be shown so you can check it is the correct one.
4. Click on the 'Browse' button of the 'Export Location' field and select the export
destination in your file system as well as the name for the file.
5. Select Ok to export the selected Master or click on Cancel to close the dialog without
applying changes.
Importing Masters
To import a Master previously exported, first select the Masters panel tab and follow the steps:
2. Select the 'Import Master' option. A new dialog will appear to select the Master file.
3. Click on the 'Browse' button of the 'Import Location' field and select the Master file (.vcc
extension) you want to import. Once selected the Master will be displayed in the same
dialog so you can check it is the correct one.
4. Select Ok to import the selected Master or click on Cancel to close the dialog without
applying changes.
Tip: You can also import a Master by drag and drop: just drag the file
from your file system and drop it on the Masters panel.
110
Custom widget libraries

Next to the Widgets tab is the My Widgets tab. My Widgets are customizable widgets created by
the user, by Justinmind or by third-party widget providers, and can be easily imported and
exported to and from any Justinmind Prototyper.
Custom widgets are organized in widget groups in the My Widgets panel. Through its toolbar
you can create new groups, export them or import new libraries:
Creating a group
If you want to create a new widgets' group, click on the 'Add group' from the panel toolbar. A
new dialog will appear. Introduce the name in the 'Title' field and press Ok to create the group
with the given name.
Editing group's name

If you want to change the name of a widgets' group, click on the 'pencil' button next to its name.
A new dialog will appear. Introduce the new name in the 'Title' field and press Ok to apply the
changes.
Deleting group
If you want to delete a widgets' group, click on the 'cross' button next to its name. A new dialog
asking for confirmation will appear. Press Ok to apply the changes.
Creating your own widgets

To create your own custom widget, you just need to group all the widgets on the screen your
new custom widget should consist of and then drag and drop it on the desired group in the My
Widgets panel. A new dialog asking for the widget's name and image will appear. Introduce a
name for your widget and, optionally, select an image to display in the My Widgets panel.
111
Alternatively, you can right-click on any widget created on the screen and select the 'Add to My
Widgets' option from the contextual menu. This time you will also need to introduce the
destination widget's group.
Modifying a widget
Once a custom widget is created you can modify its name, image and the widget's group it
belongs to. In order to change these properties, right-click on the widget in the 'My Widgets'
panel and select 'Edit'.
You can also move a widget between widget's groups by drag and drop.
Deleting a widget
If you want to delete a widget, right-click on it in the 'My Widgets' panel and select 'Delete'. A
new dialog asking for confirmation will appear. Press Ok to apply the changes.
Exporting Widget groups

To export your custom widgets as a library, first select the 'My Widgets' panel tab and follow the
steps:
1. Click on the 'Export' button in the panel's toolbar. A new dialog will appear to select the
groups you want to export and location.
2. Select from the 'Widget groups list' the groups you want to export moving them to the
'Exported list'.
3. Click on the 'Browse' button of the 'Browse' field and select the export destination
together with the file name.
4. Select Ok to export the widgets on the 'Exported list' or click on Cancel to close the
dialog without applying changes.
112
Importing Widget library

To import a custom widget library previously exported, first select the 'My Widgets' panel tab
and follow the steps:
1. Click on the 'Import' button in the panel's toolbar. A new dialog will appear to select the
library file location.
2. Click on the 'Browse' button of the 'Browse' field and select the library file (.jpl
extension) from your file system.
3. Select Ok to import the widgets from the selected file or click on Cancel to close the
dialog without applying changes.
Tip: You can also import a widgets' library by drag and drop: just drag
the file from your file system and drop it on the 'My Widgets' panel.
Import and Export Prototypes

Sometimes there comes the need to use part of a prototype in another prototype, or to share
only a portion of a whole prototype with colleagues. To achieve it, the import and export
prototype options are provided. They let you select a subset of elements of a prototype and
export them into a new prototype file, and also load a prototype and select a subset of elements
to import into another prototype.
Export Prototype
The export prototype option is accessible via the File Export menu. It presents a list of all the
exportable prototype elements -screens, scenarios, data masters, templates and masters- on
the left and lets you select the elements that are to be exported.
113
Once you select an element (tick the checkbox on its left), all the elements it depends on (e.g.
the template for a screen, the links or masters that appear in that screen...) are marked with a
warning symbol ( ). These elements must be ticked if you want the selected element to be
fully featured and appear in the exact same face as in the source prototype. However, if they
are not exported they just won't appear in the final prototype. On the right there are two buttons:
Click on Add Direct Dependencies to automatically add all the elements that are direct
dependencies of the elements currently ticked.
Click on Add All Dependencies to make the same process recursively for all add elements
until no dependencies are missing.
When you have selected all the desired elements and have dealt with the dependencies, click
the button to select the target file location and give the target file a name. Exported files have
the .vp extension. Finally, click on the Ok button to perform the export.
Import Prototype
The import prototype option is accessible via the File Import menu. In the import prototype
screen, first select the prototype you want to import. Once selected, the bottom area displays a
list of conflicts. A conflict occurs when there are elements in the imported prototype with the
same name and type than other elements in the open prototype. For each conflict detected, the
system offers three actions:
Copy: Copies the element under a new name, so that you get both in the final prototype.
The new name is the old name with a number suffix.
Discard: Discards the imported element and keeps the original one. The imported element
is lost. That's the option by default.
Update: Discards the original element and updates it with the imported. The original
element is lost.
114
In the list, each element has three radio buttons to select the action you desire. Once you have
dealt with all the conflicts, click Ok to perform the import.
Publish Online
At Justinmind, we think that a web prototype is the best communication tool between
customers/users and the software development team. If you have an application prototype at
the start of a project and it is as close as possible to the final application, the user can be
involved from the beginning, giving his opinion and validating it: the more key people get
involved, the more successful the project will be as a whole, reducing the number of final
adjustments made on the application and not on the prototype.
With Justinmind Usernote. All authorized key users can access your prototypes on the
Internet. They can collaborate by testing and commenting on them from their browser. Also, all
their notes are registered and centralized so that no details are lost. Through this service, you
can also integrate your prototype online with user test tools and remote tools.
Select the menu option Share Publish Online and enter in your Justinmind Usernote account.
Then push the upload prototype and select the prototype file that you want to publish (if you
want to publish the prototype that you are currently working on you should save it first to some
115
disk location). Once uploaded you can click on the name of that prototype to navigate it or invite
another users to review it.
116
Export to HTML
In order to generate an HTML website out of your prototype, use the 'Export to HTML' option
located in the 'Share' menu of the application's main menu. It will request a disk location where
the HTML prototype will be saved under a new folder whose name matches the prototype file
name.
The HTML prototype file structure is as follows:
[PrototypeName]/CSS This folder contains the cascade style sheets (CSS) files
which contain information about the style and look and feel of HTML elements.
[PrototypeName]/images This folder contains the images of your prototype.
[PrototypeName]/javascript This folder contains the javascript script files which

provide active behaviours such as most event actions to prototypes.
[PrototypeName]/pages This folder contains the actual screens sorted by name. Use
this folder to look and browse screens without the navigation tree on the left that's
common to all HTML prototypes.
[PrototypeName]/index.html Use this file as an entry point to any HTML prototype. It

opens the prototype's home page and adds a useful screen tree on the left to ease
navigation. Html files can be opened with any web browser such as Internet Explorer,
Mozilla Firefox, Apple Safari or Google Chrome.
Include/Exclude comments
When this option is selected you will be asked if you want or not comments in your prototype. If
you want comments then a panel will be added to the left of your prototype showing the
comments (if there are any) and a list of all the screens in the prototype. If you choose not to
show the comments then all that panel won't appear in the prototype. That last option is perfect
to test the prototype in mobile phones and tablets..
Optimize code
You can also optimize the generated code so the screens can load faster. In order to optimize it,
go to the 'File' menu, click on Preferences and check the option 'Optimized HTML' in the
General section.
117
Scenarios
Creating Scenarios
Use the Components Panel to add these components to the canvas. You can also drag already
existing screens to the scenario. To drag and drop a component onto a scenario drag a
component or a screen from the components panel and release it on the canvas. Once in the
canvas you can rename the component, move it around the canvas and change color, font and
many other style properties. Draw transitions (arrows) between the components in the canvas
by using the 'Create transition' tool at the tool bar. You can draw transitions also by placing the
cursor onto the component in the canvas and dragging the small arrows to another component.
You can rename the transitions by double-clicking in the ... text above them.
118
Validating Prototypes
A scenario is not only a place to draw flow diagrams but also a way to validate your current
simulation against those flows. When you drag a screen component into the scenario's canvas
the screen is represented by an icon. If that screen is renamed in such a way that the new name
matches the name of a screen created in 'User Interface' then the icon is replaced by a preview
of that screen. So that you can quickly view if the screens in a scenario are actual screens in
your prototype. You can create an actual screen from a component in a scenario by clicking with
the right mouse button on it (cmd+click in OS X systems) and selecting the 'Create also in UI'
option. A new screen will be created in the 'User Interface' tab and the icon in the scenario will
be replaced by a preview of that screen. The transitions are also compared to actual links in the
simulation. If the transition hasn't its companion link in the screen then a warning icon appears.
Once the link that links that screens is created in the 'User Interface' the warning icon will
disappear. Double-click on a screen component in the scenario opens that screen in the 'User
Interface' tab to edit. Check in which scenarios appears a screen by choosing the 'Scenarios'
option in the contextual menu of a screen in 'User Interface'.
119
Keyboard Shortcuts
Standard Shortcuts
Windows
OS X
Cut
Ctrl + X
Cmd + X
Copy
Ctrl + C
Cmd + C
Paste
Ctrl + V
Cmd + V
Duplicate
Ctrl + D or Ctrl + Click and

drag
Cmd + D or Cmd + Click

and drag
Delete
Delete or Backspace
Delete or Backspace
Undo
Ctrl + Z
Cmd + Z
Redo
Ctrl + Y
Cmd + Shift + Z
Select All
Ctrl + A
Cmd + A
Print
Ctrl + P
Cmd+ P
Find
Ctrl + F
Cmd + F
Help
F1
Cmd + Shift + ?
Exit
Alt + F4
Cmd + Q
120
Prototype
Windows
OS X
New
Ctrl + N
Cmd + N
Open
Ctrl + O
Cmd + O
Save
Ctrl + S
Cmd + S
Close
Ctrl + W
Cmd + W
Navigation
Windows
OS X
Go to home screen
Alt + Home
Cmd + Shift + H
Go to previous screen
Alt + Left arrow
Cmd + [
Go to next screen
Alt + Right arrow
Cmd + ]
View
Windows
OS X
Fullscreen
F11
Cmd + Shift + F
Scroll up
Mouse wheel up
Mouse wheel up
Scroll down
Mouse wheel down
Mouse wheel down
Zoom in
Ctrl + Mouse wheel up or

Ctrl + '+'
Cmd + Mouse wheel up or

Cmd + '+'
Zoom out
Ctrl + Mouse wheel up or

Ctrl + '+'
Cmd + Mouse wheel down

or Cmd + '-'
121
Drag and move canvas (pan)
Space + Drag
Space + Drag
Share
Windows
OS X
Simulate
F5
Cmd + Shit + P
Documentation
F6
Cmd + Shift + S
HTML
F7
Cmd + Shift + T
Save canvas as image
F8
Cmd + Shift + I
Text formatting
Windows
OS X
Bold
Ctrl + B
Cmd + B
Italic
Ctrl + I
Cmd + I
Underline
Ctrl + U
Cmd + U
Center align
Ctrl + E
Cmd + E
Left align
Ctrl + L
Cmd + L
Right align
Ctrl + R
Cmd + R
Widgets
Windows
OS X
Group
Ctrl + G
Cmd + G
Ungroup
Ctrl + Shift + G
Cmd + Shift + G
122
Hide
Ctrl + H
Cmd + J
Show
Ctrl + Shift + H
Cmd + Shift + J
Lock
Ctrl + K
Cmd + K
Unlock
Ctrl + Shift + K
Cmd + Shift + K
Bring to front
Ctrl + Shift + Arrow up
Cmd + Shift + Arrow up
Send to back
Ctrl + Shift + Arrow down
Cmd + Shift + Arrow down
Bring forward
Ctrl + Arrow up
Cmd + Arrow up
Send backward
Ctrl + Arrow down
Cmd + Arrow down
Align left
Ctrl + Alt + L
Cmd + Alt + L
Align center
Ctrl + Alt + C
Cmd + Alt + C
Align right
Ctrl + Alt + R
Cmd + Alt + R
Align top
Ctrl + Alt + T
Cmd + Alt + T
Align middle
Ctrl + Alt + M
Cmd + Alt + M
Align bottom
Ctrl + Alt + B
Cmd + Alt + B
New comment
Ctrl + Shift + C
Cmd + Shift + C
New event
Ctrl + Shift + E
Cmd + Shift + E
123
Additional Help
Customer Support Portal
That's a special place for customers to request help to the Justinmind Support Team. Once you
buy a license you receive the registration details to log in into that portal. There you can either
report issues about Justinmind's products or ask how to simulate something that you are not
able to do. Click this link or copy and paste this url http://support.justinmind.com to your
internet browser to enter in the Justinmind Support Portal.
Community-powered Support
You might have a question or an issue that other users had too. Check our community-powered
support portal (http://getsatisfaction.com/justinmind) and add questions, report problems or
praise how good is to prototype with Justinmind. People from Justinmind check this portal from
time to time and have already answered many questions. If you are a customer we highly
encourage you to use the Customer Support Portal instead.
Video Tutorials
Justinmind's web site has a special section with video tutorials with examples on how to use
Prototyper to simulate different cases. Have a look at them at
http://www.justinmind.com/tutorials
Articles
Justinmind's blog contains many articles to help you on your prototyping. Includes from best
practices to tutorials. Have a look at http://blog.justinmind.com
124

Justinmind Prototyper Userguide

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Justinmind Prototyper Userguide

Enviado por

Direitos autorais:

Formatos disponíveis

User Guide

Justimind Prototyper User Guide

Justimind Prototyper User Guide

Justimind Prototyper User Guide

No Programming. Justinmind Prototyper is an intuitive tool. All thats required is to

Justimind Prototyper User Guide

Justimind Prototyper User Guide

The automatic alignment system (blue guidelines).

The grid (see Mesh).

If you want to delete one, right click it and click Delete.

Justimind Prototyper User Guide

Your First Interactive Protoype

Justimind Prototyper User Guide

Justimind Prototyper User Guide

The Main Menu

Prototype Click on prototype to create a new prototype and open it.

Justimind Prototyper User Guide

File menu > Open

Justimind Prototyper User Guide

File menu > Preferences

File menu > Preferences > Backups

Justimind Prototyper User Guide

File menu > Preferences > Functional Scenarios

File menu > Import

Justimind Prototyper User Guide

File menu > Import > Prototype

Justimind Prototyper User Guide

File menu > Export > Template

Justimind Prototyper User Guide

File menu > Export > Master

File menu > Exit

Justimind Prototyper User Guide

Click on Image file.. to add an image file to your prototype..

Click on Hide/show toolbar to toggle the main toolbar visibility off/on.

Justimind Prototyper User Guide

Click on Rulers to show/hide the rulers in the canvas.

Click on Grid to show/hide the grid in the canvas.

Click on Snap to geometry to activate/deactivate the automatic alignment system.

Click on Templates to show/hide the templates panel.

Click on Masters to show/hide the masters panel.

Click on Data Masters to show/hide the Data Masters panel.

Click on Variables to show/hide the variables panel.

Click on Outline to show/hide the outline panel.

Click on Navigator to show/hide the navigator panel.

Click on Notes to show/hide the notes panel.

Justimind Prototyper User Guide

Click on Customized to generate a document with all the information (Screens,

Justimind Prototyper User Guide

Click on Show Welcome Window to show the welcome window

Justimind Prototyper User Guide

Click on Help Contents to open this help

Click on Support to ask for help to our employees.

Justimind Prototyper User Guide

Justimind Prototyper User Guide

Justimind Prototyper User Guide

Justimind Prototyper User Guide

Canvas: Navigation Map

Justimind Prototyper User Guide

Data Masters and Variables

Justimind Prototyper User Guide

Outline, Navigator and Notes

Justimind Prototyper User Guide

Adding Content to Screens

There are two ways to add widgets to the page: