-
Notifications
You must be signed in to change notification settings - Fork 35
Expand file tree
/
Copy pathdisplaylist.html
More file actions
227 lines (227 loc) · 7.89 KB
/
Copy pathdisplaylist.html
File metadata and controls
227 lines (227 loc) · 7.89 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta content="App Inventor for Android" name="description" />
<meta content="Android, Blocks App Inventor, Mobile, Phone, IDE" name="keywords" />
<title>
Display Lists - App Inventor for Android
</title>
<link href="/static/images/appinventor-16.png" rel="SHORTCUT ICON" type="image/ico" />
<link href="/static/images/appinventor-16.png" rel="icon" type="image/png" />
<link href="/static/css/appinventor.css" rel="stylesheet" />
<script src="http://www.google.com/js/gweb/analytics/autotrack.js">
</script>
<script>
var tracker = new gweb.analytics.AutoTrack({
profile: 'UA-5856106-2'
});
</script>
<script language = "JavaScript" src="/static/scripts/HeaderAndFooter.js"></script>
<style>
img.c2 {border-width:0}
div.c1 {clear:both;}
</style>
</head>
<body>
<script language = "JavaScript">createHeader('<div id="navigation-breadcrumb"> <a href="/learn/">Learn</a> > <a href="/learn/reference">Reference</a> > Display Lists > ');</script><br>
<div id="aiac">
<div class="main-container">
<div class="customhr customhr-gray">
</div>
<div class="content">
<div class="content-body">
<div class="learn-page">
<h1>
Displaying a List
</h1>
<p>
You'll often define list variables to store data. For instance, the following
variable stores a list of phone numbers:
</p>
<div class="imagecontainer">
<img alt="" height="168" src="DisplayListAssets/broadcastListItems.png" width="321" />
</div>
<p>
When you want to display such a list on the phone, you can plug it into the Text
property of a Label, such as in this example:
</p>
<div class="imagecontainer">
<img alt="" height="62" src="DisplayListAssets/simpleDisplayList.png" width="342" />
</div>
<p>
On the phone, the items of the list will appear in BroadcastListLabel as a
space-delimited list:
</p>
<blockquote>
(1112222 3334444 5556666)
</blockquote>
<p>
The user can see the data, but it's not very elegant. Generally lists are displayed
on separate lines or with commas separating each item.
</p>
<p>
To display a list more elegantly, you'll
<em>
serialize
</em>
it-- write blocks to
move the list items into the Label with the formatting you want. You can display
the items on separate lines, add decorative text-- just about anything you can
imagine. To serialize a list, you'll use a foreach block to successively add each
item to the Label.
</p>
<p>
Here's a sample that displays the BroadcastList on separate lines. The blocks are
within a procedure which you call anytime the list is modified.
</p>
<div class="imagecontainer">
<img alt="" height="306" src="DisplayListAssets/displayNumbersOnly.png" width="630" />
</div>
<h2>
How the Blocks Work
</h2>
<p>
The BroadcasatListLabel.Text is first initialized to a header, "Phone Numbers...".
Then the foreach block begins-- all the blocks within it will be repeated for each
item in BroadcastList. If the list has three items, as in BroadcastList, the blocks
within the foreach will be executed three times. Each time the blocks are repeated,
the variable pnumber has a different item in it. The first time it will have
1112222, the second time it will have 3334444, and the third time it will have
5556666. Each time the make a text block appends the pnumber to the end of
BroadcastListLabel.Text, placing a newline chracter, "\n", in between.
</p>
<h3>
The newline character "\n"
</h3>
<p>
Text objects generally consist of letters, digits, and punctuation marks. But text
can also store special control characters which don't map to a single character.
"\n" is such a control character. When it appears in a text block, it means "go
down to the next line before you display the next thing." So the text
"1112222\n3334444\n5556666" would appear as:
</p>
<blockquote>
1112222
<br />
3334444
<br />
5556666
</blockquote>
<p>
Let's trace the blocks to see how the BroadcastListLabel is built. Tracing means to
show how each variable/property changes as the blocks are executed. Since there is
a foreach, we'll consider the values after each iteration-- each time the blocks
within the foreach are executed:
</p>
<div class="advtutorial">
<table>
<tbody>
<tr>
<td class="tbl-header">
Iteration
</td>
<td class="tbl-header">
pnumber
</td>
<td class="tbl-header">
PhoneListLabel.Text
</td>
</tr>
<tr>
<td>
Before foreach
</td>
<td>
n/a
</td>
<td>
PhoneNumbers...
</td>
</tr>
<tr>
<td>
after first iteration
</td>
<td>
1112222
</td>
<td>
PhoneNumbers...\n1112222
</td>
</tr>
<tr>
<td>
after second iteration
</td>
<td>
3334444
</td>
<td>
PhoneNumbers...\n1112222\n3334444
</td>
</tr>
<tr>
<td>
after third iteration
</td>
<td>
3334444
</td>
<td>
PhoneNumbers...\n1112222\n3334444\n5556666
</td>
</tr>
</tbody>
</table>
</div>
<p>
As the table shows, the foreach block performs the task of successively placing the
next item of BroadcastList into the variable number. On first iteration, pnumber is
1112222, on second 3334444, and on third 5556666. foreach does part of the work for
you-- you don't have to explicitly set the variable pnumber to one of the items in
the list.
</p>
<p>
The blocks within the foreach append a "\n" and the number to the previous value of
PhoneListLabel.Text. So after each iteration, the label becomes larger and holds
one more phone number (and one more newline). By the end of the foreach,
PhoneListLabel.Text is set so that the numbers will appear as:
</p>
<blockquote>
1112222
<br />
3334444
<br />
5556666
</blockquote>
<blockquote class="notice">
Google is grateful to
<a href="http://appinventorblog.com">
Professor David
Wolber
</a>
, CS Professor at The University of San Francisco, for developing this
reference material.
</blockquote>
</div>
</div>
</div>
<div class="footer">
<script language = "JavaScript">createFooter();</script><br>
<div class="footer-lastupdate">
<script>
if (document.lastModified != '') {
var m = "Page last updated: " + document.lastModified;
var p = m.length-8;
document.writeln("<center>");
document.write(m.substring(p, 0));
document.writeln("<\/center>");
}
</script>
</div>
</div>
</div>
</div>
</body>
</html>