VPL Patterns – Modularize Diagrams

Young Joon Kimhttp://www.helloapps.com

VPL Beginner Course – 02

2

Topics• Simple modular diagram with “Activity”• Modular diagram having input values• Modular diagram having output value

3

Simple modular diagram with “Activity”

4

Scenario for target sample• Build simple sum-up module

Click buttonCall Sum-Up

Module (Activity)

Display result

5

Simple modular diagram with “Activity”

• Add “HelloApps (Util) ButtonDialog”

6

Simple modular diagram with “Activity”

• Add “Activity”

7

Simple modular diagram with “Activity”

• Double-click “Activity”

Double click

8

Simple modular diagram with “Activity”

• Opened inner diagram of “Activity”

9

Simple modular diagram with “Activity”

• Add activities and services as follows to build “SumUp” logic

10

Simple modular diagram with “Activity”

• Set “Data” and first “Join” activities as follows

11

Simple modular diagram with “Activity”

• Connect “Data” and “Join” as follows

12

Simple modular diagram with “Activity”

• Connect “Join”, “Merge”, and “If” activities• Set “If” as follows

13

Simple modular diagram with “Activity”

• Connect “Else” of “If” and two “Calculate” activities• Set “Calculate” as follows

14

Simple modular diagram with “Activity”

• Connect to second “Join” and set “Join” as follows

15

Simple modular diagram with “Activity”

• Connect second “Join” to “Merge” activity

16

Simple modular diagram with “Activity”

• Connect “If” and “Calculate”• Set “Calculate” as follows

17

Simple modular diagram with “Activity”

• Connect “Calculate” and “SimpleDialog”

18

Simple modular diagram with “Activity”

• Select “AlertDialog” from the list

19

Simple modular diagram with “Activity”

• Connect “SimpleDialog” to the output result point

20

Simple modular diagram with “Activity”

• Completed inner diagram to build “SumUp” logic

21

Simple modular diagram with “Activity”

• Click “Diagram”• Connect the notification point to the input of “Activity”

22

Simple modular diagram with “Activity”

• Select “NotifyButtonClicked” from the list

23

Simple modular diagram with “Activity”

• Save and run a diagram

24

Modular diagram having input values

25

Scenario for target sample• Build simple sum-up module having input values

Click buttonCall Sum-Up

Module (Activity)

Display result

Start Value

End Value

26

Modular diagram having input values• Start from the previous “SumUp” sample• Disconnect connection between “ButtonDialog” and

“Activity”

Delete connection

27

Modular diagram having input values• Change name of “Activity”

Click

Change name

28

Modular diagram having input values• Changed name

29

Modular diagram having input values• Click “MySumUp” diagram• Click “Actions and Notifications” icon on the top area

Click

30

Modular diagram having input values• Click “Add” button on the “Input values”

Click

31

Modular diagram having input values• Change the default name “Field” to “StartNum”

Change name

32

Modular diagram having input values• Add new input variable• Change the default name “Field” to “EndNum”

33

Modular diagram having input values• Remove connections from input point

Delete connections

34

Modular diagram having input values• Set activities and services as follows

35

Modular diagram having input values• Connect from input point as follows

36

Modular diagram having input values• Connect “If” and set as follows

37

Modular diagram having input values• Connect “Else” point to “Calculate” and set “Calculate” as

follows

38

Modular diagram having input values• Connect “Join” to “Merge” activity

39

Modular diagram having input values• Set “Calculate” as follows

40

Modular diagram having input values• Click “Diagram”• Add activities as follows

41

Modular diagram having input values• Connect the notification point and each “Data” activities

42

Modular diagram having input values• Connect “Join” and “MySumUp”

43

Modular diagram having input values• Completed diagram

44

Modular diagram having input values• Executed results

45

Modular diagram having output value

46

Modular diagram having output value• Start from previous sample

47

Modular diagram having output value• Click “Actions and Notifications” icon

48

Modular diagram having output value• Click “Add” button on the “Output values”• Change default name “Field” to “Result”

49

Modular diagram having output value• Click “OK” button

50

Modular diagram having output value• Remove “SimpleDialog” service

Remove

51

Modular diagram having output value• Set “Calculate” as follows• Connect “Calculate” to the output point

52

Modular diagram having output value• Select “value” item from the list

53

Modular diagram having output value• Completed “MySumUp” diagram

54

Modular diagram having output value• Add “Calculate” and “SimpleDialog” as follows

55

Modular diagram having output value• Completed diagram

56

Modular diagram having output value• Executed results