1 00:00:10,999 --> 00:00:14,269 This presentation is delivered by the Stanford Center for Professional 2 00:00:14,269 --> 00:00:21,268 Development. 3 00:00:22,760 --> 00:00:25,090 The topic for today's class 4 00:00:25,089 --> 00:00:27,548 is our friend, the 5 00:00:27,548 --> 00:00:31,528 GUI. And you look at that, and you're like, GUI, what's that all about? This is 6 00:00:31,528 --> 00:00:34,960 what we refer to as a Graphical 7 00:00:34,960 --> 00:00:36,939 User 8 00:00:36,939 --> 00:00:38,479 Interface. 9 00:00:38,479 --> 00:00:41,769 But the way it's usually pronounced, graphical - 10 00:00:41,770 --> 00:00:44,070 graphica. It's sort of more avant-garde that way. 11 00:00:44,070 --> 00:00:47,560 At times, you'll hear people say this as a GUI. 12 00:00:47,560 --> 00:00:49,739 Like, oh, it's GUI. It's like taffy. 13 00:00:49,738 --> 00:00:52,759 They're just pronouncing the letters, 14 00:00:52,759 --> 00:00:56,059 GUI. The basic idea in a GUI, right - and actually, if you think about it so far, 15 00:00:56,060 --> 00:00:59,350 you've been doing some stuff that involved the graphical interface before 16 00:00:59,350 --> 00:01:02,309 where you might've had a program, and you did something that involved mouse clicks. 17 00:01:02,308 --> 00:01:05,769 So when the user clicked on the mouse or they moved the mouse, like in breakdown, 18 00:01:05,769 --> 00:01:09,009 you were essentially creating an interface for them that was graphical. 19 00:01:09,010 --> 00:01:11,850 But the notion of graphical interfaces that most people are familiar with when 20 00:01:11,849 --> 00:01:15,239 they talk about GUIs are these things that you interact with on the 21 00:01:15,239 --> 00:01:16,170 screen. 22 00:01:16,170 --> 00:01:19,299 Things like buttons that you may press 23 00:01:19,299 --> 00:01:22,909 or what we refer to as sliders, which are little things that look kind of 24 00:01:22,909 --> 00:01:27,200 like this, and you move this button back and forth along some scale 25 00:01:27,200 --> 00:01:30,150 from high to low. 26 00:01:30,150 --> 00:01:33,950 Check boxes, a lot of times, you see on forums on the web. 27 00:01:33,950 --> 00:01:37,200 It's just a little box. Sometimes you can put a check mark in it, or you can click it again, and it 28 00:01:37,200 --> 00:01:41,070 takes the check mark. Something referred to as radio buttons, and this 29 00:01:41,069 --> 00:01:44,659 should hopefully be familiar because this was on your midterm exam, 30 00:01:44,659 --> 00:01:47,929 except we had you do this very stylized version of it with the graphics 31 00:01:47,929 --> 00:01:51,179 library. Radio buttons are just basically where you have a list of choices with buttons, and 32 00:01:51,179 --> 00:01:54,399 when you pick one, it becomes selected. When you pick another one, this 33 00:01:54,399 --> 00:01:57,399 one becomes unselected, and the other one becomes selected. So if you want to give 34 00:01:57,399 --> 00:02:00,099 someone a short-list of options. There 35 00:02:00,099 --> 00:02:02,978 are some other things that come up. For example, something that's called a 36 00:02:02,978 --> 00:02:04,510 combo box. 37 00:02:04,510 --> 00:02:08,099 This also goes by other names. Sometimes people call it a drop-down box or 38 00:02:08,099 --> 00:02:11,299 a chooser. It's one of those things that kind of looks like this. 39 00:02:11,300 --> 00:02:14,860 Sometimes you see a little triangle next to it, and it might have some value in it like blue. 40 00:02:14,860 --> 00:02:18,040 You click on the triangle, and you kind of get this thing that drops down, and 41 00:02:18,039 --> 00:02:23,218 you get other choices like black or red or green or whatever the case may be. 42 00:02:23,218 --> 00:02:26,539 That's called a combo box or a drop-down box because when you click on it, this 43 00:02:26,539 --> 00:02:27,889 thing kind of drops down. 44 00:02:27,889 --> 00:02:31,849 Or just our friend the text box. A text box is just 45 00:02:31,849 --> 00:02:34,859 where there's some form you fill out. You can enter some text 46 00:02:34,860 --> 00:02:36,829 in it. Okay? 47 00:02:36,829 --> 00:02:40,868 These are, collectively, what we refer to as interactors because what they are, are 48 00:02:40,868 --> 00:02:44,699 things that allow the user to interact with your application and provide some 49 00:02:44,699 --> 00:02:48,489 information to your application interactively, by clicking on buttons, 50 00:02:48,489 --> 00:02:52,530 moving around sliders, setting check boxes or selecting from radio buttons 51 00:02:52,530 --> 00:02:54,590 or picking some option in the combo box. 52 00:02:54,590 --> 00:02:58,199 That's all they are, so we refer to them collectively as interactors. 53 00:02:58,199 --> 00:02:59,629 Now, the interesting thing is, 54 00:02:59,628 --> 00:03:03,239 how do we actually use these in the context of a JAVA program to allow 55 00:03:03,239 --> 00:03:05,838 someone to interact with our 56 00:03:05,838 --> 00:03:06,299 program 57 00:03:06,299 --> 00:03:09,239 more than they've done before? So far, people have been able to enter 58 00:03:09,239 --> 00:03:10,939 text in a console window, 59 00:03:10,939 --> 00:03:13,598 or they've been able to move a mouse or click. We want to be able to do something 60 00:03:13,598 --> 00:03:14,588 more. 61 00:03:14,588 --> 00:03:17,079 So in order to do something more, 62 00:03:17,079 --> 00:03:19,090 we need to have 63 00:03:19,090 --> 00:03:21,110 the use of some libraries. 64 00:03:21,110 --> 00:03:24,790 The libraries that you need to use for interactions, besides the standard 65 00:03:24,789 --> 00:03:28,498 ACM libraries that you use, like ACM.program.star, 66 00:03:28,498 --> 00:03:35,478 is you want to input two JAVA libraries. One is called JAVA.awt.event.star. 67 00:03:35,479 --> 00:03:39,790 These are all in the book, but you can write them down if you want. 68 00:03:39,789 --> 00:03:43,199 You also want to import something that looks a little funkier. 69 00:03:43,199 --> 00:03:48,328 It's JAVA X, so just keep that in mind. It's not JAVA. It's JAVAX.swing.star. 70 00:03:48,329 --> 00:03:49,269 71 00:03:49,269 --> 00:03:51,109 72 00:03:51,109 --> 00:03:54,949 And collectively, what these do is these help you keep track of events when the 73 00:03:54,949 --> 00:03:57,809 user's interacting with something. Before, when you had mouse events when 74 00:03:57,808 --> 00:03:59,169 the use clicked, 75 00:03:59,169 --> 00:04:03,079 and JAVA X swing is actually a package that's part of the standard JAVA 76 00:04:03,079 --> 00:04:03,549 libraries 77 00:04:03,549 --> 00:04:07,170 that has a bunch of stuff that allows you to create these graphical interactors 78 00:04:07,169 --> 00:04:09,929 very easily on the screen. 79 00:04:09,930 --> 00:04:11,889 So those are the libraries that you're going to have. 80 00:04:11,889 --> 00:04:15,808 So to give you and idea of what's actually going to be going on in your program, if we 81 00:04:15,808 --> 00:04:17,108 can go to the slides, 82 00:04:17,108 --> 00:04:21,459 let me show you how the program or the interactor hierarchy looks. So in the 83 00:04:21,459 --> 00:04:25,309 JAVA world - this is in JAVAX.swing. 84 00:04:25,309 --> 00:04:29,019 All interactors, in some sense, at the end of the day, are what we refer to as 85 00:04:29,019 --> 00:04:32,509 J-components. J-component is kind of the basic, generic thing 86 00:04:32,509 --> 00:04:35,990 that all interactors are. It's kind of like when you think about the graphics library. All the 87 00:04:35,990 --> 00:04:40,228 elements that are in the graphics library like a G-oval or a G-rect or a G-label, 88 00:04:40,228 --> 00:04:44,909 are all G-objects at the end of the day. Same kind of way to think about it with 89 00:04:44,910 --> 00:04:47,830 interactors. At the end of the day, all the interactors are J-components. Notice 90 00:04:47,829 --> 00:04:50,038 this is a J instead of a G because 91 00:04:50,038 --> 00:04:54,219 we refer to these as - they're really JAVA objects, in some sense, so they all 92 00:04:54,220 --> 00:04:56,669 start with a J. That's just a naming scheme in JAVA. 93 00:04:56,668 --> 00:05:00,038 Then there's various kinds of things we can have like a J-button 94 00:05:00,038 --> 00:05:03,370 is a J-component. It's just going be a particular button that we're going to 95 00:05:03,370 --> 00:05:06,090 display on the screen. There's different kind of buttons. There's your standard 96 00:05:06,089 --> 00:05:06,560 button. 97 00:05:06,560 --> 00:05:10,079 There's other buttons like a toggle button, which we're not going to talk about because 98 00:05:10,079 --> 00:05:12,319 no one ever uses toggle buttons in 99 00:05:12,319 --> 00:05:13,459 their raw form. 100 00:05:13,459 --> 00:05:17,649 But, for example, a check box and a radio button, if you think about them, 101 00:05:17,649 --> 00:05:21,370 in some sense, are ways of doing some kind of selection like a button. A button, you 102 00:05:21,370 --> 00:05:22,788 just click one thing. 103 00:05:22,788 --> 00:05:27,180 A check box, you set some box to either be checked or unchecked, 104 00:05:27,180 --> 00:05:31,150 and a radio button, you pick on of many options. So in some sense, it's just 105 00:05:31,149 --> 00:05:34,019 how much flexibility you have with them, but at the end of the day, you're doing 106 00:05:34,019 --> 00:05:37,359 some interaction with something that involves clicking somewhere to turn something on 107 00:05:37,360 --> 00:05:39,000 or off, basically. 108 00:05:39,000 --> 00:05:42,228 There's a slider, which we talked about, a little slider thing that 109 00:05:42,228 --> 00:05:46,149 basically is some spectrum that you can move some controller on. 110 00:05:46,149 --> 00:05:49,698 There's something called a J-label, not to be confused with a G-label, but 111 00:05:49,699 --> 00:05:50,990 a J-label is 112 00:05:50,990 --> 00:05:53,610 very similar. It's just a piece of text that you can 113 00:05:53,610 --> 00:05:56,670 put next to some of these other components to label what it is. It doesn't actually 114 00:05:56,670 --> 00:05:59,549 do anything other than just sitting there, being a pretty label. 115 00:05:59,548 --> 00:06:02,998 Combo box that we talked about, and a text field, which is basically like a 116 00:06:02,999 --> 00:06:03,819 text box. 117 00:06:03,819 --> 00:06:06,990 Now, there's a few other things that are in here that kind of come up like entfield 118 00:06:06,990 --> 00:06:09,329 and doublefield. We won't be talking about those. 119 00:06:09,329 --> 00:06:12,659 Most of the things in here, we're actually going to cover today, and it's just important to 120 00:06:12,660 --> 00:06:15,729 see how they're related. They're all components at the end of the day, much 121 00:06:15,728 --> 00:06:19,319 the same way that when we did graphics, all the individual graphical kinds of 122 00:06:19,319 --> 00:06:20,110 objects were 123 00:06:20,110 --> 00:06:22,020 G-objects. Now, 124 00:06:22,019 --> 00:06:24,788 with these interactors, how do we actually put them on the screen? We 125 00:06:24,788 --> 00:06:28,029 don't just put them anywhere on the screen. They actually have a special way that they get laid 126 00:06:28,029 --> 00:06:29,668 out on the screen. 127 00:06:29,668 --> 00:06:31,909 It turns out, now, again, you're old enough 128 00:06:31,910 --> 00:06:34,820 to find out something that we sort of didn't tell you about this whole time, 129 00:06:34,819 --> 00:06:38,579 even though it existed this whole time. Now it's time for you to know about it. 130 00:06:38,579 --> 00:06:42,930 Your program window, whether it's a console program or a graphics program, 131 00:06:42,930 --> 00:06:45,728 actually has five regions on it, okay? 132 00:06:45,728 --> 00:06:48,399 So far, you never used any of the 133 00:06:48,399 --> 00:06:51,788 four regions around the side. You always just used the center region, but there was actually 134 00:06:51,788 --> 00:06:54,719 five regions labeled, sort of by the points of the compass, 135 00:06:54,720 --> 00:06:57,129 north, south, east, west and then the center. 136 00:06:57,129 --> 00:06:58,869 So the way this actually works 137 00:06:58,869 --> 00:07:03,520 is the center is where all the action was taking place in your programs before. 138 00:07:03,519 --> 00:07:05,879 So when you had a console program, 139 00:07:05,879 --> 00:07:09,949 what you really got was a text console that took up the center region, which was 140 00:07:09,949 --> 00:07:11,959 basically the whole screen at that time. 141 00:07:11,959 --> 00:07:14,870 Anything you wrote out, it got written into the console. 142 00:07:14,870 --> 00:07:18,379 On the flip side, if you had a graphics program, what a graphic's program did - 143 00:07:18,379 --> 00:07:22,259 remember, we talked about a G-canvas. What it did was it put a G-canvas in 144 00:07:22,259 --> 00:07:25,479 the center and sort of made it big enough to take up the whole screen. 145 00:07:25,478 --> 00:07:28,199 So that's what was going on this whole time. You might say, but Maron, what 146 00:07:28,199 --> 00:07:30,338 happened to these other regions around the side? 147 00:07:30,338 --> 00:07:33,478 I didn't see any space getting taken up by the regions. 148 00:07:33,478 --> 00:07:37,158 It turned out that the other regions are only visible and only take 149 00:07:37,158 --> 00:07:38,529 up any space at all 150 00:07:38,529 --> 00:07:42,709 if you add interactors to them, which means if they had buttons on them or 151 00:07:42,709 --> 00:07:44,769 sliders or combo boxes or whatever, 152 00:07:44,769 --> 00:07:47,329 when you put them on, when you're going to put those interactors on, you're going to 153 00:07:47,329 --> 00:07:50,568 say which one of these regions, north, south, east, west or center. Most of the 154 00:07:50,569 --> 00:07:53,780 time, you won't put them in center because the action will still be going on in the center. When 155 00:07:53,779 --> 00:07:56,158 you put them in one of the regions around the sides, 156 00:07:56,158 --> 00:08:00,048 it says, hey, I have some interactor in the southern region. I need to now show 157 00:08:00,048 --> 00:08:03,908 the southern region. It will actually take up space on your screen. 158 00:08:03,908 --> 00:08:06,110 Any questions about that? 159 00:08:06,110 --> 00:08:08,968 I'll show you and example of this in just a second. 160 00:08:08,968 --> 00:08:13,238 So that's the basic idea of window regions and what's actually going on with them. 161 00:08:13,238 --> 00:08:17,489 The one thing that is important to keep in mind, just in terms of name, 162 00:08:17,490 --> 00:08:21,360 is when we place interactors in one of these regions, we refer to that 163 00:08:21,360 --> 00:08:23,119 region as a control bar. 164 00:08:23,119 --> 00:08:26,099 So if we put some buttons, let's say, in the southern region, what you'll 165 00:08:26,098 --> 00:08:29,238 see when your program runs is you'll actually get sort of this gray bar down at the 166 00:08:29,238 --> 00:08:31,288 bottom, and your buttons will show up on it. 167 00:08:31,288 --> 00:08:34,348 We refer to that gray bar with the buttons on it as just a control bar. 168 00:08:34,349 --> 00:08:37,770 If we want to be specific, the southern control bar. 169 00:08:37,769 --> 00:08:40,110 That's just the name for it. 170 00:08:40,110 --> 00:08:44,379 With that said, let's actually create our first interactor. It's time to actually 171 00:08:44,379 --> 00:08:47,350 make one of these things and put it to use and see what it all looks like. 172 00:08:47,350 --> 00:08:50,589 Then we'll build something super cool and complicated with them. But let's just start 173 00:08:50,589 --> 00:08:53,110 with the most basic one right now. A 174 00:08:53,110 --> 00:08:54,840 little side point. 175 00:08:54,840 --> 00:08:58,870 Computer science career panel next week. Go there, Wednesday, November 14th in 176 00:08:58,870 --> 00:08:59,970 Packard room 101. 177 00:08:59,970 --> 00:09:02,989 It will show you a wide spectrum of things that you can do in computer science 178 00:09:02,989 --> 00:09:04,079 at 5:30. 179 00:09:04,078 --> 00:09:06,738 There will be people there who are working at start-up companies, people there who went 180 00:09:06,739 --> 00:09:08,649 into academia, people there who are, 181 00:09:08,649 --> 00:09:12,470 for example, doing product management or marketing who all are graduates of 182 00:09:12,470 --> 00:09:14,189 Stanford's computer science program. 183 00:09:14,188 --> 00:09:17,179 It just shows you the wide breadth of stuff that's going on. So 184 00:09:17,179 --> 00:09:20,849 if you have any inkling at all that maybe computer science is for you, 185 00:09:20,850 --> 00:09:22,090 check that out. 186 00:09:22,090 --> 00:09:25,670 That's just a little side point in the middle of lecture. So 187 00:09:25,669 --> 00:09:29,069 let's create our first interactor. The button. 188 00:09:29,070 --> 00:09:31,520 Okay. The way we create this is we're gonna need to have a constructor. 189 00:09:31,519 --> 00:09:34,730 We're going to need to create something called a J-button. 190 00:09:34,730 --> 00:09:39,129 So the type is J-button. We give it a name. I'll just call it but 191 00:09:39,129 --> 00:09:41,009 for our button because we have one. 192 00:09:41,009 --> 00:09:44,168 So what I'm going to do is I'm going to create a new one of these things in 193 00:09:44,168 --> 00:09:48,179 the standard style I use for creating something new. It's a new J-button, 194 00:09:48,179 --> 00:09:52,019 and what I give the button when I create it is I give it a single parameter, which is the 195 00:09:52,019 --> 00:09:55,470 name or the string which I want displayed on that button. 196 00:09:55,470 --> 00:09:59,690 So let's say I want this button to have the word, hi, on it. Okay? 197 00:09:59,690 --> 00:10:02,750 What that does, it creates a button object that 198 00:10:02,750 --> 00:10:05,090 the button is labeled with the word hi. 199 00:10:05,090 --> 00:10:08,070 This button does not yet show up on the screen. It doesn't yet do anything. All I've done 200 00:10:08,070 --> 00:10:11,310 is create this button object. Now, 201 00:10:11,309 --> 00:10:14,869 the next thing I want to think about when I want to do anything involving these 202 00:10:14,870 --> 00:10:17,429 interactors, right? After I create one of these, I'm going to put it somewhere. 203 00:10:17,429 --> 00:10:19,979 Before I put it somewhere, one thing I'm going to keep in mind is 204 00:10:19,980 --> 00:10:23,039 I need to listen for these interactors. 205 00:10:23,039 --> 00:10:26,539 So before, when we talked about the mouse, we added mouse listeners. We talked 206 00:10:26,539 --> 00:10:29,860 about keyboard events, we talked about adding keyboards listeners. 207 00:10:29,860 --> 00:10:33,600 If I want to do something with interactors, I need to add what's called an 208 00:10:33,600 --> 00:10:34,509 action listener. 209 00:10:34,509 --> 00:10:36,629 So somewhere in my program, 210 00:10:36,629 --> 00:10:41,200 say in my innate function or my innate method or my run method, 211 00:10:41,200 --> 00:10:44,750 what I'm going to do is say, add 212 00:10:44,750 --> 00:10:51,750 action listeners. Much in the same vein I would say, add mouse listeners. As a 213 00:10:51,940 --> 00:10:54,880 matter of fact, I could have both. Most of the times, in programs that are interactive, 214 00:10:54,879 --> 00:10:56,529 I probably will have both. 215 00:10:56,529 --> 00:10:59,208 But add action listeners, when I add that, it says, 216 00:10:59,208 --> 00:11:02,399 oh, yoo-hoo. I'm going to be listening for things happening, like when someone 217 00:11:02,399 --> 00:11:03,970 clicks this button. 218 00:11:03,970 --> 00:11:07,370 So I'll show you in just a second, there's a corresponding function that 219 00:11:07,370 --> 00:11:10,240 gets called - or method that gets called when some 220 00:11:10,240 --> 00:11:12,470 action offense happens, and that's the idea. 221 00:11:12,470 --> 00:11:16,509 When you had a mouse, and your mouse moved or you had a mouse click, you got mouse 222 00:11:16,509 --> 00:11:20,079 events, and so you created methods that were called automatically for you when 223 00:11:20,078 --> 00:11:21,669 those mouse events happened. Like, 224 00:11:21,669 --> 00:11:24,819 when the mouse got clicked, one of your methods might've gotten called. 225 00:11:24,820 --> 00:11:27,480 Here it's going to be a special method that's gonna get called every 226 00:11:27,480 --> 00:11:29,730 time some particular action happens, 227 00:11:29,730 --> 00:11:33,159 and I'll show you that in just a second. So 228 00:11:33,159 --> 00:11:35,089 we need to add action listeners 229 00:11:35,090 --> 00:11:37,710 at the very beginning of our program, and then somewhere, we're going to 230 00:11:37,710 --> 00:11:41,569 create a button. Then we need to add the button to one of our five regions. 231 00:11:41,568 --> 00:11:42,990 So the way we do this 232 00:11:42,990 --> 00:11:45,080 is we use add, 233 00:11:45,080 --> 00:11:47,689 and we're going to use a version of add with two parameters. 234 00:11:47,688 --> 00:11:51,139 What we're going to add is the object, so we specify the name of the object. This 235 00:11:51,139 --> 00:11:54,419 should look real similar to you from graphics when you added, say, a G-rect to 236 00:11:54,419 --> 00:11:56,319 the window. But 237 00:11:56,320 --> 00:11:59,450 because these are interactors, we don't just add them to the window. We add them to a 238 00:11:59,450 --> 00:12:00,819 particular region. 239 00:12:00,818 --> 00:12:05,318 So we might say South, so capital north, south, east and west are all 240 00:12:05,318 --> 00:12:07,149 predefined constants for you 241 00:12:07,149 --> 00:12:10,870 that let you know what region you're referring to. So add a button to south says, 242 00:12:10,870 --> 00:12:14,220 put this button in the southern region. Now that there's an interactor on 243 00:12:14,220 --> 00:12:17,860 the southern region, it will automatically show up. 244 00:12:17,860 --> 00:12:24,149 So any questions about the basics? [Inaudible]. 245 00:12:24,149 --> 00:12:27,720 Ah, good question. How does it know where in the region they show up? Well, what it 246 00:12:27,720 --> 00:12:30,519 does is it will automatically manage the layout for you. 247 00:12:30,519 --> 00:12:34,568 So what it does is any interactors that are in a region who up centered in 248 00:12:34,568 --> 00:12:37,848 that region, and they show up in the order in which they were added to the 249 00:12:37,849 --> 00:12:40,989 region. So if you add three things to the region, one, two and three, they will show 250 00:12:40,989 --> 00:12:42,709 up in the order, one, two and three, 251 00:12:42,708 --> 00:12:46,000 and they will be centered, with respect to the entire bar. 252 00:12:46,000 --> 00:12:49,049 I'll show you what that looks like in just a second. Let me do a complete program. 253 00:12:49,049 --> 00:12:52,969 Let's write a complete program together on the board, and then we'll 254 00:12:52,970 --> 00:12:57,100 see what that code actually does when we run it. So we're going to have some innate method. 255 00:12:57,100 --> 00:13:00,879 A lot of times, in interactive programs, rather than having a run to begin 256 00:13:00,879 --> 00:13:03,809 execution, you just have an innate [inaudible]. I'm going to set things up, 257 00:13:03,809 --> 00:13:06,739 and then I'm going to wait for interactive events to happen. When they do, 258 00:13:06,740 --> 00:13:08,519 other methods of mine will get called. 259 00:13:08,519 --> 00:13:11,480 So I'm not actually running something. I'm just kind of initializing the 260 00:13:11,480 --> 00:13:14,500 world. So oftentimes, you'll see these programs written with an innate 261 00:13:14,500 --> 00:13:17,169 method rather than a run method. That's just the way they are. 262 00:13:17,169 --> 00:13:20,389 So what I'm going to do, is I'm just going to do a shorthand. I'm going to do the 263 00:13:20,389 --> 00:13:24,019 construction and the add all in one line so you see that. 264 00:13:24,019 --> 00:13:25,609 Add new 265 00:13:25,609 --> 00:13:27,750 J-button 266 00:13:27,750 --> 00:13:30,169 with the label hi 267 00:13:30,169 --> 00:13:35,740 to the south region. Okay? So all I've done is I don't have a variable to keep track of this 268 00:13:35,740 --> 00:13:38,690 J-button anymore. I just kind of create it and add it, just like you may have done with some 269 00:13:38,690 --> 00:13:41,730 graphical objects when you created them and added them immediately to the canvas. 270 00:13:41,730 --> 00:13:44,259 We're doing the same thing here because we don't need some method 271 00:13:44,259 --> 00:13:48,429 or variable to keep referring to this button. That button, when it's 272 00:13:48,429 --> 00:13:49,669 pressed, is going to 273 00:13:49,669 --> 00:13:53,458 invoke some other method for us automatically, as long as we 274 00:13:53,458 --> 00:13:55,049 add our action listeners. 275 00:13:55,049 --> 00:13:58,579 So then here, we would say Add 276 00:13:58,580 --> 00:14:03,670 action listeners. So what we generally do in our innate method is we create 277 00:14:03,669 --> 00:14:07,750 all the interactors that we want to create, and before we're done, we say, add 278 00:14:07,750 --> 00:14:09,980 action listeners, to say, okay. I created everything. 279 00:14:09,980 --> 00:14:13,940 Now go ahead and start listening for events on them. Now, 280 00:14:13,940 --> 00:14:17,470 when some action actually gets performed, and you've added action listener, what 281 00:14:17,470 --> 00:14:21,200 happens is a method gets called for you called action perform. 282 00:14:21,200 --> 00:14:25,610 So this method is public void, and you should always declare it as being public 283 00:14:25,610 --> 00:14:31,570 void, and it's called action perform. Lower-case a, upper-case P. Action 284 00:14:31,570 --> 00:14:32,420 perform. 285 00:14:32,419 --> 00:14:36,589 What this gets is a particular parameter, and the parameter it gets is 286 00:14:36,590 --> 00:14:41,790 something called an action event, and I'll just call that 287 00:14:41,789 --> 00:14:44,740 E. That's the parameter that it gets automatically. Just like when you had 288 00:14:44,740 --> 00:14:46,490 mouse events, when you had your 289 00:14:46,490 --> 00:14:50,470 mouse clicked function, for example. Exactly the same idea going on here, except this gets 290 00:14:50,470 --> 00:14:50,930 called 291 00:14:50,929 --> 00:14:54,769 when, for example, someone clicks one of your buttons. Now, 292 00:14:54,769 --> 00:15:00,370 how do you figure out what actually happened when this 293 00:15:00,370 --> 00:15:02,669 interaction was actually performed? 294 00:15:02,669 --> 00:15:05,009 Action performed, and important thing to keep in mind, 295 00:15:05,009 --> 00:15:08,830 only gets called when buttons get clicked. So later on, when we talk about 296 00:15:08,830 --> 00:15:11,860 some other things, I'll show you, when someone clicks a check box or whatever, 297 00:15:11,860 --> 00:15:13,100 how we deal with that. 298 00:15:13,100 --> 00:15:16,540 But the important thing to think about is action performed only called 299 00:15:16,539 --> 00:15:19,029 buttons get clicked. So 300 00:15:19,029 --> 00:15:22,079 right now, we only have one button, so you might just say, hey, if I click that one button, 301 00:15:22,080 --> 00:15:25,150 this gets called, I know it's that one button. Life is good, right? 302 00:15:25,149 --> 00:15:28,659 Well, sort of. You still want to keep track of which button was actually called 303 00:15:28,659 --> 00:15:31,759 because you might have an application that has multiple buttons in it. So how do you do 304 00:15:31,759 --> 00:15:32,799 that? 305 00:15:32,799 --> 00:15:37,478 What you do is you're going to have a string that we'll call CMD for command, 306 00:15:37,479 --> 00:15:42,709 which is going to be, essentially, the command that caused this action to be 307 00:15:42,708 --> 00:15:44,118 performed to be called. 308 00:15:44,119 --> 00:15:45,300 What does that mean? 309 00:15:45,299 --> 00:15:48,079 What it means is this action event, E, 310 00:15:48,080 --> 00:15:51,350 we're going to pass it a method called get 311 00:15:51,350 --> 00:15:54,129 action command. 312 00:15:54,129 --> 00:15:59,778 Get action command returns to you a string that we're just going to assign 313 00:15:59,778 --> 00:16:03,649 to this variable command. So we say, hey, an action was performed. Get 314 00:16:03,649 --> 00:16:07,820 for me some string that refers to what action was performed. It says, okay. 315 00:16:07,820 --> 00:16:12,110 The way I keep track of this command, what is this referring to, this will have 316 00:16:12,110 --> 00:16:15,609 the same name as the name of whatever button was pressed. So 317 00:16:15,609 --> 00:16:19,649 if a button has the label Hi on the screen, it shows up with the label Hi, 318 00:16:19,649 --> 00:16:21,299 ad if it gets pressed, 319 00:16:21,299 --> 00:16:25,169 get action will return Hi. It will essentially return whatever label was 320 00:16:25,169 --> 00:16:27,348 on the button that go pressed. 321 00:16:27,349 --> 00:16:29,980 So I can check to see if 322 00:16:29,980 --> 00:16:31,210 command 323 00:16:31,210 --> 00:16:37,310 was equals Hi because I know that's my button, Hi, because I coded Hi up there. I 324 00:16:37,309 --> 00:16:42,429 could've actually made this some constant, a string constant, if I wanted to keep them 325 00:16:42,429 --> 00:16:45,889 in mind. If it was equal, then maybe I want to do something, like I want to 326 00:16:45,889 --> 00:16:48,049 print some lines of the screen. 327 00:16:48,049 --> 00:16:50,870 Printlin, and so this printlin is still going to print to the center region because 328 00:16:50,870 --> 00:16:53,548 that's still where the console is in a console program, 329 00:16:53,548 --> 00:16:59,689 and I might write out hello when someone actually clicks the Hi button. 330 00:16:59,690 --> 00:17:02,760 So there is no run method here, right? I just set up the state of the world 331 00:17:02,759 --> 00:17:06,160 with a button. I start listening for what's going on with that button, and any time 332 00:17:06,160 --> 00:17:08,950 that button gets click and action perform gets called, 333 00:17:08,950 --> 00:17:13,500 I ask this event that gets passed in, hey, what command was actually issued? I 334 00:17:13,500 --> 00:17:17,288 get that as a string, and then I can check to see what button it actually was. 335 00:17:17,288 --> 00:17:20,329 So let me show you a couple examples of this 336 00:17:20,329 --> 00:17:24,569 in terms of what that actually looks like when it's run. Okay. So we can quit 337 00:17:24,569 --> 00:17:28,259 out of here. 338 00:17:28,259 --> 00:17:29,579 Oh, don't save. 339 00:17:29,579 --> 00:17:32,220 It's never fun to save. All right. 340 00:17:32,220 --> 00:17:35,470 So here's a program, which is basically the program we just wrote. I 341 00:17:35,470 --> 00:17:36,980 called the first button. 342 00:17:36,980 --> 00:17:41,000 It extends the console program. It includes the libraries that I care about in 343 00:17:41,000 --> 00:17:44,710 addition to the ACM library. Other than the fact I set the font 344 00:17:44,710 --> 00:17:48,769 to be larger, I just add this new button, Hi, to the southern region, add action 345 00:17:48,769 --> 00:17:49,288 listeners, 346 00:17:49,288 --> 00:17:52,970 and I have this event here, or I have this method, action perform, which is 347 00:17:52,970 --> 00:17:55,650 basically exactly the code I just wrote up on the board. 348 00:17:55,650 --> 00:17:58,659 So when I run this, 349 00:17:58,659 --> 00:18:00,780 what I actually get is - here's first button. 350 00:18:00,779 --> 00:18:04,529 I get the southern region, which now shows up as a control bar. 351 00:18:04,529 --> 00:18:07,970 It has my single button, Hi, on it, and nothing's going on in my program, right? 352 00:18:07,970 --> 00:18:10,529 It just creates the state of the world. It puts the button. It says, now I'm 353 00:18:10,529 --> 00:18:11,309 listening. 354 00:18:11,309 --> 00:18:14,450 Now, every time I click on the Hi button, it 355 00:18:14,450 --> 00:18:16,610 executes 356 00:18:16,609 --> 00:18:20,479 the command. After it goes off the screen, it keeps scrolling. You're like, how 357 00:18:20,480 --> 00:18:23,779 small can I make this roll button - the scroll bar over here on the side. 358 00:18:23,779 --> 00:18:27,410 It's the things you do at 4:00 a.m. when you get your programs working that 359 00:18:27,410 --> 00:18:28,880 just make it that much fun. 360 00:18:28,880 --> 00:18:32,150 So let's look at a slightly more complicated program. Same idea, but 361 00:18:32,150 --> 00:18:34,420 something more complicated. 362 00:18:34,420 --> 00:18:36,180 This is called Button Press, 363 00:18:36,180 --> 00:18:40,210 and all Button Press is doing is it's creating three buttons instead of one 364 00:18:40,210 --> 00:18:42,480 button, ad it's adding them in different places. 365 00:18:42,480 --> 00:18:46,589 So it's creating a button that says hello in the northern region, creating a 366 00:18:46,589 --> 00:18:50,480 button that says CS106A in the southern region, and creating another 367 00:18:50,480 --> 00:18:54,669 button that's called Basket Weaving 101, also in the southern region. 368 00:18:54,669 --> 00:18:58,169 After it creates all those buttons, it adds them, right. You always remember to 369 00:18:58,169 --> 00:18:59,299 add the buttons. 370 00:18:59,298 --> 00:19:02,150 It adds action listeners to listen for those buttons. 371 00:19:02,150 --> 00:19:04,680 So what happens if a button gets clicked? 372 00:19:04,680 --> 00:19:08,920 Action perform is going to get called. Here, I get the action command, 373 00:19:08,920 --> 00:19:12,820 and depending on what the action command was, I know which button was clicked. So if it 374 00:19:12,819 --> 00:19:16,450 equals hello, I know the hello button was clicked, and I write out hello there. 375 00:19:16,450 --> 00:19:20,038 If it equals CS106A, I write out CS106A rocks, 376 00:19:20,038 --> 00:19:23,500 and if it's basket weaving 101, I write out not so much. 377 00:19:23,500 --> 00:19:25,250 So here I run 378 00:19:25,250 --> 00:19:27,180 my Button Press program, 379 00:19:27,180 --> 00:19:30,700 and notice now, the northern and southern regions now show up. So the regions 380 00:19:30,700 --> 00:19:33,289 automatically show up any time there's an interactor there. You don't have to tell the 381 00:19:33,289 --> 00:19:36,839 region to show up. It knows to show up if you put an interactor there. If I click hello, 382 00:19:36,839 --> 00:19:38,250 I get hello there. 383 00:19:38,250 --> 00:19:39,690 106A rocks, 384 00:19:39,690 --> 00:19:42,740 and basket weaving 101, not so much. You're just 385 00:19:42,740 --> 00:19:46,980 like, oh, click a little here, click a little there. A little under the arm. Yeah. 386 00:19:46,980 --> 00:19:48,249 There you go. It's ten 387 00:19:48,249 --> 00:19:52,650 lines of code, and I can put buttons all over and just click them wherever I want. 388 00:19:52,650 --> 00:19:55,390 So buttons are kind of fun, 389 00:19:55,390 --> 00:19:58,299 but we can do some cooler things. Let's actually create 390 00:19:58,298 --> 00:20:00,119 and interactive program 391 00:20:00,119 --> 00:20:03,979 and bring back - remember Click for Face? Do you remember that from a long time ago where we 392 00:20:03,980 --> 00:20:07,128 click the button, and we got a face on the screen? Does anyone remember? If you remember that, 393 00:20:07,128 --> 00:20:08,379 raise your hand. 394 00:20:08,380 --> 00:20:09,890 Yeah, click for face. 395 00:20:09,890 --> 00:20:12,840 This is supped up click for face. 396 00:20:12,839 --> 00:20:16,269 The basic idea is we're going to allow someone to click for faces on the 397 00:20:16,269 --> 00:20:16,969 screen, 398 00:20:16,969 --> 00:20:20,629 but they can pick the size of their face using radio buttons, either small, medium 399 00:20:20,628 --> 00:20:25,228 or large. They can pick the color of the face, black, blue, green or red. We'll start 400 00:20:25,229 --> 00:20:29,028 with black, and they can choose to either show the front of the face or the back 401 00:20:29,028 --> 00:20:31,009 of the face by saying, 402 00:20:31,009 --> 00:20:32,079 hey show the front 403 00:20:32,079 --> 00:20:35,089 or don't show the front. So let me show you an example of this. So I'm going to 404 00:20:35,089 --> 00:20:36,799 draw a medium-sized face, 405 00:20:36,799 --> 00:20:39,919 the front of the face, in black. So I click here. 406 00:20:39,920 --> 00:20:45,360 Oh, front of the face, medium-sized. Front of the face, medium size. Large face. 407 00:20:45,359 --> 00:20:46,529 Large face. 408 00:20:46,529 --> 00:20:48,069 Small face. 409 00:20:48,069 --> 00:20:50,149 Small face. 410 00:20:50,150 --> 00:20:51,830 Red face, 411 00:20:51,829 --> 00:20:53,730 red 412 00:20:53,730 --> 00:20:55,069 face. You're like, 413 00:20:55,069 --> 00:21:01,669 okay, that's fun, but what does the back of the face look like? It's the back of 414 00:21:01,670 --> 00:21:03,850 the head. The guy's bald. There's nothing. 415 00:21:03,849 --> 00:21:04,759 It's an oval, 416 00:21:04,759 --> 00:21:07,299 but that's the thing we want to keep track of, right? Do we 417 00:21:07,299 --> 00:21:10,750 draw a face or draw an oval, depending on if front is clicked or not. 418 00:21:10,750 --> 00:21:14,589 So how do we get all these buttons and these check boxes, 419 00:21:14,589 --> 00:21:18,569 these radio buttons, this drop-down box or combo box. 420 00:21:18,569 --> 00:21:21,519 And then we have clear, which is just a button that 421 00:21:21,519 --> 00:21:24,808 erases everything. Then we're like, yay, large face. 422 00:21:24,808 --> 00:21:25,648 And we just 423 00:21:25,648 --> 00:21:26,729 start all over again. 424 00:21:26,730 --> 00:21:30,730 So how can we create this whole program in the span of one lecture? So 425 00:21:30,730 --> 00:21:33,819 here we go. We're going to go do it. All right? 426 00:21:33,819 --> 00:21:37,189 So first thing we're going to do, it's 427 00:21:37,190 --> 00:21:40,620 speed. It's sort of like name that tune, but it's sort of name that interactor. It's 428 00:21:40,619 --> 00:21:43,109 like, how many interactors can you go through 429 00:21:43,109 --> 00:21:44,158 in half an hour? 430 00:21:44,159 --> 00:21:47,369 It turns out they're actually not that complicated, so we can go through a 431 00:21:47,368 --> 00:21:49,079 whole bunch of them. 432 00:21:49,079 --> 00:21:51,048 So you already saw a button. 433 00:21:51,048 --> 00:21:53,829 What are some other things that we want to do? Check box, right? 434 00:21:53,829 --> 00:21:57,629 So check box, you saw that check box, that's allowed us to either show the front of 435 00:21:57,630 --> 00:22:01,000 the face if it was checked or the back of the face if it was not checked. 436 00:22:01,000 --> 00:22:02,759 How do we create a check box? 437 00:22:02,759 --> 00:22:08,200 Well, the type here is called J-check box. For a J-check 438 00:22:08,200 --> 00:22:08,930 box, 439 00:22:08,930 --> 00:22:12,490 what I need is a variable of that type. I'll call it check. 440 00:22:12,490 --> 00:22:18,319 The way I create this is I say new J-check box. The parameter I give 441 00:22:18,319 --> 00:22:24,149 the check box is the name that I want displayed next to the check box like 442 00:22:24,150 --> 00:22:24,940 front, to 443 00:22:24,940 --> 00:22:27,900 indicate is that the front of the face. So it will right out front and put a little box 444 00:22:27,900 --> 00:22:29,300 after it. 445 00:22:29,299 --> 00:22:32,869 Now other things I can do with the check box, which are kind of cool, I can set its initial 446 00:22:32,869 --> 00:22:35,119 state, to either be checked or unchecked. 447 00:22:35,119 --> 00:22:38,979 So what I can do is I can say, check dot 448 00:22:38,980 --> 00:22:44,789 set selected and give it either a true or false, a [inaudible] to say do you start off 449 00:22:44,789 --> 00:22:47,940 checked or not checked. So if set select it to be true, it starts of checked. 450 00:22:47,940 --> 00:22:51,370 If I set it to be false, it starts off 451 00:22:51,369 --> 00:22:52,219 unchecked. Then 452 00:22:52,220 --> 00:22:56,319 when I create this thing and set its initial state, I need to add it to some region 453 00:22:56,319 --> 00:23:03,319 to show up on a control bar. So I can say, hey, add check to the south region. 454 00:23:03,369 --> 00:23:04,239 Now 455 00:23:04,240 --> 00:23:06,759 I've gotten a check on the south region. 456 00:23:06,759 --> 00:23:08,440 So the thing you should be asking is, 457 00:23:08,440 --> 00:23:11,420 hey, now you've gotten a check box on the south region. 458 00:23:11,420 --> 00:23:16,110 How do you actually know when someone clicks the check box? Do you get this 459 00:23:16,109 --> 00:23:18,189 action performed 460 00:23:18,190 --> 00:23:21,049 method called for you when someone clicks the box? 461 00:23:21,049 --> 00:23:24,399 Actually, you don't. It's a little bit different, how you actually check for the 462 00:23:24,400 --> 00:23:25,860 check box. It turns out 463 00:23:25,859 --> 00:23:27,248 that for the check box, 464 00:23:27,249 --> 00:23:30,940 you can check its state, whether or not its checked or unchecked at any point in 465 00:23:30,940 --> 00:23:35,049 your program. The way you do that is as long as you have a way of 466 00:23:35,049 --> 00:23:35,558 referring 467 00:23:35,558 --> 00:23:36,319 to 468 00:23:36,319 --> 00:23:40,769 the variable check, you can just say check dot 469 00:23:40,769 --> 00:23:42,319 is selected. 470 00:23:42,319 --> 00:23:47,289 What the will give you back is a boulion. So we might have some boulion 471 00:23:47,289 --> 00:23:51,710 T equals check is selected. The tells you any time you call that, whenever 472 00:23:51,710 --> 00:23:53,120 you call it in your program, 473 00:23:53,119 --> 00:23:55,039 is this thing checked or not? 474 00:23:55,039 --> 00:23:58,450 So if you think about this, in order to be able to refer to check, 475 00:23:58,450 --> 00:23:59,690 what that means is 476 00:23:59,690 --> 00:24:01,798 when you actually declare this puppy, 477 00:24:01,798 --> 00:24:04,460 this thing is probably not a local variable. 478 00:24:04,460 --> 00:24:07,779 This thing is probably actually an instance variable. 479 00:24:07,779 --> 00:24:11,259 So what that means is somewhere in your program, when you're doing innate, 480 00:24:11,259 --> 00:24:15,879 say this is your innate method over here. And then public void innate. 481 00:24:15,880 --> 00:24:18,290 You would say check equals new check box, 482 00:24:18,289 --> 00:24:19,879 but really, somewhere 483 00:24:19,880 --> 00:24:23,010 down here where you declare your instance variables, you would say 484 00:24:23,009 --> 00:24:29,000 something like private J check box 485 00:24:29,000 --> 00:24:30,278 check, 486 00:24:30,278 --> 00:24:33,038 which means I'm going to have this instance variables. There's something I need 487 00:24:33,038 --> 00:24:37,048 to be able to keep track of in between method calls. So I'm going to 488 00:24:37,048 --> 00:24:38,779 declare it as an instance variable. 489 00:24:38,779 --> 00:24:43,139 I will create a new on in innate, but this one is actually just setting this 490 00:24:43,140 --> 00:24:47,050 instance variable. So somewhere else in my program, I can refer to that instance 491 00:24:47,049 --> 00:24:54,049 variable. [Inaudible] 492 00:24:57,420 --> 00:25:01,730 Yeah, you can actually do the creation there and say J-check box check 493 00:25:01,730 --> 00:25:05,169 equals new J-check box and then whatever the name of it is. 494 00:25:05,169 --> 00:25:08,380 Oftentimes, you just don't see that, so I'm following that 495 00:25:08,380 --> 00:25:08,950 convention here, 496 00:25:08,950 --> 00:25:13,319 but sometimes you'll actually see someone do that in a program, yeah. 497 00:25:13,319 --> 00:25:17,829 [Inaudible]. The reason, really, for doing it this way is that in innate, you can sort of see 498 00:25:17,829 --> 00:25:20,809 how everything's being created. You don't need to look at two different places in the 499 00:25:20,809 --> 00:25:21,398 program. 500 00:25:21,398 --> 00:25:24,259 There's some things where it actually makes sense to create them when 501 00:25:24,259 --> 00:25:25,079 you declare them 502 00:25:25,079 --> 00:25:26,789 and other things that you can't 503 00:25:26,789 --> 00:25:29,349 create them when you declare them. It doesn't make sense to do that, and it's better 504 00:25:29,349 --> 00:25:32,539 to just create them all in one place, basically, 505 00:25:32,539 --> 00:25:35,509 is the general thinking. So 506 00:25:35,509 --> 00:25:36,989 when check is selected, 507 00:25:36,989 --> 00:25:39,828 this is something that you might check somewhere in your program. For example, 508 00:25:39,828 --> 00:25:43,269 when the user clicks the mouse somewhere, right? So when we click somewhere and get 509 00:25:43,269 --> 00:25:44,220 a face, 510 00:25:44,220 --> 00:25:47,110 at that time, we want to see, are we showing the front of the face or the back of 511 00:25:47,109 --> 00:25:51,389 the face? So in our mouse-clicked method, that is getting called automatically when we 512 00:25:51,390 --> 00:25:55,169 click the mouse, that's when we're actually checking to see if check is selected. I'll 513 00:25:55,169 --> 00:25:56,860 show you the code in just a little while, 514 00:25:56,859 --> 00:26:00,399 but that's an example of how it might actually be done. 515 00:26:00,400 --> 00:26:04,110 So instance variable's the important thing to keep in mind there. 516 00:26:04,109 --> 00:26:05,959 So besides the check box, 517 00:26:05,960 --> 00:26:08,569 we had this radio button for the 518 00:26:08,569 --> 00:26:10,700 size being small, medium or large. 519 00:26:10,700 --> 00:26:13,819 Radio buttons get a little bit more involved, but not a whole bunch. So 520 00:26:13,819 --> 00:26:16,740 the first thing we're going to do is we're going to create all the 521 00:26:16,740 --> 00:26:19,420 individual radio buttons. So I might have small 522 00:26:19,420 --> 00:26:23,039 equals new - actually, let me abbreviate these just so it's easier to keep track of them. 523 00:26:23,039 --> 00:26:27,159 We'll have SM, which is small, is a new 524 00:26:27,160 --> 00:26:28,590 525 00:26:28,589 --> 00:26:30,000 J-radio 526 00:26:30,000 --> 00:26:31,319 button, 527 00:26:31,319 --> 00:26:34,779 and it's going to have some text associated with it, which is just the word 528 00:26:34,779 --> 00:26:38,440 small. So this actually creates a single button, right, the single 529 00:26:38,440 --> 00:26:38,869 circle 530 00:26:38,868 --> 00:26:40,990 with the word small next to it. 531 00:26:40,990 --> 00:26:44,200 This is not - yeah might say, okay, if it does that, how do I know 532 00:26:44,200 --> 00:26:48,789 that it's related to medium and large and all that? We'll get to that. 533 00:26:48,789 --> 00:26:53,009 Small, notice I haven't declared a variable out here. Again, a radio button is 534 00:26:53,009 --> 00:26:53,829 something 535 00:26:53,829 --> 00:26:56,649 that we want to be able to keep track of 536 00:26:56,650 --> 00:26:57,120 over time. 537 00:26:57,119 --> 00:27:01,619 So small, we would actually declare over here. 538 00:27:01,619 --> 00:27:03,149 Let me just 539 00:27:03,150 --> 00:27:06,080 increase the amount of space we have for variable declarations by getting rid of 540 00:27:06,079 --> 00:27:07,609 innate for right now. 541 00:27:07,609 --> 00:27:12,500 We would declare a small over here by saying private small 542 00:27:12,500 --> 00:27:14,029 J-radio - 543 00:27:14,029 --> 00:27:18,359 backwards. Private 544 00:27:18,359 --> 00:27:19,479 J-radio 545 00:27:19,480 --> 00:27:20,660 button 546 00:27:20,660 --> 00:27:24,550 small. Okay. 547 00:27:24,549 --> 00:27:28,169 So that's going to be another private variable for us. We're going to create it in our 548 00:27:28,170 --> 00:27:31,360 innate method somewhere, or perhaps another method that gets called for 549 00:27:31,359 --> 00:27:31,869 innate. 550 00:27:31,869 --> 00:27:35,699 We create the small radio button. We can create the medium radio button by doing 551 00:27:35,700 --> 00:27:40,080 the same thing, new J-radio button, we'll just put the label, medium, on it, 552 00:27:40,079 --> 00:27:43,329 and we can do the same thing for large. 553 00:27:43,329 --> 00:27:46,428 New J-radio button, large. 554 00:27:46,429 --> 00:27:50,490 So we create the three radio buttons. Once we create the three radio buttons, we need to 555 00:27:50,490 --> 00:27:53,740 say, hey, all these radio buttons are in a group. They're all related to each other 556 00:27:53,740 --> 00:27:55,640 because if you click small, 557 00:27:55,640 --> 00:27:57,370 medium and large better turn off. 558 00:27:57,369 --> 00:28:00,599 If you click medium and small is on, small better turn off. So how do I 559 00:28:00,599 --> 00:28:03,059 know that they're all related to each other? In a 560 00:28:03,059 --> 00:28:05,909 program, you may actually have multiple radio button groups, and you don't want them 561 00:28:05,910 --> 00:28:06,889 to 562 00:28:06,888 --> 00:28:10,458 conflict with each other. So what you do is you create something called a button 563 00:28:10,459 --> 00:28:11,980 group. 564 00:28:11,980 --> 00:28:17,569 A button group is just another type, and I'll call this size because 565 00:28:17,569 --> 00:28:20,119 size is small, medium or large. So our group is going to 566 00:28:20,119 --> 00:28:21,709 keep track of size. 567 00:28:21,710 --> 00:28:23,140 Equals new 568 00:28:23,140 --> 00:28:25,080 button group. 569 00:28:25,079 --> 00:28:28,960 Now, the interesting thing about button groups is I never actually care about 570 00:28:28,960 --> 00:28:32,380 referring to the button group after I create it and assign all my buttons to 571 00:28:32,380 --> 00:28:36,810 it, that I'll show you in just a second. So this button group, oftentimes, is actually a local 572 00:28:36,809 --> 00:28:40,039 variable. It's not an instance variable because I don't need to keep track of it 573 00:28:40,039 --> 00:28:41,490 after I create the original button group. 574 00:28:41,490 --> 00:28:43,460 I need to keep track of the buttons, 575 00:28:43,460 --> 00:28:46,720 so medium and large would also be instance variables, just like small, 576 00:28:46,720 --> 00:28:49,240 but I don't need to keep track of the group. 577 00:28:49,240 --> 00:28:52,470 So what do I do? How do I put all these guys in a group? I say the name of the 578 00:28:52,470 --> 00:28:53,739 group size, 579 00:28:53,739 --> 00:28:58,578 dot add, and I add all the buttons to it. I would add small, and I would say size 580 00:28:58,578 --> 00:29:00,338 dot add and add 581 00:29:00,338 --> 00:29:01,148 medium, 582 00:29:01,148 --> 00:29:02,769 and I would say size 583 00:29:02,769 --> 00:29:07,009 dot add, and I would add large. That says, hey, 584 00:29:07,009 --> 00:29:07,890 now you're 585 00:29:07,890 --> 00:29:10,550 group has these three buttons in it. 586 00:29:10,549 --> 00:29:12,359 Once I do that, 587 00:29:12,359 --> 00:29:13,558 still not done. 588 00:29:13,558 --> 00:29:16,529 Oh, let me just slide this over here. 589 00:29:16,529 --> 00:29:19,109 The power, the magic, of boards. 590 00:29:19,109 --> 00:29:23,959 So once I create my initial group, I want to say one of my radio buttons is 591 00:29:23,960 --> 00:29:25,100 selected to begin with. 592 00:29:25,099 --> 00:29:31,099 So I pick the one I want selected, like medium, and say set selected 593 00:29:31,099 --> 00:29:32,859 to be true. I 594 00:29:32,859 --> 00:29:37,319 only set selected after I've added all my buttons to the group. So the 595 00:29:37,319 --> 00:29:38,428 general idea is 596 00:29:38,429 --> 00:29:39,970 I create the buttons. 597 00:29:39,970 --> 00:29:41,450 I create the group. 598 00:29:41,450 --> 00:29:43,558 I add all the buttons to the group, 599 00:29:43,558 --> 00:29:46,519 and then I pick which one is selected because it doesn't make sense to select 600 00:29:46,519 --> 00:29:49,130 one until I know everything that's actually in the group. 601 00:29:49,130 --> 00:29:54,380 After I do that, the funky thing is I need to add my radio buttons to the 602 00:29:54,380 --> 00:29:56,100 control, one of the control bars, 603 00:29:56,099 --> 00:30:00,199 but I don't add the whole groups at once, as strange as that may be. I add all the 604 00:30:00,200 --> 00:30:01,559 individual buttons. 605 00:30:01,559 --> 00:30:04,919 So I need to say add 606 00:30:04,920 --> 00:30:05,580 small, 607 00:30:05,579 --> 00:30:08,710 south. 608 00:30:08,710 --> 00:30:10,240 Add 609 00:30:10,240 --> 00:30:11,049 medium, 610 00:30:11,049 --> 00:30:13,769 south. You could actually put them in different regions if you want, but then 611 00:30:13,769 --> 00:30:16,740 that's going to mess up the user real bad. 612 00:30:16,740 --> 00:30:18,298 And large 613 00:30:18,298 --> 00:30:21,358 in south. Usually it's a good idea if they come right after each other, so 614 00:30:21,358 --> 00:30:24,138 they're all sequential. Otherwise, if you have some interactor in the 615 00:30:24,138 --> 00:30:26,869 middle of them, the user's going to get very confused. 616 00:30:26,869 --> 00:30:31,250 So this basically sets up my buttons. I create the buttons. I create the group. I 617 00:30:31,250 --> 00:30:32,278 put them in a group. 618 00:30:32,278 --> 00:30:35,880 I pick which one out of the group is initially selected, and then I add all the 619 00:30:35,880 --> 00:30:38,250 buttons from the group onto the control. 620 00:30:38,250 --> 00:30:41,789 Now, how do I figure out which one of these buttons is actually selected 621 00:30:41,789 --> 00:30:43,809 somewhere in my program. 622 00:30:43,809 --> 00:30:46,200 It's because 623 00:30:46,200 --> 00:30:51,259 I made these things private. Small, medium and large should all be private 624 00:30:51,259 --> 00:30:54,058 instance variables. I can refer to them later in the program 625 00:30:54,058 --> 00:30:56,879 by saying something like 626 00:30:56,880 --> 00:30:59,100 small dot is 627 00:30:59,099 --> 00:31:00,419 selected. 628 00:31:00,420 --> 00:31:04,038 This gives me back a boulion, 629 00:31:04,038 --> 00:31:07,230 which tells me, out of that group of radio buttons, 630 00:31:07,230 --> 00:31:10,649 is small the selected one? So if small is the selected one, the other two are 631 00:31:10,648 --> 00:31:12,869 probably going to be false. But I can check for all three. 632 00:31:12,869 --> 00:31:17,639 I can say medium is selected and large is selected, same kind of 633 00:31:17,640 --> 00:31:18,600 thing. 634 00:31:18,599 --> 00:31:21,929 Anywhere in my program, it will just give me back the appropriate state of 635 00:31:21,930 --> 00:31:25,350 whichever radio button is selected at that given time. 636 00:31:25,349 --> 00:31:27,198 Again, it's not calling the method, 637 00:31:27,199 --> 00:31:30,829 that action performed method only gets called when buttons are pressed. Things 638 00:31:30,828 --> 00:31:31,548 like 639 00:31:31,548 --> 00:31:34,210 J-radio button is not a standard button, 640 00:31:34,210 --> 00:31:35,819 so it doesn't call that method 641 00:31:35,819 --> 00:31:41,509 or check box doesn't call that method either. Any questions so far? All right. 642 00:31:41,509 --> 00:31:44,569 So one last thing we need to have before I can show you a program that puts it 643 00:31:44,569 --> 00:31:46,490 all together, 644 00:31:46,490 --> 00:31:49,690 and the last thing - anybody remember what the last thing that was that we showed in our 645 00:31:49,690 --> 00:31:53,500 little sample program for the face? 646 00:31:53,500 --> 00:31:55,000 Combo box. 647 00:31:55,000 --> 00:31:58,170 Always a good idea to have a combo box. I'm not actually going to show you the slider. 648 00:31:58,170 --> 00:32:01,220 The slider is pretty straight-forward. It's all in the book. It's not 649 00:32:01,220 --> 00:32:05,000 worth spending lecture time on it, and the truth is, when was the last time you saw a 650 00:32:05,000 --> 00:32:07,808 slider on a web page. You're 651 00:32:07,808 --> 00:32:10,079 like, today. Yeah. Yeah, 652 00:32:10,079 --> 00:32:12,288 that's for today. That's for tomorrow, 653 00:32:12,288 --> 00:32:15,250 and that's for the rest of your life. 654 00:32:15,250 --> 00:32:20,089 Yeah, slider you can read about - oh, the snag. 655 00:32:20,089 --> 00:32:21,449 Denied. 656 00:32:21,450 --> 00:32:25,830 That was one of the other comments, too. The social candies come too far in front, and I just 657 00:32:25,829 --> 00:32:29,679 can't go that far back. 658 00:32:29,680 --> 00:32:32,680 There's only - I've been hearing, oh, you should really practice your - a 659 00:32:32,680 --> 00:32:35,430 lot of the comments were, you should really practice your throws. I've been doing 660 00:32:35,430 --> 00:32:38,308 this for 15 years. It doesn't get any better, okay? 661 00:32:38,308 --> 00:32:40,039 All right. So 662 00:32:40,039 --> 00:32:42,980 we want to have the combo box, okay? 663 00:32:42,980 --> 00:32:47,829 The combox. I always want to write combox, but it's combo box. They should just rename it the combox 664 00:32:47,829 --> 00:32:50,409 because really, you can just reuse these two letters and reduce global 665 00:32:50,410 --> 00:32:52,220 warming. 666 00:32:52,220 --> 00:32:55,000 So the combo box. How does the combo box work? 667 00:32:55,000 --> 00:32:58,869 We have some variable called the J-combo box. 668 00:32:58,869 --> 00:33:01,759 We'll call it pick for our pick for the color. 669 00:33:01,759 --> 00:33:04,538 We're going to create a new 670 00:33:04,538 --> 00:33:05,179 J-combo 671 00:33:05,179 --> 00:33:07,140 box. 672 00:33:07,140 --> 00:33:08,500 Once again, 673 00:33:08,500 --> 00:33:13,509 combo box is something that we want to keep track of between method calls. 674 00:33:13,509 --> 00:33:17,490 So we would not actually declare the variable here. 675 00:33:17,490 --> 00:33:19,048 We would refer to the variable, 676 00:33:19,048 --> 00:33:23,379 but we would declare it over here in our private instance variables and have 677 00:33:23,380 --> 00:33:24,140 private 678 00:33:24,140 --> 00:33:30,250 J-combo box pick. Okay? 679 00:33:30,250 --> 00:33:35,048 So we start off by initializing the pick to be an empty combo box. This just 680 00:33:35,048 --> 00:33:36,408 creates a new combo box. 681 00:33:36,409 --> 00:33:39,649 Then what we need to say is we're going to add all the elements that we want in that 682 00:33:39,648 --> 00:33:43,248 combo box in the order in which they're going to appear in the drop-down 683 00:33:43,249 --> 00:33:45,200 menu of the combo box. 684 00:33:45,200 --> 00:33:47,110 We do that by saying pick 685 00:33:47,109 --> 00:33:52,089 dot add item. Then the item you give it is a string. We would have 686 00:33:52,089 --> 00:33:57,449 black for the first item, and then the next item pick add item is blue. 687 00:33:57,450 --> 00:34:01,950 I just put these all in alphabetical order, but you can put them in whatever order you want. 688 00:34:01,950 --> 00:34:03,679 Green, 689 00:34:03,679 --> 00:34:06,639 and then pick add item 690 00:34:06,638 --> 00:34:08,089 red. 691 00:34:08,090 --> 00:34:11,439 Those are all of the choices that are in the combo box. 692 00:34:11,438 --> 00:34:15,078 The reason why it's called a combo box, interestingly enough. You might say, but isn't 693 00:34:15,079 --> 00:34:18,609 it just a choice box or drop-down box? Why is it 694 00:34:18,608 --> 00:34:20,288 called a combo box? The 695 00:34:20,289 --> 00:34:23,009 reason why it's called a combo box is in the days of yore when these things were first 696 00:34:23,009 --> 00:34:25,690 created, they not only let you pick from a choice of items, 697 00:34:25,690 --> 00:34:29,099 but you could actually type in a value if it allowed you to, 698 00:34:29,099 --> 00:34:32,789 and just make up your own value that wasn't in the list. But oftentimes, we 699 00:34:32,789 --> 00:34:36,159 don't want people making up their own value. If we said, hey, from this 700 00:34:36,159 --> 00:34:40,158 combo box, pick your year. You could pick freshman, junior 701 00:34:40,159 --> 00:34:41,909 - we don't have sophomores. 702 00:34:41,909 --> 00:34:43,559 Freshmen, sophomores, juniors, 703 00:34:43,559 --> 00:34:47,048 seniors, grad students or other. If we let you just type 704 00:34:47,048 --> 00:34:49,809 something in, you're like, well, I'm supersenior. First of all, 705 00:34:49,809 --> 00:34:52,569 I'd be like, sorry, 706 00:34:52,568 --> 00:34:55,998 but second of all, I'd be like supersenior doesn't exists. You're still just a senior. 707 00:34:55,998 --> 00:34:59,259 You could be super senior, but 708 00:34:59,259 --> 00:35:01,088 you're not supersenior, all one word. 709 00:35:01,088 --> 00:35:04,918 So what we want to do is tell this J-combo box, hey, we're not going to allow 710 00:35:04,918 --> 00:35:08,129 the user to type anything in. We're just going to allow them to pick one of the 711 00:35:08,130 --> 00:35:08,820 choices. 712 00:35:08,820 --> 00:35:13,350 The way we do that is there's a property called set editable, 713 00:35:13,349 --> 00:35:17,130 that we're going to set to false. So we say set editable 714 00:35:17,130 --> 00:35:21,289 false. If we set editable to true, you will get a combo box that allows someone to 715 00:35:21,289 --> 00:35:25,000 pick any one of the choices or just click on it and type something in, 716 00:35:25,000 --> 00:35:28,050 if you really want to do that. But if you don't know how to handle what they type 717 00:35:28,050 --> 00:35:29,000 in, 718 00:35:29,000 --> 00:35:32,119 don't let them do it, and set editable to false. 719 00:35:32,119 --> 00:35:35,630 The other thing that we need to do is we need to pick an initial value for that 720 00:35:35,630 --> 00:35:38,119 combo box. All right. So you create a combo box. 721 00:35:38,119 --> 00:35:40,289 Which one of the choices is initially picked? 722 00:35:40,289 --> 00:35:43,919 We do that just like you've seen for all the other interactors. Pick 723 00:35:43,918 --> 00:35:45,368 dot set 724 00:35:45,369 --> 00:35:49,088 selected. Except here we say selected item, for some reason. With combo box, we 725 00:35:49,088 --> 00:35:52,808 just use the word item when we add and set selected item because they're just items. 726 00:35:52,809 --> 00:35:54,499 That's the way life is. 727 00:35:54,498 --> 00:35:58,639 Item, and then we give it the string of whichever one is selected, like 728 00:35:58,639 --> 00:36:00,889 black will make our initial choice. 729 00:36:00,889 --> 00:36:03,989 After we do all this, we create the combo box. We 730 00:36:03,989 --> 00:36:07,608 add all the choices to it. We choose whether or not it's editable, and we pick 731 00:36:07,608 --> 00:36:09,269 the initial selection. 732 00:36:09,269 --> 00:36:12,920 Always remember to say, hey, now I need to add it to one of my control 733 00:36:12,920 --> 00:36:14,199 areas on the screen. 734 00:36:14,199 --> 00:36:16,378 So I say add 735 00:36:16,378 --> 00:36:17,710 pick to, 736 00:36:17,710 --> 00:36:20,309 for example, the south 737 00:36:20,309 --> 00:36:27,309 controller. Okay. Question? [Inaudible]. 738 00:36:28,400 --> 00:36:32,009 I think the default, that's actually - offhand, I don't know if the default is 739 00:36:32,009 --> 00:36:35,509 false or true. I think it might actually be true. 740 00:36:35,509 --> 00:36:37,759 But just for finding 741 00:36:37,759 --> 00:36:39,869 something that I don't know off the top of my head, 742 00:36:39,869 --> 00:36:42,739 there's a candy. And for asking a question. You can just try it out yourself. So 743 00:36:42,739 --> 00:36:45,499 don't set it and see what happens. Offhand, I don't remember. We could actually 744 00:36:45,498 --> 00:36:48,838 just play with it in the program. So 745 00:36:48,838 --> 00:36:52,748 here's how all those things actually get put together in our program for 746 00:36:52,748 --> 00:36:54,968 drawing this interactive face. 747 00:36:54,969 --> 00:36:58,869 So first of all, what I'm going to do is in my initialization method, I'm going 748 00:36:58,869 --> 00:36:59,818 to create 749 00:36:59,818 --> 00:37:03,219 the buttons that I care about. I only had one button, which was the clear 750 00:37:03,219 --> 00:37:03,729 button. 751 00:37:03,728 --> 00:37:06,929 So I have one button, clear, that's in the southern region. 752 00:37:06,929 --> 00:37:10,478 What do I do when I get the clear button? Remember, buttons are the only thing 753 00:37:10,478 --> 00:37:13,968 that the action performed method is called for you automatically when 754 00:37:13,969 --> 00:37:14,869 they're clicked. 755 00:37:14,869 --> 00:37:15,990 So down here, 756 00:37:15,989 --> 00:37:17,078 I have 757 00:37:17,079 --> 00:37:19,068 my action performed 758 00:37:19,068 --> 00:37:22,349 method. It's pretty similar to what you saw before with the hi button except this 759 00:37:22,349 --> 00:37:26,019 one gets an action event. It gets the action command. So here, I didn't take 760 00:37:26,018 --> 00:37:27,789 this and assign it to a separate string. 761 00:37:27,789 --> 00:37:29,219 I'm just saying, hey, E, 762 00:37:29,219 --> 00:37:32,319 get your action command. I know that's going to be a string, so just directly 763 00:37:32,320 --> 00:37:35,220 call the equals method on it. Oftentimes, you'll see the shorthand 764 00:37:35,219 --> 00:37:36,389 when there's only one 765 00:37:36,389 --> 00:37:39,389 thing that we want to check for instead of a bunch. We don't get the string 766 00:37:39,389 --> 00:37:40,828 separately. 767 00:37:40,829 --> 00:37:44,130 So E action command equals clear, which means they click the clear button. 768 00:37:44,130 --> 00:37:47,970 If that's the case, then I remove all. Remove all is one of the methods of a 769 00:37:47,969 --> 00:37:50,569 graphics program that removes everything that's on the canvas, 770 00:37:50,570 --> 00:37:53,759 so it clears the canvas. So 771 00:37:53,759 --> 00:37:55,659 that's how my button gets set up. 772 00:37:55,659 --> 00:37:59,118 Then I have a check box for whether or not I'm displaying the front or the back 773 00:37:59,119 --> 00:38:00,159 of the face. 774 00:38:00,159 --> 00:38:02,959 So what do I do? I create a new check box 775 00:38:02,958 --> 00:38:04,829 that's name is front. 776 00:38:04,829 --> 00:38:08,579 Notice I need to keep track of the state of the check box, right, because I need to 777 00:38:08,579 --> 00:38:12,338 know later on, was it checked or not. So check box 778 00:38:12,338 --> 00:38:15,480 is actually down here as an instance variable. 779 00:38:15,480 --> 00:38:18,460 We use our instance variables to keep track of the interactors whose 780 00:38:18,460 --> 00:38:22,010 state we need to refer to as the program runs. We need to 781 00:38:22,010 --> 00:38:25,099 say, hey, check box, are you checked or not, somewhere later in the program. So we need to 782 00:38:25,099 --> 00:38:26,690 be able to refer to check box. 783 00:38:26,690 --> 00:38:31,190 My radio buttons are all also instance variables, and my combo box pick, 784 00:38:31,190 --> 00:38:34,610 just like you saw up there, right? Radio buttons, combo box, and the check box were all instance 785 00:38:34,610 --> 00:38:39,689 variables. Same thing going on here. So 786 00:38:39,688 --> 00:38:43,228 check box, I create it. I set it selected to be true. So when I first start off, I'm going to 787 00:38:43,228 --> 00:38:46,598 be drawing faces, and I add the check box to the southern region. 788 00:38:46,599 --> 00:38:49,890 Now there was two other things that I had. I had a radio button for small, medium and 789 00:38:49,889 --> 00:38:53,318 large, and I had a color chooser, which was a combo box. 790 00:38:53,318 --> 00:38:54,529 [Inaudible] to 791 00:38:54,530 --> 00:38:58,440 take all of that code and abstract it a little bit and modularize 792 00:38:58,440 --> 00:39:01,710 it, I've just created two methods that I'm going to call to do that initialization 793 00:39:01,710 --> 00:39:02,460 for me. 794 00:39:02,460 --> 00:39:06,110 So innate radio button. What that does is it does the code you just saw. It comes here, 795 00:39:06,110 --> 00:39:07,670 and it says, hey, 796 00:39:07,670 --> 00:39:09,269 create a button group. 797 00:39:09,268 --> 00:39:12,889 Create three buttons for small, medium and large, and add all the buttons to the 798 00:39:12,889 --> 00:39:15,978 button group. Same code you saw. Actually, you could've created the button 799 00:39:15,978 --> 00:39:19,629 group. You could've taken this line of code and done it after you created the 800 00:39:19,630 --> 00:39:20,910 buttons. It doesn't make a difference, 801 00:39:20,909 --> 00:39:22,710 but here, I just created the group, 802 00:39:22,710 --> 00:39:24,108 created three buttons, then 803 00:39:24,108 --> 00:39:26,949 added all my buttons to my button group here. 804 00:39:26,949 --> 00:39:30,188 Once all my buttons are in there, I say, hey, medium is the one that starts off 805 00:39:30,188 --> 00:39:30,789 selected, 806 00:39:30,789 --> 00:39:35,068 and then add all of my radio buttons to the southern controller. 807 00:39:35,068 --> 00:39:37,880 Any questions about that? It's exactly the same code we just wrote on the 808 00:39:37,880 --> 00:39:44,880 board, except just with nicer variable names. Uh huh? [Inaudible]. 809 00:39:49,778 --> 00:39:53,858 Right. They all get drawn from left to right, but the entire collection of 810 00:39:53,858 --> 00:39:58,880 stuff is centered in the screen. So you'll see that when we run the program. It's not 811 00:39:58,880 --> 00:40:01,309 going to happen. 812 00:40:01,309 --> 00:40:05,349 So last but not least, I initialize my color chooser, and my color chooser is 813 00:40:05,349 --> 00:40:10,420 just a combo box. So I create the combo box. Again, pick color is an instance variable. 814 00:40:10,420 --> 00:40:13,440 I add my items to it, black, blue, green and red. 815 00:40:13,440 --> 00:40:17,340 I set its editability to be false, so I don't allow the user to type in. 816 00:40:17,340 --> 00:40:20,199 I set the selected item, initially, to be black. 817 00:40:20,199 --> 00:40:22,918 Now here's something funky that I'm going to do. 818 00:40:22,918 --> 00:40:26,989 I'm saying, hey, here's my combo box. My combo box doesn't have a name associated 819 00:40:26,989 --> 00:40:29,869 with it. When this thing actually gets drawn on the screen, 820 00:40:29,869 --> 00:40:31,509 what 821 00:40:31,509 --> 00:40:35,918 I get is a little drop-down box that looks like - actually, I just get a box that 822 00:40:35,918 --> 00:40:36,609 starts 823 00:40:36,610 --> 00:40:37,780 with black in 824 00:40:37,780 --> 00:40:39,510 it. If I click on this little 825 00:40:39,510 --> 00:40:43,110 thingy over here, I get blue and red and green and the other choices. 826 00:40:43,110 --> 00:40:46,240 What I would like to have, is I would like to have the word color, 827 00:40:46,239 --> 00:40:48,239 if this chalk actually writes, 828 00:40:48,239 --> 00:40:50,448 appear before the combo box 829 00:40:50,449 --> 00:40:53,519 so the person knows, yeah, that's what this black is referring to. It's referring to 830 00:40:53,518 --> 00:40:55,358 the color of the face. 831 00:40:55,358 --> 00:40:56,708 So the way I do that, 832 00:40:56,708 --> 00:41:00,128 is I'm just going to create a J-label. I don't worry about assigning it to 833 00:41:00,128 --> 00:41:02,960 anything because the J-label doesn't do any interaction. It 834 00:41:02,960 --> 00:41:06,798 just puts a label in the control bar, so I create a new J-label. 835 00:41:06,798 --> 00:41:11,278 I add some spaces here to separate it a little bit more from whatever the last 836 00:41:11,278 --> 00:41:15,298 control was. So whatever interactor I put in before, I say, hey, before you draw the label, 837 00:41:15,298 --> 00:41:18,068 put in some space, then draw the label. 838 00:41:18,068 --> 00:41:21,679 So I add that label to the southern region. After the label, I add 839 00:41:21,679 --> 00:41:25,249 the combo box. So what will show up in whatever interactors I had up to this 840 00:41:25,248 --> 00:41:26,248 point, 841 00:41:26,248 --> 00:41:31,718 then a little bit of space in the label color, and then my combo box after it, 842 00:41:31,719 --> 00:41:36,278 okay? Last but not least, I say, hey, add mouse listeners, and add action listeners. 843 00:41:36,278 --> 00:41:38,568 So I set everything up in my program, 844 00:41:38,568 --> 00:41:41,989 and I'm done. Now the only thing my program will do is do something when the 845 00:41:41,989 --> 00:41:45,059 user interacts with it. So when the user interacts with it, there's two things 846 00:41:45,059 --> 00:41:46,079 they can do. 847 00:41:46,079 --> 00:41:48,260 They can either action perform, 848 00:41:48,260 --> 00:41:50,330 clicking the clear button, which you already saw, 849 00:41:50,329 --> 00:41:53,039 or they can click the mouse somewhere on the canvas. 850 00:41:53,039 --> 00:41:56,779 If they click the mouse somewhere on the canvas, we call the mouse clicked method, 851 00:41:56,780 --> 00:42:00,500 just like you saw before, clicking the mouse before. Here's where all the 852 00:42:00,500 --> 00:42:03,780 fun goes on with checking the state of the check boxes and all that. We say, 853 00:42:03,780 --> 00:42:07,298 hey, I'm going to have some generic objects, some G-object. 854 00:42:07,298 --> 00:42:11,409 The diameter of it is going to be whatever size should be appropriately set. 855 00:42:11,409 --> 00:42:15,469 So I'm going to call some method set get diameter size. Diameter 856 00:42:15,469 --> 00:42:18,798 size comes along and says, hey, I'm going to start off by setting size to be zero, and 857 00:42:18,798 --> 00:42:21,768 then I'm going to check which radio button is selected. 858 00:42:21,768 --> 00:42:25,458 Hey, small, are you selected? If you're selected, then the size of the small diameter. 859 00:42:25,458 --> 00:42:28,938 If you're not selected, then I'll check medium. If medium's selected, then the diameter's the 860 00:42:28,938 --> 00:42:29,969 medium size. 861 00:42:29,969 --> 00:42:33,368 If it's not, I'll check for large, and I'll set the large size. 862 00:42:33,369 --> 00:42:37,019 Small, medium or large are just constants that are set in my program to be 20, 40 863 00:42:37,018 --> 00:42:39,789 and 60. So all this does is check to see 864 00:42:39,789 --> 00:42:42,699 which of the three radio buttons is actually selected 865 00:42:42,699 --> 00:42:46,459 and returns an appropriate value for the corresponding sides. 866 00:42:46,458 --> 00:42:48,798 That's what we set for the diameter of the object. 867 00:42:48,798 --> 00:42:51,829 Then we come here, and we say, hey, check box, are you selected? 868 00:42:51,829 --> 00:42:55,019 If you are selected, the I want to draw a face. So my object is going to be a 869 00:42:55,019 --> 00:42:59,360 new G-face. You're just using that G-face class I wrote two weeks ago. 870 00:42:59,360 --> 00:43:03,120 If the check box is not selected, your object's going to be a G-oval because the 871 00:43:03,119 --> 00:43:05,338 back of the face is just the circle. 872 00:43:05,338 --> 00:43:09,918 Then lastly, I need to set the color. I'm going to set this object's color, just 873 00:43:09,918 --> 00:43:13,138 using the set color method that hopefully, by now, you're very comfortable with, to 874 00:43:13,139 --> 00:43:17,389 be whatever color the current color is picked in the combo box. So I write a 875 00:43:17,389 --> 00:43:19,130 method called get current color 876 00:43:19,130 --> 00:43:21,989 that returns to me a color object. 877 00:43:21,989 --> 00:43:23,470 It goes through, and it says - 878 00:43:23,469 --> 00:43:25,928 here's how it works. Hey, 879 00:43:25,929 --> 00:43:29,309 color-picker, what's your selected item? So it returns a selected item. I need 880 00:43:29,309 --> 00:43:32,869 to cast that to a string. That's just a little JAVA-esque thing. This is all in 881 00:43:32,869 --> 00:43:36,130 the book. You need to cast whatever the selected item is to a string, 882 00:43:36,130 --> 00:43:39,410 and then based on the string, I say, hey, is the string blue? If it is, I'll 883 00:43:39,409 --> 00:43:43,210 return the color blue. If the string is green, I'll return the color green. If it's 884 00:43:43,210 --> 00:43:46,699 red, I'll return the color red, and if it's some random thing I don't know or 885 00:43:46,699 --> 00:43:49,208 it's black, presumably, I'm just going to return black. 886 00:43:49,208 --> 00:43:52,618 So that returns the color object black, which is what I set the object's color 887 00:43:52,619 --> 00:43:53,220 to. 888 00:43:53,219 --> 00:43:56,659 Now I've set the size of the object, whether or not it's the front or 889 00:43:56,659 --> 00:44:00,108 the back of the face, the color of the object, and now I'm just ready to add 890 00:44:00,108 --> 00:44:03,639 that object wherever the mouse was clicked at a [inaudible] location. 891 00:44:03,639 --> 00:44:06,739 So that's the whole program. When I run, 892 00:44:06,739 --> 00:44:10,958 here's how I get the layout. I added the button first. Then I added the check box. 893 00:44:10,958 --> 00:44:14,858 Then I added the radio buttons in this border. Then I said, hey, a little bit of 894 00:44:14,858 --> 00:44:20,168 space, and the label color, and then here's my combo box for this lecture. 895 00:44:20,168 --> 00:44:21,239 Select green, 896 00:44:21,239 --> 00:44:22,740 set this to be large, I 897 00:44:22,739 --> 00:44:26,088 have front. I get the green face. 898 00:44:26,088 --> 00:44:29,199 Any questions about interactors? 899 00:44:29,199 --> 00:44:32,219 All righty. If that's making sense, nod your head. 900 00:44:32,219 --> 00:44:35,458 If it's not making sense, shake your head. 901 00:44:35,458 --> 00:44:37,678 All right. Have a good weekend. I will see you on Monday.