How to prototype a keypad

In this article, you’ll learn how to prototype a numbered keypad.

Here’s how you build it:

View 

• Place a “Rectangle” on the canvas and shape it to simulate a key from a keypad.
• Double-click on the rectangle to enable the text option, and write a number.
• Repeat the action as many times as necessary to complete your keypad.
  To finish the view, select “Input text field” from the “Interactive input fields” section and place it above the keys.

Events 

With one of the rectangles selected, go to the Events palette and click “Add event”.

1. In the dialog box, click on “Choose Trigger”, hover over the “Mouse” section, and select “on Click”.
2. In “Choose Action”, select “Set value to an element” and then select the “Input text field”. 
3. Select the “Calculated” radio button for the value and click “Add expression”.
4. In the Value Expression builder first field, drag the “Input text field” and the functions “Concat” next; for the last area, drag the rectangle. Click “OK” and “OK” to finish creating the event.
5. From the Events palette click the “Copy all events” button, select the following keys, one by one, and use the “Paste all events” button to paste the event.

Simulate your prototype.