4 00:00:12,968 --> 00:00:16,230 This presentation is delivered by the Stanford Center for Professional 5 00:00:16,230 --> 00:00:23,230 Development. 6 00:00:26,300 --> 00:00:29,349 So now it's time to talk a little bit about your next assignment. You just turned in your last assignment. 7 00:00:29,349 --> 00:00:32,780 You're like, no, no, it's not time to talk about the next 8 00:00:32,780 --> 00:00:33,600 assignment. 9 00:00:33,600 --> 00:00:38,539 I'm still working on the last assignment. Well, just pay attention. 10 00:00:38,539 --> 00:00:41,379 Here's what you're going to do for your next assignment. It's a little program 11 00:00:41,380 --> 00:00:43,850 called NameSurfer, okay? 12 00:00:43,850 --> 00:00:47,079 And the idea of this program is it turns out that the government actually keeps 13 00:00:47,079 --> 00:00:48,579 track of statistics 14 00:00:48,579 --> 00:00:51,659 of the popularity of names over time, okay. 15 00:00:51,659 --> 00:00:54,519 So every decade when they do the census, they kind of keep track of the 16 00:00:54,520 --> 00:00:55,319 number of names 17 00:00:55,319 --> 00:00:56,080 and they rank 18 00:00:56,079 --> 00:00:59,138 the top 1,000 names in terms of popularity 19 00:00:59,139 --> 00:01:01,010 for boys' names and for girls' names, 20 00:01:01,009 --> 00:01:02,899 and they actually make this data available. 21 00:01:02,899 --> 00:01:06,420 We thought wouldn't it be cool if you actually were to display names to the 22 00:01:06,420 --> 00:01:09,189 user in terms of how that popularity changed over time. 23 00:01:09,189 --> 00:01:12,030 So that's what NameSurfer does. Here's the program. What it does is it shows you 24 00:01:12,030 --> 00:01:14,579 the decades. You can notice that this is a graphics, 25 00:01:14,578 --> 00:01:16,219 or involves graphics, right, 26 00:01:16,219 --> 00:01:19,799 has the decades from 1900 up to 2000 and so relatively recent 27 00:01:19,799 --> 00:01:21,328 date up to the last census. 28 00:01:21,328 --> 00:01:24,868 And what we can do is we can type in a name and then click graph, and what it 29 00:01:24,868 --> 00:01:29,269 will do is it will show the rank of that name over time, on a decade-by-decade 30 00:01:29,269 --> 00:01:30,009 basis. So 31 00:01:30,009 --> 00:01:31,819 let's try Fred, for example. 32 00:01:31,819 --> 00:01:34,339 If you graph Fred, you can see Fred 33 00:01:34,340 --> 00:01:36,200 real popular at the turn of 34 00:01:36,200 --> 00:01:39,719 the prior century and then Fred just had this 35 00:01:39,719 --> 00:01:43,310 quick decent into oblivion, where now he's the 974th 36 00:01:43,310 --> 00:01:45,159 most popular boys name, 37 00:01:45,159 --> 00:01:49,640 at least in the last Census 2000. We can do multiple graphs on here, 38 00:01:49,640 --> 00:01:52,329 so if I type in someone else - so one thing that's also interesting is you'll 39 00:01:52,328 --> 00:01:55,929 notice popular culture comes in, and so if I type in Britney, 40 00:01:55,930 --> 00:01:59,810 the alternative non-traditional British spelling, 41 00:01:59,810 --> 00:02:04,240 it didn't exist until 1980, in which case it totally shot up to 42 00:02:04,239 --> 00:02:05,578 like the top 100 43 00:02:05,578 --> 00:02:07,348 and maybe with the most recent 44 00:02:07,349 --> 00:02:11,259 things that are going on, it's dropped a little bit. But 45 00:02:11,259 --> 00:02:15,298 through this whole region, what we have in our data, and I'll show you the data in 46 00:02:15,299 --> 00:02:19,569 just a second, is that Britney did not rank in the top 1,000 until the 47 00:02:19,568 --> 00:02:20,489 1980's 48 00:02:20,490 --> 00:02:23,170 and then it jumped up. Because it started ranking in the top 49 00:02:23,169 --> 00:02:26,039 1,000 in the 1980's, it still shows up in our data file because 50 00:02:26,039 --> 00:02:29,028 at some point it started ranking higher than that. 51 00:02:29,028 --> 00:02:31,229 And it turns out that there are some people 52 00:02:31,229 --> 00:02:33,429 who just have names that, well, 53 00:02:33,429 --> 00:02:35,109 are not so popular. 54 00:02:35,109 --> 00:02:39,439 So we do Mehran and nothing comes up because contrary to popular opinion, Mehran 55 00:02:39,438 --> 00:02:43,378 is not in the top 1,000 most popular names. 56 00:02:43,378 --> 00:02:46,239 In a few years, you can change that 57 00:02:46,239 --> 00:02:50,859 if you have 58 00:02:50,859 --> 00:02:54,469 children. Your choice. 59 00:02:54,468 --> 00:02:56,289 Not that I would advocate it, man. It's a 60 00:02:56,289 --> 00:02:58,808 rough childhood. 61 00:02:58,808 --> 00:03:02,919 Mehran, doesn't that sound like moron? Yeah, I haven't heard that one in the 62 00:03:02,919 --> 00:03:04,618 last two hours. Yeah, 63 00:03:04,618 --> 00:03:07,049 I know. I'm just - 64 00:03:07,049 --> 00:03:09,359 rough childhood. 65 00:03:09,359 --> 00:03:12,219 Not that it affected me at all. So 66 00:03:12,218 --> 00:03:15,098 in terms of actually doing this assignment, you might say, oh, that's kind of 67 00:03:15,098 --> 00:03:17,568 interesting. Now there are a couple of things going on. You might look at that and say, yeah, 68 00:03:17,568 --> 00:03:21,628 I could do that, Mehran. I could do that in the zero to two-hour category, right, 69 00:03:21,628 --> 00:03:24,340 except for one little thing and the one little thing is 70 00:03:24,340 --> 00:03:27,949 check out this bad boy. 71 00:03:27,949 --> 00:03:29,588 Whoa. 72 00:03:29,588 --> 00:03:33,338 As I resize the window - I will continue to resize the window until I get you in a 73 00:03:33,338 --> 00:03:35,478 hypnotic trance - 74 00:03:35,479 --> 00:03:39,659 everything in the graphics display automatically resizes to display for 75 00:03:39,658 --> 00:03:41,788 that window size, okay? 76 00:03:41,788 --> 00:03:45,458 And what you're going to find out today is how do you actually do this kind of 77 00:03:45,459 --> 00:03:49,789 thing to keep track of as the windows resizing, how do you get events that come 78 00:03:49,788 --> 00:03:53,218 to your program that tell you, hey, some resizing happened. I need you to redisplay 79 00:03:53,218 --> 00:03:54,848 what's going on. 80 00:03:54,848 --> 00:03:58,429 The other thing that's interesting about this is I cannot only when I resize, it 81 00:03:58,429 --> 00:04:01,338 keeps track of all the information that's on there, Fred and Britney. If I ask someone 82 00:04:01,338 --> 00:04:04,280 else like, oh, my son, William, 83 00:04:04,280 --> 00:04:07,259 who's always been a popular choice - ah ha ha - 84 00:04:07,258 --> 00:04:10,678 just like in the top ten dips briefly over here because maybe it was getting 85 00:04:10,679 --> 00:04:12,769 over used and then it comes back up. 86 00:04:12,769 --> 00:04:15,688 Keeps them all. They're in different colors. The color sort of 87 00:04:15,688 --> 00:04:20,379 cycles, so if we add someone else, like Ethel - Ether, Ethel 88 00:04:20,379 --> 00:04:24,158 - yeah, Ethel, sorry, not so popular anymore. 89 00:04:24,158 --> 00:04:25,689 When 90 00:04:25,689 --> 00:04:29,749 Lucille Ball - when "I Love Lucy" was on or earlier, it was a popular time. 91 00:04:29,749 --> 00:04:32,989 The cycles of colors eventually will go back to black, so if we put in something 92 00:04:32,988 --> 00:04:37,168 like Bob, it goes back to black. Then you'll see red again, then blue, then magenta. That's 93 00:04:37,168 --> 00:04:38,719 all given to you in the handout. 94 00:04:38,720 --> 00:04:41,680 If you hit clear, everything goes away, except for the gridlines, and you can 95 00:04:41,680 --> 00:04:42,788 sort of 96 00:04:42,788 --> 00:04:46,918 go again from there, like here's George and you can see George has a slight 97 00:04:46,918 --> 00:04:47,618 decline. Here's 98 00:04:47,619 --> 00:04:48,990 four back here 99 00:04:48,990 --> 00:04:52,560 and now he's like somewhere in the hundreds. It's okay if it goes off the window occasionally, 100 00:04:52,560 --> 00:04:55,680 okay? But the resizing is kind of the key to this and that's what we're going to - 101 00:04:55,680 --> 00:04:58,150 one of the things we're gonna look at today. Okay. 102 00:04:58,149 --> 00:05:00,959 So that's what you want to keep in mind for the assignment, resizing, because the 103 00:05:00,959 --> 00:05:04,549 demo that's on the website because it runs in a web browser, doesn't resize and it sort 104 00:05:04,550 --> 00:05:07,728 just has it as the little warning down at the bottom. It just shows you how the 105 00:05:07,728 --> 00:05:10,728 program actually works so you can try out typing in different names and see the 106 00:05:10,728 --> 00:05:11,129 behavior. 107 00:05:11,129 --> 00:05:15,250 But it doesn't resize because its size it stuck by the browser and changing 108 00:05:15,250 --> 00:05:18,199 the browser window doesn't actually change the size of the applet. That's just 109 00:05:18,199 --> 00:05:19,718 life in the city, okay? 110 00:05:19,718 --> 00:05:23,928 But that's the way NameSurfer works. So 111 00:05:23,928 --> 00:05:25,548 what we wanna think about 112 00:05:25,548 --> 00:05:29,778 is actually building programs that have this kind of property and to understand 113 00:05:29,778 --> 00:05:32,189 how programs that have this kind of property work, 114 00:05:32,189 --> 00:05:33,610 what we need to think about 115 00:05:33,610 --> 00:05:36,288 is something known as a component 116 00:05:36,288 --> 00:05:37,829 and related to that is 117 00:05:37,829 --> 00:05:39,930 a container. 118 00:05:39,930 --> 00:05:44,848 So first of all, I'll show you all the classes in Java that pertain to the components and 119 00:05:44,848 --> 00:05:47,250 containers. Not all of them, but a good number of them. So 120 00:05:47,250 --> 00:05:49,750 here's the classes in the component hierarchy and some of these 121 00:05:49,750 --> 00:05:51,569 will look familiar to you. 122 00:05:51,569 --> 00:05:55,278 So programs of which Console program and Graphics program that you've been using 123 00:05:55,278 --> 00:05:56,439 the whole time 124 00:05:56,439 --> 00:05:59,550 are j-applet, which is an applet, which is a panel, which is a container, which is a 125 00:05:59,550 --> 00:06:00,408 component. 126 00:06:00,408 --> 00:06:03,550 So somewhere all the way up the food chain, right, the food chain before we 127 00:06:03,550 --> 00:06:06,300 didn't go that high. We just went up to applet when we showed you sort of this 128 00:06:06,300 --> 00:06:07,319 picture before. 129 00:06:07,319 --> 00:06:09,529 Turns out all your programs are 130 00:06:09,529 --> 00:06:13,519 components and containers. Every component is a container, or every 131 00:06:13,519 --> 00:06:15,548 container is a component. 132 00:06:15,548 --> 00:06:17,938 And so you may ask, well, what are containers and components? So the way you wanna 133 00:06:17,939 --> 00:06:19,030 think about this 134 00:06:19,029 --> 00:06:23,289 is at some generic level, a component is anything that can appear in a window. It's 135 00:06:23,290 --> 00:06:27,080 anything that can in some sense be displayed. So your programs are appearing 136 00:06:27,079 --> 00:06:31,778 in a window that's getting displayed. That's why they're components, okay? 137 00:06:31,778 --> 00:06:35,990 Now, that also means that a graphics program and a console program are also 138 00:06:35,990 --> 00:06:38,069 components because they're subclasses of program. 139 00:06:38,069 --> 00:06:41,330 Now at the same time, there's a notion of a container. What's a container? 140 00:06:41,329 --> 00:06:46,490 A container is simply something that contains other components, so a container 141 00:06:46,490 --> 00:06:49,310 just contains a set of components and you might say, hey, Mehran, that's really 142 00:06:49,310 --> 00:06:53,360 weird. A container is a component, but you're telling me it contains a set of 143 00:06:53,360 --> 00:06:55,229 components? What's that all about? 144 00:06:55,228 --> 00:06:57,758 And the simplest way to think about it 145 00:06:57,759 --> 00:07:00,139 is it's this, okay? 146 00:07:00,139 --> 00:07:02,189 This is a component, this bag. 147 00:07:02,189 --> 00:07:05,799 It turns out this bag is also a container because it contains things and it's 148 00:07:05,798 --> 00:07:09,638 perfectly fine for something to be a container and also to be a component. 149 00:07:09,639 --> 00:07:12,720 So here's what I mean, right. Your programs, as it turns out, 150 00:07:12,720 --> 00:07:14,009 are all 151 00:07:14,009 --> 00:07:16,530 components, which means they display in the screen, but they're also containers 152 00:07:16,529 --> 00:07:18,598 because your programs contain other things. 153 00:07:18,598 --> 00:07:20,978 For example, in the display of your program, 154 00:07:20,978 --> 00:07:22,959 it may contain a button. 155 00:07:22,959 --> 00:07:24,550 Right? 156 00:07:24,550 --> 00:07:28,090 It may also contain, say, a text field. 157 00:07:28,089 --> 00:07:31,318 And the other thing that it may contain, if you have a graphics program besides 158 00:07:31,319 --> 00:07:33,389 these kind of components, which 159 00:07:33,389 --> 00:07:36,960 buttons and text fields are also components - I'll show you an example of that in just a 160 00:07:36,959 --> 00:07:37,649 second - 161 00:07:37,649 --> 00:07:38,899 it may contain 162 00:07:38,899 --> 00:07:40,628 another container. 163 00:07:40,629 --> 00:07:43,899 And it's perfectly fine for containers to contain containers. As a matter of fact, 164 00:07:43,899 --> 00:07:45,310 you've been using them for the whole time. 165 00:07:45,310 --> 00:07:47,348 Your graphics program, 166 00:07:47,348 --> 00:07:50,219 especially if you have a graphics program that has some 167 00:07:50,220 --> 00:07:53,250 interactors on it. It could have buttons. It could have text fields. It could 168 00:07:53,250 --> 00:07:55,430 have a G-canvas, 169 00:07:55,430 --> 00:07:59,410 and gee, guess what? A G-canvas is a container and a component. 170 00:07:59,410 --> 00:08:00,719 Because it's a component, 171 00:08:00,718 --> 00:08:03,528 it can be contained inside some other container, 172 00:08:03,528 --> 00:08:07,899 and because it itself is a container, it may have certain things in it. Oh, 173 00:08:07,899 --> 00:08:10,799 like here's our friend, the frog image from 174 00:08:10,800 --> 00:08:11,919 the mid-term. 175 00:08:11,918 --> 00:08:15,859 Yeah, that was just something that was in another container, okay? 176 00:08:15,860 --> 00:08:17,110 So there's no 177 00:08:17,110 --> 00:08:19,629 reason why something that is a container 178 00:08:19,629 --> 00:08:23,150 can't be a component, which means it can be contained in some other 179 00:08:23,149 --> 00:08:27,079 container, that's fine, and all containers themselves are components, so they can be 180 00:08:27,079 --> 00:08:28,748 stuck in somewhere else. 181 00:08:28,749 --> 00:08:31,799 That's the basic idea. You should think of it as bags and you can put bags inside 182 00:08:31,798 --> 00:08:33,869 of other bags, and bags contain things. 183 00:08:33,869 --> 00:08:37,129 So even though you see the hierarchy this way, the concept itself is not actually 184 00:08:37,129 --> 00:08:39,629 that difficult. Now, 185 00:08:39,629 --> 00:08:42,149 the thing you wanna think about this 186 00:08:42,149 --> 00:08:43,819 is I just mentioned to you 187 00:08:43,820 --> 00:08:47,000 your programs are actually components and containers. 188 00:08:47,000 --> 00:08:49,589 G-canvas is a container and a component, 189 00:08:49,589 --> 00:08:53,089 but components that we talked about before, j-components, 190 00:08:53,089 --> 00:08:55,750 like our friends, say, 191 00:08:55,750 --> 00:08:56,500 oh, 192 00:08:56,500 --> 00:09:01,120 j-button - you actually saw this slide a couple classes ago, j-button or j-label 193 00:09:01,120 --> 00:09:05,370 or j-combo box, all these things you saw before - are actually j-components. 194 00:09:05,370 --> 00:09:09,679 They all are subclasses of j-component, which means by being subclasses of j-component, 195 00:09:09,679 --> 00:09:10,058 196 00:09:10,058 --> 00:09:13,059 they were also containers, strangely enough, 197 00:09:13,059 --> 00:09:14,789 and they are also components. 198 00:09:14,789 --> 00:09:17,750 We just think of them generally as components and we try to put them in 199 00:09:17,750 --> 00:09:21,059 other containers, like we put them inside the display for a program 200 00:09:21,059 --> 00:09:24,789 and that's its container. But that's the general idea that's kinda 201 00:09:24,789 --> 00:09:26,689 going on here. So 202 00:09:26,690 --> 00:09:29,140 when you wanna think about containers and components, 203 00:09:29,139 --> 00:09:32,610 what you also wanna think about is that these components themselves, before we 204 00:09:32,610 --> 00:09:36,029 thought about like action listeners, right, like something happens like I 205 00:09:36,029 --> 00:09:39,490 click on some component and some particular event happens, like I 206 00:09:39,490 --> 00:09:40,538 clicked on it, 207 00:09:40,538 --> 00:09:42,340 something like that. 208 00:09:42,340 --> 00:09:46,330 We can think of the whole component as also listening for other events because 209 00:09:46,330 --> 00:09:49,990 a component is something that display stuff on the screen. 210 00:09:49,990 --> 00:09:53,799 Stuff can happen to be components, like they can be resized and when a 211 00:09:53,799 --> 00:09:55,019 component's resized, 212 00:09:55,019 --> 00:09:58,539 some event can get generated and sent to that component that says, hey, 213 00:09:58,539 --> 00:09:59,389 guess what? 214 00:09:59,389 --> 00:10:02,829 You got resized. You need to do something. Like the canvas that shows all 215 00:10:02,828 --> 00:10:07,028 the graphics, it can get some event that says, hey, canvas, 216 00:10:07,028 --> 00:10:09,989 yeah, you were just resized. Do whatever you wanna do. 217 00:10:09,989 --> 00:10:13,689 Up until now, you didn't do anything. Someone came and resized your canvas. You said, yeah, you're resizing 218 00:10:13,688 --> 00:10:17,458 my canvas. All of the pieces I have in my canvas stay where they are. Nothing's 219 00:10:17,458 --> 00:10:21,409 changing. Now what you're going to get is the ability to have the canvas be told, 220 00:10:21,409 --> 00:10:24,649 hey, you got resized or something else happened to you. 221 00:10:24,649 --> 00:10:28,539 You can respond to it however you want, which means you can redraw 222 00:10:28,539 --> 00:10:31,939 everything that's in your canvas, so that, for example, you can have all the 223 00:10:31,940 --> 00:10:35,570 layout come out just fine when people resize your window. 224 00:10:35,570 --> 00:10:39,629 So what does that actually mean in terms of these components and containers? 225 00:10:39,629 --> 00:10:42,620 What it means is that we can have listeners 226 00:10:42,620 --> 00:10:46,279 in the same way that you kinda thought about listeners from mouse events and 227 00:10:46,279 --> 00:10:47,860 listeners for j-components. 228 00:10:47,860 --> 00:10:49,389 You can have listeners 229 00:10:49,389 --> 00:10:53,490 for components, okay, like 230 00:10:53,490 --> 00:10:55,629 we talked about resizing the window. 231 00:10:55,629 --> 00:10:57,879 Now, here's a little simple example 232 00:10:57,879 --> 00:11:00,939 of something that can go on with one of these components. 233 00:11:00,940 --> 00:11:02,240 234 00:11:02,240 --> 00:11:09,240 So I'll come back to Eclipse, I'll run a little program here - 235 00:11:10,179 --> 00:11:11,809 I gotta compile - 236 00:11:11,809 --> 00:11:16,319 and I'll show you the very sort of simple program that makes use of this 237 00:11:16,320 --> 00:11:18,460 concept of a 238 00:11:18,460 --> 00:11:22,070 component having a listener and being able to get certain events. 239 00:11:22,070 --> 00:11:25,960 So it's just called My Programming. Here's what my program does. It draws a square. That's 240 00:11:25,960 --> 00:11:28,730 all it does is it draws in a filled-in square. You're like why are you showing me this, Mehran? 241 00:11:28,730 --> 00:11:31,690 I could've done this in the first week of class and I would say, no, you were 242 00:11:31,690 --> 00:11:34,690 doing terrible in the first week of class. And then you say, no, I could've done this in the second week of class and be 243 00:11:34,690 --> 00:11:36,180 like, okay, 244 00:11:36,179 --> 00:11:38,500 but could you do this? 245 00:11:38,500 --> 00:11:40,830 246 00:11:40,830 --> 00:11:44,750 Oh. Yeah, when you did this before, that square just stayed where it was and the size of the window changed. 247 00:11:44,750 --> 00:11:48,419 Nothing happened. Now the square always remains in the center of the window no 248 00:11:48,419 --> 00:11:50,979 matter how I resize. It's super small. 249 00:11:50,980 --> 00:11:53,500 It's still in the center. Super big, yeah. Another one of 250 00:11:53,500 --> 00:11:56,379 those things good for about 20 seconds. 251 00:11:56,379 --> 00:12:00,460 But that's the idea. How does it know when the window's getting resized 252 00:12:00,460 --> 00:12:03,709 that it needs to do something to update its display? 253 00:12:03,708 --> 00:12:07,068 So the way this is going to work, in terms of having this square that recenters 254 00:12:07,068 --> 00:12:08,110 itself, 255 00:12:08,110 --> 00:12:12,769 is we wanna think about having a program that is a container. 256 00:12:12,769 --> 00:12:16,789 And so, up until now, you had console programs and graphics programs, and they 257 00:12:16,789 --> 00:12:19,860 were containers and what they did for you automatically for console programming, it 258 00:12:19,860 --> 00:12:21,269 created a console for you 259 00:12:21,269 --> 00:12:24,659 and put it in your container so that anything you printed showed up in that 260 00:12:24,659 --> 00:12:25,339 console. 261 00:12:25,340 --> 00:12:29,290 And for a graphics program, it created a G-canvas for you and put it in the 262 00:12:29,289 --> 00:12:33,588 container and anything you drew showed up on that canvas. 263 00:12:33,589 --> 00:12:36,750 And now, what you're going to do is you're going to create your own program 264 00:12:36,750 --> 00:12:39,169 that's not a graphics program or a 265 00:12:39,169 --> 00:12:40,208 console program, 266 00:12:40,208 --> 00:12:43,559 but to which you're going to create your own canvas and add it. 267 00:12:43,559 --> 00:12:45,089 And so the way that would look 268 00:12:45,090 --> 00:12:47,680 is you would say something like "Public 269 00:12:47,679 --> 00:12:50,589 Class" and give it the name, whatever name you want, so I call 270 00:12:50,590 --> 00:12:52,240 this "My Program" 271 00:12:52,240 --> 00:12:54,340 and this is gonna extend 272 00:12:54,340 --> 00:12:55,980 just the generic 273 00:12:55,980 --> 00:13:00,269 program. It's not gonna extend console or graphics program. It's just gonna extend 274 00:13:00,269 --> 00:13:00,990 program. 275 00:13:00,990 --> 00:13:04,389 And so inside here, it's still gonna have some init method, like you've 276 00:13:04,389 --> 00:13:08,649 come to know and love in other programs. And inside init, what we're gonna 277 00:13:08,649 --> 00:13:10,370 do is say 278 00:13:10,370 --> 00:13:12,529 I'm gonna create a new canvas. 279 00:13:12,529 --> 00:13:17,169 But the canvas I'm going to create is a canvas that is a new object I'm going to 280 00:13:17,169 --> 00:13:21,199 create myself to define what that canvas is, rather than the 281 00:13:21,200 --> 00:13:22,490 basic G-canvas. So I'm gonna call this My Canvas. 282 00:13:22,490 --> 00:13:26,399 I'm going to do top down design. My canvas is a class 283 00:13:26,399 --> 00:13:28,669 that doesn't exist yet, all right? It's not a built-in class. 284 00:13:28,669 --> 00:13:33,189 It's my canvas. It's something that I'm gonna write the code for in just a second and I'm gonna have 285 00:13:33,190 --> 00:13:36,589 some object called "canvas," which is off top My Canvas 286 00:13:36,589 --> 00:13:40,580 and I will create a new My Canvas. At this point, 287 00:13:40,580 --> 00:13:43,090 you should be getting a little bit worried unless you've 288 00:13:43,090 --> 00:13:46,570 internalized top down design. If you've internalized top down design, you say, yeah, I'm just gonna go 289 00:13:46,570 --> 00:13:49,300 create My Canvas when it's time for me to write that code. For 290 00:13:49,299 --> 00:13:51,849 right now, I'm just going to assume it exists. 291 00:13:51,850 --> 00:13:54,629 And then what I'm gonna do is I'm going to 292 00:13:54,629 --> 00:13:56,470 add this canvas 293 00:13:56,470 --> 00:13:57,790 to my container. 294 00:13:57,789 --> 00:13:59,219 When I do an add 295 00:13:59,220 --> 00:14:02,920 of something that is a component, in this case, canvas will be a component - 296 00:14:02,919 --> 00:14:05,339 you'll see why it's a component in just a second - 297 00:14:05,340 --> 00:14:09,829 it says, hey, program, add this particular element to yourself, and program says, 298 00:14:09,828 --> 00:14:11,419 hey, I'm a container, 299 00:14:11,419 --> 00:14:14,449 right? I don't already have a canvas. I don't already have a console, but I'm a 300 00:14:14,450 --> 00:14:16,910 container. You're giving me a canvas, whoosh, 301 00:14:16,909 --> 00:14:20,409 the canvas goes up into my container, and if it's the only thing in my container, its 302 00:14:20,409 --> 00:14:24,419 size will expand to fill up the whole screen. 303 00:14:24,419 --> 00:14:28,139 Kind of like you saw last time. And that's it. 304 00:14:28,139 --> 00:14:31,509 So what I've don't in this program is said, hey, I'm gonna have a program. 305 00:14:31,509 --> 00:14:36,310 I'm gonna create a canvas where all the action isn't gonna happen in that canvas, 306 00:14:36,309 --> 00:14:40,409 and I'm going to add that canvas to the display and then I'm gonna let the 307 00:14:40,409 --> 00:14:43,079 canvas do all the work. Is there 308 00:14:43,080 --> 00:14:45,700 any questions about this, just creating the canvas? 309 00:14:45,700 --> 00:14:49,020 So now we can actually sort of define what is My Canvas and I'll show you that 310 00:14:49,019 --> 00:14:52,350 on the computer because it's a little bit more involved. 311 00:14:52,350 --> 00:14:55,009 And you don't need to worry about writing this all down. Actually, on Friday, 312 00:14:55,009 --> 00:14:57,278 I'll give you a handout that has all this code in it. 313 00:14:57,278 --> 00:15:00,039 I just didn't want to give it to you now because then you wouldn't pay attention 314 00:15:00,039 --> 00:15:02,389 to what's going on on the screen, okay? 315 00:15:02,389 --> 00:15:03,769 So what I'm gonna do 316 00:15:03,769 --> 00:15:08,668 is I'm gonna have a class My Canvas. And My Canvas is going to be a G-canvas, 317 00:15:08,668 --> 00:15:12,558 so it's going to be an extension of a G-canvas. It's gonna extend 318 00:15:12,558 --> 00:15:13,490 G-canvas. 319 00:15:13,490 --> 00:15:16,318 So all My Canvases are G-canvases. 320 00:15:16,318 --> 00:15:18,968 Because it's a G-canvas, that means it's a component. 321 00:15:18,969 --> 00:15:22,129 Because it's a component, I can add it to a container. So that's why add works 322 00:15:22,129 --> 00:15:23,450 there. 323 00:15:23,450 --> 00:15:26,360 Now, what am I gonna do with this thing? The other thing I wanna do is I 324 00:15:26,360 --> 00:15:30,389 wanna say, hey, this is a component that's gonna listen for stuff, 325 00:15:30,389 --> 00:15:34,000 and so the way I do this is rather than doing add mouse listeners like I 326 00:15:34,000 --> 00:15:38,450 did before, or add action listeners, which look at actions of things like buttons, 327 00:15:38,450 --> 00:15:40,919 the way a component actually listens 328 00:15:40,918 --> 00:15:46,149 is it implements the component listener interface. So when you wanna have some 329 00:15:46,149 --> 00:15:46,570 component 330 00:15:46,570 --> 00:15:49,250 that is actually gonna get events that it's 331 00:15:49,250 --> 00:15:52,899 listening for, component events, the way you do that is when you create the class, you say 332 00:15:52,899 --> 00:15:55,228 it implements component listener. 333 00:15:55,229 --> 00:15:58,908 That's just the way you say it, so it's going to implement the interface. There's some 334 00:15:58,908 --> 00:16:02,439 set of methods it needs to provide that 335 00:16:02,440 --> 00:16:05,319 implement that interface and I'll show you the list of methods real quickly. 336 00:16:05,318 --> 00:16:08,689 They're just down here. 337 00:16:08,690 --> 00:16:13,110 These four methods here, component resize, component hidden, component moved, and 338 00:16:13,110 --> 00:16:14,019 component shown 339 00:16:14,019 --> 00:16:15,078 are the methods 340 00:16:15,078 --> 00:16:18,429 that comprise that interface, the component listener interface. 341 00:16:18,429 --> 00:16:21,829 So anything that implements the component listener interface needs to 342 00:16:21,830 --> 00:16:23,770 provide these four methods. 343 00:16:23,769 --> 00:16:25,199 In a lot of cases, 344 00:16:25,200 --> 00:16:28,270 you won't necessarily care that something happened and so, for example, if 345 00:16:28,269 --> 00:16:31,769 the component is hidden, which means some other window comes over it, the component 346 00:16:31,769 --> 00:16:34,088 is moved, or the component is shown, you're like, 347 00:16:34,089 --> 00:16:37,319 yeah, whatever, like I don't care. Those are good things. I need to 348 00:16:37,318 --> 00:16:38,389 have methods 349 00:16:38,389 --> 00:16:41,788 that correspond to those things because in order to implement the interface, I 350 00:16:41,788 --> 00:16:44,788 need to provide methods that correspond to all the methods that the 351 00:16:44,788 --> 00:16:45,899 interface is expecting, 352 00:16:45,899 --> 00:16:47,450 so I need to have these. 353 00:16:47,450 --> 00:16:50,660 But in three of these four cases, I'm not going to do anything, right? It's just 354 00:16:50,659 --> 00:16:52,078 open brace, close brace. 355 00:16:52,078 --> 00:16:55,469 Someone comes along and says, hey, guess what? You know you were occluded. Someone 356 00:16:55,470 --> 00:16:58,840 hid you, so your component's hidden, and you're like, yeah, that's cool. 357 00:16:58,840 --> 00:17:00,490 You're like, aren't you going to do anything? 358 00:17:00,490 --> 00:17:02,139 No, I like hiding. 359 00:17:02,139 --> 00:17:05,720 And it's like, oh, look, your component was moved. Someone came along and moved your window. 360 00:17:05,720 --> 00:17:08,630 Aren't you gonna do something? And you're like, no. No, I'm cool with that. 361 00:17:08,630 --> 00:17:12,350 That's fine. You moved me, all right? 362 00:17:12,349 --> 00:17:15,659 I won't get into the music, but if you can think of that, what that 363 00:17:15,660 --> 00:17:18,400 reference actually is, 364 00:17:18,400 --> 00:17:21,089 it's not that difficult. Louie, Louie. 365 00:17:21,088 --> 00:17:22,279 Component shown, 366 00:17:22,279 --> 00:17:24,779 again, definitely, so the only time we actually care about doing something is 367 00:17:24,779 --> 00:17:27,558 when we're resized because when we're resized, we wanna say, 368 00:17:27,558 --> 00:17:32,039 hey, our component was resized. Let me move that square to wherever the new 369 00:17:32,039 --> 00:17:34,569 center is of that window. 370 00:17:34,569 --> 00:17:36,928 So whenever my component's resized, 371 00:17:36,929 --> 00:17:37,979 I'm gonna get 372 00:17:37,979 --> 00:17:41,588 the component resized method called and I'm just gonna call the method called 373 00:17:41,588 --> 00:17:42,259 Update. 374 00:17:42,259 --> 00:17:46,559 And what's Update gonna do? Update's right up here. All Update says is 375 00:17:46,559 --> 00:17:48,349 remove all, so 376 00:17:48,349 --> 00:17:52,308 who's the remove all message being sent to? It's being sent to myself because I'm 377 00:17:52,308 --> 00:17:56,710 not specifying any particular object to send this message to. 378 00:17:56,710 --> 00:17:59,640 So when I say remove all, I'm sending it to My Canvas. 379 00:17:59,640 --> 00:18:03,250 Well, My Canvas is a G-canvas, which means remove all, removes everything 380 00:18:03,250 --> 00:18:05,190 that's on the canvas. It clears the canvas, 381 00:18:05,190 --> 00:18:09,250 which means wherever the square was before, it just got cleared. 382 00:18:09,250 --> 00:18:12,900 And what I'm gonna do is I'm gonna add some rectangle, and I'll show you the 383 00:18:12,900 --> 00:18:14,919 rectangle. It's pretty simple. 384 00:18:14,919 --> 00:18:17,120 So what I have is 385 00:18:17,119 --> 00:18:20,919 I have a private G-rect that I call rect. It's just gonna be some 386 00:18:20,920 --> 00:18:23,269 private variable that I keep track of. 387 00:18:23,269 --> 00:18:24,829 In the 388 00:18:24,829 --> 00:18:27,509 constructor for my class, what I'm going to do 389 00:18:27,509 --> 00:18:31,089 is I'm gonna - before I tell you what add component listener this does, I'm going 390 00:18:31,089 --> 00:18:35,359 to create a new rectangle, who's width and height are whatever I specify as constants 391 00:18:35,359 --> 00:18:37,178 is the box width and box height. 392 00:18:37,179 --> 00:18:40,409 They're just constants, not a big deal. And I set it to be filled. So what I get 393 00:18:40,409 --> 00:18:43,390 is a filled square. I created this rectangle as a filled square. 394 00:18:43,390 --> 00:18:46,509 I haven't done anything yet with it other than create it, but I've created it and 395 00:18:46,509 --> 00:18:49,150 I have some variable rect that refers to it. 396 00:18:49,150 --> 00:18:52,750 So all Update does is it says, hey, you know what? 397 00:18:52,750 --> 00:18:57,009 Remove the square if it was anywhere on the screen before and now add that 398 00:18:57,009 --> 00:18:57,769 rectangle back 399 00:18:57,769 --> 00:19:00,720 at the center location of the square, right? What's the center location of this 400 00:19:00,720 --> 00:19:03,630 point? You should be good, real good, with figuring out how to center stuff on the 401 00:19:03,630 --> 00:19:03,960 screen. 402 00:19:03,960 --> 00:19:06,779 You take the width of the screen, subtract off the width of the object 403 00:19:06,779 --> 00:19:10,250 you're displaying, and divide by two. That's the x location. You take the height of 404 00:19:10,250 --> 00:19:11,329 the screen, 405 00:19:11,329 --> 00:19:14,629 subtract off the height and divide by two. That's the y location. And this 406 00:19:14,630 --> 00:19:18,880 get width and get height will get the current size of the component, which 407 00:19:18,880 --> 00:19:21,929 means when the components been resized, 408 00:19:21,929 --> 00:19:26,000 this update method gets called, it closed the screen, and it gets rid of the 409 00:19:26,000 --> 00:19:29,308 old box and draws a new box at wherever the new center of the 410 00:19:29,308 --> 00:19:31,138 screen is because this gets called, 411 00:19:31,138 --> 00:19:35,329 which means Update gets called after the component's been resized. So 412 00:19:35,329 --> 00:19:38,279 that way it's gonna redraw the square always in the center of the screen. 413 00:19:38,279 --> 00:19:41,329 The only other thing about this program that you need to know is 414 00:19:41,329 --> 00:19:43,759 in the constructor for My Canvas, 415 00:19:43,759 --> 00:19:47,129 My Canvas implements the component listener, so you not only need to say, hey, I 416 00:19:47,130 --> 00:19:48,820 implemented the component listener, 417 00:19:48,819 --> 00:19:50,200 but you need to let 418 00:19:50,200 --> 00:19:54,180 the - you need to actually say, hey, you know what? I am a component listener, so 419 00:19:54,180 --> 00:19:57,299 add me to the component listener list, and the way it does that is you 420 00:19:57,299 --> 00:19:59,668 just call add component listener 421 00:19:59,669 --> 00:20:02,030 and you pass this, which means myself. 422 00:20:02,029 --> 00:20:04,558 So somewhere, I say, hey, you know what? 423 00:20:04,558 --> 00:20:08,240 Add me to the list of component listeners. I'm giving you a parameter to 424 00:20:08,240 --> 00:20:09,899 myself so you know who I am, 425 00:20:09,898 --> 00:20:14,259 so when something happens to me, you can call my component resize method to get 426 00:20:14,259 --> 00:20:15,569 resized. 427 00:20:15,569 --> 00:20:18,849 And that part up there, that Add Component Listener, is just a broiler plate, 428 00:20:18,849 --> 00:20:21,730 but it's gonna, for example, show up in your NameSurfer assignment because guess 429 00:20:21,730 --> 00:20:25,339 what? In your NameSurfer assignment, when your component gets resized, you're 430 00:20:25,339 --> 00:20:28,589 going to do something very similar to this. You're gonna find out what the new 431 00:20:28,589 --> 00:20:31,769 dimensions of the screen are and redraw everything that should actually be on the 432 00:20:31,769 --> 00:20:32,480 screen, 433 00:20:32,480 --> 00:20:35,769 which means you need to have some way of being able to keep track of the stuff 434 00:20:35,769 --> 00:20:38,308 that's on the screen. 435 00:20:38,308 --> 00:20:42,470 So any questions about this? All righty, 436 00:20:42,470 --> 00:20:46,519 so that's the basic notion of this idea of a component listener, okay, 437 00:20:46,519 --> 00:20:48,389 and what we wanna think about next is 438 00:20:48,390 --> 00:20:51,330 how do I create a larger program with these kind of things. So 439 00:20:51,329 --> 00:20:54,808 this is just the simple hint. Now I'm gonna give you something that's even a bigger hint to 440 00:20:54,808 --> 00:20:56,529 what's going on in NameSurfer. 441 00:20:56,529 --> 00:21:00,440 And so what I'm gonna do is one thing that's real popular these days 442 00:21:00,440 --> 00:21:04,400 is kind of like music, right, like online music and albums and the whole deal. So what I 443 00:21:04,400 --> 00:21:08,780 wanna do is implement a program that keeps track of data related to music 444 00:21:08,779 --> 00:21:11,460 and at best, I'm gonna have a little 445 00:21:11,460 --> 00:21:14,250 music store, the program for the music score. 446 00:21:14,250 --> 00:21:17,819 And the basic idea here is that a lot of what - well, I shouldn't say a lot, 447 00:21:17,819 --> 00:21:21,279 but so far you've been - I don't know. You did a lot of games in this class and games are great 448 00:21:21,279 --> 00:21:24,859 and I totally encourage games, and I'm a big fan of games. I got into computer science because of games. It's a 449 00:21:24,859 --> 00:21:25,769 good time. 450 00:21:25,769 --> 00:21:29,240 But a lot of what computers are actually used for as well, like when you go to 451 00:21:29,240 --> 00:21:33,349 some .dot com site or whatever to like buy music, and I won't name a particular 452 00:21:33,349 --> 00:21:36,889 one because I might get sued, 453 00:21:36,890 --> 00:21:39,960 you know, it's doing data management, right. For them, 454 00:21:39,960 --> 00:21:42,690 when you go to their site, all they really care about are what are the songs 455 00:21:42,690 --> 00:21:44,100 they're providing, 456 00:21:44,099 --> 00:21:47,129 do they - you know, like you're buying a physical CD, do they have it 457 00:21:47,130 --> 00:21:50,950 stock? Sometimes you just get stuff downloaded that's all 458 00:21:50,950 --> 00:21:51,680 digital. 459 00:21:51,680 --> 00:21:54,990 And the other thing they worry about is stuff like prices and inventory 460 00:21:54,990 --> 00:21:57,069 management and stuff like that. But 461 00:21:57,069 --> 00:22:01,119 that's really all that whole side is doing is doing management of data. 462 00:22:01,119 --> 00:22:04,549 So we're gonna write a little program that does management of data, and the basic idea 463 00:22:04,549 --> 00:22:08,419 here is someone comes along and gives us a data file called Music Data 464 00:22:08,420 --> 00:22:09,980 and the idea of this data file 465 00:22:09,980 --> 00:22:12,759 is it's a very simple format. And the basic format - I'll just 466 00:22:12,759 --> 00:22:13,930 draw it out here - 467 00:22:13,930 --> 00:22:18,370 is every line of the file contains information about one album that's in 468 00:22:18,369 --> 00:22:21,359 the inventory and the basic idea is there's a bracket, 469 00:22:21,359 --> 00:22:24,729 here's the name of the album, right. We can't just use spaces in this case because 470 00:22:24,730 --> 00:22:27,779 there might be spaces in the name of the album, but we kind of assume there's no 471 00:22:27,779 --> 00:22:29,210 brackets in the names of albums. 472 00:22:29,210 --> 00:22:30,450 So there's the name. And 473 00:22:30,450 --> 00:22:33,960 then there's a space and a bracket, and then the band's name that actually 474 00:22:33,960 --> 00:22:35,159 produced that album, 475 00:22:35,159 --> 00:22:39,440 and then there's an integer over here, which is the number in stock of that 476 00:22:39,440 --> 00:22:43,009 particular album. So we have ten copies of Snakes and Arrows. Any Rush fans 477 00:22:43,009 --> 00:22:45,058 in here? 478 00:22:45,058 --> 00:22:47,039 No? There's like two? 479 00:22:47,039 --> 00:22:49,569 Times have changed, I've gotta say. All 480 00:22:49,569 --> 00:22:52,179 right. There's not gonna be any fans of this. 481 00:22:52,180 --> 00:22:53,798 Dokken? 482 00:22:53,798 --> 00:22:54,369 Anyone? 483 00:22:54,369 --> 00:22:57,269 Yeah, I would not advise it. 484 00:22:57,269 --> 00:23:00,299 And Smashing Pumpkins. There might be a few - yeah, it's a good time. It's a good 485 00:23:00,299 --> 00:23:01,038 time. Old 486 00:23:01,038 --> 00:23:02,009 stuff 487 00:23:02,009 --> 00:23:04,680 a little better than the new stuff, but that's not important right now. 488 00:23:04,680 --> 00:23:06,070 What is important is that 489 00:23:06,069 --> 00:23:09,418 we're gonna have some data and our program is basically gonna manage this data. 490 00:23:09,419 --> 00:23:12,750 It's gonna read in this data file and allow someone to ask questions 491 00:23:12,750 --> 00:23:13,390 about 492 00:23:13,390 --> 00:23:17,000 for different kinds of albums, do we have that album in stock, and how many of that album 493 00:23:17,000 --> 00:23:18,140 do we have in stock. 494 00:23:18,140 --> 00:23:21,390 And do some nice little graphic display on it to make use of some of the 495 00:23:21,390 --> 00:23:24,000 graphics concepts that we've actually shown. 496 00:23:24,000 --> 00:23:31,000 So what I wanna do in this program - 497 00:23:31,730 --> 00:23:34,390 let me actually show you the program in operation so you can see what's kinda 498 00:23:34,390 --> 00:23:37,730 going on with the whole display and resizing the display and why it's the 499 00:23:37,730 --> 00:23:40,048 coolest thing ever. So 500 00:23:40,048 --> 00:23:43,809 when we run the program, I'm just gonna call this program Music Shop. 501 00:23:43,809 --> 00:23:45,619 When I run Music Shop, 502 00:23:45,619 --> 00:23:46,709 what I get 503 00:23:46,710 --> 00:23:49,750 is basically a blank screen that asks me for an album name, so I can come along 504 00:23:49,750 --> 00:23:50,778 and say, 505 00:23:50,778 --> 00:23:53,509 oh, do you have any copies of Plans 506 00:23:53,509 --> 00:23:56,259 by Death Cab for Cutie - any Death Cab fans? It's a 507 00:23:56,259 --> 00:23:57,359 strange name for a band. 508 00:23:57,359 --> 00:24:01,529 What it does, it might be difficult to see, but it writes that album Plans by Death Cab 509 00:24:01,529 --> 00:24:02,889 for Cutie, 510 00:24:02,890 --> 00:24:06,710 ten in stock, and it writes out little squares to indicate that there's 511 00:24:06,710 --> 00:24:09,919 ten. It writes out ten squares and you might say, okay, Mehran, that's not the greatest 512 00:24:09,919 --> 00:24:13,309 display in the world, and it's not. This display I wrote in a 513 00:24:13,308 --> 00:24:15,990 half an hour last night, but what's kind of cool is, 514 00:24:15,990 --> 00:24:17,870 ah, look, it centers this way. 515 00:24:17,869 --> 00:24:21,119 And here's the other cool thing. Look at the size of the boxes. 516 00:24:21,119 --> 00:24:25,299 They get smaller and they expand, so they always have the same spacing, 517 00:24:25,299 --> 00:24:27,168 but as I expand out 518 00:24:27,169 --> 00:24:31,540 or get smaller, they resize. The fonts don't resize. They just recenter. 519 00:24:31,539 --> 00:24:35,808 I could, for example, put in perhaps one of the greatest albums of all time, 520 00:24:35,808 --> 00:24:39,869 "So" by Peter Gabriel. There's 20 copies in stock as everyone should own a copy, 521 00:24:39,869 --> 00:24:43,000 and if you don't, that's okay. It's perfectly fine. And sometimes I might type in 522 00:24:43,000 --> 00:24:45,940 a band that doesn't exist or an album that doesn't exist, like I might type in - I 523 00:24:45,940 --> 00:24:48,519 don't know - 524 00:24:48,519 --> 00:24:51,889 cow, which is - there's probably an album out there called Cow. I don't know why I always pick Cow. I just 525 00:24:51,890 --> 00:24:52,830 do. 526 00:24:52,829 --> 00:24:56,158 In which case, it definitely disappears. Like we don't have that in stock. Just back off, 527 00:24:56,159 --> 00:24:57,720 man. 528 00:24:57,720 --> 00:25:00,440 So that's what's going on in this program. 529 00:25:00,440 --> 00:25:03,970 So we need to be able to resize the bars and we need to vertically center the 530 00:25:03,970 --> 00:25:07,259 stuff we display in the screen. How do we actually do that? 531 00:25:07,259 --> 00:25:11,119 So one thing we wanna keep track of is you wanna go back to the data, 532 00:25:11,119 --> 00:25:12,569 right? You actually wanna say 533 00:25:12,569 --> 00:25:16,598 if I need to do this, in order to display anything, the first thing I need to do is 534 00:25:16,598 --> 00:25:20,079 figure out some information about the data that I wanna store. So what data 535 00:25:20,079 --> 00:25:21,529 do I wanna store? 536 00:25:21,529 --> 00:25:24,639 Well, I probably wanna store some information about albums because that's 537 00:25:24,640 --> 00:25:26,380 what I have in my data file. 538 00:25:26,380 --> 00:25:29,560 So if I think about my data file and wanting to encapsulate all the 539 00:25:29,559 --> 00:25:32,099 information about one album, okay, 540 00:25:32,099 --> 00:25:36,439 I wanna do something on a per album basis because every album is gonna 541 00:25:36,440 --> 00:25:40,120 have, for example, an 542 00:25:40,119 --> 00:25:41,319 album 543 00:25:41,319 --> 00:25:45,379 name. It's gonna have some band name that produced that album. 544 00:25:45,380 --> 00:25:52,250 And some number that's in stock, like Num Stocked. Oh, and this is a string 545 00:25:52,250 --> 00:25:54,460 and this is a string 546 00:25:54,460 --> 00:25:58,640 and this is an int and it's good to put semicolons at the end of them and it's 547 00:25:58,640 --> 00:26:02,320 probably a real good idea to take this whole thing and turn it into a class 548 00:26:02,319 --> 00:26:04,119 that's gonna encompass all this 549 00:26:04,119 --> 00:26:05,000 because what I want to 550 00:26:05,000 --> 00:26:08,430 have is modularity in terms of my data. If there's a whole bunch of data I wanna 551 00:26:08,430 --> 00:26:12,350 manage, the first question I wanna ask myself is what's the basic element of 552 00:26:12,349 --> 00:26:13,558 data that I want to have? 553 00:26:13,558 --> 00:26:16,599 In this case, the base element is one album. I'm gonna have a bunch of 554 00:26:16,599 --> 00:26:18,548 albums, but the basic idea is one album 555 00:26:18,548 --> 00:26:22,230 and an album's gonna contain an album name, a band name, and a Num Stock, 556 00:26:22,230 --> 00:26:26,140 which are, for example, gonna be private fields of that album. 557 00:26:26,140 --> 00:26:29,130 So one of the things I might wanna do and I'll just show this to you real quickly, 558 00:26:29,130 --> 00:26:32,990 is I would create album.java, which is just some class. 559 00:26:32,990 --> 00:26:36,620 It doesn't extend anything. It's just gonna be a class to keep track of data 560 00:26:36,619 --> 00:26:40,139 and what it's gonna do is it's gonna have some private instance variables, 561 00:26:40,140 --> 00:26:43,930 album name, band name, and Num Stock, that's gonna keep track of the information from one 562 00:26:43,930 --> 00:26:44,759 album. 563 00:26:44,759 --> 00:26:46,609 And then it's gonna have some 564 00:26:46,609 --> 00:26:49,469 other methods. One of the methods it's gonna have is the Constructor. 565 00:26:49,470 --> 00:26:51,409 What does the Constructor do? It says, hey, 566 00:26:51,409 --> 00:26:53,050 you want an album object? 567 00:26:53,049 --> 00:26:57,349 Give me a name for the album, a name for the band, and a number of stock. I'll set all my internal 568 00:26:57,349 --> 00:27:00,609 variables to those things. I'll do a little annoying pop-up on the screen 569 00:27:00,609 --> 00:27:03,919 and what you'll get from your constructor is you'll get an album 570 00:27:03,920 --> 00:27:06,019 object that encapsulates that information. 571 00:27:06,019 --> 00:27:09,539 Now, I made all this stuff private, right, album name, band name, and Num Stock, because 572 00:27:09,539 --> 00:27:11,918 what I wanna do is when you create the album, 573 00:27:11,919 --> 00:27:15,629 you say, hey, this album's in stock. I don't want you to go back and say, hey, no, no, no, the 574 00:27:15,628 --> 00:27:18,629 name of that album changed. That's not what happens, right? When an album's released, 575 00:27:18,630 --> 00:27:23,830 the name stays the same, generally. We won't talk about special cases. So 576 00:27:23,829 --> 00:27:27,649 in order to get the information out of an album object, I need to have some 577 00:27:27,650 --> 00:27:31,070 getters. I can potentially have setters as well, but here I have some getters. Get 578 00:27:31,069 --> 00:27:34,379 album name, get band name, and get Num Stock. Pretty straightforward getters. 579 00:27:34,380 --> 00:27:37,660 You've seen getters in the past; not a whole lot of excitement going on there. 580 00:27:37,660 --> 00:27:40,200 The only other thing I might add, 581 00:27:40,200 --> 00:27:44,048 which I told you in the days of yore that you didn't have much need for until now, 582 00:27:44,048 --> 00:27:45,920 is to have a 2-string method, 583 00:27:45,920 --> 00:27:50,240 just returns a string representation of that particular object if you ask for 584 00:27:50,240 --> 00:27:51,348 string representation. 585 00:27:51,348 --> 00:27:54,878 So it just writes out "album name" by 586 00:27:54,878 --> 00:27:55,839 band name 587 00:27:55,839 --> 00:27:59,589 colon the number stock in stock. So it can return to you a string that basically has all 588 00:27:59,589 --> 00:28:03,049 the information about the object in some nice little display format. 589 00:28:03,049 --> 00:28:04,389 That's the whole class, 590 00:28:04,390 --> 00:28:08,100 okay? This is just a simple class that keeps track of information about one album because we're gonna have a bunch of albums that we wanna keep track 591 00:28:08,099 --> 00:28:11,879 of. 592 00:28:11,880 --> 00:28:14,640 So now that we can keep track of information about one album, 593 00:28:14,640 --> 00:28:17,009 it kind of brings up a deeper question. 594 00:28:17,009 --> 00:28:20,849 The deeper question is we don't wanna keep track of just information about one 595 00:28:20,849 --> 00:28:25,289 album. We, in some sense, wanna keep track of a whole set of albums, a database of 596 00:28:25,289 --> 00:28:26,079 albums, 597 00:28:26,079 --> 00:28:29,429 and what we wanna do if we think about a running program - so I'll go back to the 598 00:28:29,430 --> 00:28:30,490 running program - 599 00:28:30,490 --> 00:28:37,490 is we wanna allow someone, given a particular name for an album, 600 00:28:37,829 --> 00:28:41,259 to be able to go look up all the information on that album. So the way you 601 00:28:41,259 --> 00:28:45,440 wanna think about it is given a name, I wanna go and look up the record for 602 00:28:45,440 --> 00:28:47,039 that particular thing. 603 00:28:47,039 --> 00:28:49,750 And this happens all the time. It happens with your student I.D. records, 604 00:28:49,750 --> 00:28:52,419 except we don't do it by name. We use student I.D. reenact records. 605 00:28:52,419 --> 00:28:54,909 We say given your Stanford student I.D., 606 00:28:54,909 --> 00:28:58,070 let's go grab a record of all of your information. It's exactly the same problem. This 607 00:28:58,069 --> 00:29:01,019 is just the simple version with albums. 608 00:29:01,019 --> 00:29:03,028 So if we wanna think about having some mapping, 609 00:29:03,028 --> 00:29:07,009 where, for example, from some name, we can go get the whole 610 00:29:07,009 --> 00:29:09,558 information about that record. What kind of 611 00:29:09,558 --> 00:29:15,148 data structure might we think about? What kind of thing that you've seen before? Ah, 612 00:29:15,148 --> 00:29:17,018 yeah, the whispered HashMap. 613 00:29:17,019 --> 00:29:20,059 Could it be the HashMap? And in fact, yes, it could be a HashMap. 614 00:29:20,059 --> 00:29:23,849 And the thing you wanna think about with the HashMap, that's very concentrated. 615 00:29:23,849 --> 00:29:26,569 It's a low variance event 616 00:29:26,569 --> 00:29:31,220 where it's kind of tougher the whole time and you're like, ah, everyone. Yeah, it's 617 00:29:31,220 --> 00:29:36,450 early. It's before Thanksgiving. Have some sugar. 618 00:29:36,450 --> 00:29:38,580 We can think about a HashMap. 619 00:29:38,579 --> 00:29:42,619 Now when we think about having a HashMap 620 00:29:42,619 --> 00:29:45,668 - suddenly, everyone wakes up. Food? Food? Bark, 621 00:29:45,669 --> 00:29:49,350 bark. I know, 622 00:29:49,349 --> 00:29:51,319 sometimes. Anyway, 623 00:29:51,319 --> 00:29:54,549 HashMap, what are we gonna map to? What are gonna be the two types that our 624 00:29:54,549 --> 00:29:56,649 HashMap is parameterized by? 625 00:29:56,650 --> 00:29:58,140 What's the first type? What are 626 00:29:58,140 --> 00:30:01,230 we gonna look things up by? What's the key? 627 00:30:01,230 --> 00:30:04,980 String, right? We're gonna look things up by the name, which is a string. 628 00:30:04,980 --> 00:30:09,519 When we look something up, what do we wanna get back? 629 00:30:09,519 --> 00:30:10,859 An album. 630 00:30:10,859 --> 00:30:12,089 So what we're gonna have 631 00:30:12,089 --> 00:30:15,159 is 632 00:30:15,160 --> 00:30:18,150 a HashMap that maps from strings to albums, and I think someone said album 633 00:30:18,150 --> 00:30:19,160 right over here, 634 00:30:19,160 --> 00:30:22,240 although I think I missed you. Sorry. I missed 635 00:30:22,240 --> 00:30:22,900 you again. 636 00:30:22,900 --> 00:30:25,809 So the basic idea is given some name, I'll go look up the whole album and at this 637 00:30:25,808 --> 00:30:28,690 point, you might say but Mehran, isn't the name inside the album? 638 00:30:28,690 --> 00:30:30,009 Yeah, that's fine. 639 00:30:30,009 --> 00:30:33,579 In your student record, it also contains your student I.D. and 640 00:30:33,579 --> 00:30:34,500 your name. 641 00:30:34,500 --> 00:30:36,838 We just happen to look it up by your student I.D. 642 00:30:36,838 --> 00:30:40,109 and it's the same thing here. The user's gonna give us the name to look it up. 643 00:30:40,109 --> 00:30:43,159 When we go look it up, it's fine if the name's also contained in the album, but there's 644 00:30:43,160 --> 00:30:46,519 a whole bunch of other information we care about there as well. 645 00:30:46,519 --> 00:30:51,599 So if we have some HashMap, we'll call this particular HashMap "Inventory" and we 646 00:30:51,599 --> 00:30:55,469 might say new HashMap 647 00:30:55,470 --> 00:30:57,960 that's gonna map from strings 648 00:30:57,960 --> 00:30:59,798 to album, and 649 00:30:59,798 --> 00:31:00,490 650 00:31:00,490 --> 00:31:04,359 there's the constructor. And so that's how we might actually create this 651 00:31:04,359 --> 00:31:06,529 particular HashMap. 652 00:31:06,529 --> 00:31:09,269 So once we have this 653 00:31:09,269 --> 00:31:12,900 HashMap, if we're gonna have some object inventory that's a HashMap of all these things, we 654 00:31:12,900 --> 00:31:16,350 need to load it up. We need to say, hey, all my data is actually sitting in a file 655 00:31:16,349 --> 00:31:16,949 somewhere. 656 00:31:16,950 --> 00:31:19,950 What I need to do is read the data in from the file and 657 00:31:19,950 --> 00:31:24,220 as I read the file line by line, every line I'm gonna create one of these 658 00:31:24,220 --> 00:31:27,450 album objects because every line is information about one album, 659 00:31:27,450 --> 00:31:30,080 and after I create this album object, I'm gonna 660 00:31:30,079 --> 00:31:33,879 add it to my HashMap and so my inventory's gonna be all of my albums 661 00:31:33,880 --> 00:31:35,909 mapped to by their name. 662 00:31:35,909 --> 00:31:38,580 Any questions about that basic idea? 663 00:31:38,579 --> 00:31:42,408 So let me show you the code for them. 664 00:31:42,409 --> 00:31:44,110 What does that actually look like? 665 00:31:44,109 --> 00:31:47,638 So here's album. You saw album. What I'm gonna have is I'm gonna have My 666 00:31:47,638 --> 00:31:48,368 Music Shop. 667 00:31:48,368 --> 00:31:51,588 What's My Music Shop gonna do? Before I show you everything else the Music 668 00:31:51,588 --> 00:31:52,668 Shop's gonna do, 669 00:31:52,669 --> 00:31:55,440 it's gonna have this HashMap. It's gonna have a HashMap for 670 00:31:55,440 --> 00:31:56,330 inventory 671 00:31:56,329 --> 00:31:59,879 that's a map from strings to albums, and it's initialized just the same way you 672 00:31:59,880 --> 00:32:00,899 saw it over here, 673 00:32:00,898 --> 00:32:04,569 and the way I set this up is I'm gonna have some method I'm gonna call - called Load 674 00:32:04,569 --> 00:32:05,450 Inventory. 675 00:32:05,450 --> 00:32:07,308 What's Load Inventory gonna do? 676 00:32:07,308 --> 00:32:11,480 It's going to have a buffered reader because I need to open a file and I'm just gonna hard 677 00:32:11,480 --> 00:32:13,900 code my files called musicdata.txt. 678 00:32:13,900 --> 00:32:17,850 I go and I read the file line by line, so I grab a line from the reader. 679 00:32:17,849 --> 00:32:21,519 If it's the last line of the file or there's no more lines left in the 680 00:32:21,519 --> 00:32:24,829 file, I'm done. Same thing you did with file crossing before. 681 00:32:24,829 --> 00:32:28,199 If there is a line there, then I'm going to write some method that's top down 682 00:32:28,200 --> 00:32:31,600 design called Parse Line, which says, hey, 683 00:32:31,599 --> 00:32:35,178 let me give you this string that I just read in. It's a whole line of the file. 684 00:32:35,179 --> 00:32:39,139 You break up the string into all of its fields and create an album object that 685 00:32:39,138 --> 00:32:40,500 contains all that information 686 00:32:40,500 --> 00:32:41,808 and return that to me 687 00:32:41,808 --> 00:32:47,059 and I will assign that to something I'll call album, which is a type capital A Album. 688 00:32:47,059 --> 00:32:50,789 And then what I'm gonna do is I need to put that in my inventory, so in my 689 00:32:50,789 --> 00:32:52,210 inventory, I'm going to put it. 690 00:32:52,210 --> 00:32:53,590 How am I going to put it in there? 691 00:32:53,589 --> 00:32:57,599 I'm gonna put it in by the albums name is the key, so I just say, hey, I have an 692 00:32:57,599 --> 00:33:00,230 album object that contains all my information now, 693 00:33:00,230 --> 00:33:04,009 so album.getalbumname will give me the name. That'll be the key, 694 00:33:04,009 --> 00:33:07,759 and the thing that I wanna store relative to that key is the whole album 695 00:33:07,759 --> 00:33:09,200 object. 696 00:33:09,200 --> 00:33:13,630 So this just line by line reads the line, parses it - I'll show you how to parse it in 697 00:33:13,630 --> 00:33:15,460 just a second - to create an object, 698 00:33:15,460 --> 00:33:17,480 and then adds that object to this 699 00:33:17,480 --> 00:33:20,308 HashMap I'm creating that's gonna store everything. 700 00:33:20,308 --> 00:33:25,269 Know this, live this, learn this, love this. You'll do this for NameSurfer. 701 00:33:25,269 --> 00:33:29,250 So after I do all this stuff, I close off my file and I'm done because presumably, 702 00:33:29,250 --> 00:33:32,210 I should've read the whole file and put everything into my database and I'm done. 703 00:33:32,210 --> 00:33:35,990 I do my little exceptions with file reading, just in case I had 704 00:33:35,990 --> 00:33:36,480 exceptions. 705 00:33:36,480 --> 00:33:41,009 So the only code you haven't seen so far is parse line. What's parse line doing? 706 00:33:41,009 --> 00:33:44,890 Parse line is a string manipulation extravaganza. 707 00:33:44,890 --> 00:33:46,509 So what's parse line doing? 708 00:33:46,509 --> 00:33:49,210 And I'll just go through this very simply. It's a lot easier than it looks. 709 00:33:49,210 --> 00:33:51,829 Basically, it's just a lot of indexing for strings. 710 00:33:51,829 --> 00:33:53,019 What I do is I say, hey, 711 00:33:53,019 --> 00:33:54,969 I got a whole string 712 00:33:54,969 --> 00:33:56,659 that has - oh, I 713 00:33:56,659 --> 00:34:00,950 erased it up here, but basically, starts off with a bracket, has the name of the 714 00:34:00,950 --> 00:34:02,630 album, the name of al, has 715 00:34:02,630 --> 00:34:06,990 the name of the band, and has some number that's an integer. 716 00:34:06,990 --> 00:34:10,829 So how do I break this up into sub pieces that I can actually store in my 717 00:34:10,829 --> 00:34:11,500 structure? 718 00:34:11,500 --> 00:34:14,199 Well, the first thing I'm gonna do is I wanna pull out the name 719 00:34:14,199 --> 00:34:15,229 of the album. 720 00:34:15,228 --> 00:34:19,108 How do I find the name of the album? The name album starts after the first 721 00:34:19,108 --> 00:34:20,079 opening bracket, 722 00:34:20,079 --> 00:34:23,809 so I find the index of the first opening bracket and add one to it. That's the first 723 00:34:23,809 --> 00:34:27,219 character of the album name. How do I find where the end of the album is? 724 00:34:27,219 --> 00:34:30,368 I look for the index of the closing bracket, 725 00:34:30,369 --> 00:34:34,048 and so basically, if I take a sub string from the start of the album name to the 726 00:34:34,048 --> 00:34:38,259 end of the album name, I pull out that piece of text that's just the album name 727 00:34:38,259 --> 00:34:41,369 and I'm gonna store that in a string called Album Name, which is just a local variable. 728 00:34:41,369 --> 00:34:44,720 So now I've pulled out the album name. How do I get the band name? 729 00:34:44,719 --> 00:34:45,059 Band name, 730 00:34:45,059 --> 00:34:48,190 I look for the index of the first bracket 731 00:34:48,190 --> 00:34:49,548 after the album name. 732 00:34:49,548 --> 00:34:52,719 That's the critical thing. If I don't look starting after the album name, I'm gonna 733 00:34:52,719 --> 00:34:55,798 read the album name again. So I look for the first bracket 734 00:34:55,798 --> 00:34:59,338 after the album name, which is ed album name end plus one. 735 00:34:59,338 --> 00:35:02,768 That will get me the index of the bracket where the band name starts and I add 736 00:35:02,768 --> 00:35:05,889 one to that, which gets me to the first character of 737 00:35:05,889 --> 00:35:07,108 the band's name. 738 00:35:07,108 --> 00:35:10,469 And then I do the same thing over here. Where's the end of the band's name? Get the 739 00:35:10,469 --> 00:35:12,359 index of the closing bracket 740 00:35:12,360 --> 00:35:16,010 starting at the end of the album name so I don't get the closing 741 00:35:16,010 --> 00:35:16,950 bracket for the album name. 742 00:35:16,949 --> 00:35:20,568 I get the closing bracket for the band name. So I start at the album name plus 743 00:35:20,568 --> 00:35:20,938 one. 744 00:35:20,938 --> 00:35:22,438 So now I have the boundaries 745 00:35:22,438 --> 00:35:24,489 for the band's name 746 00:35:24,489 --> 00:35:27,999 and so the band's name is just the substring I get in the line from the 747 00:35:27,998 --> 00:35:31,939 starting index for the band's name to the ending index for the band's name. 748 00:35:31,940 --> 00:35:34,858 Now, the final thing I need to do and this is funky thing. It's probably the 749 00:35:34,858 --> 00:35:36,170 funkiest thing of this whole 750 00:35:36,170 --> 00:35:38,960 function, of this whole method, and it's pretty simple, 751 00:35:38,960 --> 00:35:42,030 which is say that last thing that's on the line is actually integer, so I don't 752 00:35:42,030 --> 00:35:43,760 wanna pull it out as just a string. 753 00:35:43,760 --> 00:35:46,899 I need to actually convert that string to a real integer. 754 00:35:46,898 --> 00:35:48,078 How do I do that? 755 00:35:48,079 --> 00:35:51,859 Well, let me first find out where that number actually lives. 756 00:35:51,858 --> 00:35:52,998 Where do I find the number? 757 00:35:52,998 --> 00:35:56,408 I look for the number by finding the first space 758 00:35:56,409 --> 00:35:58,269 after the end of the band 759 00:35:58,268 --> 00:36:00,529 name. The first space after the band name 760 00:36:00,530 --> 00:36:05,300 is gonna be this index right here. The number starts on the next location, so if 761 00:36:05,300 --> 00:36:08,499 I take that particular location, 762 00:36:08,498 --> 00:36:10,819 after the end of the band name, and add one to it, 763 00:36:10,820 --> 00:36:15,450 I now have an index that's the very beginning of the number of that numeric 764 00:36:15,449 --> 00:36:19,539 sequence. So what I wanna do is I wanna say pull out that numeric sequence as 765 00:36:19,539 --> 00:36:22,949 a string and convert that string to an actual integer. 766 00:36:22,949 --> 00:36:24,409 How do I do that? 767 00:36:24,409 --> 00:36:25,978 Well, the way I pulled it out 768 00:36:25,978 --> 00:36:26,969 is I say 769 00:36:26,969 --> 00:36:28,939 take the substring of the line 770 00:36:28,940 --> 00:36:32,980 that starts at the starting position of the number of the number stock. 771 00:36:32,980 --> 00:36:34,989 That's where I just computed in the last line was 772 00:36:34,989 --> 00:36:36,688 where that number starts. 773 00:36:36,688 --> 00:36:39,839 Because I don't specify an ending index for 774 00:36:39,840 --> 00:36:43,780 this substring, it goes till the end of the line, which means it takes all the 775 00:36:43,780 --> 00:36:46,500 characters. If there happens to be like 100 in stock, it starts at 776 00:36:46,500 --> 00:36:50,199 the one and takes the 100, it takes that whole substring as this 777 00:36:50,199 --> 00:36:51,319 substring right here, 778 00:36:51,320 --> 00:36:52,670 and what do I do to that? 779 00:36:52,670 --> 00:36:56,730 There's a method that's a static method of our friend the integer class called parse 780 00:36:56,730 --> 00:37:00,239 ins, and so if you say integer.parseins, 781 00:37:00,239 --> 00:37:01,559 you give it a string, 782 00:37:01,559 --> 00:37:04,570 it converts that string into its integer equivalent. 783 00:37:04,570 --> 00:37:08,210 So what it does is it says, hey, I'm giving you the number that's the number stock 784 00:37:08,210 --> 00:37:09,349 as a string. 785 00:37:09,349 --> 00:37:12,480 It says okay, I'm gonna parse that and turn it into an integer and what I will give you 786 00:37:12,480 --> 00:37:15,380 back is something you can store as an int. 787 00:37:15,380 --> 00:37:18,599 So that's how we convert that last portion of line from a string 788 00:37:18,599 --> 00:37:21,499 to an integer. We first extract it and we get the integer. And then what are we 789 00:37:21,498 --> 00:37:23,978 gonna return to the person who called our function? 790 00:37:23,978 --> 00:37:27,629 We're gonna return a new album object, we're gonna create a new album 791 00:37:27,630 --> 00:37:28,009 object, 792 00:37:28,009 --> 00:37:32,239 where we initialize the album object to have the album name, the band name, and 793 00:37:32,239 --> 00:37:36,249 the number stock that we just parsed out of that line. Are there 794 00:37:36,248 --> 00:37:37,948 any questions about that? 795 00:37:37,949 --> 00:37:40,710 Standard thing you do in files, you pull out a line as a string, 796 00:37:40,710 --> 00:37:44,619 you break up that string using some string manipulation operation, however 797 00:37:44,619 --> 00:37:45,949 you wanna break it up, 798 00:37:45,949 --> 00:37:49,459 and then you potentially create some object out of it so that you can store all of the nice 799 00:37:49,458 --> 00:37:52,298 things that you extracted out of the string into nice little name 800 00:37:52,298 --> 00:37:54,298 fields. 801 00:37:54,298 --> 00:37:56,019 So this gives you an album object. 802 00:37:56,019 --> 00:37:57,449 Then back up here, 803 00:37:57,449 --> 00:37:59,208 that album object 804 00:37:59,208 --> 00:38:03,028 is getting returned by parse line. We put those album objects into our inventory 805 00:38:03,028 --> 00:38:05,798 HashMap indexed by the album 806 00:38:05,798 --> 00:38:07,759 name. Are there any questions about that? 807 00:38:07,759 --> 00:38:11,259 If that's clear, nod your head. Good time. All 808 00:38:11,259 --> 00:38:14,228 right. And that's basically 809 00:38:14,228 --> 00:38:17,818 the role loading of the database. Now the only other things going on here 810 00:38:17,818 --> 00:38:20,538 is we need to figure out our little 811 00:38:20,539 --> 00:38:22,439 interactors, right? So in our program, 812 00:38:22,438 --> 00:38:26,288 we have a label that asks for the album name where the user can type the album 813 00:38:26,289 --> 00:38:26,929 name, 814 00:38:26,929 --> 00:38:30,499 so we put in a label. Then we put in a text field that has a maximum size 815 00:38:30,498 --> 00:38:33,318 of 20, right? At this point, this should all be sort of old hat. 816 00:38:33,318 --> 00:38:37,168 We add the label to the southern region. We add the album name, which 817 00:38:37,168 --> 00:38:40,688 is just a text field that's gonna take in the album name for the southern 818 00:38:40,688 --> 00:38:43,009 region so we get those two interactors. We get the label 819 00:38:43,009 --> 00:38:46,949 and the text box, okay? And the 820 00:38:46,949 --> 00:38:50,659 things we wanna do after we set up the interactors is we say, hey, I need to display 821 00:38:50,659 --> 00:38:53,048 the stuff somewhere. 822 00:38:53,048 --> 00:38:56,798 Mehran, I remember he told me, oh, about 20 minutes ago, that if I 823 00:38:56,798 --> 00:38:59,528 wanted to actually have some canvas 824 00:38:59,528 --> 00:39:03,909 that could resize itself automatically when the user changed the window, what I 825 00:39:03,909 --> 00:39:07,429 need to do is extend the G-canvas. I need to create in my own version of canvas and 826 00:39:07,429 --> 00:39:09,128 make it a component listener. 827 00:39:09,128 --> 00:39:10,858 That's the same thing I'm gonna do here. 828 00:39:10,858 --> 00:39:14,318 I'm gonna create something called a Music Shop display 829 00:39:14,318 --> 00:39:17,688 and Music Shop display, which I'll show you the class for in just a second, is something that 830 00:39:17,688 --> 00:39:20,719 I'm going to store as my canvas as a 831 00:39:20,719 --> 00:39:23,468 private variable inside my class. 832 00:39:23,469 --> 00:39:26,818 And I'll just go ahead and say, after you put your little interactors on this 833 00:39:26,818 --> 00:39:27,778 screen, 834 00:39:27,778 --> 00:39:30,929 create your new canvas and add the canvas, just like I did before in the 835 00:39:30,929 --> 00:39:31,960 previous program, 836 00:39:31,960 --> 00:39:35,929 now load all your inventory, so go read the file, do all that parsing, the funky 837 00:39:35,929 --> 00:39:38,518 stuff, set up the inventory. Add 838 00:39:38,518 --> 00:39:42,129 action listeners because I wanna be able to listen for events that actually 839 00:39:42,130 --> 00:39:46,619 happen on the buttons and also add the text field album name as an action 840 00:39:46,619 --> 00:39:47,539 listener. 841 00:39:47,539 --> 00:39:49,930 So it basically wires everything up. It says 842 00:39:49,929 --> 00:39:54,299 put in the interactors, create the canvas that I'm gonna draw stuff on, load the 843 00:39:54,300 --> 00:39:57,729 inventory into data, and get ready to listen for stuff. 844 00:39:57,728 --> 00:40:00,928 And then it's ready to go. It's not gonna do anything until I get some events, but 845 00:40:00,929 --> 00:40:02,239 now it's ready to go. 846 00:40:02,239 --> 00:40:05,150 So load inventory you saw, parse line you saw. 847 00:40:05,150 --> 00:40:06,980 The only thing you haven't seen is 848 00:40:06,980 --> 00:40:09,289 what do I do when an action's performed. 849 00:40:09,289 --> 00:40:12,269 I don't have some button the user compressed. All I have is the text field, so 850 00:40:12,268 --> 00:40:17,008 when they hit enter, I check to see if the source is the text field album name. 851 00:40:17,009 --> 00:40:22,369 If it is, what I'm going to do is ask the canvas to display the inventory 852 00:40:22,369 --> 00:40:23,999 of a particular album. 853 00:40:23,998 --> 00:40:26,909 How do I get the particular album? What I do is I'm gonna say what I want you 854 00:40:26,909 --> 00:40:30,288 to display, I'm gonna give you an album object that's gonna contain all 855 00:40:30,289 --> 00:40:32,119 the information you need to display, 856 00:40:32,119 --> 00:40:34,929 so I'm gonna call display inventory pass in album object. 857 00:40:34,929 --> 00:40:39,679 How do I get the album object? I say, oh, text field, give me the text that's in you. 858 00:40:39,679 --> 00:40:43,329 It says, oh, here you go, and here's what these are typed in. That should be the name of an 859 00:40:43,329 --> 00:40:43,759 album. 860 00:40:43,759 --> 00:40:47,759 I can use that name for an album in a HashMap to look up the album object, so 861 00:40:47,759 --> 00:40:51,639 in my inventory HashMap, I say get on the album name 862 00:40:51,639 --> 00:40:56,259 and if there is an album object in my inventory HashMap, that's what I'll 863 00:40:56,260 --> 00:41:00,749 get back. If there isn't, I'll get back null and I'll go ahead and call display inventory 864 00:41:00,748 --> 00:41:02,948 with null, so it needs to know how to handle that. 865 00:41:02,949 --> 00:41:06,749 So all the action to do the display is gonna happen in display inventory. 866 00:41:06,748 --> 00:41:10,888 So let me show you musicshop.display, which kind of pulls this final 867 00:41:10,889 --> 00:41:12,209 thing together. These 868 00:41:12,208 --> 00:41:15,978 are shock display extends G-canvas, just like you saw in the previous example with the 869 00:41:15,978 --> 00:41:19,718 little square, implements component listener, just like you saw in the previous 870 00:41:19,719 --> 00:41:20,769 example, and 871 00:41:20,768 --> 00:41:23,848 it just has a little bit more complexity. The only additional 872 00:41:23,849 --> 00:41:25,789 complexity it has is in 873 00:41:25,789 --> 00:41:29,869 its constructor. As before, it needs to add itself as a component listener. 874 00:41:29,869 --> 00:41:31,039 That's broiler plate. 875 00:41:31,039 --> 00:41:35,119 But it says, hey, you know what? I'm gonna keep track of the last album the user 876 00:41:35,119 --> 00:41:38,880 actually typed in because when you resize the window, what I need is the 877 00:41:38,880 --> 00:41:42,250 information about that album to redraw everything in the window relative 878 00:41:42,250 --> 00:41:46,449 to that last album. So when I start off, there was no last album, so I set it to 879 00:41:46,449 --> 00:41:47,068 null, 880 00:41:47,068 --> 00:41:50,849 but as soon as you give me a real album, that's what I'm gonna store in last album, 881 00:41:50,849 --> 00:41:53,818 is the last album from the user. 882 00:41:53,818 --> 00:41:56,568 I'll show you a few things down here. 883 00:41:56,568 --> 00:42:03,568 So last album is basically just album that I keep track of in album object, in last album [inaudible]. I have a few constants that indicate for me how big things are gonna be on my display and I can get all the methods of a component listener. 884 00:42:11,418 --> 00:42:15,638 Again, the only one I care about is the resizing event. The other ones I ignore. On the resizing event, I'll call 885 00:42:15,639 --> 00:42:17,180 Update. If I call 886 00:42:17,179 --> 00:42:20,688 Update on 887 00:42:20,688 --> 00:42:21,639 the net display, display from my 888 00:42:21,639 --> 00:42:26,219 inventory the last album that I displayed. So if I had something in my display and my display got resized, 889 00:42:26,219 --> 00:42:27,499 890 00:42:27,498 --> 00:42:31,808 basically all I wanna do is redisplay that last album in the same 891 00:42:31,809 --> 00:42:32,900 graphics window. 892 00:42:32,900 --> 00:42:37,200 So Update calls display inventory or I can call display inventory directly from 893 00:42:37,199 --> 00:42:39,778 my main program to display something. And this is way 894 00:42:39,778 --> 00:42:43,449 more complicated than it looks, so I'll just briefly tell you what it does. It clears 895 00:42:43,449 --> 00:42:44,289 everything 896 00:42:44,289 --> 00:42:48,318 that's in the display from G-canvas currently by calling Remove All. 897 00:42:48,318 --> 00:42:52,858 That is you just gave me an album to display. The last album that I wanna keep track of, the thing that I 898 00:42:52,858 --> 00:42:56,548 wanna keep track of in display next time I get resized or whatever 899 00:42:56,548 --> 00:43:01,170 is the album you just gave me because you just saved me a new album to display, so that's gonna be the album I keep track of to 900 00:43:01,170 --> 00:43:04,438 display on resize events. If that album 901 00:43:04,438 --> 00:43:07,649 was not null - if it was null, I'd just clear the screen. I wouldn't do anything else. If it wasn't null, it 902 00:43:07,650 --> 00:43:08,969 means that 903 00:43:08,969 --> 00:43:12,829 you had a real object in your inventory that was an album, so there's some work for me to do. 904 00:43:12,829 --> 00:43:15,028 What am I gonna do? I'm gonna ask that 905 00:43:15,028 --> 00:43:17,248 album for the number that are in stock and I'm gonna create a 906 00:43:17,248 --> 00:43:22,538 label that has album and the name of the album by and the name of the band, and I'm gonna 907 00:43:22,539 --> 00:43:25,329 place it on the screen at a location that's 908 00:43:25,329 --> 00:43:29,839 censored based on the height of the current display. Then I'm gonna have a fore 909 00:43:29,838 --> 00:43:36,838 loop that displays squares that indicate - shouldn't be dictated; it should be indicated - how many are in by inventory. I won't go through all the 910 00:43:37,128 --> 00:43:39,108 math because the math is not interesting. The only thing that's 911 00:43:39,108 --> 00:43:42,038 interesting about this is I have a fore 912 00:43:42,039 --> 00:43:45,979 loop that goes through the number in stock and draws one filled in rectangle for every number in stock. What's the 913 00:43:45,978 --> 00:43:47,338 size of that rectangle? The length of that 914 00:43:47,338 --> 00:43:50,528 rectangle is called the broad 915 00:43:50,528 --> 00:43:55,719 length that depends on the total size of the window. So I look at the total size of the 916 00:43:55,719 --> 00:44:00,688 window and I divide by however many maximum squares I can display in the window, which happens to 917 00:44:00,688 --> 00:44:05,449 be 20, to get my size. So as the window gets smaller, the display object's gonna get smaller 918 00:44:05,449 --> 00:44:09,500 and as the window gets larger, broad length will get larger. So it depends on the size of the width of the 919 00:44:09,500 --> 00:44:10,998 window. And I do this in a loop so 920 00:44:10,998 --> 00:44:11,848 basically, it just draws all the squares. And you 921 00:44:11,849 --> 00:44:15,869 can go through the math on your own if you're 922 00:44:15,869 --> 00:44:19,099 interested in it, but the basic idea is the squares just size depending on 923 00:44:19,099 --> 00:44:20,619 the width of the window. 924 00:44:20,619 --> 00:44:21,570 Last but not least, 925 00:44:21,570 --> 00:44:26,659 I write out another label that says how 926 00:44:26,659 --> 00:44:27,358 many are in stock and where I display this on the screen depends on the height 927 00:44:27,358 --> 00:44:30,018 of the window because I'm in the center. So as the height of the 928 00:44:30,018 --> 00:44:33,018 window changes, this will always recenter as well. 929 00:44:33,018 --> 00:44:36,508 And that's where all the action is, so when 930 00:44:36,509 --> 00:44:38,478 I run this program, 931 00:44:38,478 --> 00:44:40,838 it starts off not doing anything. And when 932 00:44:40,838 --> 00:44:45,429 I type in an album - let's use Snakes and Arrows because I think that's in there - 933 00:44:45,429 --> 00:44:47,269 I get a bunch of squares 934 00:44:47,268 --> 00:44:51,988 and it's just sitting here. If I type in an album that doesn't exist, like Cow, it 935 00:44:51,989 --> 00:44:55,749 clears the display and there's nothing to display. But if I happen to type in - I'm 936 00:44:55,748 --> 00:44:58,188 gonna do Snakes and Arrows again - 937 00:44:58,188 --> 00:45:01,739 something actually does display. When I do the resize, 938 00:45:01,739 --> 00:45:05,509 it's resizing based on the size of the window because it knows what the last 939 00:45:05,509 --> 00:45:08,539 thing displayed was, right. It knows the last thing displayed was the album Snakes and 940 00:45:08,539 --> 00:45:11,419 Arrows and it's storing that in its own local variable, 941 00:45:11,418 --> 00:45:15,358 so that when I resize, it knows what information to redisplay on the 942 00:45:15,358 --> 00:45:16,978 screen to resize. 943 00:45:16,978 --> 00:45:20,538 Any questions about that? We'll do exactly the same thing in NameSurfer and 944 00:45:20,539 --> 00:45:24,278 I'll give you all the code you just saw. 945 00:45:24,278 --> 00:45:26,650 946 00:45:26,650 --> 00:45:27,769