Event Handlers, Properties and Conditionals

Home / Event Handlers, Properties and Conditionals

Event Handlers

App Inventor programs describe how the phone should respond to certain events: a button has been pressed, the phone is being shaked, the user is dragging her finger over a canvas, etc. This is specified by event handler blocks, which used the word when. E.g., when Button1.Click and when AccelerometerSensor1.Shaking in HelloPurr.

Most event handlers are green in color and are stored at the top part of each drawer. Here are some examples of event handlers.

When an event occurs on a phone, the corresponding event handler is said to fire, which means it is executed.


Programming Your App to Make Decisions: Conditional Blocks

Computers, even small ones like the phone in your pocket, are good at performing thousands of operations in just a few seconds. Even more impressively, they can also make decisions based on the data in their memory banks and logic specified by the programmer. This decision-making capability is probably the key ingredient of what people think of as artificial intelligence-and it’s definitely a very important part of creating smart, interesting apps! In this chapter, we’ll explore how to build decision-making logic into your apps.

As we discussed in Chapter 14, an app’s behavior is defined by a set of event handlers. Each event handler executes specific functions in response to a particular event. The response need not be a linear sequence of functions, however; you can specify that some functions be performed only under certain conditions. A game app might check if the score has reached 100. A location-aware app might ask if the phone is within the boundaries of some building. Your app can ask such questions and, depending on the answer, proceed down a certain program branch (or direction).

When the event occurs, function A is performed no matter what. Then a decision test is performed. If the test is true, B1 is performed. If it is false, B2 is performed. In either case, the rest of the event handler (C) is completed.

Because decision diagrams like the one in Figure 18-1 look something like trees, it is common to say that the app “branches” one way or the other depending on the test result. So, in this instance, you’d say, “If the test is true, the branch containing B1 is performed.”

Figure 18-1. An event handler that tests for a condition and branches accordingly

Components and Their Properties


App Inventor provides the user with many different components to use while building their mobile apps. The components are chosen on the Design screen and dragged onto the phone. The user can then change properties of these components such as color, font, speed, etc.

In the Designer view, on the left hand side is the component palette. This palette contains different drawers such as Basic, Media, Animation, etc. which hold all of the components. These components can be clicked on and dragged onto the screen

There are two main types of components: visible and non-visible. Visible components such as Button, TextBox, Label, etc. are part of the User Interface. Non-visible components such as Accelerometer, Sound, OrientationSensor are not seen and thus not a part of the UI screen, but they provide access to built-in functions of the Android device.

When programming in the Blocks Editor, components can be accessed in two ways. Specifically by using the set Label1.Text to or generally by using the set any Label.Text to. If specifically only changing the one label, only that label will get replaced. By using any component block, all components of the type Label will have their Text changed to the user’s specification.

All components can be defined by a set of properties, or attributes that the component has.


Every component is characterized by various properties. What are some properties of a Label component? The current values of these properties are the state of the component. You can specify the initial state of a component in the Properties pane of the Designer window. App Inventor programs can get and set most component properties via blocks. Shown are the blocks for manipulating the state of Label1. These blocks change the text of the label to say “Hello World” and change the color of that text to purple.

Getter blocks are expressions that get the current value of the property. Setter blocks are commands that change the value associated with the property.

These blocks can be found within the drawer for the component that they are getting or setting a property for.

If you’ve used the original version of App Inventor, you may notice there are less blocks available when you click on the drawer. This is because all of the get property blocks have been condensed into one dropdown block. Clicking on the dropdown will allow you to change the property that is get or set.

Once a component has been dragged onto the center viewer screen and is selected, the right column will display the component’s full list of properties. The user can change any of these properties to change the design of the app.