1. VPL Patterns – Multi-Action Activity
VPL Beginner Course – 03
Young Joon Kim

2. 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

3. Multi-Action Activity
Multi-Action Activity supports multi-diagrams

4. Scenario for target sample
Build simple calculator supporting 4 operations
Input user’s choice
(“Add”, “Subtract”, “Multiply”, “Devide”)
Define two values
MyCalculator
Add action
Display result
Subtract action
Multiply action
Divide action

5. Create User’s choice UI

6. Create user’s choice UI
Click “Add Diagram” submenu under the File menu

7. Create user’s choice UI
Add “Data” activity and “HelloApps (Util) Button Dialog” service

8. Create user’s choice UI
Set “Data”
Connect “Data” and “ButtonDialog”

9. Create user’s choice UI
Set “Connections” and “Data Connections”

10. Create user’s choice UI
Connected result

11. Create user’s choice UI
Add “Data” and “ButtonDialog” as follows

12. Create user’s choice UI
Set second “Data” activity as below

13. Create user’s choice UI
Select “AddButtonVertical”

14. Create user’s choice UI
Connected result

15. Create user’s choice UI
Repeat for the “Multiply” and “Divide”

16. Create user’s choice UI
Completed UI diagram

17. Create user’s choice UI
Save and run a diagram

18. Add Multi-Actions on the “Activity”

19. Add Multi-Actions on the Activity
Add “ButtonDialog” and “Activity”

20. Add Multi-Actions on the Activity
Double-click “Activity”
Double click

21. Add Multi-Actions on the Activity
Click “Actions and Notifications” icon
Click

22. Add Multi-Actions on the Activity
Change default name “Action” as “Add”
Change name

23. Add Multi-Actions on the Activity
Add input value “a” having “double” type

24. Add Multi-Actions on the Activity
Add second input value “b” and output value

25. Add Multi-Actions on the Activity
Add second action “Subtract”

26. Add Multi-Actions on the Activity
Add input values and output value having “double” type

27. Add Multi-Actions on the Activity
Add third action “Multiply” and add input/output values

28. Add Multi-Actions on the Activity
Add fourth action “Divide” and input/output values

29. Add Multi-Actions on the Activity
Click “Diagram”
Click “Activity” and change its name to “MyCalculator”

30. Add Multi-Actions on the Activity

31. Add diagram for each action

32. Add diagram for each action
Double-click “MyCalculator”
Double click

33. Add diagram for each action
Select “Add” action
Click

34. Add diagram for each action
Add “Calculate” activity and connect from input point

35. Add diagram for each action
Set “Calculate” as follows and connect to result point

36. Add diagram for each action
Select “Subtract” action
Add “Calculate” and connect

37. Add diagram for each action
Select “Multiply” action
Add “Calculate” and connect

38. Add diagram for each action
Select “Divide” action
Add “Calculate” and connect

39. Connect UI and Multi-Actions

40. Connect UI and Multi-Actions
Add “Data”, “Join”, and “If” activities as follows

41. Connect UI and Multi-Actions
Set two “Data” activities as follows (“double” type)

42. Connect UI and Multi-Actions
Click “Join” activity
Click “Add” button on the right side to add a third item

43. Connect UI and Multi-Actions
Change the name of “Join” item

44. Connect UI and Multi-Actions
Connect the notification point of “ButtonDialog” to the two “Data”

45. Connect UI and Multi-Actions
Choose “NotifyButtonClicked” from the list

46. Connect UI and Multi-Actions
Connect the notification point of “ButtonDialog” to the two “Data”

47. Connect UI and Multi-Actions
Connect “Data” and “Join”

48. Connect UI and Multi-Actions
Connect “Join” and “If”
Set “If” as follows

49. Connect UI and Multi-Actions
Add three “MyCalculator” by Copying & Pasting
Copy & Paste
Copy & Paste
Copy & Paste

50. Connect UI and Multi-Actions
Connect first “If” condition to the first “MyCalculator”

51. Connect UI and Multi-Actions
Choose “Add” action
Assign “a” and “b” for target

52. Connect UI and Multi-Actions
Connect the other “If” conditions

53. Connect UI and Multi-Actions
Connected result

54. Connect UI and Multi-Actions
Add “Merge” and “SimpleDialog” as follows

55. Connect UI and Multi-Actions
Connect “MyCalculator” and “Merge”
Connect “Merge” and “SimpleDialog”

56. Connect UI and Multi-Actions
Choose “AlertDialog”
Choose “result”

57. Connect UI and Multi-Actions
Completed diagram

58. Connect UI and Multi-Actions
Executed results