Chapter 16 – Programming your App’s Memory App Inventor 2

Chapter 16 - Introduction Just as people need to remember things, so do apps. This chapter examines how you can program an app to remember information. When someone tells you the phone number of a pizza place, your brain stores it in a memory slot. If someone calls out some numbers for you to add, you store the numbers and intermediate results in a memory slot. In such cases, you are not fully conscious of how your brain stores information or recalls it. An app has a memory as well, but its inner workings are far less mysterious than those of your brain. In this chapter, you’ll learn how to set up an app’s memory, how to store information in it, and how to retrieve that information at a later time.

Named Memory Slots Some are created when you drag components onto Designer Properties of components are themselves named memory slots as in: btnSubmit.Text = “Click Here to Submit” Some are created independently of components. These are called ‘variables’. Think of these as the app’s hidden ‘scratch’ memory

Properties Set values for these directly in the Component Designer Properties can have various types. Look at example (Canvas1 component): ‘BackgroundImage’ type is a PNG file ‘BackgroundColor’ and ‘PaintColor’ are colors ‘Visible’ type is Boolean ‘Width’ and ‘Height’ are numeric or a special designation (Fill Parent…)

Properties Setting properties in Component Designer ‘initializes’ them These are the values the component properties will have when the app starts They can change during execution (as the app runs). This is handled by the Blocks. When the app runs you no longer see the Component Designer, so you no longer see the property values in the running app

Defining Variables These are named memory slots, just like properties, but they are not associated with components. Example: Game app might need to track what ‘level’ a player has reached Could be stored in the ‘Text’ property of a Label If it’s not something that needs screen space, use a variable instead President’s Quiz (Ch8) uses variables to store a list of questions (only one question is visible at a time, so where are the others stored?).

Three steps to creating/initializing a variable Drag the initialize global variable  from the Variables drawer in the Built-In blocks Change the name of the variable by clicking on the text “variable” and typing “score” Set the initial value of the variable by dragging out a number block from the Math drawer and plugging it into the variable definition.

Remember . . . When you define a variable, you tell the app to set up a named memory slot for storing a value. These memory slots, as with properties, are NOT visible to the user as the app runs. You can also initialize the variable with a make a list or create empty list block. This sets the app up to work with lists of values which we explore in Chapter 19.

Setting and Getting a variable’s values There are two built-in blocks for this:

Examples of ‘set’ting and ‘get’ting values in variables

New in AI2!!! Scoping of variables You can create ‘global’ variables (this is not what’s new) This means that the named memory slot is visible and available from all parts of the app You can now also create ‘local’ variables This means that the named memory slot is only visible and available to selected parts of the program Local ‘scoping’ of variables is an extremely important new feature in AI2 and allows for the possibility of supporting larger-scale collaborative software projects

Setting a variable to an expression ‘Expression’ is a computer science term for ‘formula’ Say you need to change a ‘score’ variable to 5 more than what it’s current value is (what behavior might cause this to happen?) You would need an expression similar to the following score = score + 5 (is there a problem with this?) The way you ‘say’ this in App Inventor follows:

How blocks are processed Processing is done ‘inside-out’ First block: get (global score) Second block: ‘5’ Third block: ‘+’ Fourth block: set (global score)

How blocks are processed If 10 was already in here … And we take the value ‘5’ … And add it to the 10 … We then take the result (15) and put it back in here …

Building Complex Expressions Math drawer has lots of tools

Building Complex Expressions Use the math blocks to build expressions like this: What does the set of blocks above actually do?

Displaying Variables One advantage of storing data in a variable as opposed to a component property: it allows you to show just the data you want when you want to show it Allows you to separate the computational part of your app from the user interface – an important software engineering principle! Manageability of code: see discussion in last two paragraphs under heading ‘Displaying Variables’ in the chapter.

Local Variables ‘Global’ variables have access to all event-handlers and procedures in the entire app. Sometimes this is good – on larger projects, this can be a DISASTER. Makes collaboration really difficult. App Inventor now allows ‘local’ scoping: If the variable is only needed in one place, it is a good idea to define it as a local instead of a global. By doing so, you limit the dependencies in your app and ensure that you won’t mistakenly modify a variable. Think of a local variable like the private memory in your brain--you certainly don’t want other brains to have access to it!

Summary When an app is launched, it begins executing its operations and responding to events that occur. When responding to events, the app sometimes needs to remember things. For a game, this might be each player’s score or the direction in which an object is moving. Your app remembers things within component properties, but when you need additional memory slots not associated with a component, you can define variables. You can store values into a variable and retrieve the current value, just like you do with properties. As with property values, variable values are not visible to the end user. If you want the end user to see the information stored in a variable, you add blocks that display that information in a label or another user interface component.