Different Types of Blocks (Components)

Published on November 5, 2021

In this tutorial, we are introducing different types of App Inventor component blocks. They are sorted into categories, and can often be distinguished by their colors.

🏷️ Tags: #newbie, #tutorials-and-guides 

Event blocks (yellow)

Events are blocks which are triggered when a specific action is occured. For example, the when Button1.Click block is triggered and the blocks inside will be executed when Button1 is tapped. The when Screen1.Initialize block is triggered and the blocks inside will be executed when Screen1 is opened by the user.

The orange rectangles on event blocks are parameters. They are like variables, but they are only accessible in the event locally. Events can have no parameters, 1 parameter or more than 1 parameter.

Method blocks (purple)

Method blocks execute a specific action. For example, the call Camera1.TakePicture method helps you to take a picture with the user's camera. The call Screen1.HideKeyboard method helps you to hide the keyboard of Screen1 if there is a keyboard on the screen.

There can be more than 1 socket or no sockets in method blocks. Sockets are what we call an argument. For example, the socket message in call TextToSpeech1.Speak method specifies what the component should speak.

Methods can have no sockets, 1 socket or more than 1 socket.

Property blocks (green, either dark or light green)

Property blocks specify a property of a component. They set the property of the component in the Blocks, not in the Designer. For example, the set Label1. Text property sets the text of Label1. The Screen1.Title property returns/gives you the text of the title of Screen1.

Property blocks can be split into getters and setters. Getters are light green, and they return something, while setters are dark green and they set something to something.

Properties can be a text string, a number, a list, and sometimes, a dictionary.

Helper blocks (red)

Helper blocks are a new type of blocks which do not exist in some versions of App Inventor. They also return something, for example, the meow.mp3 helper block returns a file in the media, which also can be replaced by a text block, which text is meow.mp3. They are only for users who are beginners for App Inventor to quickly program without confusion.

Note: Helper blocks are by default, but not required, means that the helper block cat.png can be deleted and replaced by other blocks.

© Gordon Lu             📧 E-mail     💬 Message