Rich Interactions

In Justinmind Prototyper, you define events through the Events tab located next to Properties. To create one, first establish what action the user should trigger and what it will be.

Choose the user's action from the options available in the menu on the left-hand side. Remember that you can assign more than one action to a single component. For example, you can make a button have one reaction when clicked and another reaction when the cursor moves over it. The actions menu shows you which and how many have been identified for each trigger.

After choosing what the user needs to do, select the application’s response. To do this, click Add Interaction and configure it in the dialog box that pops up. There is a list of the options you can simulate on the left-hand side of the dialog box.

interactions

Link to: allows you to change the current screen for the selected screen or for an Internet address (URL). You can specify that the new screen displays as a pop-up.
Change Style: changes the properties of color, border, background, etc. of a component of the current screen.
Show/Hide: shows or hides existing content in the current screen. You can also apply effects to this action.
Set active panel: 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.
Set Value: modifies the value of a label, the form field or the variable as indicated by the user.
Select Value: it is only valid on the selection fields of the input form (drop-down menus, lists, checkbox groups, etc.) and it selects the values entered by the user.
Pause: waits for the time the user indicates before running any action. If combined with others, you can simulate animations; for example, a progress bar.
Move: This action moves a widget to a certain position in the screen. The movement position can be defined in two different ways: Move To: Use this option if you want to move the selected widget to a certain known position. The new position can be defined as absolute in the screen or relative to the widget that may contain the widget that is being moved during simulation. To define the position as absolute, click on the corresponding checkbox labeled 'Absolute position'. Move By: Use this option if you want to move the selected widget by an offset defined in pixels.
Insert into: This action inserts a specific widget into another container widget. When a widget is inserted into a container, its absolute position will remain the same if the container has a free layout. Otherwise, the widget will be inserted according to the container's layout positioning itself next to the closest container's child.
Data Master Action: these are related to the simulation of dynamic data lists and the functional forms. The advanced level tutorial contains a more detailed explanation.
Set focus on: centers the screen on the selected element and activates if it is an input form field.
Enable/Disable: converts an input form field into editable or non-editable.
Pagination: this is also explained in the advanced tutorial.

Once you define the response to the application, click OK: the action selected appears in the Events tab. A single user action can trigger several actions in sequence; for example, you can add another action that runs after the previous one by clicking the arrow button next to the word Do. Or you can also add more cases by clicking again Add Interaction. The cases are run from top to bottom and the actions from left to right. This is explained again in the advanced tutorial in the section of simulation of animations.

Back to all Tutorials