1
00:00:01,750 --> 00:00:07,420
OK, in this video, I want to talk about radio buttons and radio buttons are round little buttons that

2
00:00:07,420 --> 00:00:09,040
you can use to select things.

3
00:00:09,220 --> 00:00:11,580
So think of a list of items, right?

4
00:00:11,620 --> 00:00:12,610
You got three things.

5
00:00:12,610 --> 00:00:17,050
And next to each one is a little round button and you can only pick one of them.

6
00:00:17,050 --> 00:00:20,220
You click on one and the round button sort of highlights.

7
00:00:20,230 --> 00:00:21,830
And that's the one you're picking, right?

8
00:00:21,850 --> 00:00:22,990
So that's a radio button.

9
00:00:23,140 --> 00:00:26,650
That's sort of a post to a checkbox, which is a square box.

10
00:00:26,890 --> 00:00:29,020
And with checkboxes you can click many.

11
00:00:29,020 --> 00:00:32,170
At the same time, you can select a bunch of different checkbox items.

12
00:00:32,350 --> 00:00:34,090
You can only select one radio button.

13
00:00:34,090 --> 00:00:36,040
So that's we're going to look at this video.

14
00:00:36,040 --> 00:00:39,150
So let's just go ahead and build one of these are a couple of these real quick.

15
00:00:39,520 --> 00:00:43,890
And whenever you click on a radio button, we need to be able to keep track of that somehow.

16
00:00:43,900 --> 00:00:45,160
So we need to create a variable.

17
00:00:45,340 --> 00:00:49,130
So I'm just going to call it V, call it anything you want V for variable because I'm lazy.

18
00:00:49,300 --> 00:00:53,890
Now, this is actually a strange kind of variable.

19
00:00:53,890 --> 00:00:56,440
This is I think we've talked about these in the past.

20
00:00:56,680 --> 00:00:59,680
We're going to call an Int VA and it's a function.

21
00:00:59,890 --> 00:01:03,040
And I think we talk to maybe about string vars in the past.

22
00:01:03,160 --> 00:01:04,720
And these are specific to counter.

23
00:01:04,720 --> 00:01:05,800
This is not a python thing.

24
00:01:05,830 --> 00:01:08,380
This is a counter thing with a regular variable.

25
00:01:08,380 --> 00:01:14,500
Once you set it, it's set right in a program like this, because once the program sort of compiles

26
00:01:14,500 --> 00:01:21,280
and runs, it is what it is with these special variables int bar and string bars in Kintore, they can

27
00:01:21,280 --> 00:01:25,110
update in real time based on things that happen in the program.

28
00:01:25,120 --> 00:01:30,520
So if I click on a thing, it will update that variable we can set and get those things.

29
00:01:30,710 --> 00:01:35,380
So it stands for Integer because we're going to be dealing with numbers here at the beginning and we'll

30
00:01:35,380 --> 00:01:38,050
change this Destructoid in a minute after I show you how to use this.

31
00:01:38,050 --> 00:01:40,750
But that's just all there is to that.

32
00:01:40,750 --> 00:01:42,610
So let's create a couple of radio buttons.

33
00:01:42,610 --> 00:01:44,650
Let's just call it our button.

34
00:01:46,070 --> 00:01:55,940
Underscore one and our button underscore two, and these are radio button widgets, and we want to put

35
00:01:55,940 --> 00:02:02,240
these in route and we want the text for this one to say, I don't know, one, and now we need to assign

36
00:02:02,240 --> 00:02:03,100
the variable to it.

37
00:02:03,110 --> 00:02:09,520
So let's go variable equals V and then we also need to set a value for this.

38
00:02:10,400 --> 00:02:12,920
And for now, let's just set this value to one.

39
00:02:14,860 --> 00:02:19,870
Someone to copy this whole thing and just slap it in for the second one and the second one, we want

40
00:02:19,870 --> 00:02:24,420
the text to be to the variable stays the same, but the value will change to two.

41
00:02:24,430 --> 00:02:26,230
So let's just save this and run it real quick.

42
00:02:26,410 --> 00:02:31,660
And I should note, I could add a new file called Radio Tappy just has the same basic starter code that

43
00:02:31,660 --> 00:02:32,290
we've been using.

44
00:02:32,720 --> 00:02:38,680
OK, so let's run this guy radio pie and I forgot to pack them onto the screen.

45
00:02:39,100 --> 00:02:40,640
So let's see.

46
00:02:40,670 --> 00:02:43,030
We can just pack them on at the end like this.

47
00:02:43,030 --> 00:02:46,990
I don't like to usually do this this way, but in this case it's fine.

48
00:02:47,330 --> 00:02:51,120
I usually, you know, put them on a separate line pack, but this will work.

49
00:02:51,520 --> 00:02:53,530
So let's go ahead and give this a go.

50
00:02:54,370 --> 00:02:59,560
And you see, we've got one, two, and if we click on them, the button pops around, you could see

51
00:02:59,560 --> 00:03:01,960
you can only select one of them and that's cool.

52
00:03:01,970 --> 00:03:03,520
So, OK, those are radio buttons.

53
00:03:03,530 --> 00:03:05,140
Now, how do we do something with them?

54
00:03:05,380 --> 00:03:07,960
Well, let's give that a try now.

55
00:03:07,960 --> 00:03:11,800
Let's create a button and let's call this my underscore button.

56
00:03:13,240 --> 00:03:21,010
And set that equal to a button and it's in route and we want the text to equal click me and we want

57
00:03:21,010 --> 00:03:24,670
the command to equal.

58
00:03:26,230 --> 00:03:27,640
I don't know, let's call it radio.

59
00:03:28,850 --> 00:03:35,990
And now we can go my underscore button, dot pack and let's give this a pat, why of 20, just to put

60
00:03:35,990 --> 00:03:37,010
it down a little bit there.

61
00:03:37,250 --> 00:03:40,160
OK, so now we need to create that function.

62
00:03:40,160 --> 00:03:41,570
So create.

63
00:03:42,640 --> 00:03:45,550
Radio button.

64
00:03:47,850 --> 00:03:53,390
Function, so we want to define a radio and it's a function and what do we want to do?

65
00:03:53,400 --> 00:03:57,570
Let's create a label, my label, and that's a label.

66
00:03:57,570 --> 00:03:58,910
We want to put it in root.

67
00:03:59,280 --> 00:04:06,660
We want the text to equal this variable, which is going to be v dot get.

68
00:04:06,690 --> 00:04:11,220
We want to get that variable as it's updated based on what button you clicked on.

69
00:04:11,220 --> 00:04:11,570
Right.

70
00:04:11,970 --> 00:04:14,520
And then we can my underscore labeled PIAC.

71
00:04:15,430 --> 00:04:21,840
And maybe we'll give this a pat why of 10 to OK, so let's save this and run it and see what we got.

72
00:04:24,280 --> 00:04:30,000
So now we have one or two and click me, so if we click one and then click click me, oh, nothing appears.

73
00:04:30,020 --> 00:04:33,510
Did I forget to pack a hard time packing route?

74
00:04:33,520 --> 00:04:34,830
M misspelled that.

75
00:04:34,840 --> 00:04:37,090
OK, so save this and run it.

76
00:04:38,640 --> 00:04:39,960
Always with the typos.

77
00:04:39,990 --> 00:04:45,690
OK, so we click one, click me, and boom one appears where you click to two appears, right.

78
00:04:46,110 --> 00:04:54,030
So this value one in two comes from this value right here, one and two.

79
00:04:54,730 --> 00:04:57,570
So we can now do things based on that.

80
00:04:57,580 --> 00:05:04,980
So if we wanted to, for instance, doing this statement, we can go if v dot get.

81
00:05:06,110 --> 00:05:08,570
Equals one then.

82
00:05:10,360 --> 00:05:11,680
Let's just grab this.

83
00:05:12,640 --> 00:05:15,730
And put it on the screen and put the text as.

84
00:05:18,570 --> 00:05:19,380
You collect.

85
00:05:20,690 --> 00:05:24,440
Radio button one.

86
00:05:26,890 --> 00:05:28,420
You clicked.

87
00:05:29,350 --> 00:05:31,060
Well, then we can go else.

88
00:05:32,100 --> 00:05:33,810
And let's just copy this whole thing.

89
00:05:35,030 --> 00:05:37,310
You click radio button to.

90
00:05:38,300 --> 00:05:44,300
Right, and we want to pack this onto the screen, so if we save this and now run it, we have one boom,

91
00:05:44,300 --> 00:05:48,170
you click radio button, one to boom, you click radio button two.

92
00:05:48,500 --> 00:05:50,140
So very, very cool and very easy.

93
00:05:50,150 --> 00:05:51,980
Now we can do the same things.

94
00:05:52,400 --> 00:05:54,670
I put them as values one and two.

95
00:05:54,680 --> 00:05:55,450
These are integers.

96
00:05:55,470 --> 00:05:57,040
We can do the same thing with strings if we want.

97
00:05:57,050 --> 00:06:04,460
We wanted to change this to a string of ah, and we could change this value to anything we want.

98
00:06:04,480 --> 00:06:04,690
Right.

99
00:06:04,950 --> 00:06:08,570
We could say pizza, but we call this one.

100
00:06:08,570 --> 00:06:12,650
So we'll stick with that convention and then to.

101
00:06:14,150 --> 00:06:16,320
And now nothing else changes.

102
00:06:16,340 --> 00:06:23,690
But up here, instead of this being one now, it's going to be one like this.

103
00:06:24,920 --> 00:06:29,180
If V is one, which is this, then this.

104
00:06:29,180 --> 00:06:30,260
Otherwise do that.

105
00:06:30,290 --> 00:06:33,800
So if we save this and run it and check this out, this is kind of weird.

106
00:06:33,800 --> 00:06:34,790
They're both checked.

107
00:06:34,820 --> 00:06:35,440
That's weird.

108
00:06:35,450 --> 00:06:36,320
We can't have that.

109
00:06:36,410 --> 00:06:41,390
But if we click one, then it well, it works, but we still can't have that starting out.

110
00:06:41,390 --> 00:06:48,080
So the way you get around that is to set which one you want to be highlighted first so we can come up

111
00:06:48,080 --> 00:06:48,320
here.

112
00:06:48,320 --> 00:06:52,850
And right when we define this v string var we can go v dot set.

113
00:06:53,540 --> 00:06:53,920
Right.

114
00:06:53,960 --> 00:06:55,880
And then define which one we want.

115
00:06:55,880 --> 00:06:58,700
We want this to be value one to be set with.

116
00:06:58,700 --> 00:07:00,140
Or maybe we want value too.

117
00:07:00,590 --> 00:07:08,390
So now if we save this and run it, two is already selected for us and we can go back and forth and

118
00:07:08,390 --> 00:07:09,140
that works.

119
00:07:10,170 --> 00:07:11,250
And so that's how that works.

120
00:07:11,280 --> 00:07:16,590
So those are radio buttons, fairly simple, but pretty cool, very functional, all kinds of things

121
00:07:16,590 --> 00:07:18,210
you can do with them in the next video.

122
00:07:18,220 --> 00:07:19,860
We'll go ahead and look at checkboxes.