VPL Patterns MultiAction Activity VPL Beginner Course 03
VPL Patterns – Multi-Action Activity VPL Beginner Course – 03 Young Joon Kim http: //www. helloapps. com
Topics • Multi-Action Activity • Create User’s choice UI • Add Multi-Actions on the Activity • Add diagram for each action • Connect UI and Multi-Actions 2
Multi-Action Activity • Multi-Action Activity supports multi-diagrams 3
Scenario for target sample • Build simple calculator supporting 4 operations Input user’s choice Define two values (“Add”, “Subtract”, “Multiply”, “Devide”) My. Calculator Add action Subtract action Display result Multiply action Divide action 4
Create User’s choice UI 5
Create user’s choice UI • Click “Add Diagram” submenu under the File menu 6
Create user’s choice UI • Add “Data” activity and “Hello. Apps (Util) Button Dialog” service 7
Create user’s choice UI • Set “Data” • Connect “Data” and “Button. Dialog” 8
Create user’s choice UI • Set “Connections” and “Data Connections” 9
Create user’s choice UI • Connected result 10
Create user’s choice UI • Add “Data” and “Button. Dialog” as follows 11
Create user’s choice UI • Set second “Data” activity as below 12
Create user’s choice UI • Select “Add. Button. Vertical” 13
Create user’s choice UI • Connected result 14
Create user’s choice UI • Repeat for the “Multiply” and “Divide” 15
Create user’s choice UI • Completed UI diagram 16
Create user’s choice UI • Save and run a diagram 17
Add Multi-Actions on the “Activity” 18
Add Multi-Actions on the Activity • Add “Button. Dialog” and “Activity” 19
Add Multi-Actions on the Activity • Double-click “Activity” Double click 20
Add Multi-Actions on the Activity • Click “Actions and Notifications” icon Click 21
Add Multi-Actions on the Activity • Change default name “Action” as “Add” Change name 22
Add Multi-Actions on the Activity • Add input value “a” having “double” type 23
Add Multi-Actions on the Activity • Add second input value “b” and output value 24
Add Multi-Actions on the Activity • Add second action “Subtract” 25
Add Multi-Actions on the Activity • Add input values and output value having “double” type 26
Add Multi-Actions on the Activity • Add third action “Multiply” and add input/output values 27
Add Multi-Actions on the Activity • Add fourth action “Divide” and input/output values 28
Add Multi-Actions on the Activity • Click “Diagram” • Click “Activity” and change its name to “My. Calculator” 29
Add Multi-Actions on the Activity 30
Add diagram for each action 31
Add diagram for each action • Double-click “My. Calculator” Double click 32
Add diagram for each action • Select “Add” action Click 33
Add diagram for each action • Add “Calculate” activity and connect from input point 34
Add diagram for each action • Set “Calculate” as follows and connect to result point 35
Add diagram for each action • Select “Subtract” action • Add “Calculate” and connect 36
Add diagram for each action • Select “Multiply” action • Add “Calculate” and connect 37
Add diagram for each action • Select “Divide” action • Add “Calculate” and connect 38
Connect UI and Multi-Actions 39
Connect UI and Multi-Actions • Add “Data”, “Join”, and “If” activities as follows 40
Connect UI and Multi-Actions • Set two “Data” activities as follows (“double” type) 41
Connect UI and Multi-Actions • Click “Join” activity • Click “Add” button on the right side to add a third item 42
Connect UI and Multi-Actions • Change the name of “Join” item 43
Connect UI and Multi-Actions • Connect the notification point of “Button. Dialog” to the two “Data” 44
Connect UI and Multi-Actions • Choose “Notify. Button. Clicked” from the list 45
Connect UI and Multi-Actions • Connect the notification point of “Button. Dialog” to the two “Data” 46
Connect UI and Multi-Actions • Connect “Data” and “Join” 47
Connect UI and Multi-Actions • Connect “Join” and “If” • Set “If” as follows 48
Connect UI and Multi-Actions • Add three “My. Calculator” by Copying & Pasting Copy & Paste 49
Connect UI and Multi-Actions • Connect first “If” condition to the first “My. Calculator” 50
Connect UI and Multi-Actions • Choose “Add” action • Assign “a” and “b” for target 51
Connect UI and Multi-Actions • Connect the other “If” conditions 52
Connect UI and Multi-Actions • Connected result 53
Connect UI and Multi-Actions • Add “Merge” and “Simple. Dialog” as follows 54
Connect UI and Multi-Actions • Connect “My. Calculator” and “Merge” • Connect “Merge” and “Simple. Dialog” 55
Connect UI and Multi-Actions • Choose “Alert. Dialog” • Choose “result” 56
Connect UI and Multi-Actions • Completed diagram 57
Connect UI and Multi-Actions • Executed results 58
- Slides: 58