Exercises: Events and interactions

Here are three examples of events and interactions. We recommend that you try them out for yourself, following the steps below.

Exercise 1: Designing a tooltip

Add tooltips to UI elements in your prototypes and customize them to suit your preferences.

There are two ways to add tooltips to UI elements with Justinmind:

  • With the Tooltip attribute in the Properties palette
  • With events

Adding a tooltip to a UI element from the Properties palette

designing tooltip

To add a tooltip to an element in the Canvas from the Properties palette:

  1. Select the element and go to the Properties palette.
    • Write the message you want your tooltip to display in the Tooltip input field.
    • tooltip canada
  2. Click “Simulate” to see how your customized tooltip is displayed each time the cursor hovers over the UI element.

Adding a tooltip to a UI element using events

tooltip events

To add a tooltip to an element in the Canvas using events:

  1. Open a prototype that you want to add a tooltip to. The prototype needs to include the element (e.g. Image widget or icon) that the user will hover over in order to read the tooltip message during simulation.
    • Design your tooltip by dragging a Rectangle and a Text widget to the Canvas.
      Group them together (right click, Group). The group will appear in the Outline palette.
    • group elements
  2. Select the group and mark it as hidden in the Properties palette (“Hide component”), so it doesn’t automatically appear upon simulation.
    • hide component
  3. From the Canvas, select the element you wish to add the tooltip to.
    • Go to the Events palette and click the “Add event” button. Add an “On Mouse Over” + “Show” event, selecting the tooltip group and click “OK”.

Click “Simulate” to see how your customized tooltip is displayed each time the cursor hovers over the UI element.

You can download our example here.

Exercise 2: Tab between fields in a form

In forms with multiple input fields, users often tab (jump) between fields using the “TAB” key on their keyboard.

exercise two

Follow the below steps to learn how to simulate tabbing in your Justinmind prototypes:

  1. Design an input form by dragging Text and Input Text Field widgets to the Canvas. To reproduce our example, create “Username”, “Password” and “Confirm Password” fields.
  2. Select the “Username” Input Text Field and go to the Events palette. Click the “Add event” button.
    • simulate tabs
  3. In the dialog that appears, create the following event:
    • dialog create event
      1. Add an “On Key Down” event trigger
      2. In the center field, enter the “TAB” key on your keyboard. The “TAB” key is what the user will enter in order to trigger this event
      3. Add a “Set Focus On” action
      4. Select the “Password” input text field. Click “OK”

Click “Simulate” and enter the “TAB” key. The cursor should jump from the “Username” input text field to the “Password” input text field.

You can download our example here.

Exercise 3: Auto-populate text fields

Input forms often include an auto-populate feature. Auto-populate allows the user to automatically populate fields with stored data when filling in their details in forms.

In Justinmind, you can simulate the auto-populate feature with “On Key Up” + “Set Value” events.

autopopulate text field

Follow the below steps to simulate auto-populate in your Justinmind prototypes:

  1. Design an input form by dragging Text and Input Text Field widgets to the Canvas. To reproduce our example, create “Card Holder Name”, “Card Number”, “CVV” and “Expiry Date” fields.
    • Select the “Card Holder Name” input text field and go to the Events palette. Click the “Add event” button.
    • autopopulate add event
  2. A dialog will appear. Create the following event to auto-populate the “Card Holder Name” input text field when the user tabs to the next field:
    • autopopulate dialog
      1. Add an “On Key Up” event trigger
      2. In the center field, enter the “TAB” key on your keyboard. The “TAB” key is what the user will enter in order to trigger this event and auto-populate the field
      3. Choose “Set Value”as the action
      4. Selecting the “Card Number” input text field
      5. In the input field below (on the right of the “Fixed” radio button), enter your card number and click “OK”
  3. To add the auto-populate function to the other input text fields, click the gear icon next to the word “Do” and select “Add action”.
    • Add the event from steps one to three for each additional input text field (“CVV” and “Expiry Date”).
    • autopopulate add action
  4. These interactions will allow the user to auto-populate their form’s fields. To ensure that the mouse cursor tabs to the next field, add a second interaction. With the “Card Holder Name”
    • Input Text Field selected, go back to the events palette and click “Add Event”.
    • input text field
    • In the dialog that appears, create the following event:
    • dialog set focus
      1. Enter the “TAB” key on your keyboard in the center field (no need to change the event trigger)
      2. Select “Set Focus On” as the action
      3. Select the target input text field on the Canvas and click “OK”
    • Make sure that your Events palette displays the following interactions:
      • events palette

Click “Simulate” and enter the “TAB” key. The “Card Holder Name” field should auto-populate and the mouse cursor should tab to the “Card Number” field.

You can download our example here.