justinmind user guide - temple fox mis

User Guide

Justimind Prototyper – User Guide

Table of ContentsIntroduction................................................................................................................................... 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

2


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

3


IntroductionJustinmind 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 that’s 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 won’t have to do it later on the application. Remember that Justinmind Usernote integrates the leading online testing tools on the market.

4

Prototyping Environment

5


Getting StartedThere 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.

6


Drawing ScreensFrom 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.

7


Your First Interactive ProtoypeTo 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.

AnnotationsWith Justinmind Prototyper, you can add comments to your wireframes and website prototypes in a click.

You can write notes and observations straight on the prototype’s 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, you’ll find everything you need to organize, search and filter all the annotations of your website prototype. And if you’re 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 wireframe’s components.

Publish OnlineAt 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

8


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.

9


Creating PrototypesWorkspaceThis 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.

o To make all the elements be as wide as the last element selected click on Match width

o 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


ComponentsThese 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 ScreensUse 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 WidgetsAlign 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 GridGuides 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


WidgetsStatic widgetsThe 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 widgetsInput 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 edition without applying changes press Escape.

• 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 widgetsSelection 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 in the Properties panel, next to the 'Value' attribute. A dialog will display.

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


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


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 multi-selection widget has the particularity that can have more than one of its values selected at the same time.


To set one of its values selected by default, double-click on the desired value on the widget. 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.


To set one of its values selected by default, double-click on the desired value on the widget. 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



To set one of its values selected by default, double-click on the desired value on the widget. 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 widgetsNavigation 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 edition without applying changes press Escape.

• 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 sub-node 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 press Cancel to close the dialog without applying changes.

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 press Cancel to close the dialog without applying changes.

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 GridsThe 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, right-click 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 widgetsThese 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 FormattingFormattingThe 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 StylesA 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 StylesSometimes 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 InteractionsEvents are a key feature that provides Justinmind Prototyper with the ability to build fully-functional 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 PanelAll 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


LinksLinks 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 imagesWhen 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 application’s 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 EventsEvents 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 which we are defining the event.

On Mouse Leave: Occurs when the mouse cursor leaves the area of the element upon which we are defining the event.

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


ActionsEvent 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 component- in 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 conditionsRules, 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 SimulationYou 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 DataStakeholders 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 OverviewThe 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 expressionsEvery 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 expressionsThe 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 FunctionsThere is a great set of operations, or functions, that cover most of the processing and logic needs of any prototype.

82


Numeric functionsThese 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

Returns true only if the value of the element at the left of the Greater sign represents a neatly smaller value than the element on its right.

Greater or equal

Returns true only if the value of the element at the left of the Greater sign represents a larger or equal value than the element on its right.

Less or equal

Returns true only if the value of the element at the left of the Greater sign represents 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 FunctionsSome 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

http://en.wikipedia.org/wiki/Regular_expression


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 sourcesWe 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[0-9][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 CalculationsYou 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.

VariablesVariables 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 variablesTo 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 variablesTo 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 variablesTo delete a Variable, right-click on it on the Variables panel and select 'Delete'.

Setting a valueYou 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 dropTo 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 manuallyTo 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 valueYou 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 dropTo 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 manuallyTo 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 GridsData 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


CreateCreating 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.

ReadYou 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:

UpdateYou 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.



DeleteYou 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 TypesEvery 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.

DateThe 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.

CategoryThe 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/FalseThe 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 uploadThe 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).

MulticategoryThe 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 typeTo 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 SelectsYou 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-FormsYou 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 SAPNow 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.

ReuseTemplates

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 TemplateTo 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

http://www.justinmind.com/extras?category=3&locale=en

http://www.justinmind.com/extras?category=1&locale=en


Editing Template's nameIf 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 defaultIf 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 screenTo 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 TemplateTo 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 stylesTo change the styles defined by the Template, see the Default Styles section.

Exporting TemplatesTo 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 TemplatesTo 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 MasterTo 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 descriptionIf 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 screenYou 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 MasterTo 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 MastersTo 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 MastersTo 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 librariesNext 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 groupIf 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 nameIf 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 groupIf 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 widgetsTo 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 widgetOnce 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 widgetIf 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 groupsTo 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 libraryTo 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.

Import and Export PrototypesSometimes 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 PrototypeThe 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.

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.

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 PrototypeThe 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 OnlineAt 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 HTMLIn 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 commentsWhen 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 codeYou 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


ScenariosCreating ScenariosUse 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 PrototypesA 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 ShortcutsStandard Shortcuts Windows OS X

Cut Ctrl + X Cmd + X

Copy Ctrl + C Cmd + C

Paste Ctrl + V Cmd + V

DuplicateCtrl + D or Ctrl + Click and

dragCmd + 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 inCtrl + Mouse wheel up or

Ctrl + '+'Cmd + Mouse wheel up or

Cmd + '+'

Zoom outCtrl + 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 HelpCustomer 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

http://blog.justinmind.com/

http://www.justinmind.com/tutorials

http://www.justinmind.com/tutorials

http://getsatisfaction.com/justinmind

http://getsatisfaction.com/justinmind

http://support.justinmind.com/

justinmind user guide - temple fox mis

Documents