This document discusses the structure and capabilities of apps created using the Vizwik visual programming platform. It provides examples of how scripts can be used to control app functionality and data flow without traditional coding syntax. Scripts allow connecting operations to inputs and outputs in a node-based visual interface. Control structures like conditionals, loops, and calls between scripts provide programming logic. A/B tests show Vizwik allows building complete apps much faster than traditional HTML5. The document outlines the key components of an app, including views, scripts, and data, and provides examples of common scripting tasks.

1. What your App does...
Part 2 - Scripts
Learn Create Share

2. 1. Why visual code works
2. Structure of an App
3. Visual Data Flow
4. Scripts
5. Operations
6. Data Types
7. Control Flow: Blocks, Loops, & Calls
8. Examples
Contents

3. Visual as a basis for code...
14 characters
5 operations
6 links
4 rules
=
No syntax errors
52 characters
7 keywords used
3 assignments
6 lines of code
18 coding rules
=
50+ potential syntax errors

4. A/B Test: HTML5 vs Vizwik
Raw HTML 5
108 Hours
2 coders
design done
LOC: 1350
Deployment: 5hr
Status: Incomplete
Cost: $3500
Upload: 10s
Vizwik
19 hours
1 coder
1 designer
LOC: 18 scripts
Deployment: 1 min
Status: Complete
Cost: $500
Upload: 2s

5. A/B Test: HTML5 vs Vizwik
Raw HTML 5
108 Hours
LOC: 1350
Vizwik
19 hours
LOC: 18 scripts

6. App Structure
DB
FB
How it looks What it does What it stores
View Script Data
App
Web
tap
get/set

7. App Structure
DB
FB
How it looks What it does What it stores
View Script Data
App
Web
tap
get/set

8. Visual Data Flow Language
Script
0-N Inputs
0-N Outputs
Operation
Link
name

9. Calling operation on Source
Script
ParametersSource
operation
•••0,1 N

10. Script = Function
Script
0 to N Inputs
0 or 1
Outputs
Reference
Name

11. Create an Oper

12. Operator Shapes
Script

13. Boolean: True | False
Number: 125 , 12.34
Text: This is some text
List: (,,, ...)
Object: { name : value, ... }
Data Types

14. Boolean: True | False
Data Types

15. Number: 125 , 12.34
Data Types

16. Text: This is some text
Data Types

17. List: (a,1,23.3,Test,(a,b))
Data Types

18. Object: { name : value, ... }
Data Types

19. Event Handling: Tap
On Tap
Event Object
DnD
Event Object : {
id : ‘amXXXXXX’,
name : ‘Button’
X: 123, Y: 22
time: May 23, 2014, 2pm
}

20. View Item Reference

21. View Item Operators

22. View Item Reference
find menu

23. Operation Menu
Double-click Shift-click
click
keyboard
shortcut

24. 1. Blocks
2. Conditional Block
3. List Loop Block
4. Number Loop Block
5. Call and Return
Control Flow

25. Blocks
Blocks group operations to be controlled

26. Blocks
Can have inputs and outputs
0-N Inputs
0-N Outputs

27. Blocks
and can contain other blocks

28. Blocks
Creating a data flow control structure

29. Blocks
Sequential
Blocks
Blocks group other blocks together to allow them to
be controlled, such as sequencing

30. Conditional Block
Match is test
to run first
case if true
Run Block conditionally based on value of input

31. Conditional Block
2nd of 2 cases1st of 2 cases
Blocks can have any number of “cases” inside them

32. Conditional Block
If input does
not match
label, then
jump to 2nd
case
Jumping between cases in a block conditionally

33. agora mobile
List Loop Block
Execute a Block for each element in a list.
Loop Input
Looped Value (optional)
List of numbers

34. Numeric Loop Block
Execute a Block a specified number of times.
Loop Decrement
(-)
Increment (+)
Non-Looped Input/Output
(optional)
Count
End Test

35. Call & Return
Calling
Script

36. Call & Return
Calling
Script
Call Script

37. Call & Return
Calling
Script
Test for
divide by
zero
Call Script

38. Call & Return
Forced Return
Calling
Script
Test for
divide by
zero
Call Script

39. Call & Return
Forced Return
Calling
Script
Normal Return
Test for
divide by
zero
Call Script

40. Scripting Examples
1. Printing Values
2. Navigate between Views
3. Set View Item Properties - Color, visibility,
4. Get/Set Values - calculate
5. Set Image
6. Playing Audio
7. Add/Remove List Items
8. Maps - add marker
9. Media Upload - Gallery
10. Timers and Animation
11. Collision Detection
12. Prompts, Options, Menus
13. Draw on a Canvas

41. How to reach us...
www.vizwik.com
www.facebook.com/vizwik
www.twitter.com/agoramobile
www.vizwik.com/blog
www.googleplus.com/vizwik
www.youtube.com/vizwik