1 00:00:08,060 --> 00:00:10,829 2 00:00:10,829 --> 00:00:14,099 This presentation is delivered by the Stanford Center for Professional 3 00:00:14,099 --> 00:00:21,099 Development. 4 00:00:22,039 --> 00:00:26,880 It's time to delve into a continuation of our last great topic. 5 00:00:26,879 --> 00:00:30,798 So it's time to continue a bit with our friend, the interactor. 6 00:00:30,798 --> 00:00:34,299 If we think about the interactor and action listeners - so last time we talked 7 00:00:34,299 --> 00:00:38,739 about having buttons and buttons generated action events. Remember that? 8 00:00:38,740 --> 00:00:42,000 So we're going to do a brief review of that and push it a little bit further. 9 00:00:42,000 --> 00:00:46,509 So one of the things we talked about is having your program say in your innate method, 10 00:00:46,509 --> 00:00:50,329 innate, somewhere you might have public, void, 11 00:00:50,329 --> 00:00:54,500 innate and inside here, you would set up the 12 00:00:54,500 --> 00:00:57,469 parts of your program that you want to actually do something like the various 13 00:00:57,469 --> 00:01:00,469 interactors, that when someone clicks on them, something happens. 14 00:01:00,469 --> 00:01:02,609 Then you would say, add 15 00:01:02,609 --> 00:01:07,510 action listeners. What this would do 16 00:01:07,510 --> 00:01:10,469 is basically say, hey, I got some buttons in my program. 17 00:01:10,468 --> 00:01:14,388 I want you to be listening for buttons. So when someone clicks on a button, I want 18 00:01:14,388 --> 00:01:17,848 you to call a particular method for me, called action performed, 19 00:01:17,849 --> 00:01:21,200 and then based on when you call action performed, I'll figure out what 20 00:01:21,200 --> 00:01:23,710 button was clicked and then actually do something. Okay? 21 00:01:23,709 --> 00:01:27,519 So over here, we had our friend, public 22 00:01:27,519 --> 00:01:30,939 void action performed. 23 00:01:30,939 --> 00:01:32,939 And action 24 00:01:32,939 --> 00:01:33,909 performed 25 00:01:33,909 --> 00:01:37,989 would get, as its parameter, something called an action event. 26 00:01:37,989 --> 00:01:39,618 An action event, we'll 27 00:01:39,618 --> 00:01:43,868 just refer to it as E, was basically what it would check to see 28 00:01:43,868 --> 00:01:47,560 what action was actually taken or basically which button was actually clicked. 29 00:01:47,560 --> 00:01:51,219 So hopefully you remember that. That's just a little bit of review from last time. 30 00:01:51,219 --> 00:01:54,109 Now when we've got this action event, and we said there are a couple things you could 31 00:01:54,109 --> 00:01:55,140 do with it. 32 00:01:55,140 --> 00:01:58,250 There was actually one main thing we talked about that you could do with it, and you 33 00:01:58,250 --> 00:02:02,109 could figure out which command was actually the thing that caused this 34 00:02:02,109 --> 00:02:03,429 action event to be generated 35 00:02:03,430 --> 00:02:05,500 by saying, hey, you know what I want to do? 36 00:02:05,500 --> 00:02:09,360 I want to pull out, as a string, and I'll just call it CMD for command, 37 00:02:09,360 --> 00:02:12,420 the command or the name of the interactor 38 00:02:12,419 --> 00:02:15,598 that caused this action performed method to be called. So here I would say 39 00:02:15,598 --> 00:02:16,599 E 40 00:02:16,599 --> 00:02:19,009 dot command equals E dot 41 00:02:19,009 --> 00:02:22,479 get action command. 42 00:02:22,479 --> 00:02:26,158 And what get action command does, it's just a method of 43 00:02:26,158 --> 00:02:30,098 this action event that says, I'll return to you the name of the interactor as a 44 00:02:30,098 --> 00:02:33,039 string, and button's names are basically just whatever display's on the 45 00:02:33,039 --> 00:02:33,609 button. 46 00:02:33,610 --> 00:02:38,240 So then I can have some ifs in here based on this command. If command dot 47 00:02:38,240 --> 00:02:40,909 equals - and I can check for some name that I might want to take some action 48 00:02:40,909 --> 00:02:42,549 based on that button. 49 00:02:42,549 --> 00:02:46,248 It turns out there's something else you can ask this action event, E, for, other 50 00:02:46,248 --> 00:02:47,650 than the action command. 51 00:02:47,650 --> 00:02:51,140 You saw this very briefly last time, and the program that we did, and you're 52 00:02:51,139 --> 00:02:54,269 going to see it a little bit more now. So I want to spend a little bit more time on it. 53 00:02:54,270 --> 00:02:56,729 It's something where you can say, E, 54 00:02:56,729 --> 00:03:00,719 what I want to get from you is not the action command. I want to get the source 55 00:03:00,718 --> 00:03:02,848 of the action. 56 00:03:02,848 --> 00:03:06,988 Now, the interesting thing about what get source returns to you - actually, let me not put the semicolon 57 00:03:06,989 --> 00:03:08,769 here right now - 58 00:03:08,769 --> 00:03:12,748 is get source actually returns to you an object. 59 00:03:12,748 --> 00:03:17,579 It returns to you the object that caused this even to be generated, which means 60 00:03:17,580 --> 00:03:19,809 if a button was clicked, 61 00:03:19,808 --> 00:03:23,408 E dot get action command will get the name of the button. E 62 00:03:23,408 --> 00:03:27,558 dot get source will actually give you a reference to the button object. So 63 00:03:27,558 --> 00:03:31,149 what you're getting back from this is an object. You're getting a reference to that 64 00:03:31,149 --> 00:03:31,679 object. 65 00:03:31,679 --> 00:03:34,818 So what does that mean for you in your everyday life? 66 00:03:34,818 --> 00:03:38,149 What that means is over here, when you want to set up your initialization, 67 00:03:38,150 --> 00:03:40,669 you could say, I want to create a button. 68 00:03:40,669 --> 00:03:43,110 So I'll have some button I want to create. So I'll 69 00:03:43,110 --> 00:03:44,540 say new 70 00:03:44,539 --> 00:03:46,179 J button, 71 00:03:46,179 --> 00:03:50,729 and maybe that button, I want it to say hi on it. Okay? 72 00:03:50,729 --> 00:03:55,489 So one thing I can do is I can say hi equals new J button. Hi, what I'm 73 00:03:55,489 --> 00:03:58,079 going to do is make that an instance variable. 74 00:03:58,079 --> 00:04:02,400 So somewhere down here in my program where I have my I vars, my instance 75 00:04:02,400 --> 00:04:03,140 variables, 76 00:04:03,139 --> 00:04:10,139 I would have private J button hi. So I just do the declaration of a 77 00:04:10,479 --> 00:04:14,280 variable called hi, which is of type J button, and then in my initialization 78 00:04:14,280 --> 00:04:17,718 method, I actually create that button with the label hi on it. 79 00:04:17,718 --> 00:04:20,930 Then I go ahead and add it somewhere to 80 00:04:20,930 --> 00:04:25,090 one of the control bars in my program. So I would say add hi maybe to the south control bar because we 81 00:04:25,089 --> 00:04:28,729 really like adding things to the south control bar. It's just fun when 82 00:04:28,730 --> 00:04:30,450 buttons show up on the bottom of our screen. 83 00:04:30,449 --> 00:04:31,870 So we say add it there, and then 84 00:04:31,870 --> 00:04:35,269 wait for something to happen. So add my action listener in case this button gets 85 00:04:35,269 --> 00:04:36,008 clicked. 86 00:04:36,009 --> 00:04:38,199 Now when the button gets clicked over here, 87 00:04:38,199 --> 00:04:40,180 what I can do 88 00:04:40,180 --> 00:04:41,310 - I could actually 89 00:04:41,310 --> 00:04:42,449 ask command 90 00:04:42,449 --> 00:04:47,460 to get its name. Or I could ask action event to get the action 91 00:04:47,459 --> 00:04:52,089 command name, and then I could say something like if command dot 92 00:04:52,089 --> 00:04:55,739 equals and the name of the particular button over there 93 00:04:55,740 --> 00:04:58,250 happens to be hi, 94 00:04:58,250 --> 00:05:01,379 then there's something I want to do. Maybe I want to print something on the 95 00:05:01,379 --> 00:05:04,639 screen or whatever the case may be. That's one way I could write this, and 96 00:05:04,639 --> 00:05:07,519 that's the classic way that you've seen it written before. 97 00:05:07,519 --> 00:05:09,108 That's the way you saw it last time. 98 00:05:09,108 --> 00:05:13,308 The other way I can write it, with my friend get source, is rather than getting 99 00:05:13,309 --> 00:05:16,879 the name of the command and checking to see if the command is equal to hi, 100 00:05:16,879 --> 00:05:20,960 I can actually say, Maron told me about this thing called 101 00:05:20,959 --> 00:05:24,359 E dot get source. As a matter of fact, I don't even need this line for command 102 00:05:24,360 --> 00:05:27,908 anymore. Let me just comment it out so I don't erase 103 00:05:27,908 --> 00:05:29,538 him. I can say if E 104 00:05:29,538 --> 00:05:33,509 dot get source - this returns an object to me. 105 00:05:33,509 --> 00:05:37,099 I want to check to see if that object that it returns 106 00:05:37,100 --> 00:05:38,509 is my hi button. 107 00:05:38,509 --> 00:05:44,509 So here, I check directly, is it equal to hi, and then I do whatever I 108 00:05:44,509 --> 00:05:47,850 was going to do. So this has exactly the same effect as before. It's checking to 109 00:05:47,850 --> 00:05:49,580 see if I've gotten a button 110 00:05:49,579 --> 00:05:52,329 that is the hi button that was clicked. 111 00:05:52,329 --> 00:05:56,280 So the difference between these two things, if you kind of think about them, 112 00:05:56,279 --> 00:05:57,538 one of them is 113 00:05:57,538 --> 00:06:01,269 I'm just using a name as a string, and the other ones, I'm using the actual 114 00:06:01,269 --> 00:06:02,810 object. Now, 115 00:06:02,810 --> 00:06:06,459 if you think about it more deeply what that means, if I think about the name over 116 00:06:06,459 --> 00:06:10,430 here, if I think just in terms of the name, I never need to be able to 117 00:06:10,430 --> 00:06:12,389 refer to the actual object. 118 00:06:12,389 --> 00:06:15,918 Which means if I don't need to refer to the actual object again over here, I 119 00:06:15,918 --> 00:06:20,109 don't necessarily need it as an instance variable. I only need it as an instance 120 00:06:20,110 --> 00:06:24,250 variable if I'm going to refer to it again in some place that's in a different 121 00:06:24,250 --> 00:06:27,560 method than some other method I may have already used it in. So let me show you an 122 00:06:27,560 --> 00:06:31,399 example of what I mean by that in code to make that more concrete. 123 00:06:31,399 --> 00:06:33,459 So if we come over here to code, 124 00:06:33,459 --> 00:06:36,448 here's essentially the code I just wrote 125 00:06:36,449 --> 00:06:40,189 for basically reacting a button. So it's just the code I wrote on the board, 126 00:06:40,189 --> 00:06:43,339 except I made the font bigger. I create a button with the name hi. 127 00:06:43,339 --> 00:06:46,909 I put it in the southern region, and I add my action listeners to listen for that 128 00:06:46,910 --> 00:06:48,019 button getting clicked. 129 00:06:48,019 --> 00:06:50,280 When the button gets clicked, I say, 130 00:06:50,279 --> 00:06:54,019 is the thing that got clicked this button that I created? Here I actually called it hi 131 00:06:54,019 --> 00:06:57,288 button instead of just hi over there. I shortened it to hi so it'd take up less board 132 00:06:57,288 --> 00:06:57,978 space. 133 00:06:57,978 --> 00:07:02,639 If it's actually the source of that action, is my hi button, then I 134 00:07:02,639 --> 00:07:04,680 will print out hello there. 135 00:07:04,680 --> 00:07:07,399 So I can go ahead and run this program. 136 00:07:07,399 --> 00:07:09,709 If I run this program, this is 137 00:07:09,709 --> 00:07:13,288 - I click hi, I get the same thing I saw before. Every time I click hi, I get 138 00:07:13,288 --> 00:07:14,318 hello there. 139 00:07:14,319 --> 00:07:17,289 Now, alternatively, I could've written this slightly differently, which is the 140 00:07:17,288 --> 00:07:19,769 way you saw it last time. 141 00:07:19,769 --> 00:07:21,990 What I can do here is I can say, 142 00:07:21,990 --> 00:07:25,840 when I'm going to do the add, just go ahead and create that button and add it, 143 00:07:25,839 --> 00:07:30,239 all in one line because I don't need to have some variable that stores the button. 144 00:07:30,240 --> 00:07:33,800 Down here, I don't need to check for the source of 145 00:07:33,800 --> 00:07:35,550 what that action event was. 146 00:07:35,550 --> 00:07:37,939 I'm going to say, action event, 147 00:07:37,939 --> 00:07:39,329 give me your command. 148 00:07:39,329 --> 00:07:42,060 The command is going to be the name of the button, 149 00:07:42,060 --> 00:07:46,220 so I no longer need a variable to actually store a reference to the actual 150 00:07:46,220 --> 00:07:47,930 button object 151 00:07:47,930 --> 00:07:51,019 because this is going to give me the name whenever I need it. So as a 152 00:07:51,019 --> 00:07:53,918 result, notice here I don't have an instance variable. 153 00:07:53,918 --> 00:07:56,589 So this is one of those things that's a tradeoff. It should also give you a 154 00:07:56,589 --> 00:07:59,299 little bit more insight into when you have instance variables versus when you 155 00:07:59,300 --> 00:08:00,819 don't have instance variables. 156 00:08:00,819 --> 00:08:02,959 You need to have the instance variable 157 00:08:02,959 --> 00:08:05,508 in the case, 158 00:08:05,509 --> 00:08:09,959 where you need to - wrong line. 159 00:08:09,959 --> 00:08:11,369 I want the new one. 160 00:08:11,369 --> 00:08:13,810 You want the instance variable in the case where 161 00:08:13,810 --> 00:08:16,360 you want to be able to refer to this variable 162 00:08:16,360 --> 00:08:17,778 in some method 163 00:08:17,778 --> 00:08:21,569 that's different than perhaps the method, which got created. So I 164 00:08:21,569 --> 00:08:23,650 created the button over here, and I stored it somewhere, 165 00:08:23,649 --> 00:08:26,558 but I need to be able to refer to it in some other method, so it's got to be an 166 00:08:26,559 --> 00:08:27,629 instance variable. 167 00:08:27,629 --> 00:08:31,309 If I don't need to refer to it in any other method, which is what I saw in the second 168 00:08:31,309 --> 00:08:34,040 case, 169 00:08:34,039 --> 00:08:37,019 I don't need to refer to it again. As a matter of fact, there's no other place 170 00:08:37,019 --> 00:08:41,149 I need to refer to it after I create it. Then I don't need to store it anywhere. 171 00:08:41,149 --> 00:08:48,149 Any questions about that? 172 00:08:53,679 --> 00:08:56,819 [Inaudible] So that's a bug in your logic. The computer shouldn't try to figure out 173 00:08:56,820 --> 00:09:00,220 which one because if you give it two buttons with the same name, it says, 174 00:09:00,220 --> 00:09:01,879 I have no idea. 175 00:09:01,879 --> 00:09:04,279 It's going to cause you problems, so donft do it. If you want to 176 00:09:04,279 --> 00:09:07,759 see what happens, go ahead and try. It's a bug in logic, not a bug in what 177 00:09:07,759 --> 00:09:10,970 the computer's executing. 178 00:09:10,970 --> 00:09:17,970 Any other questions? Uh huh? [Inaudible]. 179 00:09:19,129 --> 00:09:21,708 It's still going to get the actual button, so 180 00:09:21,708 --> 00:09:25,989 you're saying in this other case over here, 181 00:09:25,990 --> 00:09:29,330 what is this thing going to return if I didn't create a variable over here? 182 00:09:29,330 --> 00:09:32,570 This thing's still going to return some reference to your object. 183 00:09:32,570 --> 00:09:35,990 The only issue for you now, though, is you have no way of checking for equality 184 00:09:35,990 --> 00:09:38,730 with some object. If you don't have this as an instance 185 00:09:38,730 --> 00:09:42,430 variable, you can't check to see if that thing's equal to hi button. So if you 186 00:09:42,429 --> 00:09:45,559 created hi button over here and just immediately added it and never kept track of 187 00:09:45,559 --> 00:09:46,649 it over here, 188 00:09:46,649 --> 00:09:48,129 this guy would return to you 189 00:09:48,129 --> 00:09:51,269 a pointer to hi button, and you'd say great, I got a pointer to hi button. How do you 190 00:09:51,269 --> 00:09:52,310 know it's hi button? 191 00:09:52,309 --> 00:09:55,229 You don't. You have no way of comparing it to the actual hi button you 192 00:09:55,230 --> 00:09:56,070 created. 193 00:09:56,070 --> 00:09:59,110 That's why we need to store it. All right. 194 00:09:59,110 --> 00:10:01,990 So why do I show you these two different ways of doing it? The reason why I show you these 195 00:10:01,990 --> 00:10:05,129 is because now you're going to actually make use of this 196 00:10:05,129 --> 00:10:08,279 with respect to some other interactors that you're actually going to see where we care 197 00:10:08,279 --> 00:10:11,470 about viewing get source as opposed to 198 00:10:11,470 --> 00:10:13,379 the action command. 199 00:10:13,379 --> 00:10:15,620 So what we're going to do next 200 00:10:15,620 --> 00:10:18,649 is we're going to say, you know, a lot of times in programs, what you really want to 201 00:10:18,649 --> 00:10:22,889 have is some way of letting the user have some way to specify 202 00:10:22,889 --> 00:10:24,419 some text 203 00:10:24,419 --> 00:10:27,599 in a program that's running interactively that's not in the console. 204 00:10:27,600 --> 00:10:30,269 They'd like to be able to type something in, so let me just show you an example of 205 00:10:30,269 --> 00:10:31,779 this. 206 00:10:31,779 --> 00:10:35,759 207 00:10:35,759 --> 00:10:39,740 So here's a little program that's go what we refer to as a text field down here, 208 00:10:39,740 --> 00:10:43,019 and I call that name. So if I say, hey, my name's Maron, 209 00:10:43,019 --> 00:10:44,949 it says, hello, Maron. 210 00:10:44,950 --> 00:10:48,800 I say, no, my name is really Sally. 211 00:10:48,799 --> 00:10:50,419 Most of you don't know this. 212 00:10:50,419 --> 00:10:54,269 It says, oh, hello, Sally. It's just some way of being able to 213 00:10:54,269 --> 00:10:55,870 have some text 214 00:10:55,870 --> 00:10:59,019 field over here that the user fills in. This is an interactor, right? This is 215 00:10:59,019 --> 00:11:01,100 just one field. It's not on the console. 216 00:11:01,100 --> 00:11:04,350 Then do some action, and the action we happen to do here is just to write something to 217 00:11:04,350 --> 00:11:05,290 the console 218 00:11:05,289 --> 00:11:07,370 that makes use of the text that 219 00:11:07,370 --> 00:11:09,940 the user actually typed in. 220 00:11:09,940 --> 00:11:12,500 So how do we get something like that to work? 221 00:11:12,500 --> 00:11:13,948 So what we need to do is 222 00:11:13,948 --> 00:11:18,370 have an interactor that's called the text field. 223 00:11:18,370 --> 00:11:21,840 Basically, text field 224 00:11:21,840 --> 00:11:25,950 is just that thing you saw. It's a little place where someone can type some text 225 00:11:25,950 --> 00:11:28,580 as an interactor. So it shows up in one of the control bars, 226 00:11:28,580 --> 00:11:30,889 and then potentially, when they hit enter, 227 00:11:30,889 --> 00:11:35,079 you get some action event that tells you, you need to actually - of if you want, you can 228 00:11:35,078 --> 00:11:37,199 do something with this text. 229 00:11:37,200 --> 00:11:41,670 So that's the basic idea. What you really get is a box, and that's all you get with 230 00:11:41,669 --> 00:11:46,319 it. If want to add a label to that box, like we added name over here, 231 00:11:46,320 --> 00:11:48,620 we need to specify that. 232 00:11:48,620 --> 00:11:51,210 I'll show you how to do that in just a second, but what you get is 233 00:11:51,210 --> 00:11:53,580 the box. The user types in something 234 00:11:53,580 --> 00:11:58,020 and then hits the enter key. Then potentially some event is generated 235 00:11:58,019 --> 00:11:59,590 for you. 236 00:11:59,590 --> 00:12:03,649 So how is that actually set up? So the thing we want to create is a J 237 00:12:03,649 --> 00:12:08,429 text field. It's just another one of these interactor like you saw 238 00:12:08,429 --> 00:12:12,579 before with check boxes and combo boxes and all that stuff. It's just called a J 239 00:12:12,580 --> 00:12:13,370 text field. 240 00:12:13,370 --> 00:12:15,370 I'll name this one TF 241 00:12:15,370 --> 00:12:17,009 to stand for text field. 242 00:12:17,009 --> 00:12:21,799 What you do when you create a new one of these is you say, new J text 243 00:12:21,799 --> 00:12:26,039 field. What you give it as a parameter, and here's the funky thing. 244 00:12:26,039 --> 00:12:27,469 You don't give it its label. 245 00:12:27,470 --> 00:12:30,830 The label doesn't come with the text field. You need to create the label separately. 246 00:12:30,830 --> 00:12:35,389 What you give it is the size of that text field, how big it should be in terms 247 00:12:35,389 --> 00:12:39,299 of the maximum number of characters that would show up in there. So if you say ten, 248 00:12:39,299 --> 00:12:43,309 for example, what you're saying is I want to have some text field that will hold, at most, 249 00:12:43,309 --> 00:12:46,789 ten characters. If you use some font that's variable with it, it automatically 250 00:12:46,789 --> 00:12:50,349 gives you the size of 10 Ms because M is the widest character, in case 251 00:12:50,350 --> 00:12:52,889 you didn't know. That's just life in the city. 252 00:12:52,889 --> 00:12:57,259 Now the funky think about this, relative to this action 253 00:12:57,259 --> 00:12:57,779 performed, 254 00:12:57,779 --> 00:13:00,360 is when the user hits enter, 255 00:13:00,360 --> 00:13:03,990 if I didn't do anything else, you would not actually get this call to action 256 00:13:03,990 --> 00:13:04,620 performed 257 00:13:04,620 --> 00:13:08,289 because action performed is only called for you for buttons. 258 00:13:08,289 --> 00:13:11,639 So what you need to do is after you actually create this text field, you need 259 00:13:11,639 --> 00:13:13,490 to say, you know what, 260 00:13:13,490 --> 00:13:17,430 I need to let you know about this text field as something that can generate 261 00:13:17,429 --> 00:13:20,748 actions. So the way you'd do this, because it looks a little bit funky, 262 00:13:20,749 --> 00:13:22,778 but you tell the text field 263 00:13:22,778 --> 00:13:24,889 dot add 264 00:13:24,889 --> 00:13:29,049 action listener 265 00:13:29,049 --> 00:13:31,689 this. Okay? 266 00:13:31,690 --> 00:13:35,180 You don't need to worry about all the way does that actually mean at a very 267 00:13:35,179 --> 00:13:37,629 low level. All you need to know is you're telling 268 00:13:37,629 --> 00:13:38,700 this text field, 269 00:13:38,700 --> 00:13:40,200 270 00:13:40,200 --> 00:13:42,840 you're going to be able to generate actions now, and the thing that you're 271 00:13:42,840 --> 00:13:46,649 going to let people know when you generate some actions is yourself, which 272 00:13:46,649 --> 00:13:48,899 is why we passed this. 273 00:13:48,899 --> 00:13:52,459 But anytime you create a text field, and you don't just do this once for all text fields. If 274 00:13:52,460 --> 00:13:53,970 you have multiple text fields, 275 00:13:53,970 --> 00:13:57,360 you need to send this add action listener this 276 00:13:57,360 --> 00:13:57,959 message to 277 00:13:57,958 --> 00:14:01,709 each one independently. We only have one here, so we only need to do it once here. 278 00:14:01,710 --> 00:14:03,479 But what this basically does is says, 279 00:14:03,479 --> 00:14:05,250 text field, 280 00:14:05,250 --> 00:14:08,929 you can now generate these action events as well. 281 00:14:08,929 --> 00:14:13,279 So after you create it and you set up this line - and you would want to add it 282 00:14:13,279 --> 00:14:17,470 somewhere into your program. So in your program, you would probably say 283 00:14:17,470 --> 00:14:18,769 add 284 00:14:18,769 --> 00:14:22,649 TF, and we might add TF, for example, in the south because we add everything 285 00:14:22,649 --> 00:14:25,220 in the south. 286 00:14:25,220 --> 00:14:29,800 When someone types something in to TF and hits enter, then it will generate some 287 00:14:29,799 --> 00:14:34,669 call to action event for you or action performed and pass you an action event. Now 288 00:14:34,669 --> 00:14:37,279 once that gets set up, 289 00:14:37,279 --> 00:14:39,980 how do you actually figure out 290 00:14:39,980 --> 00:14:43,700 what was the text field that generated this event. You could have 291 00:14:43,700 --> 00:14:47,030 multiple text fields that someone could've typed into and hit the enter key. 292 00:14:47,029 --> 00:14:50,839 What you're going to do is you're going to add E dot get source. 293 00:14:50,840 --> 00:14:54,740 So inside here, what you're going to say is if 294 00:14:54,740 --> 00:14:57,769 E dot get source 295 00:14:57,769 --> 00:15:00,139 is equal to 296 00:15:00,139 --> 00:15:03,809 TF. At this point, all kinds of warning bells should go off for you. So maybe 297 00:15:03,809 --> 00:15:07,039 inside here, you want to do a printlin 298 00:15:07,039 --> 00:15:11,549 where you want to say hi and then add to it the text that's in that text box. 299 00:15:11,549 --> 00:15:15,359 The way you do that is you just say the name of whatever the text field is and 300 00:15:15,360 --> 00:15:20,600 the message you send it is get text. What it will give you back 301 00:15:20,600 --> 00:15:24,119 is it will just return to you this thing by itself. It just returns a string 302 00:15:24,119 --> 00:15:27,200 of whatever is in that box when the user hits enter. 303 00:15:27,200 --> 00:15:30,440 So this will write out hi and then whatever text you typed in, just like you 304 00:15:30,440 --> 00:15:32,789 saw in the program. Except that was writing hello, 305 00:15:32,788 --> 00:15:34,419 and maybe that's what we want to do. 306 00:15:34,419 --> 00:15:37,860 But the warning bells that should be going off now, what's the problem if I've just 307 00:15:37,860 --> 00:15:43,820 written a code like this? [Inaudible] 308 00:15:43,820 --> 00:15:47,390 It's not an instance variable, right? So I have no way, if this is my innate method 309 00:15:47,389 --> 00:15:50,960 over here, of being able to refer to TF again 310 00:15:50,960 --> 00:15:51,840 out here. 311 00:15:51,840 --> 00:15:56,610 So I need to create the instance variable, right? If this is my innate method, and I have 312 00:15:56,610 --> 00:15:59,450 public void innate in front of it. 313 00:15:59,450 --> 00:16:04,110 What I need to do is this TF, somewhere else in my class, let's say over here, 314 00:16:04,110 --> 00:16:07,629 which is where I declare my I bars. It's just lower down in the 315 00:16:07,629 --> 00:16:08,139 class somewhere. 316 00:16:08,139 --> 00:16:11,990 I need to actually have private 317 00:16:11,990 --> 00:16:12,830 J 318 00:16:12,830 --> 00:16:14,070 text 319 00:16:14,070 --> 00:16:15,280 field 320 00:16:15,279 --> 00:16:19,059 TF. Then over here, rather than declaring it, 321 00:16:19,059 --> 00:16:22,888 I just create the new TF. So I need to set it up as an instance variable, 322 00:16:22,889 --> 00:16:25,649 just like you saw in the example with the buttons. The same kind of thing's 323 00:16:25,649 --> 00:16:26,870 going on here, 324 00:16:26,870 --> 00:16:28,750 except it's a text field. 325 00:16:28,750 --> 00:16:35,320 So let me show you an example of this code in action. 326 00:16:35,320 --> 00:16:38,800 So here's a little text field example. What I'm going to do is I'm going to 327 00:16:38,799 --> 00:16:41,639 extend the console program. So I'm still going to have a console. 328 00:16:41,639 --> 00:16:43,730 In my innate, I'm going to have 329 00:16:43,730 --> 00:16:48,149 something called name field. What's name field? It's just a private J text field. 330 00:16:48,149 --> 00:16:51,669 It's an instance variable, so I can save off name field. 331 00:16:51,669 --> 00:16:55,279 Name field, I initialized over here to be some new J text field of size ten. 332 00:16:55,279 --> 00:16:57,759 This is exactly the code you just saw over there. 333 00:16:57,759 --> 00:17:01,250 Now what I also want to do, here's the one extra funkiness in the program. I want 334 00:17:01,250 --> 00:17:05,959 to give that box a label. So before I add this box to my control bar, 335 00:17:05,959 --> 00:17:10,548 I'm going to add a new J label that just says name. So all J label does, it just says 336 00:17:10,548 --> 00:17:13,480 I'm going to create something that's just this name 337 00:17:13,480 --> 00:17:16,730 or just this particular piece of text. The text happens to be name, and I'm 338 00:17:16,730 --> 00:17:18,000 going to add that 339 00:17:18,000 --> 00:17:19,880 to my southern control bar. 340 00:17:19,880 --> 00:17:23,160 So first it's just going to write name out there, and then after I write name, 341 00:17:23,160 --> 00:17:27,600 I'm going to add my name field, which is going to create the box after name. 342 00:17:27,599 --> 00:17:30,389 Then I'm going to do exactly what I told you 343 00:17:30,390 --> 00:17:32,280 where you have to tell name field, 344 00:17:32,279 --> 00:17:35,160 you're going to add action listeners of yourself 345 00:17:35,160 --> 00:17:36,820 so that if you do anything, 346 00:17:36,819 --> 00:17:38,259 you're going to let 347 00:17:38,259 --> 00:17:41,799 someone else know that you actually have done some action when the user types 348 00:17:41,799 --> 00:17:43,808 into you and hits enter. 349 00:17:43,808 --> 00:17:46,609 That means action performed is going to get called for you because now you're 350 00:17:46,609 --> 00:17:50,209 going to be able to generate events to an action listener. 351 00:17:50,210 --> 00:17:51,528 In action performed, 352 00:17:51,528 --> 00:17:55,109 we check E dot get source. We can compare against name field because we 353 00:17:55,109 --> 00:17:57,619 have that saved off down here as an instance variable. 354 00:17:57,619 --> 00:18:01,719 We'll just write out hello and then the text associated with name field. 355 00:18:01,720 --> 00:18:03,750 Let me 356 00:18:03,750 --> 00:18:06,109 increase the text size, here, 357 00:18:06,109 --> 00:18:09,309 just so it's a little bit bigger and we can see what's going on. 358 00:18:09,309 --> 00:18:11,029 359 00:18:11,029 --> 00:18:14,639 We'll do Courier 360 00:18:14,640 --> 00:18:17,090 24. Make it bigger. 361 00:18:17,089 --> 00:18:22,389 362 00:18:22,390 --> 00:18:24,740 So here, once again, Maron, 363 00:18:24,740 --> 00:18:28,509 hello, Maron. See? It knows it's getting the event when I hit enter. 364 00:18:28,509 --> 00:18:32,920 Enter, enter, enter. See, that text just stays there. 365 00:18:32,920 --> 00:18:36,860 It's another one of those things. It's only so much fun. 366 00:18:36,859 --> 00:18:39,158 Sally, we're scrolling. 367 00:18:39,159 --> 00:18:43,539 Not a whole lot of excitement going on here. This is good for about two minutes. 368 00:18:43,538 --> 00:18:44,970 369 00:18:44,970 --> 00:18:48,650 So we can go ahead and do it this way. Now you can get information from a 370 00:18:48,650 --> 00:18:49,740 text box. 371 00:18:49,740 --> 00:18:52,259 Any questions about the text box? 372 00:18:52,259 --> 00:18:56,500 Yeah, in the back? [Inaudible]? 373 00:18:56,500 --> 00:19:00,380 Yeah, so basically the way the layout works is every time you add things, they just 374 00:19:00,380 --> 00:19:03,320 get added sequentially from left to right in whatever region you're adding 375 00:19:03,319 --> 00:19:06,878 them to. In this case, the southern region, and the whole set of stuff gets centered. 376 00:19:06,878 --> 00:19:10,519 So if you want to space stuff out, what you actually need to do or add, for example, 377 00:19:10,519 --> 00:19:14,288 more J labels, they might just have more spaces in them. That will create more spaces 378 00:19:14,288 --> 00:19:17,628 between stuff. There's no way I can hit you. I'll just leave it here, and you can pick 379 00:19:17,628 --> 00:19:19,990 it up after class. 380 00:19:19,990 --> 00:19:23,490 So there's one other things that we can do that's kind of funky. We can actually name 381 00:19:23,490 --> 00:19:25,970 the text field. So 382 00:19:25,970 --> 00:19:29,089 you might say, but Maron, this whole get source thing, keeping it on 383 00:19:29,089 --> 00:19:31,579 the instance variable, I'm not so keen on that. 384 00:19:31,579 --> 00:19:35,399 What I am kind of more keen on is giving things names so I can just refer to them 385 00:19:35,400 --> 00:19:38,798 by their name. That's cool. You can have a name. 386 00:19:38,798 --> 00:19:42,490 So here's that exactly same example, slightly differently. What I'm going to do 387 00:19:42,490 --> 00:19:43,160 is I'm going to 388 00:19:43,160 --> 00:19:47,538 add just one more line here. So this is exactly the same code I had before, 389 00:19:47,538 --> 00:19:50,230 except after I create the name field, I say, hey, 390 00:19:50,230 --> 00:19:53,400 I'm going to give you 391 00:19:53,400 --> 00:19:57,540 an action command, and your action command is going to be name. 392 00:19:57,539 --> 00:20:02,000 So whenever you generate these events, yeah, I can check to see if 393 00:20:02,000 --> 00:20:04,619 the source of that event is you. 394 00:20:04,619 --> 00:20:06,109 Or, if I've given you a name, 395 00:20:06,109 --> 00:20:10,529 I can do the same thing I just did with buttons. Down here, I can get 396 00:20:10,529 --> 00:20:14,538 action command. That gives me the string, which is the name of the object that 397 00:20:14,538 --> 00:20:15,650 created this event. 398 00:20:15,650 --> 00:20:20,560 I can see if it's equal to name, which is the name that I gave it. 399 00:20:20,559 --> 00:20:23,289 So this just shows you a little back and forth. With the buttons, I kind of show 400 00:20:23,289 --> 00:20:26,720 you, with buttons, you just name them because you always name buttons and 401 00:20:26,720 --> 00:20:27,989 you check against names. 402 00:20:27,989 --> 00:20:29,519 You could actually 403 00:20:29,519 --> 00:20:31,970 check against the source of the button if you wanted to. J 404 00:20:31,970 --> 00:20:35,229 text fields, it's kind of backwards. J text field, you always, 405 00:20:35,229 --> 00:20:38,528 in some sense, have the text field that you can get with get source, but if you 406 00:20:38,528 --> 00:20:42,249 want to refer to it by name, you have to explicitly give it a name because name 407 00:20:42,249 --> 00:20:45,528 doesn't show up as part of it. If we want the label, we still need to add 408 00:20:45,528 --> 00:20:47,440 this separate label name over here. 409 00:20:47,440 --> 00:20:50,909 This is just naming the particular event that comes from that box. That's 410 00:20:50,909 --> 00:20:52,050 all it does. 411 00:20:52,049 --> 00:20:59,049 Any questions about that? [Inaudible]. 412 00:21:01,109 --> 00:21:04,079 That's the maximum amount it shows. 413 00:21:04,079 --> 00:21:09,369 [Inaudible]. 414 00:21:09,369 --> 00:21:12,619 Yeah, name field is still an I var here. It's really actually no longer necessary 415 00:21:12,619 --> 00:21:17,489 because I don't need to refer to it over here. So I wanted to, I could just 416 00:21:17,490 --> 00:21:21,359 do this. A little cut and paste. Thanks, I vars, thanks for playing. That's real 417 00:21:21,359 --> 00:21:23,389 nice of you. 418 00:21:23,390 --> 00:21:26,490 419 00:21:26,490 --> 00:21:28,220 Yeah. Oh, no, I can't. 420 00:21:28,220 --> 00:21:33,309 That's why I had it in here. I still need to refer to it over here to get 421 00:21:33,309 --> 00:21:36,690 this text. To be honest, actually, what I could do is I could just 422 00:21:36,690 --> 00:21:40,360 call E get source here and get its source and then get its text. So I really don't 423 00:21:40,359 --> 00:21:41,098 need to, 424 00:21:41,098 --> 00:21:43,838 but it's just better stock because it makes it cleaner that I'm getting the text here. So 425 00:21:43,838 --> 00:21:45,159 there is a way around it, 426 00:21:45,160 --> 00:21:49,060 but the cleaner way is to actually do it this way. Let 427 00:21:49,059 --> 00:21:49,940 me 428 00:21:49,940 --> 00:21:52,100 get rid of 429 00:21:52,099 --> 00:21:53,329 that. 430 00:21:53,329 --> 00:22:00,329 So any questions about that J text field? [Inaudible]. 431 00:22:01,950 --> 00:22:03,980 Oh, yeah. 432 00:22:03,980 --> 00:22:05,048 You 433 00:22:05,048 --> 00:22:09,730 can. I'll show you that in about 20 minutes. 434 00:22:09,730 --> 00:22:12,909 And three seats away. Before we get there, 435 00:22:12,909 --> 00:22:15,120 it's time for something 436 00:22:15,119 --> 00:22:18,459 completely different is to say - it kind of gets to the question in the 437 00:22:18,460 --> 00:22:19,909 back of the room. 438 00:22:19,909 --> 00:22:22,519 These things are all sort of showing up centered on the bottom on 439 00:22:22,519 --> 00:22:26,429 the screen. Could I actually have these interactors laid out a different way 440 00:22:26,429 --> 00:22:30,450 than this way that they're getting laid out for me. In fact, you can, and 441 00:22:30,450 --> 00:22:34,970 strangely enough, the thing you use to do that is called a layout. 442 00:22:34,970 --> 00:22:39,319 So a layout controls the layout of the particular interactors. It turns 443 00:22:39,319 --> 00:22:42,618 out, when you used your friend, the console program, 444 00:22:42,618 --> 00:22:45,089 or your friend the graphics program, 445 00:22:45,089 --> 00:22:48,529 what you got was a layout that was called the border layout. As a matter of 446 00:22:48,529 --> 00:22:50,700 fact, you already saw the border layout. 447 00:22:50,700 --> 00:22:54,819 You saw the border layout last time. It looked like this. 448 00:22:54,819 --> 00:22:58,599 You had some center region. You had a north, south, east and west borders, 449 00:22:58,599 --> 00:23:01,719 which is why this thing's called the border layout. 450 00:23:01,720 --> 00:23:02,759 451 00:23:02,759 --> 00:23:04,150 452 00:23:04,150 --> 00:23:07,370 What happened with this border layout 453 00:23:07,369 --> 00:23:11,829 454 00:23:11,829 --> 00:23:14,439 is that the center was where all the action takes place. 455 00:23:14,440 --> 00:23:18,629 The console program would add a console to the center automatically. That's 456 00:23:18,628 --> 00:23:22,928 just what happens in a console program. And a graphics program would add a G canvas 457 00:23:22,929 --> 00:23:26,210 to the center automatically, which is where you're going to draw all your stuff. 458 00:23:26,210 --> 00:23:30,380 The other regions are only visible if you add stuff do them. So in the very 459 00:23:30,380 --> 00:23:32,440 early days, when you had a graphics program 460 00:23:32,440 --> 00:23:36,039 that was all just graphics, you would say, hey, nothing showed up in the 461 00:23:36,039 --> 00:23:36,980 south region. 462 00:23:36,980 --> 00:23:39,390 Yeah, because we didn't put any interactors there. So 463 00:23:39,390 --> 00:23:43,860 these interactor regions only show up if we actually put interactors on them. 464 00:23:43,859 --> 00:23:47,099 We said these are referred to as control bars. So you saw these last time. 465 00:23:47,099 --> 00:23:50,939 How do I consider different kinds of layouts? So there's a couple other 466 00:23:50,940 --> 00:23:55,049 layouts to also think about. There's something called a grid layout. 467 00:23:55,049 --> 00:23:59,940 The way a grid layout works is you actually create and object called 468 00:23:59,940 --> 00:24:04,220 the grid layout, and you specify in that grid layout how many rows and 469 00:24:04,220 --> 00:24:06,298 columns are in the grid layout. So 470 00:24:06,298 --> 00:24:10,219 we might say two rows and three columns, which means we're going to have a layout 471 00:24:10,219 --> 00:24:14,130 that looks something like this. It's just a grid with two rows and three columns. 472 00:24:14,130 --> 00:24:17,070 I'll show you the code for this in just a second so we can get into the nitty gritty 473 00:24:17,069 --> 00:24:17,798 details. 474 00:24:17,798 --> 00:24:19,690 Conceptually, here's what it is. 475 00:24:19,690 --> 00:24:24,110 Now, when I add items, what I do is I say, you know what, I want to set my 476 00:24:24,109 --> 00:24:26,319 layout to be this grid layout. 477 00:24:26,319 --> 00:24:31,058 What now happens when I add items is it will add items, the items being the 478 00:24:31,058 --> 00:24:32,028 interactors, one by 479 00:24:32,028 --> 00:24:37,169 one, starting at the topmost row and the leftmost 480 00:24:37,169 --> 00:24:37,690 square. 481 00:24:37,690 --> 00:24:42,028 Every time I add a new element, it moves over by one until I get to the end 482 00:24:42,028 --> 00:24:45,878 of the row, and then it automatically comes down. It goes sequentially across, row 483 00:24:45,878 --> 00:24:46,980 by row. 484 00:24:46,980 --> 00:24:49,659 It allows me to sort of lay things out in a grid 485 00:24:49,659 --> 00:24:52,709 if I want to actually be able to do things in a grid. So let me show you an 486 00:24:52,709 --> 00:24:56,090 example of what a grid layout might look like. 487 00:24:56,089 --> 00:24:58,919 488 00:24:58,920 --> 00:25:00,048 So grid layout, 489 00:25:00,048 --> 00:25:04,329 here's a simple program that does it. What we do is we start off in our 490 00:25:04,329 --> 00:25:05,648 innate method by saying 491 00:25:05,648 --> 00:25:08,309 I want to create a layout. 492 00:25:08,309 --> 00:25:11,919 So I want to set the existing layout that the program is going to use to be a 493 00:25:11,920 --> 00:25:16,420 new grid layout that's two, three. Two rows by three columns. 494 00:25:16,420 --> 00:25:19,870 Now one thing that's interesting about this program, if you look at grid layout 495 00:25:19,869 --> 00:25:20,399 example, 496 00:25:20,400 --> 00:25:22,788 it does not extend console program. 497 00:25:22,788 --> 00:25:26,739 It does not extend graphics program. These are not 498 00:25:26,739 --> 00:25:29,420 its beautiful house and its beautiful wife and children. 499 00:25:29,420 --> 00:25:31,230 What have I done? 500 00:25:31,230 --> 00:25:35,160 What I've done is said I'm just going to extend the program. I don't want you to 501 00:25:35,160 --> 00:25:39,000 create a console for me, and I don't want you to create a G canvas for me. 502 00:25:39,000 --> 00:25:42,319 I want to take up the whole screen with my buttons, baby, 503 00:25:42,319 --> 00:25:44,558 so that's what I'm going to do. I'm going to 504 00:25:44,558 --> 00:25:45,509 add 505 00:25:45,509 --> 00:25:48,799 six new buttons, and these buttons are just going to get sequentially added in the 506 00:25:48,799 --> 00:25:52,528 order that you saw. Then I'm going to say add my action listeners. 507 00:25:52,528 --> 00:25:54,950 I'm not going to do anything. I'm just going to ignore the buttons. 508 00:25:54,950 --> 00:25:56,600 The reason why I'm doing this 509 00:25:56,599 --> 00:26:01,939 is I just want to see some big, fat buttons. 510 00:26:01,940 --> 00:26:04,720 Yeah. Look at that. 511 00:26:04,720 --> 00:26:07,970 Six buttons that take up the whole screen. 512 00:26:07,970 --> 00:26:09,110 It's a grid. 513 00:26:09,109 --> 00:26:11,689 My interactors fill up the grid. 514 00:26:11,690 --> 00:26:16,029 The layout takes up as much space as possible in the screen. More 515 00:26:16,029 --> 00:26:20,160 importantly, each of the interactors that I put into a grid cell takes up as 516 00:26:20,160 --> 00:26:24,029 much cells, as much space as possible. So this button comes along. 517 00:26:24,029 --> 00:26:24,740 518 00:26:24,740 --> 00:26:29,400 Oh, yeah, I got so much space. You're like, why does it do this? This is 519 00:26:29,400 --> 00:26:34,050 the most brain-damaged thing ever. I don't need a two inch by three-inch button. The reason why is - how 520 00:26:34,049 --> 00:26:37,460 521 00:26:37,460 --> 00:26:39,659 did you find that so 522 00:26:39,659 --> 00:26:42,000 quickly. We won't talk about it right now. 523 00:26:42,000 --> 00:26:43,288 Maybe afterwards. 524 00:26:43,288 --> 00:26:47,528 It's like having a sound effects guy. 525 00:26:47,528 --> 00:26:52,720 Check this out as I resize the window. All buttons small and cute, big buttons. 526 00:26:52,720 --> 00:26:53,400 That's why we 527 00:26:53,400 --> 00:26:57,530 have layout managers because the layout managers just give conceptual - it says, 528 00:26:57,529 --> 00:26:59,269 this is how your layout's going to be. 529 00:26:59,269 --> 00:27:02,950 It says, I'm going to handle all the dynamics of resizing and all that stuff 530 00:27:02,950 --> 00:27:04,919 for you because people resize the window. 531 00:27:04,919 --> 00:27:08,139 But I need to know how things are laid out. If you give me more space 532 00:27:08,138 --> 00:27:11,369 than I need, I'm just going to take it up. 533 00:27:11,369 --> 00:27:15,049 Grid layout, not so useful, just something to see. If you see it in 534 00:27:15,049 --> 00:27:17,389 the book, you know what it's talking about. 535 00:27:17,390 --> 00:27:18,799 There's another kind of layout 536 00:27:18,798 --> 00:27:20,700 which is called a table layout. 537 00:27:20,700 --> 00:27:23,690 There's actually another kind of layout called the flow layout. We're not going to talk about it, 538 00:27:23,690 --> 00:27:25,960 539 00:27:25,960 --> 00:27:28,460 but there's something called a table layout. 540 00:27:28,460 --> 00:27:34,100 A table layout is basically just like a grid layout except for the niceties. So 541 00:27:34,099 --> 00:27:36,859 you also give it a number of rows and columns, 542 00:27:36,859 --> 00:27:40,229 except what it says is rather than having each one of the interactors fill 543 00:27:40,230 --> 00:27:42,849 up itself, the maximum possible size, 544 00:27:42,849 --> 00:27:46,798 I'm just going to give that interactor as much space as it needs in that cell 545 00:27:46,798 --> 00:27:48,509 and no more. 546 00:27:48,509 --> 00:27:50,158 So what does that mean? 547 00:27:50,159 --> 00:27:53,609 That means if I come in here, rather than a grid layout, I say I want to create a 548 00:27:53,608 --> 00:27:55,569 new table layout, 549 00:27:55,569 --> 00:28:00,210 and I run this - I need 550 00:28:00,210 --> 00:28:04,009 to add more imports. 551 00:28:04,009 --> 00:28:06,009 Let 552 00:28:06,009 --> 00:28:11,869 me just grab imports from over here. 553 00:28:11,869 --> 00:28:18,869 554 00:28:24,710 --> 00:28:26,660 555 00:28:26,660 --> 00:28:30,790 556 00:28:30,789 --> 00:28:33,799 Come on 557 00:28:33,799 --> 00:28:39,859 table layout. 558 00:28:39,859 --> 00:28:41,248 Let me just show you the 559 00:28:41,249 --> 00:28:48,089 nicer example of table 560 00:28:48,089 --> 00:28:50,039 layout. 561 00:28:50,039 --> 00:28:50,730 Sometimes in life, 562 00:28:50,730 --> 00:28:54,420 you just got to get ugly with it. 563 00:28:54,420 --> 00:28:57,019 We got ugly with it. Oh, 564 00:28:57,019 --> 00:28:57,950 table layout? 565 00:28:57,950 --> 00:29:00,069 There's table layout. 566 00:29:00,069 --> 00:29:01,460 Six buttons still. 567 00:29:01,460 --> 00:29:04,659 We can still resize the window, but the buttons are just given as much size as 568 00:29:04,659 --> 00:29:07,190 they would actually need. They don't fill up the whole 569 00:29:07,190 --> 00:29:10,200 region that they actually want. So 570 00:29:10,200 --> 00:29:13,019 table layout's actually something slightly more useful for us than grid layout. 571 00:29:13,019 --> 00:29:15,239 This question came up before which was, 572 00:29:15,239 --> 00:29:19,029 can I actually link buttons and text fields together 573 00:29:19,029 --> 00:29:22,589 to create something a little bit more funky? In fact, I can do that, and I'm 574 00:29:22,589 --> 00:29:26,358 going to show you that in a context of something a little bit more interesting. 575 00:29:26,358 --> 00:29:29,408 It's a program that allows for conversion in temperature. So this one's 576 00:29:29,409 --> 00:29:31,989 actually in the book. I didn't give you the code because the 577 00:29:31,989 --> 00:29:35,809 code is all in the book. So I didn't give it to you on a separate handout. Basically, 578 00:29:35,809 --> 00:29:39,329 the idea is we write out a label called degrees Fahrenheit, a label called 579 00:29:39,329 --> 00:29:40,528 degrees Celsius, 580 00:29:40,528 --> 00:29:44,298 and inside here, we can type in some value. If we click Fahrenheit to 581 00:29:44,298 --> 00:29:44,680 Celsius, 582 00:29:44,680 --> 00:29:46,240 it will automatically 583 00:29:46,240 --> 00:29:50,538 fill in the Celsius field with the corresponding value. So 32 is zero Celsius. 584 00:29:50,538 --> 00:29:52,819 The other thing that's kind of funky is I don't necessarily have to click the 585 00:29:52,819 --> 00:29:56,079 button. I can type in, say, some value and hit enter, 586 00:29:56,079 --> 00:29:57,549 and that's just like 587 00:29:57,549 --> 00:30:00,038 clicking the button. 588 00:30:00,038 --> 00:30:02,900 Interesting. So how do I create this program? Well, if you think about this 589 00:30:02,900 --> 00:30:07,220 program, first thing I'm going to need is these things are not supersized, but they're 590 00:30:07,220 --> 00:30:10,500 all laid out in a grid. So I'm going to need a table layout 591 00:30:10,500 --> 00:30:13,039 that has two rows and three columns. 592 00:30:13,039 --> 00:30:14,389 The first 593 00:30:14,390 --> 00:30:17,360 element that I have here is just a label. Then I'm going to have a field 594 00:30:17,359 --> 00:30:20,769 that's a text field. As a matter of fact, I'm going to have a specialized kind of text field. 595 00:30:20,769 --> 00:30:22,970 There's two specialized kinds of text fields. 596 00:30:22,970 --> 00:30:25,419 Something called an intfield and a double field. 597 00:30:25,419 --> 00:30:29,570 They work just like text fields except you're guaranteed to get an integer 598 00:30:29,569 --> 00:30:32,838 value or a double value from them. You might ask what happens if 599 00:30:32,838 --> 00:30:37,460 someone types in A and wants to convert A to a temperature? Oh, 600 00:30:37,460 --> 00:30:40,529 I clicked the wrong button. I want to convert A to a temperature. 601 00:30:40,529 --> 00:30:43,899 It says enter an integer, and it brings up this pop-up box and gets in their 602 00:30:43,900 --> 00:30:45,880 face. Then you say, sorry, my bad. 603 00:30:45,880 --> 00:30:48,720 So it guarantees you get an 604 00:30:48,720 --> 00:30:51,690 integer. Then I'm going to have a button, and somehow, I want to link the button and 605 00:30:51,690 --> 00:30:53,828 the text fields to do the same action. 606 00:30:53,828 --> 00:30:56,418 So let me show you the code for that. It's actually a lot shorter than it looks. 607 00:30:56,419 --> 00:30:57,560 608 00:30:57,559 --> 00:31:01,389 First thing I'm going to do is set the layout to be a table layout. Notice once 609 00:31:01,390 --> 00:31:05,100 again here, I'm extending a program because I donft want a console or a canvas 610 00:31:05,099 --> 00:31:05,859 created for me. 611 00:31:05,859 --> 00:31:08,299 I want to be able to specify the whole layout, 612 00:31:08,299 --> 00:31:09,819 so I'm just extending a program. 613 00:31:09,819 --> 00:31:13,538 I set the layout to be a table layout, 2, 614 00:31:13,538 --> 00:31:16,379 3. Again, we're going to go sequentially through all the elements. So what I want 615 00:31:16,380 --> 00:31:18,760 to have in the first 616 00:31:18,759 --> 00:31:19,569 element, 617 00:31:19,569 --> 00:31:23,059 the first thing I'm going to add to my layout, I don't specify until I'm down 618 00:31:23,059 --> 00:31:25,849 here. The first thing I'm going to add to my layout is 619 00:31:25,849 --> 00:31:28,169 degrees Fahrenheit as a label. 620 00:31:28,170 --> 00:31:31,440 Then I'm going to add some Fahrenheit field. How did I create that 621 00:31:31,440 --> 00:31:33,809 Fahrenheit field? I actually created it up here. 622 00:31:33,809 --> 00:31:35,359 What I did, 623 00:31:35,359 --> 00:31:39,269 first, was declaring it as an instance variable. So Fahrenheit field is an 624 00:31:39,269 --> 00:31:43,259 intfield, not a J text field, but an intfield, which is just a specialization of a 625 00:31:43,259 --> 00:31:44,240 J text field 626 00:31:44,240 --> 00:31:47,480 to just give you that integer. Other than that, it works just like a text field 627 00:31:47,480 --> 00:31:50,430 except here, I just wanted to show you intfield, so it's an intfield. 628 00:31:50,430 --> 00:31:54,549 So I create a new intfield. I specify its initial value, 629 00:31:54,549 --> 00:31:55,980 not its initial size. 630 00:31:55,980 --> 00:31:59,049 Its initial value is 32. 631 00:31:59,049 --> 00:32:01,648 Then what I say is Fahrenheit field, 632 00:32:01,648 --> 00:32:03,768 I'm going to set your action command 633 00:32:03,769 --> 00:32:07,778 so that when you generate actions, the name associated with the actions that 634 00:32:07,778 --> 00:32:08,788 you generate 635 00:32:08,788 --> 00:32:10,619 is going to be F 636 00:32:10,619 --> 00:32:14,079 dash greater than, which you can just think of arrow, C. 637 00:32:14,079 --> 00:32:17,099 That's going to be your name. So I set its name, and then I say you're going to 638 00:32:17,099 --> 00:32:18,899 generate action events, 639 00:32:18,900 --> 00:32:21,870 so I'm going to add an action listener to you of yourself. 640 00:32:21,869 --> 00:32:25,409 Just like you saw before with the text [inaudible], except now we're dealing with an intfield. 641 00:32:25,410 --> 00:32:28,259 We do exactly that same thing with something called the Celsius field. 642 00:32:28,259 --> 00:32:30,618 Celsius field is also declared to be an intfield. 643 00:32:30,618 --> 00:32:35,788 It starts off with an initial value of zero. We set its action command to be C goes to 644 00:32:35,788 --> 00:32:39,169 F as opposed to F goes to C. So we give it a slightly different name, 645 00:32:39,169 --> 00:32:42,559 and we also set it to listen to action events 646 00:32:42,558 --> 00:32:44,500 or to generate action events. 647 00:32:44,500 --> 00:32:47,529 Then we're going to lay out our grid. So first element to the grid is 648 00:32:47,529 --> 00:32:49,769 the label, as we talked about before. 649 00:32:49,769 --> 00:32:52,979 Next element to our grid is our little text box that's going to actually have 650 00:32:52,979 --> 00:32:54,600 the numeric value in it. 651 00:32:54,599 --> 00:32:58,288 Last element of our grid on the first row of the grid 652 00:32:58,288 --> 00:33:02,079 is a button thatfs name is F goes to C. 653 00:33:02,079 --> 00:33:05,740 And you look at this, and you say, hey, if I have a button that's name is 654 00:33:05,740 --> 00:33:10,390 F goes to C, and I named this guy F goes to C, 655 00:33:10,390 --> 00:33:13,570 aren't I getting back to the previous point over here of - wasn't this the 656 00:33:13,569 --> 00:33:17,460 logical problem where I actually have two elements that have the same name? 657 00:33:17,460 --> 00:33:21,670 Yeah, I have two elements that have the same name, but I want to do exactly the same 658 00:33:21,670 --> 00:33:24,940 thing in both cases, so it doesn't make a difference. 659 00:33:24,940 --> 00:33:27,588 So what I want to do is say if someone clicks the button, 660 00:33:27,588 --> 00:33:29,989 I'm going to do the conversion. So I'm going to have some code that's going to do 661 00:33:29,989 --> 00:33:30,900 the conversion. 662 00:33:30,900 --> 00:33:33,820 If someone types something into the text field and hits enter, 663 00:33:33,819 --> 00:33:35,619 I'm going to do the same thing. 664 00:33:35,619 --> 00:33:38,479 So this is something you'd see a lot of times on the web where, for example, if 665 00:33:38,480 --> 00:33:41,740 there's a search engine you use, you can type in the search engine and click search, 666 00:33:41,740 --> 00:33:45,329 or you can just hit enter. How many people actually click the search button? 667 00:33:45,329 --> 00:33:48,490 One. How many just hit enter. 668 00:33:48,490 --> 00:33:51,839 Yeah. Isn't it nice that you can just hit enter? Yeah. 669 00:33:51,839 --> 00:33:54,269 That's the same thing we're doing in this program. That's why we went 670 00:33:54,269 --> 00:33:57,480 through this extra rigamarole of setting this action command here because sometimes it's just nice to 671 00:33:57,480 --> 00:34:01,079 hit 672 00:34:01,079 --> 00:34:03,689 enter. We do exactly the same thing for degrees Celsius. 673 00:34:03,690 --> 00:34:07,690 So we add the label, degrees Celsius, we add the Celsius 674 00:34:07,690 --> 00:34:11,490 field, and then we create a new button whose name is the same as the action 675 00:34:11,489 --> 00:34:13,019 command for the Celsius field. 676 00:34:13,019 --> 00:34:16,650 Then we add action listeners. So that sets up our entire user interface or our 677 00:34:16,650 --> 00:34:19,139 entire graphical user interface, or the 678 00:34:19,139 --> 00:34:21,900 GUI. Then when the user clicks on a button, we say, 679 00:34:21,900 --> 00:34:25,420 let me get the action command. If the action command is F goes to C, which 680 00:34:25,420 --> 00:34:28,378 means either they typed something into the Fahrenheit field and hit enter 681 00:34:28,378 --> 00:34:29,699 or they clicked the button, 682 00:34:29,699 --> 00:34:32,708 then I'll get the value in the Fahrenheit field 683 00:34:32,708 --> 00:34:36,668 because Fahrenheit field is an integer field. It just always gives me back an integer. 684 00:34:36,668 --> 00:34:39,759 And I do a little bit of math. If you don't know the math conversion from 685 00:34:39,760 --> 00:34:41,539 Fahrenheit to Celsius, 686 00:34:41,539 --> 00:34:44,519 donft worry about it. This is just how you convert from Fahrenheit to Celsius. 687 00:34:44,518 --> 00:34:47,898 You take nine fifths times the Fahrenheit value minus 32, and that 688 00:34:47,898 --> 00:34:51,478 gives you the Celsius value. Now you know. And 689 00:34:51,478 --> 00:34:55,759 what I do, more interestingly, is I set the value in the Celsius field 690 00:34:55,760 --> 00:34:57,570 to be whatever value I computed. 691 00:34:57,570 --> 00:35:00,950 So someone just typed something into the Fahrenheit field and hit enter or clicked 692 00:35:00,949 --> 00:35:02,489 the F to C button, 693 00:35:02,489 --> 00:35:06,358 but what I do to update the screen is I change whatever value is in the 694 00:35:06,358 --> 00:35:07,150 Celsius field. 695 00:35:07,150 --> 00:35:10,418 I do the 696 00:35:10,418 --> 00:35:14,199 compliment of that - the mirror image. How many words can you come 697 00:35:14,199 --> 00:35:15,789 up with for the same thing? 698 00:35:15,789 --> 00:35:17,920 If someone does C to F, 699 00:35:17,920 --> 00:35:20,210 which is I get the value that's in the Celsius field. 700 00:35:20,210 --> 00:35:24,079 I do the math that's necessary to convert from Celsius to Fahrenheit, and I set the 701 00:35:24,079 --> 00:35:27,389 Fahrenheit field. And that's the whole program. Here's my instance variables. 702 00:35:27,389 --> 00:35:28,500 So if I run 703 00:35:28,500 --> 00:35:30,829 my little temperature program, 704 00:35:30,829 --> 00:35:32,109 I have my label. 705 00:35:32,108 --> 00:35:36,139 I have my initial value, and I have my Fahrenheit to Celsius. If I put in 706 00:35:36,139 --> 00:35:38,670 some value here like 100 degrees Fahrenheit 707 00:35:38,670 --> 00:35:40,380 is 38 degrees Celsius. 708 00:35:40,380 --> 00:35:43,260 212 degrees Fahrenheit, we'll not touch the mouse, just 709 00:35:43,260 --> 00:35:44,690 hit the enter key. 710 00:35:44,690 --> 00:35:49,389 Enter does the same thing as if I click the mouse. Same thing on this 711 00:35:49,389 --> 00:35:51,538 side. I can say 0 Celsius. 712 00:35:51,539 --> 00:35:54,880 Yeah, 32. Good times. Now I've created a whole program with the graphical 713 00:35:54,880 --> 00:35:58,900 user interface, and I can resize. It just does - oh, it always 714 00:35:58,900 --> 00:36:01,740 centers for me. Isn't that nice. If I make it too small, 715 00:36:01,739 --> 00:36:05,299 well, these things don't get to small. I can't see the screen. 716 00:36:05,300 --> 00:36:06,989 717 00:36:06,989 --> 00:36:11,099 Any questions about that? [Inaudible]. 718 00:36:11,099 --> 00:36:12,719 Oh, can you use the mics, please? 719 00:36:12,719 --> 00:36:18,318 I got to keep reminding everyone to use the microphones. 720 00:36:18,318 --> 00:36:18,869 721 00:36:18,869 --> 00:36:20,659 Can you adjust the width of the grid, each cell within the grid? 722 00:36:20,659 --> 00:36:24,938 There are ways with table layout, you can actually give it what are referred 723 00:36:24,938 --> 00:36:26,058 to as hints 724 00:36:26,059 --> 00:36:29,569 to actually specify different sizes for things. I just didn't do that here. 725 00:36:29,568 --> 00:36:31,619 It's in the book, if you want to do it, but we're not going 726 00:36:31,619 --> 00:36:36,108 to push it that far in this class. But there are ways that you can. 727 00:36:36,108 --> 00:36:39,469 So one final thing that we want to do, you might say, this is 728 00:36:39,469 --> 00:36:41,400 kind of fun, but 729 00:36:41,400 --> 00:36:46,200 what I like is some text and some graphics together, and I want some interactors. So I kind 730 00:36:46,199 --> 00:36:47,368 of want it all. 731 00:36:47,369 --> 00:36:51,729 I want text, I want graphics, I want interactors. You think back to the days, you think Hangman. 732 00:36:51,728 --> 00:36:53,879 Hangman, you had text and you had graphics, 733 00:36:53,880 --> 00:36:55,480 but you didn't have interactors. 734 00:36:55,480 --> 00:36:58,679 Here you have interactors, and I showed you and example with interactors and text 735 00:36:58,679 --> 00:37:01,088 where you click the button, and it said Hi and 736 00:37:01,088 --> 00:37:05,159 gave your name or whatever. Now it's time to roll the enchilada and put them all 737 00:37:05,159 --> 00:37:07,188 together in our friend, 738 00:37:07,188 --> 00:37:09,239 text and graphics. 739 00:37:09,239 --> 00:37:11,760 So what text and graphics is going to do, 740 00:37:11,760 --> 00:37:15,810 is we want to think about having some console in the 741 00:37:15,809 --> 00:37:16,958 program 742 00:37:16,958 --> 00:37:20,878 and the graphics canvas in the program and interactors in the program so we 743 00:37:20,878 --> 00:37:23,449 can just go to town and do whatever we want to do. 744 00:37:23,449 --> 00:37:26,178 How do we make this happen? 745 00:37:26,179 --> 00:37:27,940 First thing we're going to do, let 746 00:37:27,940 --> 00:37:31,429 me write a little bit of text on the board. 747 00:37:31,429 --> 00:37:34,599 748 00:37:34,599 --> 00:37:37,569 749 00:37:37,570 --> 00:37:40,019 750 00:37:40,018 --> 00:37:43,298 751 00:37:43,298 --> 00:37:46,759 752 00:37:46,759 --> 00:37:48,009 753 00:37:48,009 --> 00:37:49,688 754 00:37:49,688 --> 00:37:52,788 755 00:37:52,789 --> 00:37:55,809 756 00:37:55,809 --> 00:37:58,220 757 00:37:58,219 --> 00:38:02,459 758 00:38:02,460 --> 00:38:03,699 759 00:38:03,699 --> 00:38:07,150 So text and graphics. Two 760 00:38:07,150 --> 00:38:09,889 great tastes that taste great together. 761 00:38:09,889 --> 00:38:13,498 You can decide which one's chocolate and which one's peanut butter, 762 00:38:13,498 --> 00:38:17,198 but it's text and graphics. So it's like Hangman, but with interactors. 763 00:38:17,199 --> 00:38:21,168 So what we're going to do, is we're going to extend a console program. 764 00:38:21,168 --> 00:38:25,088 The reason why we're going to extend the console program is we still need 765 00:38:25,088 --> 00:38:29,058 our friend, the console. That's where we're going to get the text portion of doing 766 00:38:29,059 --> 00:38:30,220 this interaction 767 00:38:30,219 --> 00:38:32,518 is from having a console program. 768 00:38:32,518 --> 00:38:36,908 So when we have a console program, what this gives us is 769 00:38:36,909 --> 00:38:37,929 the borders 770 00:38:37,929 --> 00:38:42,439 that we've come to know and love. It gives us the north, south, 771 00:38:42,438 --> 00:38:47,509 east and west borders. These are places where we can still place our interactors. 772 00:38:47,509 --> 00:38:48,548 773 00:38:48,548 --> 00:38:51,989 The interesting thing is what's going on in the center region. 774 00:38:51,989 --> 00:38:54,898 What I told you before, the console program 775 00:38:54,898 --> 00:38:58,618 fills up the center region with a place where you can put text, and that's all 776 00:38:58,619 --> 00:38:59,798 you can do with it. 777 00:38:59,798 --> 00:39:03,748 So what we're going to do is say, console program, what I want to do is in the 778 00:39:03,748 --> 00:39:07,639 center region, I want to give you a different layout and put stuff in that 779 00:39:07,639 --> 00:39:08,480 layout 780 00:39:08,480 --> 00:39:11,490 so I can potentially have some text and some graphics. 781 00:39:11,489 --> 00:39:12,698 782 00:39:12,699 --> 00:39:14,688 So what am I going to do? 783 00:39:14,688 --> 00:39:19,168 The first thing I'm going to do is I'm going to think about having some layout. 784 00:39:19,168 --> 00:39:22,228 My layout's going to apply to this middle region. 785 00:39:22,228 --> 00:39:26,048 The important thing to keep in mind is the console program, what it used to do, was 786 00:39:26,048 --> 00:39:28,509 create a console that filled up the entire region. 787 00:39:28,510 --> 00:39:34,130 Now what I'm going to get is a console as my first element. 788 00:39:34,130 --> 00:39:37,579 This means however I do the layout and whatever I do in it, the very 789 00:39:37,579 --> 00:39:41,940 first thing - let's say I have a grid that has three elements to it in one row. 790 00:39:41,940 --> 00:39:44,039 The first element of that 791 00:39:44,039 --> 00:39:45,450 will be my console. 792 00:39:45,449 --> 00:39:48,539 That you don't have any control over just because of the way the console 793 00:39:48,539 --> 00:39:51,769 program works. The first elements of whatever layout you use when you extend 794 00:39:51,769 --> 00:39:55,389 the console program and create a layout for it will always be whatever your text 795 00:39:55,389 --> 00:39:57,028 is. 796 00:39:57,028 --> 00:39:58,760 You said, 797 00:39:58,760 --> 00:40:01,819 you were also going to tell me about graphics, but if I'm doing this in a 798 00:40:01,818 --> 00:40:04,088 console program, how do I get graphics? 799 00:40:04,088 --> 00:40:08,078 We do the little trick we did in hangman. There was this thing called the G 800 00:40:08,079 --> 00:40:08,750 canvas. 801 00:40:08,750 --> 00:40:13,269 What we're going to do is create a G canvas. It importantly, 802 00:40:13,269 --> 00:40:16,358 is actually something that we can add to a layout. 803 00:40:16,358 --> 00:40:20,788 So what I can do is say, create my console program. I'm going to create some 804 00:40:20,789 --> 00:40:23,329 layout. Let's say I'm going to have a grid that's - 805 00:40:23,329 --> 00:40:29,599 I'm going to create some sort of layout. Maybe I'll have a grid layout that's 806 00:40:29,599 --> 00:40:30,789 one, three, 807 00:40:30,789 --> 00:40:32,228 which would give me 808 00:40:32,228 --> 00:40:36,018 this. My first thing is already taken up by my console. What I'm going to do is 809 00:40:36,018 --> 00:40:37,899 create a G canvas 810 00:40:37,900 --> 00:40:41,309 and add that G canvas as my second element. 811 00:40:41,309 --> 00:40:44,278 Just to be super cool, to give you something that normally, you'd have to 812 00:40:44,278 --> 00:40:48,268 pay $12.95 for, but I'm going to give it to you for free, 813 00:40:48,268 --> 00:40:54,078 we're going to create another G canvas and add it over here. So that's G canvas 814 00:40:54,079 --> 00:40:55,710 dos. 815 00:40:55,710 --> 00:40:59,820 So what we get is console and two different G canvases. 816 00:40:59,820 --> 00:41:02,780 Plus, we can still add interactors all around our screen. 817 00:41:02,780 --> 00:41:06,470 At this point, you should be looking at this in shock, horror and delight and 818 00:41:06,469 --> 00:41:07,098 going, 819 00:41:07,099 --> 00:41:10,548 okay. Let's all put it together in five minutes because it's just that 820 00:41:10,548 --> 00:41:11,409 easy. 821 00:41:11,409 --> 00:41:18,409 So here's how it looks. 822 00:41:18,938 --> 00:41:21,629 Text and graphics. I extend console program. 823 00:41:21,630 --> 00:41:23,769 That's where I'm going to get my console. 824 00:41:23,768 --> 00:41:26,358 In my innate, I say set the layout. I 825 00:41:26,358 --> 00:41:30,719 want a new grid layout. Remember, grid layout, the elements 826 00:41:30,719 --> 00:41:33,039 expand to take however much space you give them. 827 00:41:33,039 --> 00:41:34,949 That's what I want in this case 828 00:41:34,949 --> 00:41:38,919 because what I want to say is I want to have a grid. I want to give the console 829 00:41:38,920 --> 00:41:42,269 one third of the whole grid, and two canvases another third of those 830 00:41:42,269 --> 00:41:46,048 grids and grow them to as large as they can be. 831 00:41:46,048 --> 00:41:49,969 Then what I'm going to do is I'm going to create two canvases. So I need to have some 832 00:41:49,969 --> 00:41:52,019 instance variables to refer to these canvases. 833 00:41:52,018 --> 00:41:54,139 I'm going to have two canvases, 834 00:41:54,139 --> 00:41:57,818 which are just - type is G canvas. They're private variables. I will call them the 835 00:41:57,818 --> 00:42:01,478 right canvas and the left canvas. I'm also 836 00:42:01,478 --> 00:42:05,688 going to have a text field in this program just for laughs, just because I can. 837 00:42:05,688 --> 00:42:08,469 That's going to be one of my interactors. I want to have interactors, 838 00:42:08,469 --> 00:42:09,539 text and graphics. 839 00:42:09,539 --> 00:42:10,819 What am I going to do? 840 00:42:10,818 --> 00:42:15,918 First thing I'm going to do is I'm going say, left canvas, create a new canvas. Add 841 00:42:15,918 --> 00:42:16,998 that canvas, 842 00:42:16,998 --> 00:42:20,618 and when I do this add, it's adding it to my layout. 843 00:42:20,619 --> 00:42:24,419 I'm adding a whole canvas. So what does that do? It says, you told me you got a grid 844 00:42:24,418 --> 00:42:27,739 layout here. I've already filled in the first thing with the console because 845 00:42:27,739 --> 00:42:29,650 that's what I do. I'm a console program. 846 00:42:29,650 --> 00:42:31,740 You just told me to add a canvas. 847 00:42:31,739 --> 00:42:33,239 Element No. 2 will be the canvas. 848 00:42:33,239 --> 00:42:36,929 I do the same thing again for right canvas. Element No. 3 is now the 849 00:42:36,929 --> 00:42:41,169 right canvas. So I have two big canvases on there as the second and third elements 850 00:42:41,170 --> 00:42:42,950 of my grid. Now 851 00:42:42,949 --> 00:42:44,679 I got a console, 852 00:42:44,679 --> 00:42:48,779 canvas, canvas. Now I'm going to add some interactors because it's just that 853 00:42:48,780 --> 00:42:53,060 cool. I'm going to create a text field. We'll say new J text field. Text field, 854 00:42:53,059 --> 00:42:56,538 I declare it as a private instance variable. I just showed you that. 855 00:42:56,539 --> 00:42:58,278 Maximum size is ten. 856 00:42:58,278 --> 00:43:02,340 I will add a label to it, and the label's just going to be called some text. 857 00:43:02,340 --> 00:43:04,028 So the right some text 858 00:43:04,028 --> 00:43:05,389 in the southern region. 859 00:43:05,389 --> 00:43:08,949 Then I will add my text field in the southern region. As of this 860 00:43:08,949 --> 00:43:13,038 point, you should come to know and love, you always got to remember to add your 861 00:43:13,039 --> 00:43:16,400 action listener. Very common thing that happens, people create a text field, and 862 00:43:16,400 --> 00:43:19,329 they're typing it and stuff in their program, and nothing's happening. They're 863 00:43:19,329 --> 00:43:21,039 tearing their hair out, and they're wondering why. 864 00:43:21,039 --> 00:43:24,789 They just forgot to add the action listener. Know it, learn it, live it, love it. 865 00:43:24,789 --> 00:43:25,958 It's a good time. 866 00:43:25,958 --> 00:43:27,848 867 00:43:27,849 --> 00:43:31,450 Then I'm going to add two buttons, just for good times. So I have my text field. 868 00:43:31,449 --> 00:43:34,889 I'm going to add two more buttons. A button that says draw on the left 869 00:43:34,889 --> 00:43:37,719 and a button that says draw on the right. 870 00:43:37,719 --> 00:43:40,289 So let me show you what all these things are going to do 871 00:43:40,289 --> 00:43:42,129 before I show you the rest of the program. 872 00:43:42,128 --> 00:43:46,328 So I want to show you text and graphics. 873 00:43:46,329 --> 00:43:48,479 I 874 00:43:48,478 --> 00:43:50,179 have my console over here. 875 00:43:50,179 --> 00:43:54,768 I have two - you can't see them, but they're side by side. Two different canvas windows 876 00:43:54,768 --> 00:43:58,328 over here. Here's some text. I can type in hi. 877 00:43:58,329 --> 00:44:00,999 You typed hi. 878 00:44:00,998 --> 00:44:02,728 Wow. It's 879 00:44:02,728 --> 00:44:03,989 that exciting. 880 00:44:03,989 --> 00:44:07,489 Draw left, in my left canvas. I'm just drawing rectangles. I'll show you how I do that in 881 00:44:07,489 --> 00:44:08,440 just a second. 882 00:44:08,440 --> 00:44:09,628 Draw right. 883 00:44:09,628 --> 00:44:12,318 Drawing in my right canvas. 884 00:44:12,318 --> 00:44:15,889 How did I make that happen? Let me show you the rest of the program. I've set 885 00:44:15,889 --> 00:44:18,589 everything up. Console, two canvases, 886 00:44:18,590 --> 00:44:20,798 text field and two buttons at the bottom. 887 00:44:20,798 --> 00:44:24,449 Here's where all the action's going on. When action performed is called, that 888 00:44:24,449 --> 00:44:27,418 means someone's interacting with one of the interactors. There's nothing else I 889 00:44:27,418 --> 00:44:30,708 can do in the program except interacting with one of the interactors. 890 00:44:30,708 --> 00:44:34,688 First I check for the text field. If the interaction with the text field - so if 891 00:44:34,688 --> 00:44:38,598 the source of the interaction was the text field, I write out, you type in 892 00:44:38,599 --> 00:44:43,019 the text field. This will go into the console because anytime you do 893 00:44:43,018 --> 00:44:46,649 a printlin, the text always goes into the console. So it just shows up in the 894 00:44:46,650 --> 00:44:49,568 console. Not a whole lot of excitement going on there. 895 00:44:49,568 --> 00:44:52,670 Alternatively, if the thing they did was not to type into the text field, 896 00:44:52,670 --> 00:44:56,389 they clicked one of the buttons. I could've either 897 00:44:56,389 --> 00:44:59,509 done all with get source or all with get action command. 898 00:44:59,509 --> 00:45:02,849 I'm using both just to show you that you can mix and match if you want. 899 00:45:02,849 --> 00:45:06,028 So I say, what was the command? Get action command. 900 00:45:06,028 --> 00:45:10,349 If it was draw left, then what I'm going to do is I'm going to create a new filled 901 00:45:10,349 --> 00:45:13,519 rectangle. Let me show you. Create new filled rectangle. It's very simple. 902 00:45:13,519 --> 00:45:14,418 It just 903 00:45:14,418 --> 00:45:17,568 creates a rectangle that's 50 by 20, and yes, they should've been 904 00:45:17,568 --> 00:45:20,038 constants, but I didn't make them constant so I wouldn't have to scroll down and show 905 00:45:20,039 --> 00:45:21,199 you the constants. 906 00:45:21,199 --> 00:45:22,930 I set it to be filled, 907 00:45:22,929 --> 00:45:26,639 and I return the rectangles. All it does is create a filled rectangle and say, here 908 00:45:26,639 --> 00:45:27,679 you 909 00:45:27,679 --> 00:45:31,518 go. All I do is I take that filled rectangle, and I add it 910 00:45:31,518 --> 00:45:33,778 to my left canvas. 911 00:45:33,778 --> 00:45:38,028 So because it's not a graphics program, I can't just say add with the rectangle and 912 00:45:38,028 --> 00:45:42,119 add it. If I want to add the rectangle somewhere, I need to specify which canvas 913 00:45:42,119 --> 00:45:47,399 I'm adding it to. I'm adding it to the left canvas. So I say, left canvas, add to 914 00:45:47,398 --> 00:45:51,898 yourself this rectangle. Where are you going to add it? At X location 20 and at Y 915 00:45:51,898 --> 00:45:54,638 location left Y. 916 00:45:54,639 --> 00:45:57,949 Left Y starts out with the value ten, 917 00:45:57,949 --> 00:46:02,688 and every time I add something, I space down my Y. So I'm just making Y go 918 00:46:02,688 --> 00:46:06,768 down by some spacer amount, which is 30. So all it's doing is drawing a 919 00:46:06,768 --> 00:46:10,068 rectangle and essentially moving down. So I'll draw my next rectangle below 920 00:46:10,068 --> 00:46:12,480 it, moving down to draw the next rectangle below it. 921 00:46:12,480 --> 00:46:15,509 I do exactly the same thing for the right hand side, 922 00:46:15,509 --> 00:46:19,318 except after I create the filled rectangle, I have a separate right Y, 923 00:46:19,318 --> 00:46:23,058 which keeps track of how low I've gotten on that side, in terms of the Y coordinate. 924 00:46:23,059 --> 00:46:23,949 925 00:46:23,949 --> 00:46:26,179 I add to the right canvas. 926 00:46:26,179 --> 00:46:27,898 That's the only difference. 927 00:46:27,898 --> 00:46:30,298 So when I run this program, 928 00:46:30,298 --> 00:46:31,809 some text. 929 00:46:31,809 --> 00:46:34,399 Again, if I type in great, great. If 930 00:46:34,398 --> 00:46:35,868 I typed in great 931 00:46:35,869 --> 00:46:39,930 and hit enter, it generates the event, which does this printlin on the screen. 932 00:46:39,929 --> 00:46:43,208 It generates this event over here, this action performed. 933 00:46:43,208 --> 00:46:46,948 The source was text field, and I write out the text on the screen. 934 00:46:46,949 --> 00:46:50,068 If I click on one of the buttons, draw left, it 935 00:46:50,068 --> 00:46:53,418 draws the filled rectangle, and it's incremented the Y on the left hand 936 00:46:53,418 --> 00:46:55,798 side. So the next time I click draw left, 937 00:46:55,798 --> 00:47:00,759 it draws it lower and lower and lower. Draw right does the same thing. 938 00:47:00,759 --> 00:47:03,318 Notice that the X location for both 939 00:47:03,318 --> 00:47:08,018 this canvas and this canvas, when I add the rectangles, are both at 20. The 940 00:47:08,018 --> 00:47:10,908 reason why it shows up two different places in the screen is because there are 941 00:47:10,909 --> 00:47:14,639 two different canvases, and there's kind of an invisible border here. 942 00:47:14,639 --> 00:47:17,298 So you can create text, 943 00:47:17,298 --> 00:47:22,268 graphics and interactors all together and just go to town. Any questions? 944 00:47:22,268 --> 00:47:23,688 All right. I will see you on Wednesday.