Table of Contents. Introduction Prototyping Environment Getting Started Drawing Screens Your First Interactive Protoype...

Transcription

1 User Guide

2 Table of Contents Introduction... 4 Prototyping Environment... 5 Getting Started... 6 Drawing Screens... 7 Your First Interactive Protoype... 8 Annotations... 8 Publish Online... 8 Creating Prototypes Workspace Adding Content to Screens Arranging Widgets Guides and Grid Widgets Static widgets Shapes Input widgets Selection widgets Navigation widgets Data Grids Web widgets Styles and Formatting Formatting Default Styles Copy Styles Events and Interactions

3 Events Panel Links Interactive images User Events Actions Simulated rules and conditions Data Simulation Importing Real Data Expression Builder Overview Smartphones and SAP Reuse Templates Masters Custom widget libraries Import and Export Prototypes Publish Online Export to HTML Include/Exclude comments Optimize code Scenarios Creating Scenarios Validating Prototypes Keyboard Shortcuts Additional Help

4 Introduction Justinmind Prototyper is a quick prototyping tool that allows you to create interactive and accurate simulations of the applications you need. With Justinmind Prototyper, you can easily incorporate any corporate image to your prototypes, export them in HTML format to demonstrate them on-line or automatically generate all of the documentation in an Open Office or MS Word file. And without requiring programming knowledge or a single line of code. No Programming. Justinmind Prototyper is an intuitive tool. All 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

5 Prototyping Environment 5

6 Getting Started There are a few concepts the user must be familiar with in order to fully understand this user's guide, so before proceeding any further we'd like to clarify the terms. Key concepts A prototype is a representation of a software program that includes only a few aspects of the eventual application and resembles it up to some degree and whose purpose is to illustrate how that application is to look and behave to get an impression of its capabilities and shortcomings. It may also be referred to as mock-up or wireframe. The user interface is the collection of all the visual components that make up an application's screen and that have a graphical representation on it. It also comprises meta data on these elements such as their layout disposition or their behaviour patterns under certain events. A screen is a group of visual components gathered into a canvas or editing area. It may also be referred to as page and is browsed at once. A functional scenario is a graph of application components that represent the application's general behaviour such as its navigability or its processing. A comment is a user's written remark often related to an added piece of information on an element of a prototype. It may also be referred to as annotation. Starting the application To start the Justinmind Prototyper you just need to go to the installation folder (or any shortcut you may have chosen to create in the operating system menu/desktop) and double click on the icon. After that, a start-up image with a loading progress bar displays for a short time, right before the actual application interface comes up. If it is the first time you start the application or if you have not disabled the functionality in the File > Preferences menu, a welcome window which displays shortcuts for the most common tasks prompts. This window offers a handful of options to quickly start off with the program. 6

7 Drawing Screens From the components palette, drag and drop the item you want in the canvas. Once inside the canvas, you can re-size and move it to fit in your design. To move it, select it and drag it to the desired destination; you can also push it with the arrow keys (holding down the CAPS key will speed it up). To help you debug your design, you also have the following instruments: The automatic alignment system (blue guidelines). The grid (see Mesh). The Rules. The Guides. To position them, click on the rules and drag them to the desired place. To delete them, simply select them and press the "delete" key. There is a toolbar related to the work area, between the lower part of the canvas and the properties view. The two text fields indicate a reference resolution: you can change it by directly editing these values. The zoom indicator is on the right side: magnify or reduce the size by using this drop-down menu. The elements on the screen keep a certain order of depth between them. You can see the order in which they are arranged in the Content of the current screen. Thus, the highest ones block out the ones below them. To change this order, right click the item (or select it in the content view) and select the Sort option of your choice. The Image component allows you to see which parts of the screen will be taken up by images. Or you can replace these pictures with real images by selecting a file from the Properties view. Create more screens in your prototype by clicking the "+" button on top of the list of screens. Rename it by right clicking it. Select Edit from the context menu. If you want to delete one, right click it and click Delete. And, to edit the content of an inactive screen, double-click it from the list of screens. Its content is then loaded onto the canvas where you can easily change it. Justinmind Prototyper allows you to copy and paste screen components within the same screen or onto other screens. You can use the options in the Edit menu or the usual keyboard shortcuts of Ctrl+C (copy) and Ctrl+V (paste). To duplicate elements, drag them to the desired position by holding down the "Ctrl" key or with "CTRL + D" (Mac keyboard shortcuts are different). Remember: Whatever action you do, you can undo it or redo it from the Edit menu. 7

8 Your First Interactive Protoype To convert a text in your prototype into a link, mark it with a specific style (for example, the classic blue color and underlined) and drag it to the screen you want it linked to in the list of screens. It is linked automatically. Thus, by activating the simulation mode, you can interact with the defined components and navigate through the different screens. If want to allow only part of the text to be clicked on, place an Image Map over it and then drag it to the screen you choose to generate the link. The Image Map is not displayed when you click the Simulate button but the area it occupies is still interactive. You can also move the menu elements and nodes of the tree to other screens. Just drag them onto the screen you choose (if you do the opposite, the results are the same). Finally click on the simulate button at the top right of the canvas to see your prototype in action. Remember: Any element dragged into a screen links the active screen to the assigned one. Annotations With Justinmind Prototyper, you can add comments to your wireframes and website prototypes in a click. You can write notes and observations straight on the 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 Online At Justinmind, we think that a web prototype is the best communication tool between customers/users and the software development team. If you have an application prototype at the start of a project and it is as close as possible to the final application, the user can be involved from the beginning, giving his opinion and validating it: the more key people get involved, the more successful the project will be as a whole, reducing the number of final adjustments made on the application and not on the prototype. With Justinmind Usernote. All authorized key users can access your prototypes on the Internet. They can collaborate by testing and commenting on them from their browser. Also, all their 8

9 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

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

11 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

12 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

13 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

14 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

15 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

16 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

17 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

18 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

19 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

20 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

21 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

22 Components These are the widgets that can be used to build the content of a screen. They are detailed one by one in the Widgets section. Properties This panel shows and edit the properties of the component selected in the canvas. If no component is selected then the screen properties are displayed. You will find a detailed explanation of each property in the Formatting section. 22

23 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

24 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

25 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

26 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

27 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

28 Scenarios 28

29 Comments 29

30 Adding Content to Screens Use the Widget Panel to add these widgets to Screens, Masters and Templates. There are two ways to add widgets to the page: Drag and drop To drag and drop a widget onto a screen drag a widget from the widget panel and release it on the canvas. Select and draw To select and draw a widget on a screen click on a widget in the panel to select it and then click and drag on the canvas to draw the widget. Arranging Widgets Align Widgets Relative to Each Other When you align widgets relative to each, one of the widgets remains stationary. For example, clicking Align Left aligns the left edges of all selected widgets with the left edge of the last selected widget. To align widgets select at least two widgets, click on Edit in the Main Menu and point to one of the following options: Align left Align center 30

31 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

32 Lock or Unlock widgets Widgets can be 'locked' so they cannot be moved or resized. To lock or unlock a widget, use the right-click menu on the widget and select "Lock" or "Unlock". You will also find these options enabled in the top toolbar or the Properties panel once the widget is selected. Guides and Grid Guides and grid can help you to arrange and align widgets on the page easily. Grid When the grid is activated a set of vertical and horizontal lines are painted on the canvas background. If you also activate the "Snap to grid" option, when moving widgets through the canvas they will automatically align to the nearest grid line found. To activate or deactivate the grid you can either go to the View menu and check/uncheck the option "Grid" or go to File->Preferences then select "User Interface" and check/uncheck the option "Show grid". In the Preferences dialog you can also find the following options to configure the grid: Canvas size Show grid Snap to grid Grid spacing Snap to geometry The option "Snap to geometry" can also assist you when positioning widgets on the page. When this option is on, vertical and horizontal guide lines appear while dragging a widget to indicate when it is aligned with other widgets on the page. The guide lines will appear following this criterion: Dragging the widget horizontally, vertical lines appear on the left and right sides of other widgets meeting left and right side edges of the dragging widget. Dragging the widget vertically, horizontal lines appear on the top and bottom sides of other widgets meeting top and bottom side edges of the dragging widget. Horizontal and vertical lines will also appear together when the dragged widget's edges meet horizontal and vertical side edges of another widget on the page. Hold Alt key while dragging the widget to avoid snapping. 32

33 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

34 Widgets Static widgets The widgets located in the Static group of the widgets panel are those whose content cannot be edited manually during the prototype's simulation. Label The Label is a single line text widget. It is typically used as a caption holding a text with a single style. Editing text Double-click a Label widget to start text edition. Make the desired changes to the text. To apply the changes press Return or click outside the widget. To cancel edition without applying changes press Escape. Select the Label and change its default text in the Properties panel. Image The image widget is a rectangle shaped widget which represents and displays an image. When creating this widget on the canvas it displays no image by default showing a cross inside. Changing image Edit the image displayed by this widget in one of the following ways: Double-click on the image widget. Browse through your file system, select the desired image and press Open. Select your image widget, then change the displayed image through the Properties panel selecting the option 'Select an image file'. Rich Text This widget provides a multiple text line box whose content can be fully customized. It can define different font styles for different parts of its contained text. Editing text Double-click a Rich Text to start text edition. Make the desired changes to the text. To apply the changes click outside the widget. To cancel edition without applying changes press Escape. Select the Rich Text and change its default text in the Properties panel. 34

35 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

36 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

37 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

38 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

39 Vertical Line A vertical line that may be used to separate elements or zones, to lay out elements or just as a design element. Its width and style (solid, dotted or dashed) can be changed in the Properties panel. Horizontal Line An horizontal line that may be used to separate elements or zones, to lay out elements or just as a design element. Its width and style (solid, dotted or dashed) can be changed in the Properties panel. Input widgets Input widgets also known as input fields, are used as a means for a user to insert data into an application. They are mainly used to create input forms. Text boxes are the most common input field type, but there are several others. All of them have the particularity that their value can be modified by the user during simulation through direct interaction. However, you can disable its edition by unchecking the property 'Editable' in the Properties panel. Text The Text widget is component which holds a text as a value. The text widget have three different styles that can be changed in the Properties panel: Text: A single line text box. Text Area: A text box which can hold different lines of text with automatic vertical and horizontal scroll bars. Password: A text box showing only a single line masked as a password. Editing default text When in the user interface editor: Double-click a Text widget to start text edition. Make the desired changes to the text. To apply the changes press Return or click outside the widget. To cancel 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

40 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

41 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

42 Selection widgets Selection widgets display a list of text values among which the user needs to select one (single selection) or more (multiselection). The values displayed by these widgets can be changed and may come from different data sources: Fixed Values: A user defined list of fixed values. Data Master Field: A list of category values coming from a Data Master field of type Category or Multicategory. Data Master: A list of all the Data Master instances using comas as a field separator. When a Selection widget is created it shows a list of fixed values. To change the data source of a Selection widget, select the widget on the page and click on the Edit button next to 'Value' in the Properties panel. Select the data source Fixed Values, Data Master Field or Data Master in the dialog. Notice that you need first to create a Data Master in order to use it (or its fields) as data source. Editing fixed values 1. Select the widget and click on the Edit button the 'Value' attribute. A dialog will display. in the Properties panel, next to 2. Click on the radio button Fixed Values. 3. Edit the fixed values through the editor on the right. Getting values from a Data Master Field 1. Select the widget and click on the Edit button the 'Value' attribute. A dialog will display. in the Properties panel, next to 42

43 2. Click on the radio button Data Master Field. Notice that this option will be only enabled if there is any Data Master with Category or Multicategory fields. 3. Select the field you want to use on the list. Getting values from a Data Master 1. Select the widget and click on the Edit button the 'Value' attribute. A dialog will display. in the Properties panel, next to 2. Click on the radio button 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. Setting default selection 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. Selecting values in simulation 43

44 Select a value of a Selection List while simulating by clicking once on the widget to open the drop-down. Then select the desired value or write another one like a common text input. Multi-selection List A multiple text line widget that displays a list of ordered values like a List Box widget. This multiselection widget has the particularity that can have more than one of its values selected at the same time. Setting default selection 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. Selecting values in simulation 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. Setting default selection 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. Selecting values in simulation 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

45 Setting default selection 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. Selecting values in simulation Select a value of a Check Box List while simulating by clicking once on the desired value. Click again on an already selected value to deselect it. Navigation widgets Navigation widgets are designed to provide prototypes with the most common forms of application navigation that one can find in the real world. All of them are fully customizable and adaptable to every prototype's needs. Button The Button is a widget shaped as a common button which holds a single line of text. The edition of its text works as for the Labels. Buttons are also the perfect candidates to place your events. Editing text Double-click a Button widget to start text edition. Make the desired changes to the text. To apply the changes press Return or click outside the widget. To cancel 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 subnode inside the first one. Through the Properties panel you can customize the expand and collapse icons of your Tree as well as the visibility of the Tree hierarchy lines. Adding nodes 45

46 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

47 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

48 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

49 Removing items To remove an item from a Menu first select the Menu Item you want to delete. Then press Delete or open the contextual menu with a right-click on the item and select Delete. If you delete a Menu Item, all of its submenus will also be removed. Moving items The order and hierarchy of menu items can be changed once they are created. To change a Menu Item's position within a Menu, drag and drop the item as you were creating a new one. The corresponding feedback will guide you while dragging the item. Menu Item A Menu Item widget can only be created inside an existing menu widget. To create a Menu Item drag and drop it on a menu as explained in 'Adding items' for Menus. Editing item's text To change the text displayed by a menu item, first select the item you want to change and then edit its text in the 'Value' field in the Properties panel. Changing item's icon Each menu item can display an icon before its text that can be set and changed through the Properties panel. To set the icon for a menu item, first select the Menu Item widget on the screen and then select the 'Set Icon' option in the Properties panel. Browse for the desired image and press Ok. When a menu item has an icon assigned change or remove it using the buttons Browse and Delete next to the Icon field. Data Grids The widgets located in the Data Grids group are those related to Data Masters' visual representation. These widgets will help you visualize the contents of your Data Masters as well as some information related to them. Data Grid This widget displays the records of a Data Master as a list. This list's data source is always a single Data Master which is selected when the list is created. This widget displays only one header and one row when editing it in the user interface but it is expanded when simulating replicating its rows displaying a different row for each Data Master's record instance. In order to create a Data Grid for a particular Data Master: 1. Click on the Data Grid widget on the Widgets' palette. 49

50 2. A dialog will appear asking for information regarding the data source the Data Grid will use. (If you have no Data Masters you will be first asked to create a new one). 3. Fill in all the requiered fields and press Ok. 4. Once the dialog is closed, just click on the desired place on the canvas to finally create the item. Once a Data Grid is created you can change some of its properties including its identifier in the Properties panel but you cannot change its Data Master association. Selecting rows and columns To select a row, click on the left edge of the row when the cursor changes to To select a column, click on the top edge of the column when the cursor changes to Inserting columns You can insert new columns at the end of a Data Grid widget. To insert a new column, rightclick on the Data Grid widget and select 'New Column' in the contextual menu. Removing columns Delete a column by selecting it and pressing Delete key. You can also remove it if you select the option Delete in the contextual menu of a column. Ordering columns 50

51 The order of the Data Grid's columns can be modified once created. To move a column to a different position within the Data Grid, drag and drop it to the desired position. An orange feedback will guide you when placing the column between other columns. Resizing rows and columns Select a Data Grid's cell or an entire row or column and drag its sizing handles to resize them. Changing Data Grid's properties When a Data Grid widget is selected on a screen you can change some of its properties in the Properties panel: Find more information about Data Grids in the Data Simulation section. Web widgets These special widgets add extra functionality and a better look to your prototypes. These widgets are like containers that can contain other kinds of elements common in the computer world such as electronic documents, web sites or flash files. HTML The HTML widget can display HTML code using a web browser embedded in it. When you create a HTML widget it displays a simple text in HTML by default. To change the HTML code displayed by this widget: 1. Select the HTML widget on the screen. 2. Make your changes in the text box next to the HTML field of the Properties panel. 3. Click outside the text box to apply the changes. URL This widget displays a web page using a web browser embedded in it. When you create this widget it displays Justinmind's web page by default. To change the web page displayed by this widget change its associated URL: 1. Select the URL widget on the screen. 51

52 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

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

54 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

55 Text Widgets which have text have the following font format options to be changed: 55

56 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

57 Index The Index widget is a special text label which shows information about the Data Grid's pages. This widget cannot be directly edited like a normal Label as its content is automatically generated using its associated Data Grid information. The information displayed by this widget is the index of pages of the Data Grid. The current page index will be highlighted using a bold font style. Notice that the number of pages of a Data Grid will depend on the field 'Rows per page' in the Data Grid widget's properties. To change its associated Data Grid, select the Index widget and select the desired Data Grid in the Properties panel. Default Styles A collection of default formatting attributes or styles are saved for every template of a prototype. Every widget created in a screen will use the styles defined in the associated template as default. All new projects start with a default template which defines all the styles for every widget. This set of styles may be edited, but not deleted. Tip: Use different templates with different styles to easily change the look and feel of your prototype. Editing default styles To change the styles defined for a specific template, right-click on the template in the Templates panel and select the option 'Edit Template Style'. A dialog will appear showing the current formatting attributes for every widget. 57

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

59 Events and Interactions Events are a key feature that provides Justinmind Prototyper with the ability to build fullyfunctional and interactive prototypes. The events that Justinmind Prototyper works with consist of two main components: an event trigger (or user event) and a set of actions. Additionally, one can define conditions for every interaction. Every event must be defined on a specific element on the screen which will act as the source of the event trigger. All the events will be simulated respecting any conditions and order defined in the user interface. Events Panel All the events defined on a widget can be seen, edited, deleted or created through the Events panel once it is selected on the canvas. User Events The User Events' drop-down displays all the available event triggers that can be used to define an event for a widget. Select the desired trigger before defining any action. To know more about event triggers check User Events. 59

60 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

61 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

62 Links Links are used to create hyperlinks to screens. They are the type of event's action that provides navigation through your prototype's screens. Create a link with drag and drop To create a link just drag the widget which should contain the link action and drop it on the desired screen in the Screens panel. Create a link using the contextual menu You can also create a link through the contextual menu of any widget on a screen: 1. Right-click on the widget which should contain the link action and select the 'Add Link' option. A dialog with a drop-down will appear. 2. Select the target screen from the drop-down labeled 'Internal Screen'. 3. Press Ok to create the link or press Cancel to close the dialog without creating the action. 62

63 Interactive images When defining an application, the graphic design phase is always included. Typically, the designer presents his proposals in the form of static images that may be created with an external image editor to represent a few screens. While the presentation and appearance of these images can be excellent, the inconvenience is that they are completely static and do not provide any type of interaction. It is therefore relatively easy to lose sight of the 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

64 User Events Events in Justinmind Prototyper consist of two main components: an event trigger and a set of actions. Justinmind Prototyper offers a set of user interactions that can be recognized as event triggers and, therefore, executes a set of actions consequently. These user interactions are: On Click: Occurs when the user clicks with the mouse left button on the element upon which we are defining the event. On Double-click: Occurs when the user double clicks with the mouse left button on the element upon which we are defining the event. On Right-click: Occurs when the user clicks with the mouse right button on the element upon which we are defining the event. On Key Pressed: Occurs when a key is pressed on the keyboard. The key must be specified when defining the event. If no key is specified the event will be triggered when pressing any key. On Mouse Over: Occurs when the mouse cursor is over the element upon which we are defining the event. On Mouse Enter: Occurs when the mouse cursor enters the area of the element upon 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

65 Actions Event actions are the processes that take place when a user event is captured during the simulation of a prototype. Many actions can be defined for the same event trigger upon the same widget so that they are taken sequentially. To create an action for a specific user event over a widget follow the steps: 1. Select the widget which will trigger the event on the canvas. 2. Select the user event type from the drop-down in the Events panel. 3. Click on 'Add interaction' in the Events panel. A dialog will appear showing all the available actions that can be defined. Link to Select the 'Link to' action to create navigation to another page of your prototype or an external web page. You can also configure the navigation so the target page opens in a pop-up window. To navigate to an internal screen, select the radio button 'Internal Screen' and then select the screen you want the link to. To navigate to an external web page, select the radio button 'External address' and type in the address you want to navigate to. 65

66 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

67 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

68 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

69 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

70 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

71 Set Focus on This action sets the focus on a particular widget -usually an input field or a selection componentin the same screen. The Set Focus action is commonly used when we have a widget on the screen which is out of the user view and we want it to be seen. When this action is executed the canvas will scroll until the target widget can be seen. Moreover, if the target widget is a input, it will also get the text focus. To create this action, just select the target widget you want to focus on the current screen displayed in the small canvas or select it on the outline view. 71

72 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

73 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

74 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

75 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

76 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

77 Simulated rules and conditions Rules, or conditions, can be set up for a given event's interaction in order to govern its actions' execution. Using conditions one can split and organize the execution of an interaction into different 'conditional blocks' and decide when to perform one action or another. An interaction splitted into 'conditional blocks' would look like the following example in the Events panel: There are two different types of conditions that can be defined with Justinmind Prototyper: User decision: The interaction of the user is needed when the event is triggered to decide what actions to execute. Automatic evaluated condition: The condition is an expression that can be evaluated automatically once the event is triggered. Creating a user decision To define a decision for an specific interaction that has been already created follow the steps: 1. Click on the widget that has the event defined on the canvas. Its events will display on the Events panel. 2. Click on the 'Add condition' link above the actions you want to make conditional. The Expression Builder dialog will appear. 3. Construct an expression with only a text string which will define the decision (Ej: "Does the user exist?")

78 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") 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

79 Data Simulation You can add data to your prototype and interact with it during simulation to make it even more realistic. You will also be able to pass data between different screens and use data to control the event's execution. Importing Real Data Stakeholders tend to be more involved in the review of a prototype if they see real data on it. With real data the hidden and forgotten requirements in the functional analysis raise clearly and quite soon. Sadly the effort required to fill a prototype with real data is too high and often it's filled with dummy data instead. Justinmind Prototyper allows you to populate the data masters (and by extent data grids and simulated queries) with data from a csv file. Than kind of file can be easily extracted from any kind of data base. So that your prototypes can be filled with plenty of records coming from an already existing data base. To do so just open any of your data masters using the option 'edit' in the contextual menu of a data master. Then select the 'View and edit records' tab. 79

80 Press the 'Import' button and a dialog will appear asking you to select a csv file. The only requirement to that file is that it must have a first row with texts that match the names of the attributes in the data master (the order of the column don't matter). You can select which character is used in your csv file to separate the values. Finally you can either replace the current records in the data master by the ones in the file or add the ones in the file to the already existing ones in the data master. You can also export all the records in a data master to a csv file in order to import them in other prototypes. Please note that you can fill a drop down or a selection list with the values in a data master. The import from csv comes in handy when you combine both options to have, for instance, a drop down that displays all the countries in the world. That drop down could use a data master 'country' with just an attribute and you can download a full list of countries in a csv or excel file and fill it with that file. Expression Builder Overview The business logic editor, also called expression builder is a new kind of editor introduced in the version 3.0 of Justinmind Prototyper. It is a comprehensive front end to define complex expressions used to basically evaluate a result out of some input data. The business logic editor is used mainly for two purposes: 1. To specify a value to set in a 'Set Value' or 'Set Selection' event action. 2. To build the condition that an interaction's conditional block must meet in order to be executed. In this case the result of the expression must be comparative with a boolean (true/false, yes/no) result. The expression builder layout is fairly simple. It has an area to edit the expression at the top and two panels where you can find all the available functions and data sources. 80

81 81

82 Creating expressions Every expression in Justinmind Prototyper is a combination of Functions and Data sources. To create your own expression, just drag the functions you need from the Functions panel and drop them on the editing area. Do the same with the Data sources you will find in the Data panel. Notice that when dragging the functions or data elements over the expression, its structure will dynamically change showing a feedback of the result. Modifying expressions The editing area is very interactive and you can move elements around by drag and drop and delete elements by clicking on the feedback X that appears at the top-right corner when the mouse is over an item. Functions General Functions There is a great set of operations, or functions, that cover most of the processing and logic needs of any prototype. 82

83 Numeric functions These are operations whose operands are numbers (integers, floating point numbers, etc.). Addition Sum. Represented by the plus sign. Takes two numeric operands and combines their quantity or value. Subtraction Minus. Represented by the dash sign. Takes two numeric operands and takes away the quantity of the second from the quantity of the first. Multiplication Multiply. Represented by the cross sign. Takes two numeric operands, say X and Y. X times Y (X multiplied by Y) results in adding X copies of Y together, or adding Y copies of X together, for it has the commutative property. Division Division. Represented by a slash. Is the inverse of the multiplication. Takes two numeric operands, say X and Y. X divided by Y results in the number of groups of size Y one can form out of a group of size X. Maximum Max. Given two numbers, it returns the largest one in value. Minimum Min. Given two numeric parameters, it returns the smallest one in value. Average Avg. Given two numeric parameters X and Y, Avg(X, Y) returns the following: (X + Y)/2 where + is the addition and / the division explained above. Absolute Abs. Takes a real number and returns its numerical value without regard of its sign. Rounding up Round. Takes two numeric parameters, a floating point number and an integer, and returns an approximate representation of the first using only as many decimal numbers as the second parameter's value. Percentage %. Takes two numeric operands and the result is the first number expressed as a fraction of the second. For instance, X % of Y = (X x Y)/

84 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

85 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

86 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 However, you won't always need to build your own regular expressions, for the Justinmind Prototyper provides some of the most useful constructions ready-to-use. Refer to the Regular expression constants Contains Has. This function takes two input strings A and B. It returns true only if first string A contains the whole string B. Collection's Functions Some data elements may be represented as collections and some other functions may be needed. This is the case for Data Masters, Data Grids, Selection Components, etc. 86

87 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

88 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

89 Substract RemoveFrom. This function takes two input parameters A and B, each one representing a data collection. It returns a list containing all the items from data set A which do not appear in B. Data sources We call 'Data sources' to the data elements we can use and manipulate in the expression builder to create expressions and calculations. These elements act as parameters of the expressions. There are mainly five kinds of data sources we can use to build our expression: Screen's Widgets: The value displayed by a widget on the current screen can be used as a parameter of your expression. To use them, drag and drop the widgets from the 'Screen' tab of the Expression Builder to the editing area. Notice that only the widgets which can display a value are permitted: Input widgets. Selection widgets. Static widgets containing text: Label, Button and Rich Text. Data Grids. Data Grids' rows. Variables: As explained in Variables page, variables act as generic containers for data which can be used in expressions. Data Masters: Use a Data Master in a expression to operate with all its records. You can also use Data Masters' attributes in order to filter a Data Master among other functions. Constants: There are several static elements you can use as parameters as: Text constant: This element allows the user to input any desired string as a literal. Date constant: Lets you select a date from a calendar. System date: Gives the current system date. System time: Gives the current system time. Random number: Generates a random number between 0 and 1 that can be used to include randomness in calculations. It is very useful to simulate a random or vague behaviour. Regular expression: Use the regular expressions to easily check if a value meets a 'rule'. Ej: Check if a number is a correct postal code. See how to construct this expressions in the Text Functions section. There are several regular expressions already created that you can use together with the 'Regular Expression' function: Number This regular expression represents any number, with its sign and its decimal part separated from the integer part by either '.' or ','. /^[-]?[0-9]+[.,]?[0-9]+$/ 89

90 This regular expression represents any valid address according to the standard. Check for the name, symbol and the domain names. /^[0-9a-zA-Z]+@[0-9a-zA-Z]+[.]{1}[0-9a-zA-Z]+[.]?[0-9a-zA-Z]+$/ Percentage This regular expression accepts any number with an integer part up to two digits and a decimal part up to two digits. /^\d{0,2}(.\d{1,2})?$/ Money This regular expression accepts any monetary value in the form $34,245,456.33, where the dollar symbol and the decimal part are optional. /^\$?[1-9][0-9]{0,2}(,[0-9]{3})*(.[0-9]{2})?$/ Phone Accepts any number between six and ten digits, optionally separated in its second or third digit by a dash or a white space. /^[0-9]{2,3}-??[0-9]{6,7}$/ Postal code Accepts any UK postal code, which are one or two town district letters, followed by one or two digits, followed by a white space, followed by a digit, followed by two postal district letters. Also any Spanish postal code is accepted, which are numbers of five digits. /(^[A-Z]{1,2}[0-9]{1,2}) ([0-9][A-Z]{2}$) (^[0-9]{5}$)/ Credit card This accepts all Visa credit cards. /^(?:4[0-9]{12}(?:[0-9]{3})? 5[1-5][0-9]{14} 6(?:011 5[09][0-9])[0-9]{12} 3[47][0-9]{13} 3(?:0[0-5] [68][0-9])[0-9]{11} (?: \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

91 Arithmetic Calculations You can operate with data from any data source on your prototype like input widgets, text widgets, Data Grids, Data Masters etc. The most basic and common operations are the arithmetic ones which apply only to numbers. You will be able to operate with either integer or decimal numbers. Notice that the only number formats understood by Justinmind Prototyper are the following: Integers matching the regular expression: (?:\\d\\d\\d) \\d*). Examples: 25 (taken as 25) 25,134 (taken as 25134) (taken as ) 25,134,341 (taken as ) Decimals matching the regular expression: [#]\\d*)? \\d*(?:[#]\\d*)?). Examples: 25,34 (taken as 25.34) (taken as 25.34) (taken as ) ,34 (taken as ) 25, (taken as ) 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

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

93 Creating the action manually To store the value from a screen's widget or any other data source (including the result of complex calculations) use the Events panel to create a 'Set Value' action (see Actions for more information about this action). Type a constant as a value or click on the 'Calculated' button to use a data source or construct a calculation. Getting the value You can display the contents of a Variable during simulation also using a 'Set Value' action and setting the Variable as the data source. Justinmind Prototyper offers you two different ways to create this action: Using drag and drop To display the value of a Variable in a screen's widget just drag the Variable and drop it on the screen's widget. Notice that the target widget must be compatible with the Variable's value type. This will create an 'On page load' event with an action that sets the Variable's value to the widget. Creating the action manually To display the value of a Variable on a screen's widget use the Events panel to create a 'Set Value' action (see Actions for more information about this action). In the Interactions dialog select the screen's widget as the action's target, click on the 'Calculated' button and create an expression using the Variable as the only data source. 93