What is an “Array”?

An array is a variable data type that stores a collection of values referenced by an index number.

For example, suppose we wished to store the names of the 12 months of the year: January, February, March, … , November, December so we can convert a month number to a text name. Month 1 converts to “January”, Month 2 converts to “February” and Month 12 converts to “December”.

An easy way to do this conversion is to set up an array that, in concept, looks something like this:

Month[1] = “January”
Month[2] = “February”
Month[3] = “March”
Month[4] = “April”
Month[5] = “May”
Month[6] = “June”
Month[7] = “July”
Month[8] = “August”
Month[9] = “September”
Month[10] = “October”
Month[11] = “November”
Month[12] = “December”

Month is the name of this variable – but unlike other variables, this one stores 12 separate values. Each value is referenced by using an index – if the index value is 2, then Month[index] refers to “February”.

If we have a date, such as (US-style) – 2/14/15, meaning February 15, 2015, we can convert the month number of 2, into the text month name by referencing Month[2].

If you have studied algebra math or beyond, you have encountered array variables such as X₁, X₂, X₃, … X_n where the value X_i is read as “X subscript i”. This is the same concept as an array of values. If you have not studied algebra, this notation may be new to you. 

Most programming languages support an array variable type but App Inventor does not support arrays. Yet arrays are a convenient way of storing and working with some types of data. To support an array-like variable in App Inventor, we can use a list and map the array subscript to an index position in the list.  By hiding this within a couple of procedures, we can simulate the array variable type.

Sample User Interface

I created a simple app to demonstrate the use and implementation of the array. You can download this app from the MIT App Inventor Gallery here.

To use, start the app and specify a size for the array. In the sample screen, the array size is set to 10. To use for storing month names, as above, set the array size to 12. Once the array size has been set, enter values for the array elements, one by one, by entering an index position and a value to be stored at that position. At any time, select List Array to display the contents of the array.

Here is an example that sets the first element of the array to “Apples”:

After entering several values for the array, select List Array to see how the values have been stored in the array:

Unused values in the array are initialized to empty or blank values. You may change the value of any array element by assigning a new value to any index position.

Designer View

The user interface is specified in the Designer using horizontal and vertical layouts, buttons, text boxes and labels:

Blocks Code

The array code, itself, is simple to set up. First, we initialize a variable to store the size of the array, and then a second variable, Array1 is created to store the values in the array.

In programming it is common to create “Getters” and “Setters” for data values. This is called an “abstraction layer” and separates the underlying data details from the program. In this example code, the array is implemented with a list. But suppose in the future, App Inventor adds support for an array variable type. Rather than rewrite our entire app to reference the new array variable type, all we need to change is the code inside the “Getter” and “Setter” procedures.

The code to handle the List Array button is shown first. We use a for each block to loop through the values in the array, starting at 1, and the repeating up to the size of the array.

Each value is read from the array by calling the GetArray procedure and then paired with some additional code to display on the screen:

[2] = “February”

The “\n” is a special “new line” code that you can insert inside a string. When the “new line” is output to a text box or label on the screen, any text that follows is written on the next line below the current output.

When the array size is initialized, the Array1 variable is set to an empty list. Then, elements are added to the list, equal to the size of the array. An array to store 10 values will have 10 elements.

The Set Value event handler calls the SetArray procedure to assign a value to the specified element.

Improvements

This code may be greatly improved in several ways. One, is to change the procedures so the array variable is a parameter to the procedure. This way, you can have any number of array variables – yet use the same get and set procedures. Second would be to use one element of the list to store the array size so that the array variable is then self contained – and there is no need to store the size in another variable. Finally, code should be added to ensure that index values fall within the range of the array. If the array has 10 values, then an attempt to fetch the value of [11] should produce an error.