Justinmind

SUPPORT

Learn how to prototype web and mobile apps

Justinmind Prototyping Tool: Menus

Justinmind’s main menu is located at the top of the application and contains nine root level items:

  • File, with all the operations related to files, such as save, load, etc.
  • Edit, containing common edition operations
  • View, containing operations that handle various visual aspects
  • Simulate, containing controls to run the prototype
  • Widgets, containing operations to manage My widgets and Shared widgets
  • Share, containing controls to share your prototype online or generate the HTML version of the prototype
  • Teamwork, containing operations to work together on prototypes with other users
  • Plugins containing operations to add plugins to the application
  • Help, with a variety of options offering help, support and general information.

Below you will find detailed information about the operations you can perform with the File menu, the Edit menu, the View menu, the Simulate menu, the Plugin Menu and the Help menu. For the other menus (Widgets, Share, Teamwork), please see the relevant sections.

File Menu

The file menu contains some standard operations that act on files as well as other actions that help the user perform specific tasks.

File menu > New

Use this entry to quickly create new elements. Hover 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.
  • Shared Prototype – Click on Shared Prototype to create a new prototype, open it and share it with other users.
  • Screen – Click on Screen to create a new screen in the current prototype. Enter the screen name in the window that comes up, or select the template and click OK.
  • 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 OK.
  • Scenario – Click on Scenario to create a new scenario. Enter the desired name and description in the window that comes up and click OK. The screen will change to the Scenarios view.

File menu > Open

Click on Open to open an existing prototype. The open dialog will appear, 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 prototypes or double-click on each of the VP files.

File menu > Open shared prototype

Click on Open shared prototype to open an already shared prototype. The open dialog will appear, from which you need to select a prototype from the list and click Open. This option closes the currently opened prototype. If you have no internet connection you will be requested to work offline.

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 > Export to Document

The Export to Document Menu has options to automatically generate specification documents from the information of the prototype you are currently working on.

File menu > Export to Document > Export to DOCX

Generate a .DOCX specification document of the prototype.

File menu > Export to Document > Export to PDF

Generate a .PDF specification document of the prototype.

File menu > Export to Document > Customized Document…

Open the Customized Document dialog.

File menu > Export to HTML

Click on Export to HTML to export the prototype simulation into HTML files. You can either send those files to your users or even change the HTML code afterwards.

File menu > Save as images…

Click on Save as images… 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.

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.

  1. Backups Time Period: select the time period that you want to use to look up backup copies.
  2.  List of backup copies: list of all the backup copies made in the time period selected above.
  3. Delete Selected: deletes the selected backup copies. Be careful because you can’t undo this.
  4. Delete all the backups: delete all the backup copies. We recommend that you use this option only if you have storage problems.
  5. OK: when this button is pressed, the selected backup copy is opened as if it were a prototype. We recommend that you save that backup as another prototype.

 

File menu > Preferences

Click on Preferences to open the preferences dialog. This dialog offers the interface to modify various program-level user preferences that are persistent after closing, so they will be applied as you defined them the next time Justinmind is run. The dialog 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.

  • Tick or untick the Show welcome window at start-up to make or prevent the welcome window from displaying at start-up.
  • Tick the Submit statistical information 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 issue solutions, most of them submitted by our customers.
  • Tick the Display tips checkbox to have tips appear when working with Justinmind. This is strongly recommended if you are a new user.
  • Clic on the Browse button to choose a browser in which to simulate your prototypes. Leave it empty to use System default.
  • Tick the Include comments checkbox to see the comments when you simulate the prototype.
  • 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 Ask for comments inclusion checkbox to be asked each time if the comments should be included in the HTML Export.
  • Tick the Include Comments in HTML checkbox to include the comments in the HTML when you export the prototype to that format.
  • Tick the Override existing files checkbox to overrite the HTML files each time you export to HTML.
  • 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’re doing.

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.
  • If auto save is enabled, it occurs every set 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 Scenario

This entry contains preferences related to the look and feel of functional scenarios. From here you can change the scenario rulers preferences, grid type, etc. The values are more or less self-explanatory.

File menu > Preferences > Justinmind Account

This entry contains preferences related to your Justinmind account including the Email you want to use, your password and other preferences.

File menu > Preferences > Network Configuration

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 Proxy entries

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 resolution guides check box to display the resolution you are currently working with.
  • 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.
  • Tick the Centered check box to center the content of the screen. This will only be visible in simulation, not while editing.

File menu > Import

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

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 > Import > Data Master from CSV

Creates a new data master using the structured data of a CSV file in your file system. This functionality is explained in detail in the Importing Real Data section

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 this section.

File menu > Export > Screen

Export the contents of a screen into a file that can be imported into other prototypes.

  1. Screen: select the screen that you want to export from all the screens in the prototype
  2. Destination: select the name of the file and the place where it will be stored
  3. Screen preview: preview of the screen that is going to be exported

File menu > Export > Template

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

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

Export the comments of the current opened prototype.

File menu > Exit

Closes the application and exits the program.

Edit Menu

The edit menu has these specific options:

  • If an Image is selected, an Image menu will appear in the View menu. This is the same menu as the contextual menu that appears when you right click on the image.
    • Browse… will open a file chooser dialog for you to choose which image from your file system you want to be displayed in the image widget.
    • Open with default application (only available if the image is linked) opens the image with the system’s default software to do so.
    • Open container Folder (only available if the image is linked) opens the folder in which the original image is stored.
  • Click on Undo to undo the last operation and get back to the state immediately previous to it. (Keyboard shortcut: Ctrl+z)
  • Click on Redo to redo the last undone operation. (Keyboard shortcut: Ctrl+y)
  • 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)
  • Click on Delete to delete the selected items. (Keyboard shortcut: Delete)
  • Click on Select All to select all the items on the screen. (Keyboard shortcut: Ctrl+a)
  • Click on Duplicate to duplicate the selected item. (Keyboard shortcut: Ctrl+d)
  • Clik on Find to open a search dialog to look for text terms in the components of your prototype.
  • Click on Order and choose the option that fits your needs to order the depth of the item you have chosen.
  • 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.
  • Distribute vertically and horizontally will distribute the user interface elements (three or more must be selected) in the horizontal and vertical axis respectively.
  • Match width, Match height and Match size are available only when two or more user interface elements (usually widgets) are selected.
    • To make all the elements as wide as the last element selected click on Match width
    • To make all the elements as high as the last element selected click on Match height
    • To make all the elements as wide and as high as the last element selected click on Match size.
  • Click on Group to choose the grouping option that best fits your needs. This will group the items selected on the screen.
  • Click on Center content… and this screen will appear. 

 

You can choose the screens and templates whose content will be centered. Notice that the alignment will not be visible during editing. It will only be applied in simulation.

  • Click on Save as image to save the selected items as an image. If no element is selected this will save the screen as an image.

View Menu

The View menu has these specific options when you open it from the default User Interface tab.

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 Grid to activate/deactivate the automatic alignment.
  • Click on Snap to Geometry to activate/deactivate the automatic alignment system.
  • Click on Resolution Guides to hide/show the grey lines in the canvas that indicate the canvas resolution.
  • Click on Widgets to show/hide the Widgets panel.
  • Click on Properties to show/hide the Properties panel.
  • Click on Events to show/hide the Events panel.
  • Click on Comments to show/hide the Comments panel.
  • Click on Requirements to show/hide the Requirements panel.
  • Click on Screens to show/hide the Screens panel.
  • 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.

The View menu changes in the other sections tabs.

In the Site Map

The view menu has these specific options:

      • Click on Screens to show/hide the Screens panel.

      • Click on Overview to show/hide the Overview panel.

      • Click on Properties to show/hide the Properties panel.

In the Scenario tab

The view menu has these specific options:

      • Click on Widgets to show/hide the Widgets panel.

      • Click on Screens to show/hide the Screens panel.

      • Click on Scenarios to show/hide the Scenarios panel.

      • Click on Outline to show/hide the Outline panel.

      • Click on Navigator to show/hide the Navigator panel.

      • Click on Comments to show/hide the Comments panel.

In other tabs, if you click on the view menu you can reset the workspace.

Simulate Menu

The simulate menu contains options to simulate your prototype.

      • Simulate Prototype: launch the simulation engine inside an internet browser with the screen or template you have opened at that moment in the canvas.
      • View on smartphone/tablet: publishes your prototype in your account and prompts a QR code so you can scan it with a real mobile device.
      • Simulation settings: lets you configure how your prototype will be displayed either in simulation, once exported to HTML or when you publish it in your account
      • Preview screen: a quick preview of your current screen. In this preview the events won’t work

Image contextual menu

The image menu contains options to edit a selected image in the canvas. The menu will be displayed when an image is selected.

  • Click on Browse to explore your file system and select an image file that will be displayed on the image component.
  • Click on Crop to adjust the bounds of the image file.
  • Click on Flip Horizontal to invert the image across the x-axis.
  • Click on Flip Vertical to invert the image across the y-axis.
  • Click on Set Original Size to change the size of the image component restoring the size of the image file.
  • Click on Clear to clear the image file displayed. An image placeholder is displayed when no file is set on the image component.
  • Click on Navigator to show/hide the Navigator panel.

Table contextual menu

The table menu contains options to edit a selected table in the canvas. The menu will be displayed inside the Edit menu when a table is selected.

  • 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.
  • 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).