1 / 56

VPL Patterns – Modularize Diagrams

Discover the essentials of creating modular diagrams in Visual Programming Language (VPL) with our beginner's course led by Young Joon Kim. This course covers the construction of simple modular diagrams using "Activity", including how to manage input and output values effectively. You'll learn to build a functional sum-up module, integrate various activities like "Calculate" and "Join", and handle user interactions with buttons and dialogs. By the end, you'll be confident in designing and executing modular VPL diagrams to meet your programming needs.

jered
Télécharger la présentation

VPL Patterns – Modularize Diagrams

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. VPL Patterns – Modularize Diagrams VPL Beginner Course – 02 Young Joon Kim http://www.helloapps.com

  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 button Call 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 Start Value Click button Call Sum-Up Module (Activity) End Value Display result

  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

More Related