VPL Patterns – Modularize Diagrams
VPL Beginner Course – 02
Young Joon Kim
http://www.helloapps.com
Topics
• Simple modular diagram with “Activity”
• Modular diagram having input values
• Modular diagram having output value
2
Simple modular diagram with
“Activity”
3
Scenario for target sample
• Build simple sum-up module
Call Sum-Up
Module (Activity)
Click button
Display result
4
Simple modular diagram with “Activity”
• Add “HelloApps (Util) ButtonDialog”
5
Simple modular diagram with “Activity”
• Add “Activity”
6
Simple modular diagram with “Activity”
• Double-click “Activity”
Double click
7
Simple modular diagram with “Activity”
• Opened inner diagram of “Activity”
8
Simple modular diagram with “Activity”
• Add activities and services as follows to build “SumUp” logic
9
Simple modular diagram with “Activity”
• Set “Data” and first “Join” activities as follows
10
Simple modular diagram with “Activity”
• Connect “Data” and “Join” as follows
11
Simple modular diagram with “Activity”
• Connect “Join”, “Merge”, and “If” activities
• Set “If” as follows
12
Simple modular diagram with “Activity”
• Connect “Else” of “If” and two “Calculate” activities
• Set “Calculate” as follows
13
Simple modular diagram with “Activity”
• Connect to second “Join” and set “Join” as follows
14
Simple modular diagram with “Activity”
• Connect second “Join” to “Merge” activity
15
Simple modular diagram with “Activity”
• Connect “If” and “Calculate”
• Set “Calculate” as follows
16
Simple modular diagram with “Activity”
• Connect “Calculate” and “SimpleDialog”
17
Simple modular diagram with “Activity”
• Select “AlertDialog” from the list
18
Simple modular diagram with “Activity”
• Connect “SimpleDialog” to the output result point
19
Simple modular diagram with “Activity”
• Completed inner diagram to build “SumUp” logic
20
Simple modular diagram with “Activity”
• Click “Diagram”
• Connect the notification point to the input of “Activity”
21
Simple modular diagram with “Activity”
• Select “NotifyButtonClicked” from the list
22
Simple modular diagram with “Activity”
• Save and run a diagram
23
Modular diagram having input
values
24
Scenario for target sample
• Build simple sum-up module having input values
Start Value
Click button
Call Sum-Up
Module (Activity)
End Value
Display result
25
Modular diagram having input values
• Start from the previous “SumUp” sample
• Disconnect connection between “ButtonDialog” and “Activity”
Delete connection
26
Modular diagram having input values
• Change name of “Activity”
Click
Change name
27
Modular diagram having input values
• Changed name
28
Modular diagram having input values
• Click “MySumUp” diagram
• Click “Actions and Notifications” icon on the top area
Click
29
Modular diagram having input values
• Click “Add” button on the “Input values”
Click
30
Modular diagram having input values
• Change the default name “Field” to “StartNum”
Change name
31
Modular diagram having input values
• Add new input variable
• Change the default name “Field” to “EndNum”
32
Modular diagram having input values
• Remove connections from input point
Delete connections
33
Modular diagram having input values
• Set activities and services as follows
34
Modular diagram having input values
• Connect from input point as follows
35
Modular diagram having input values
• Connect “If” and set as follows
36
Modular diagram having input values
• Connect “Else” point to “Calculate” and set “Calculate” as follows
37
Modular diagram having input values
• Connect “Join” to “Merge” activity
38
Modular diagram having input values
• Set “Calculate” as follows
39
Modular diagram having input values
• Click “Diagram”
• Add activities as follows
40
Modular diagram having input values
• Connect the notification point and each “Data” activities
41
Modular diagram having input values
• Connect “Join” and “MySumUp”
42
Modular diagram having input values
• Completed diagram
43
Modular diagram having input values
• Executed results
44
Modular diagram having output
value
45
Modular diagram having output value
• Start from previous sample
46
Modular diagram having output value
• Click “Actions and Notifications” icon
47
Modular diagram having output value
• Click “Add” button on the “Output values”
• Change default name “Field” to “Result”
48
Modular diagram having output value
• Click “OK” button
49
Modular diagram having output value
• Remove “SimpleDialog” service
Remove
50
Modular diagram having output value
• Set “Calculate” as follows
• Connect “Calculate” to the output point
51
Modular diagram having output value
• Select “value” item from the list
52
Modular diagram having output value
• Completed “MySumUp” diagram
53
Modular diagram having output value
• Add “Calculate” and “SimpleDialog” as follows
54
Modular diagram having output value
• Completed diagram
55
Modular diagram having output value
• Executed results
56