Export to GitHub

resource-calculators - fbLists.wiki


Introduction

This is part of a series on using lists and databases in App Inventor.

It shows you one way to get a list of lists into AI. The technique is useful to do a prototype that does not have a lot of data.

Details

We have a table of 4 items. Each item has 4 elements.

| item | element1 | element2 | element3 | element4 | |:---------|:-------------|:-------------|:-------------|:-------------| | i1 | i1e1 | i1e2 | i1e3 | i1e4 | |i2 |i2e1 |i2e2 |i2e3 |i2e4 | |i3 |i3e1 |i3e2 |i3e3 |i3e4 | |i4 |i4e1 |i4e2 |i4e3 |i4e4 |

How can we get the data into App Inventor and then use it? There are various ways, the one we are going to look at here is to use lists.

A list in App Inventor is a one dimensional array of list items. The table above has 4 lists i1, i2, i3 and i4 and each item has 4 elements. The 4 lists are rows and the 4 elements are columns in many other programming languages.

Here is an example app. It has a 4X4 table as four defined blocks. It has a place to put a row and column number and a button that shows the value in the cell.

http://resource-calculators.googlecode.com/hg/ffxiii/fb/images/listTutorials_Design01.png

and the blocks

http://resource-calculators.googlecode.com/hg/ffxiii/fb/images/listTutorials_01.png

It tests what row and if you entered column 1, it then tests which of the 4 columns you want and displays the contents. The blocks are what I used to get going, they only show 4 of the 16 cells we have to test for - ick.

But if we use the column like we use the row, like this

http://resource-calculators.googlecode.com/hg/ffxiii/fb/images/listTutorials_01_final.png

we can show the rows and columns. It tests which row you are interested in and then uses what you entered for a column for the column index. It does not need the nested if to test what row you want, you can use the row's text as that index.

and

It does not check the input values to make sure they are valid and adding another row or column requires lots of clicking and editing.

hmmm

Let's put everything into a string and split into rows and columns. Here is the string

i1e1|i1e2|i1e3|i1e4#i2e1|i2e2|i2e3|i2e4#i3e1|i3e2|i3e3|i3e4#i4e1|i4e2|i4e3|i4e4

There are '#' characters between the rows and '|' between the columns.

http://resource-calculators.googlecode.com/hg/ffxiii/fb/images/splitSplit.png

and the blocks are easy to dance with and not quite as hard to add more rows and columns

ToDo

  • show Do It and Watch to debug.