1. Programming Lists of Data 靜宜大學資管系 楊子青 2013.3.11.

2. Complex, interrelated items that must be organized
Many apps process lists of data. For example:
Facebook processes your list of friends.
A quiz app works with a list of questions and answers.
A game might have a list of characters or all-time high scores.
In this chapter, we’ll examine the way App Inventor handles data.
static lists (in which the data doesn’t change)
dynamic lists (in which the data is user-generated).

3. A list variable represents a set of memory cells
The elements of a list are accessed using an index.
An index is a position in a list, so:
index 1 of the list refers to 111–2222,
index 2 refers to 333–4444, and
index 3 refers to 555–6666

4. 1. Static lists
The elements are defined by the programmer (you) and whose items don’t change unless you change the blocks themselves.

5. 1.1 Creating a List Variable
From the Built-In Palette, drag a def variable block into the program area.
Click the text “variable” and change the name to “phoneNumbers”.
From the Lists palette, drag out a make a list block and plug it into the definition block.

6. Creating a List Variable (Cont.)
(4) Finally, drag in some text blocks, enter the desired phone numbers, and plug them into the “item” slots in the make a list block.

7. 1.2 Selecting an Item in a List
Your app can access particular items of a list with the select list item block and by specifying an index in the list.
The result would be “333–4444”.

8. 1.3 Using an Index to Traverse a List
In many apps, you’ll define a list of data and then allow the user to step through (or traverse) it.

9. List index too large
The error message displayed when the app tries to select the fourth item from a three-item list.

10. Reset index
Using the if test to check for whether the index value is larger than the length of the list, and reset it to 1 if the test returns true

11. 2. Dynamic Lists
Lists that change based on the end user entering new items, or new items being loaded in from a database or web information source.

12. 2.1 Defining a Dynamic List
Just as with a static list, you define a dynamic list with the make a list block.
But with a dynamic list, you don’t add any predefined items in the list definition.

13. 2.2 Adding an Item Using a form to add new items to the notes list.
The add item to list block appends the item to the end of the list.
You’ll find the add item to list block in the List drawer.

14. 2.3 Removing an Item from a List
You can remove an item from a list with the remove list item block.

15. 2.4 Displaying a List
The simplest way to display a list in your app’s user interface:
to use the same method you use for displaying numbers and text: put the list in the Text property of a Label component.

16. The defult list display is not very elegant (優雅)

17. 2.5 ListPicker component is a user interface component
displays the items of a list and allows the user to choose one.
can be used for removing items.

18. Key events of the ListPicker component and their properties (1/2)
The ListPicker.BeforePicking event
is triggered when the user clicks the ListPicker’s associated button but before the choices are listed.
You can set the ListPicker.Elements property to a list variable.

19. Key events of the ListPicker component and their properties (2/2)
The ListPicker.AfterPicking event
When the user chooses an item in the list, the event is triggered.
you can access the user’s selection in the ListPicker.Selection Property.

20. 2.6 Remove item from list by ListPicker
利用ListPicker.SelectionIndex找出要刪除的元素所在位置
使用remove list item：
填入List變數
Index為ListPicker.SelectionIndex

21. 練習：資管系實驗室列表App 讓使用者利用Textbox輸入資管系實驗室，逐一將以下資料加入List變數，於ListPicker顯示結果
主顧403 電子商務實驗室 (403EC)
主顧405 企業資源規劃實驗室 (405ERP)
主顧407 醫療資訊系統實驗室 (407HIS)
主顧409 資料庫與資料探勘實驗室 (409DB)
主顧411 資訊安全與網路管理實驗室 (411NM)
主顧413 多媒體技術與應用實驗室 (413MM)
主顧415 智慧代理人與行動商務實驗室 (415IA)
使用者如果在ListPicker選了一個實驗室，則將該實驗室資料刪除

22. 執行實例