VPL Patterns – Add Diagrams

Young Joon Kimhttp://www.helloapps.com

VPL Beginner Course – 01

2

Topics

• Create Button form

• Add new diagrams

• Separate logic

3

Scenario for target samples

4

Scenario for target sample

• Build simple calculator

Input user’s choice

(“Add”, “Subtract”, “Multiply”, “Divide”)

Add & Subtract diagram

Display result

Multiply & Divide diagram

Display result

5

Create Button form

6

Create Button form

• Add “Data” activity and “HelloApps (Util) Button Dialog”

service

7

Create Button form

• Set “Data”

• Connect “Data” and “ButtonDialog”

8

Create Button form

• Set “Connections” and “Data Connections”

9

Create Button form

• Connected result

10

Create Button form

• Save and run a diagram

11

Create Button form

• Add “Data” and “ButtonDialog” as follows

12

Create Button form

• Set second “Data” activity as below

13

Create Button form

• Select “AddButtonVertical”

14

• Connected result

Create Button form

15

Create Button form

• Save and run a diagram

16

Create Button form

• Repeat for the “Multiply” and “Divide”

17

Create Button form

• Save and run a diagram

18

Add new diagrams

19

Add new diagrams

• Click “Add Diagram” submenu under the File menu

20

Add new diagrams

• Add another diagram again

21

Separate logic

22

Separate logic

• Click “Diagram0”

• Add activities and services as follows

23

Separate logic

• Connect the notification point of “ButtonDialog” to the input

of “If”

24

Separate logic

• Choose “NotifyButtonClicked”

25

Separate logic

• Set “If” as follows

26

Separate logic

• Set “Data” activities as follows

27

Separate logic

• Connect “Data” activity and “SimpleDialog”

28

Separate logic

• Choose “AlertDialog” from the list

29

Separate logic

• Diagram0

30

Separate logic

• Click “Diagram1”

• Add activities and services as follows

31

Separate logic

• Set diagram as follows

32

Separate logic

• Completed diagram

33

Separate logic

• Save and run a diagram