How to Create a Value From a Picker | Proto.io Prototyping Tool
Learn how to create a value from a picker in Proto.io in this tutorial video.
Proto.io offers a wide-range of Ui elements. In this tutorial, we’ll be using the picker element to create a Day/Month/year selection.
Step 1: Adding Our Elements
To begin, add the following elements to your canvas:
3 text boxes, and three pickers. These elements can be found in the UI panel. Adjust the size and position of each to your liking.
Edit each text box to read, as in the example, day, month, and year.
Next, edit, each picker. For the picker on the left, include the days of the week; for the picker in the middle, include the months of the year; for the last picker, includes the current year up to 3 years in the future.
Step 2: Creating Variables
Click on settings, then “variables manager”
Click “Add variable”.
For name, type pickervalue_day.
For type, select text.
For value,leave blank.
Finally, check evaluate.
Repeat this exact process for each picker, except, change the name to pickervalue_month, and pickervalue_year, respectively.
Step 3: Adding an Interaction to the Day Picker
Click on the day picker, interactions, and add interaction.
For trigger, select picker value change.
For action, select set variable.
For variable name, select pickervalue_day.
For value type, select callback value from event.
For callback value, select selected value.
Leave delay.
Let’s Recap:
The purpose of this interaction is to change the variable of the picker value - the trigger and action - based on what the user selects - the callback value. For example, if the user selects Wednesday, the picker value changes to Wednesday.
Step 4: Adding a Callback
Click to add a callback.
For action, select change property.
For screen, select the current screen.
For item, select the text for day - in this case, it’s labelled day.
For property, select text.
For value type, select read from variable.
For variable name, select pickervalue_day.
Leave delay.
Let’s recap:
The purpose of this callback is to change the day text based on what the user selects in the picker.
When the first interaction is complete, this second action - a callback- begins. It changes the property - the action - of the day text - the item. It decides what to change it to based on the what the user has chosen - the pickervalue_day variable.
Step 5: Completing Interaction
Save this interaction.
Then, right click on it and select copy.
Click on each of the remaining pickers, interaction, and right-click on add interaction. Then, select paste.
For each picker, the only properties that need to be changed are the variable name under interaction, and item and variable name under callback. For example, within the month picker, we would select month text for item name, and pickervalue_month for the variable name.
Step 6:
Save the interactions. Save the project. Preview.
As you can see, the day, month, and year text boxes change according to what elements we select in the picker. So, there you have it, it’s working great!
Website: https://www.discoverbusiness.us
Google +: https://plus.google.com/+Discoverbusi...
Facebook: / discoverbusiness
Twitter: / discoverbusines
Pinterest: / discoverbusines
gala ventura
alexis piperides
at ha
protonerds
Watch video How to Create a Value From a Picker | Proto.io Prototyping Tool online without registration, duration hours minute second in high quality. This video was added by user Discover Business Degrees 21 September 2015, don't forget to share it with your friends and acquaintances, it has been viewed on our site 10,992 once and liked it 89 people.