Components and Their Properties

Components

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.

Properties

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.