3. Block Coding: Building Logic and Handling Events
The Blocks Tab is where your app comes to life. You'll use visual code blocks to define how your app behaves in response to user input and other events.
3.1. Understanding Event Blocks
Every interactive component has event blocks that trigger when something happens (e.g., a button is clicked, text input changes). To access them:
- Go to the Blocks Tab.
- Select a component from the left-hand panel (e.g.,
Button1). - Drag an event block (e.g.,
when Button1 Click) onto the canvas.
This event block acts as a starting point for your logic.
3.2. Adding Action Blocks and Control Flow
Inside an event block, you add action blocks to perform tasks. These can be found under component categories or built-in blocks:
- Set Property Blocks: Change a component's property (e.g.,
set Label1's Text to "Hello"). - Control Blocks: For conditional logic (
if-else) or loops (for each item). - Math Blocks: For calculations.
- Text Blocks: For string manipulation.
- Variables: To store and retrieve data within your app.
Example: Changing a Label's Text on Button Click
when Button1 Click do
set Label1's Text to "Button Clicked!"
3.3. Navigating Between Screens
To make a multi-screen app, use the Navigate blocks found under the "Control" category. For example, to go to Screen2 when a button is clicked:
when Button2 Click do
navigate to Screen2
You can also pass data between screens using variables before navigating.