Component Properties

An app consists of a set of components: the screen, buttons, text labels, text boxes for user input, images, etc. Most of us are used to interacting with components from the perspective of an app user, but to become a programmer, you must conceive of an internal representation of an app, completely invisible from the user. This representation-- the app's internal memory-- is something like a spreadsheet or the private recesses of your brain. There is a named memory cell corresponding to each component property. Instead of memory cells named A1,A2, etc., as with a spreadsheet, you have memory cells with names like Screen.Title and Button1.Width The way a component looks and feels to the user is completely determined by the values in the component property memory cells.

Component properties are named memory cells

Changing the Initial Values of Properties

Consider the button properties displayed to the right (this is the panel you see on the right of the designer). As you develop an app, you can modify these properties to change the way the button will appear initially when the app launches. For instance, if you change the Width property of a button to 50, the button will appear 50 pixels wide at start-up. But this 50 value is not constant; Button.Width is a named memory cell with 50 in it, but that value can be changed as the app runs.

Changing Properties Dynamically

With the Blocks Editor, you can program blocks to change property values as the app runs (dynamically). For instance, the following blocks change the width of a button to 70 when the user clicks the button.

Note that the button's width changes to 70 the first time it is clicked. After that, the Button.Click will have no effect (it will continually overwrite 70 with 70).

The Hidden Nature of Property Values

Note that the property values shown in the App Inventor designer do not change when these blocks are executed. When you test the app and click the button to change the button's width to 70, the button will indeed change in the app, but the value shown on the Designer screen will still be 50. This is confusing until you realize the following:

The property values in the Designer show only the initial value of a property when the app is launched.

The Designer view does not display the dynamic value of an app's properties as it runs.

The hidden nature of property values as an app runs is indeed one of the difficulties in learning programming.

You must imagine that there is this invisible "spreadsheet" of property values constantly changing as the user interacts with the app.

Fortunately, App Inventor and many other programming environments provide "debugging" help which allows you to view, at least partially, the dynamic "spreadsheet" of properties. In App Inventor, you can view the dynamic values of selected properties by using the Watch feature. Just right click (control-click on Mac) on a property set or get block and the system will show the value as the app runs.

"Getting" Property Values and Incrementing a Value

Consider the following blocks:

The green set block to the left and the blue get block on the right are fundamental blocks in programming. Think of a set block as changing the value in a memory cell (setting its value), just as a person might type a number in a spreadsheet cell. Think of a get block as referencing the value in a memory cell, just as a person might reference a spreadsheet cell (e.g. A1) to use it in a formula.

The blocks above increment the width of the button by 10 pixels each click. So if the button starts with a width of 50, it will be 60 after one click, 70 after two clicks, and so on. Note that the order of operation is right-to-left (or really inside-out). The app first gets the current value of the Button1.Width property. It then adds 10 to it, then finally places (sets) the result back into the Button1.Width memory cell.