1
00:00:04,759 --> 00:00:06,680
In this video, we're going to add two

2
00:00:06,680 --> 00:00:08,750
options to the menu, so that we can

3
00:00:08,750 --> 00:00:12,440
choose between the Top 10 and Top 25. Now

4
00:00:12,440 --> 00:00:13,820
this'll be slightly different to the

5
00:00:13,820 --> 00:00:15,830
menu items we've already got, because

6
00:00:15,830 --> 00:00:17,810
once you've chosen either Top 10 or Top

7
00:00:17,810 --> 00:00:19,939
25, that choice will remain in effect

8
00:00:19,939 --> 00:00:23,119
until you change it. And also, when you

9
00:00:23,119 --> 00:00:25,070
select the Top 10, it will automatically

10
00:00:25,070 --> 00:00:28,910
unselect the Top 25, and vice versa. So I'm

11
00:00:28,910 --> 00:00:30,919
going to edit the feeds_menu to add

12
00:00:30,919 --> 00:00:34,399
these new options. So open the feeds

13
00:00:34,399 --> 00:00:35,840
_menu layout, if you haven't

14
00:00:35,840 --> 00:00:37,610
already, and let's see how to add these

15
00:00:37,610 --> 00:00:40,280
menu items with the option buttons. Now

16
00:00:40,280 --> 00:00:42,170
the way we do that is to use a menu

17
00:00:42,170 --> 00:00:44,300
Group. So, first thing we're going to

18
00:00:44,300 --> 00:00:46,730
do is grab, is drag a group from the

19
00:00:46,730 --> 00:00:49,460
pallet onto the Design. This time, though,

20
00:00:49,460 --> 00:00:51,260
you have to be more careful and watch

21
00:00:51,260 --> 00:00:53,270
the orange highlighting, because we don't

22
00:00:53,270 --> 00:00:55,010
want to place it between any of the

23
00:00:55,010 --> 00:00:57,320
existing items, and I'll just show you

24
00:00:57,320 --> 00:00:58,910
what I mean by that. So I'm gonna select

25
00:00:58,910 --> 00:01:02,450
the Group, so do be more careful where

26
00:01:02,450 --> 00:01:04,339
you're placing it. And in fact, what I

27
00:01:04,339 --> 00:01:06,710
want to do is, or what I find much easier is,

28
00:01:06,710 --> 00:01:08,240
to drag it into the Component Tree,

29
00:01:08,240 --> 00:01:10,490
rather than the design. The reason is,

30
00:01:10,490 --> 00:01:11,719
it's just a lot clearer as to what's

31
00:01:11,719 --> 00:01:14,060
happening. Now to show you how you can

32
00:01:14,060 --> 00:01:16,219
arrange the menu options, though, I'm

33
00:01:16,219 --> 00:01:17,869
gonna place the group between the first

34
00:01:17,869 --> 00:01:20,509
two buttons over here - so between mnuFree

35
00:01:20,509 --> 00:01:22,939
and mnuPaid. And you can see that line

36
00:01:22,939 --> 00:01:24,259
there, and that's actually showing you

37
00:01:24,259 --> 00:01:26,209
where the new item or group - group in

38
00:01:26,209 --> 00:01:27,380
this case, because that's what I've

39
00:01:27,380 --> 00:01:29,030
selected - will appear. So I'm going to

40
00:01:29,030 --> 00:01:29,929
release the mouse button,

41
00:01:29,929 --> 00:01:31,670
and you can see group was actually added

42
00:01:31,670 --> 00:01:34,700
there in the Component Tree. So I've now got

43
00:01:34,700 --> 00:01:36,740
the group in the wrong place, and note

44
00:01:36,740 --> 00:01:38,119
that the group doesn't show in the

45
00:01:38,119 --> 00:01:40,279
Design. So this is where the Component

46
00:01:40,279 --> 00:01:42,560
Tree is really useful. So what you can do

47
00:01:42,560 --> 00:01:44,090
is you can move items up and down by

48
00:01:44,090 --> 00:01:46,039
just dragging them in the Design, but

49
00:01:46,039 --> 00:01:48,200
it's actually easier to do that in the

50
00:01:48,200 --> 00:01:50,329
Component Tree, and with a group you've

51
00:01:50,329 --> 00:01:52,429
got no choice, because it doesn't appear

52
00:01:52,429 --> 00:01:54,229
in the Design, unless you want to edit

53
00:01:54,229 --> 00:01:56,509
the XML directly, of course. So what I'm

54
00:01:56,509 --> 00:01:58,249
going to do is drag the group down to

55
00:01:58,249 --> 00:02:02,509
the bottom of the Component Tree. Notice

56
00:02:02,509 --> 00:02:03,859
the horizontal lines that appear where

57
00:02:03,859 --> 00:02:06,079
it can be dropped - it basically shows you

58
00:02:06,079 --> 00:02:08,300
where it's going to appear. Now it gets more

59
00:02:08,300 --> 00:02:09,800
interesting when we have items that can

60
00:02:09,800 --> 00:02:11,360
be nested into other items, such as a

61
00:02:11,360 --> 00:02:13,400
group, so I'm going to release that first.

62
00:02:13,400 --> 00:02:15,140
Put the group in there, down the bottom.

63
00:02:15,140 --> 00:02:17,239
Then I'm going to add two more menu

64
00:02:17,239 --> 00:02:18,290
items to the bottom of

65
00:02:18,290 --> 00:02:20,930
the menu. Alright, so I'm gonna get a menu

66
00:02:20,930 --> 00:02:22,790
item, and I'm gonna drag the first menu

67
00:02:22,790 --> 00:02:24,489
on to the bottom of the Component Tree,

68
00:02:24,489 --> 00:02:26,810
but watch what happens before I let go.

69
00:02:26,810 --> 00:02:28,969
So it's natural to aim for the various

70
00:02:28,969 --> 00:02:30,890
elements in the list, so that your mouse

71
00:02:30,890 --> 00:02:32,239
pointer will naturally be over to the

72
00:02:32,239 --> 00:02:34,310
right, below group in the list.

73
00:02:34,310 --> 00:02:37,579
But if I move over to the left, still

74
00:02:37,579 --> 00:02:38,629
while keeping the mouse button down,

75
00:02:38,629 --> 00:02:43,040
notice what happens. Over to the right, so to

76
00:02:43,040 --> 00:02:44,480
the left and to the right, you can see

77
00:02:44,480 --> 00:02:46,519
the little mouse pointer changes. So over to

78
00:02:46,519 --> 00:02:47,930
the right, the new menu item will be

79
00:02:47,930 --> 00:02:49,879
dropped inside our group. Over to the

80
00:02:49,879 --> 00:02:51,889
left, it's going to appear, it's going

81
00:02:51,889 --> 00:02:54,379
to basically appear below the group. So in

82
00:02:54,379 --> 00:02:55,609
other words, the guide's providing a

83
00:02:55,609 --> 00:02:57,260
visual indication of where the items

84
00:02:57,260 --> 00:02:59,150
are going to end up. For this one, I'm

85
00:02:59,150 --> 00:03:00,470
going to keep right - I'm gonna move over

86
00:03:00,470 --> 00:03:02,000
to the right - because we want toe

87
00:03:02,000 --> 00:03:05,599
drop it inside the group. And you can see

88
00:03:05,599 --> 00:03:07,129
that we've now got this little

89
00:03:07,129 --> 00:03:08,959
menu here, and the item's actually in

90
00:03:08,959 --> 00:03:11,930
that group. Now for the second menu item;

91
00:03:11,930 --> 00:03:14,659
I'm gonna select that again, and I'm

92
00:03:14,659 --> 00:03:16,489
gonna move down. This time I'm going to

93
00:03:16,489 --> 00:03:19,129
keep left, so it ends up below the group

94
00:03:19,129 --> 00:03:20,959
rather than inside it. Now that's not

95
00:03:20,959 --> 00:03:22,280
where I want it, but I want to show you

96
00:03:22,280 --> 00:03:24,769
how you can move these items around. Now it

97
00:03:24,769 --> 00:03:26,900
should be easy, but let me just drop this

98
00:03:26,900 --> 00:03:29,989
first. You can see, we've now got one menu

99
00:03:29,989 --> 00:03:31,849
item that's in the group, and an item

100
00:03:31,849 --> 00:03:33,560
that actually appears outside and it's

101
00:03:33,560 --> 00:03:35,900
actually showing in here as well. Now it

102
00:03:35,900 --> 00:03:38,449
should be easy to move things around, but

103
00:03:38,449 --> 00:03:40,069
the guide's let us down here. So a

104
00:03:40,069 --> 00:03:41,840
future update might fix this, but at the

105
00:03:41,840 --> 00:03:45,470
moment, I can't get this bottom item and

106
00:03:45,470 --> 00:03:49,970
drag it into the group. You can see it's

107
00:03:49,970 --> 00:03:51,079
not actually working when I try and do

108
00:03:51,079 --> 00:03:53,629
that. You can see that the, it's really

109
00:03:53,629 --> 00:03:55,040
hard to see but there's an arrow key

110
00:03:55,040 --> 00:03:56,629
there - it's trying to put into the group

111
00:03:56,629 --> 00:03:58,400
but it's not actually letting, allowing

112
00:03:58,400 --> 00:04:00,919
me to move anything. So the menu design's

113
00:04:00,919 --> 00:04:02,780
a bit flakey when working with groups, and

114
00:04:02,780 --> 00:04:04,909
that's been, there's been problems with

115
00:04:04,909 --> 00:04:07,579
it for over six months now. And it does

116
00:04:07,579 --> 00:04:09,290
seem to be working okay, generally, now

117
00:04:09,290 --> 00:04:11,209
with groups, but as I said, it has been

118
00:04:11,209 --> 00:04:13,370
flakey but if it breaks again, you'll need to

119
00:04:13,370 --> 00:04:16,250
edit the XML. So the fix to get this to

120
00:04:16,250 --> 00:04:17,899
work, is to click on this little arrow

121
00:04:17,899 --> 00:04:20,238
here to expand it out, and now when I 

122
00:04:20,238 --> 00:04:22,699
do that, I can drag this into place okay.

123
00:04:22,699 --> 00:04:25,669
You can see that's now worked. So you can

124
00:04:25,669 --> 00:04:27,110
see that the menu design is a little

125
00:04:27,110 --> 00:04:28,940
bit flakey when working with groups, and

126
00:04:28,940 --> 00:04:30,830
there's actually been problems for over

127
00:04:30,830 --> 00:04:31,900
six months. It

128
00:04:31,900 --> 00:04:34,090
now does seem to be working okay, apart from

129
00:04:34,090 --> 00:04:35,800
that minor problem, which we resolved by

130
00:04:35,800 --> 00:04:38,080
expanding the group. But if it breaks

131
00:04:38,080 --> 00:04:39,600
again, then you'll need to edit the XML.

132
00:04:39,600 --> 00:04:41,710
So it's worth having a quick look in

133
00:04:41,710 --> 00:04:43,300
there, just to get familiar with that, if

134
00:04:43,300 --> 00:04:45,790
you need to, for some reason, go into and

135
00:04:45,790 --> 00:04:48,010
make changes to the XML. So I'm going to

136
00:04:48,010 --> 00:04:50,980
click on the TextView. Now what we're

137
00:04:50,980 --> 00:04:53,260
interested in here is this group. So

138
00:04:53,260 --> 00:04:55,000
notice that two items are nested inside

139
00:04:55,000 --> 00:04:57,040
the group; there's a group start opening

140
00:04:57,040 --> 00:04:59,560
tag and the group closing tag. Now if you

141
00:04:59,560 --> 00:05:01,240
get problems placing items inside a

142
00:05:01,240 --> 00:05:03,730
group, just drop them at the bottom, then

143
00:05:03,730 --> 00:05:05,350
edit the XML to move them where they

144
00:05:05,350 --> 00:05:05,890
should be.

145
00:05:05,890 --> 00:05:07,810
Now watch out for the group being

146
00:05:07,810 --> 00:05:09,640
created as a self-closing tag when it's

147
00:05:09,640 --> 00:05:11,500
empty. So in other words, if you saw

148
00:05:11,500 --> 00:05:14,020
something like this - I'll just clean up

149
00:05:14,020 --> 00:05:16,810
that other line first. So if you see

150
00:05:16,810 --> 00:05:20,140
something like that, like that with the

151
00:05:20,140 --> 00:05:22,870
closing slash there, if that happen - and

152
00:05:22,870 --> 00:05:25,630
it's perfectly valid for an empty tag

153
00:05:25,630 --> 00:05:27,190
to be self-closing like this - then you should

154
00:05:27,190 --> 00:05:30,730
delete the closing slash, like so, and

155
00:05:30,730 --> 00:05:32,790
then just type in the closing tag itself,

156
00:05:32,790 --> 00:05:35,800
this one down the bottom. Alright, but I'm just

157
00:05:35,800 --> 00:05:37,090
gonna undo everything there, and leave it

158
00:05:37,090 --> 00:05:41,200
back to how it was before. That's how it

159
00:05:41,200 --> 00:05:42,910
was when  we got there, and we'll go back to

160
00:05:42,910 --> 00:05:45,700
the Design. Alright, so I'm going to give

161
00:05:45,700 --> 00:05:48,310
the first of these new menu items the

162
00:05:48,310 --> 00:05:52,210
item, the ID rather, mnu10. Click it

163
00:05:52,210 --> 00:05:55,090
in the group there now - mnu10, I'll

164
00:05:55,090 --> 00:05:58,870
call that one - and the title will be Top 10.

165
00:05:58,870 --> 00:06:02,800
And for the second one, no surprises

166
00:06:02,800 --> 00:06:08,350
for guessing a mnu25 and Top 25. And it's

167
00:06:08,350 --> 00:06:10,210
also a good idea to give the group an

168
00:06:10,210 --> 00:06:11,740
ID, so let's go ahead and do that as well.

169
00:06:11,740 --> 00:06:14,380
I'm gonna select the group - mnu

170
00:06:14,380 --> 00:06:20,490
will be the ID - mnugrpLimit.

171
00:06:20,490 --> 00:06:23,980
That's the ID. Now at the moment, these

172
00:06:23,980 --> 00:06:25,870
look just like any other menu items and

173
00:06:25,870 --> 00:06:27,580
there's no way to telling, of telling,

174
00:06:27,580 --> 00:06:29,770
which one's currently selected. What we

175
00:06:29,770 --> 00:06:31,270
really want is for them to behave like

176
00:06:31,270 --> 00:06:33,880
radio buttons, so that if one is selected,

177
00:06:33,880 --> 00:06:36,070
the other's automatically unselected. and

178
00:06:36,070 --> 00:06:38,110
we get a visual indication of which one

179
00:06:38,110 --> 00:06:40,180
is being applied to the feeds. And that's

180
00:06:40,180 --> 00:06:42,430
the purpose of the group here. So if I

181
00:06:42,430 --> 00:06:44,050
select the group, which it is selected at

182
00:06:44,050 --> 00:06:44,870
the moment then,

183
00:06:44,870 --> 00:06:47,120
as you can see, I can actually change it's

184
00:06:47,120 --> 00:06:49,670
checkable behaviour property to single,

185
00:06:49,670 --> 00:06:51,710
and that will allow only one of its items

186
00:06:51,710 --> 00:06:52,580
to be selected.

187
00:06:52,580 --> 00:06:55,310
So checkable behavior here; we've got

188
00:06:55,310 --> 00:06:58,580
options of none, all or single, and what

189
00:06:58,580 --> 00:07:00,950
we want is single, that allows only one of

190
00:07:00,950 --> 00:07:04,130
its items to be selected. And you can see

191
00:07:04,130 --> 00:07:04,910
what happened when I did that - we

192
00:07:04,910 --> 00:07:05,930
automatically got these radio buttons

193
00:07:05,930 --> 00:07:08,930
showing, So that's the purpose, as a said,

194
00:07:08,930 --> 00:07:10,250
of the group here, to confirm that only

195
00:07:10,250 --> 00:07:12,590
one can be selected at a time. But if we

196
00:07:12,590 --> 00:07:16,070
change this signal to all, notice that's

197
00:07:16,070 --> 00:07:18,590
now a checkbox there, next to the two

198
00:07:18,590 --> 00:07:20,900
items, and that would give you the option

199
00:07:20,900 --> 00:07:23,510
of choosing one or two, or none. But in

200
00:07:23,510 --> 00:07:25,730
our case, we want single, which allows

201
00:07:25,730 --> 00:07:28,060
only one of them to be selected at a time.

202
00:07:28,060 --> 00:07:30,170
Alright, so the last thing we need to do

203
00:07:30,170 --> 00:07:32,450
here, is we need to have the Top 10

204
00:07:32,450 --> 00:07:35,180
option as the default. So make sure the

205
00:07:35,180 --> 00:07:36,920
Top 10 is selected, either here or in

206
00:07:36,920 --> 00:07:39,110
the Component Tree. Then we're going to

207
00:07:39,110 --> 00:07:40,520
use the double arrow icon to the top

208
00:07:40,520 --> 00:07:44,240
right, to expand the properties pane. Now the

209
00:07:44,240 --> 00:07:46,610
property one here, is checked. Now these

210
00:07:46,610 --> 00:07:48,800
strange squares with a dash through

211
00:07:48,800 --> 00:07:51,200
them are tri-state controls. They let you

212
00:07:51,200 --> 00:07:54,680
toggle from on, or true, to off, or false,

213
00:07:54,680 --> 00:07:56,900
to default, which is what the dash means.

214
00:07:56,900 --> 00:07:58,550
Now to see what that means, I'm

215
00:07:58,550 --> 00:07:59,990
going to toggle the checkable property.

216
00:07:59,990 --> 00:08:03,020
So when it's ticked, we get a checkbox next

217
00:08:03,020 --> 00:08:04,220
to the top 10, so I'm going to click on

218
00:08:04,220 --> 00:08:06,770
that now. You can see that we've got that.

219
00:08:06,770 --> 00:08:09,170
We click on it again, we get a radio

220
00:08:09,170 --> 00:08:11,450
button. Click on the dash again, we get

221
00:08:11,450 --> 00:08:13,910
the default, and back again, so the tick

222
00:08:13,910 --> 00:08:16,610
gives us the radio button. And notice there's

223
00:08:16,610 --> 00:08:18,230
a bit of a delay when I tick it between

224
00:08:18,230 --> 00:08:20,930
when it gets updated. By clicking it

225
00:08:20,930 --> 00:08:27,620
turns off and back to default again. But

226
00:08:27,620 --> 00:08:29,150
the one we would want would be checked,

227
00:08:29,150 --> 00:08:31,280
and we want that one because that's

228
00:08:31,280 --> 00:08:33,020
going to be the default for this

229
00:08:33,020 --> 00:08:34,520
application - so by default, it's going to

230
00:08:34,520 --> 00:08:36,860
used the Top 10 feeds. Alright, so before

231
00:08:36,860 --> 00:08:39,380
actually writing any code to respond to

232
00:08:39,380 --> 00:08:40,820
these new items, I'm going to reformat

233
00:08:40,820 --> 00:08:47,180
the text. Let's go ahead and do that - or

234
00:08:47,180 --> 00:08:49,880
reformat code, I should say, and go back

235
00:08:49,880 --> 00:08:52,910
to the designer. So what we'll do is,

236
00:08:52,910 --> 00:08:55,370
we'll add the code for these options in

237
00:08:55,370 --> 00:08:57,410
the next video. So although they won't be

238
00:08:57,410 --> 00:08:58,660
doing anything, we can actually

239
00:08:58,660 --> 00:08:59,829
run the app to make sure that those

240
00:08:59,829 --> 00:09:02,019
options appear in the menu. So let's

241
00:09:02,019 --> 00:09:04,720
actually do it - run the app - bearing in

242
00:09:04,720 --> 00:09:06,069
mind, of course, that nothing should work

243
00:09:06,069 --> 00:09:08,560
when we try to tap them, because we

244
00:09:08,560 --> 00:09:09,639
haven't written the code or added

245
00:09:09,639 --> 00:09:15,790
the code to do that yet. And you can see

246
00:09:15,790 --> 00:09:17,649
now, Top 10 is the default. And when I

247
00:09:17,649 --> 00:09:18,970
click on it, nothing happens, again

248
00:09:18,970 --> 00:09:21,339
because there's no code, but they're added to

249
00:09:21,339 --> 00:09:24,550
the menu and it's looking good. Alright,

250
00:09:24,550 --> 00:09:25,839
so I'll stop the video here and we'll

251
00:09:25,839 --> 00:09:27,790
add the code to get those working, in the

252
00:09:27,790 --> 00:09:30,209
next video.