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
Multi-Action Activity Multi-Action Activity supports multi-diagrams
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
Create User’s choice UI
Create user’s choice UI Click “Add Diagram” submenu under the File menu
Create user’s choice UI Add “Data” activity and “HelloApps (Util) Button Dialog” service
Create user’s choice UI Set “Data” Connect “Data” and “ButtonDialog”
Create user’s choice UI Set “Connections” and “Data Connections”
Create user’s choice UI Connected result
Create user’s choice UI Add “Data” and “ButtonDialog” as follows
Create user’s choice UI Set second “Data” activity as below
Create user’s choice UI Select “AddButtonVertical”
Create user’s choice UI Connected result
Create user’s choice UI Repeat for the “Multiply” and “Divide”
Create user’s choice UI Completed UI diagram
Create user’s choice UI Save and run a diagram
Add Multi-Actions on the “Activity”
Add Multi-Actions on the Activity Add “ButtonDialog” and “Activity”
Add Multi-Actions on the Activity Double-click “Activity” Double click
Add Multi-Actions on the Activity Click “Actions and Notifications” icon Click
Add Multi-Actions on the Activity Change default name “Action” as “Add” Change name
Add Multi-Actions on the Activity Add input value “a” having “double” type
Add Multi-Actions on the Activity Add second input value “b” and output value
Add Multi-Actions on the Activity Add second action “Subtract”
Add Multi-Actions on the Activity Add input values and output value having “double” type
Add Multi-Actions on the Activity Add third action “Multiply” and add input/output values
Add Multi-Actions on the Activity Add fourth action “Divide” and input/output values
Add Multi-Actions on the Activity Click “Diagram” Click “Activity” and change its name to “MyCalculator”
Add Multi-Actions on the Activity
Add diagram for each action
Add diagram for each action Double-click “MyCalculator” Double click
Add diagram for each action Select “Add” action Click
Add diagram for each action Add “Calculate” activity and connect from input point
Add diagram for each action Set “Calculate” as follows and connect to result point
Add diagram for each action Select “Subtract” action Add “Calculate” and connect
Add diagram for each action Select “Multiply” action Add “Calculate” and connect
Add diagram for each action Select “Divide” action Add “Calculate” and connect
Connect UI and Multi-Actions
Connect UI and Multi-Actions Add “Data”, “Join”, and “If” activities as follows
Connect UI and Multi-Actions Set two “Data” activities as follows (“double” type)
Connect UI and Multi-Actions Click “Join” activity Click “Add” button on the right side to add a third item
Connect UI and Multi-Actions Change the name of “Join” item
Connect UI and Multi-Actions Connect the notification point of “ButtonDialog” to the two “Data”
Connect UI and Multi-Actions Choose “NotifyButtonClicked” from the list
Connect UI and Multi-Actions Connect the notification point of “ButtonDialog” to the two “Data”
Connect UI and Multi-Actions Connect “Data” and “Join”
Connect UI and Multi-Actions Connect “Join” and “If” Set “If” as follows
Connect UI and Multi-Actions Add three “MyCalculator” by Copying & Pasting Copy & Paste Copy & Paste Copy & Paste
Connect UI and Multi-Actions Connect first “If” condition to the first “MyCalculator”
Connect UI and Multi-Actions Choose “Add” action Assign “a” and “b” for target
Connect UI and Multi-Actions Connect the other “If” conditions
Connect UI and Multi-Actions Connected result
Connect UI and Multi-Actions Add “Merge” and “SimpleDialog” as follows
Connect UI and Multi-Actions Connect “MyCalculator” and “Merge” Connect “Merge” and “SimpleDialog”
Connect UI and Multi-Actions Choose “AlertDialog” Choose “result”
Connect UI and Multi-Actions Completed diagram
Connect UI and Multi-Actions Executed results