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

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).

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

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

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.

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.

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”.

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.

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

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

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.

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.

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.

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

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.

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

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.

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.

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.

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

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

執行實例