Instructor (Mehran Sahami): Howdy! So welcome back to yet another fun-filled, exciting day of CS106a. We抮e getting close to that
Thanksgiving recess, which is always a good time. In the days of yore, it used not be a whole week. It used to be you got like one or two days off. You got like Thursday and Friday, which means you would have gotten only one day off from this class and now you get a whole week to mellow in style or catch up on all your other work as the case may be. So there抯 one handout today. It抯 Assignment No. 6, which is the next
assignment, name, circle, watch. They talk a lot about that assignment in this class today. As a matter of fact, we抮e very fortunate for coming
today because I will give you so much gratuitous information that presents that assignment. It抯 just almost laughable.
And then Assignment No. 5, as you know, is due today, so we can do painful to see how much time it actually took you. Just wondering, I heard from my little sources that exist was that last night, a lot of people were at the Lair and the computers at the Lair. Just wondering how many people were at the Lair last night. A fair number. And some of the computers at the Lair just mysteriously didn抰 have Eclipse anymore. Anyone run into
that problem? One person, okay.
Yeah, there was some reimaging that went on, which I had nothing to do with and didn抰 know about until some of the section leaders said, hey, Eclipse is missing on these machines and, you know, so I sent a very anxious email, I should say, to academic computing, and there had been some mix up and Eclipse is now reinstalled on all the machines, so I抦 glad it
didn抰 affect too many people, but if it affected you, I apologize, although we really didn抰 have anything to do with it, but I抦 sorry that
you had to experience that pain.
So in terms of the painful, how much time it actually should give you the assignment on the Yahtzee assignment? Just wondering, how many of you actually liked the Yahtzee assignment? Just a quick show of hands. And how many thought it was just more pain than it was worth? Anyone? You folks, all right. And that抯 good to know. I always try to ?actually try to gauge these things.
So anyone in the zero to two-hour category? You just did it and it worked and life was good. Two to four? A couple people; that抯 always good to
see. Four to six? A reasonable contingent. Six to eight? Good times. Eight to ten? Wow, pretty healthy distribution there. Ten to twelve? Okay, we抮e falling off a bit. Twelve to fourteen? You folks. Fourteen to sixteen?
Maybe a couple. Sixteen to eighteen? Eighteen plus? Taking a late day? Yeah.
As you may have read ?I should refresh your memory because it pertains to Assignment No. 6, but as you may have read on Assignment ?on Handout No. 1 at the very beginning of class, because Assignment No. 7 is due the last day of the quarter, you can抰 use late days on that assignment. So
if you have late days and you抮e like, hey, I was just saving them up
for No. 7, well, seven抯 due the last day so there抯 no classes beyond
seven and you don抰 say, hey, I抦 taking a late day. That gives me an
infinite amount of time to turn it in because there are no more classes. No, it doesn抰 work like that.
So Assignment No. 7 you can抰 use late days on. So again, I would
discourage you from using your late days, but should you have them and you抮e like, hey, I really wanna use my late days, Assignment No. 6 is kind of your last chance to actually use your free late days. Again, not that I would encourage you to use them, but just so you know up here that you don抰 get Assignment 7 and say, hey, I thought I could use my late days for this. You抮e getting plenty of advanced warning that you actually can抰.
One other quick announcement; CS Career Panel is today, so after today, I抣l stop mentioning it because I believe most of you can抰 actually
time travel, so today, 5:30 p.m. in Packard 101. Be there. We have a stellar panel of folks from academia, from industry, a lot of people who actually ?every one is a computer science major and four of the five people graduated from Stanford抯 department. The fifth is actually a faculty
member here that didn抰 graduate from my department, but is a faculty member here.
And you抣l actually see there抯 a very broad range of stuff to do. Out
of those five people, though, actually, I think only one, maybe one and a half who actually do programming as their sort of fulltime job. But all of them are computer science undergraduates, so you get sort of a breadth of what computer sciences can do.
So I抦 so happy to see the fifth region. You抣l see the variance gets
larger, right. As the quarter goes on, that kind of happens, but it抯
good to see that the mean is still where we generally want it to be. So now it抯 time to talk a little bit about your next assignment. You just turned in your last assignment. You抮e like, no, no, it抯 not time
to talk about the next assignment. I抦 still working on the last
assignment. Well, just pay attention.
Here抯 what you抮e going to do for your next assignment. It抯 a little
program called NameSurfer, okay? And the idea of this program is it turns out that the government actually keeps track of statistics of the popularity of names over time, okay. So every decade when they do the census, they kind of keep track of the number of names and they rank the top 1,000 names in terms of popularity for boys?names and for girls?names, and they actually make this data available. We thought wouldn抰 it be
cool if you actually were to display names to the user in terms of how that popularity changed over time.
So that抯 what NameSurfer does. Here抯 the program. What it does is it
shows you the decades. You can notice that this is a graphics, or involves graphics, right, has the decades from 1900 up to 2000 and so relatively recent date up to the last census. And what we can do is we can type in a name and then click graph, and what it will do is it will show the rank of that name over time, on a decade-by-decade basis. So let抯 try Fred,
for example. If you graph Fred, you can see Fred real popular at the turn of the prior century and then Fred just had this quick decent into oblivion, where now he抯 the 974th most popular boys name, at least in the last Census 2000. We can do multiple graphs on here, so if I type in someone else ?so one thing that抯 also interesting is you抣l notice popular
culture comes in, and so if I type in Britney, the alternative non-traditional British spelling, it didn抰 exist until 1980, in which
case it totally shot up to like the top 100 and maybe with the most recent things that are going on, it抯 dropped a little bit.
But through this whole region, what we have in our data, and I抣l show
you the data in just a second, is that Britney did not rank in the top 1,000 until the 1980抯 and then it jumped up. Because it started ranking in the top 1,000 in the 1980抯, it still shows up in our data file because
at some point it started ranking higher than that. And it turns out that there are some people who just have names that, well, are not so popular. So we do Mehran and nothing comes up because contrary to popular opinion, Mehran is not in the top 1,000 most popular names. In a few years, you can change that if you have children. Your choice. Not that I would advocate it, man. It抯 a rough childhood. Mehran, doesn抰 that sound like
moron? Yeah, I haven抰 heard that one in the last two hours. Yeah, I know. I抦 just ?rough childhood. Not that it affected me at all. So in terms of actually doing this assignment, you might say, oh, that抯 kind of
interesting. Now there are a couple of things going on. You might look at that and say, yeah, I could do that, Mehran. I could do that in the zero to two-hour category, right, except for one little thing and the one little thing is check out this bad boy. Whoa. As I resize the window ?I will continue to resize the window until I get you in a hypnotic
trance ?everything in the graphics display automatically resizes to display for that window size, okay? And what you抮e going to find out
today is how do you actually do this kind of thing to keep track of as the windows resizing, how do you get events that come to your program that tell you, hey, some resizing happened. I need you to redisplay what抯
The other thing that抯 interesting about this is I cannot only when I resize, it keeps track of all the information that抯 on there, Fred and
Britney. If I ask someone else like, oh, my son, William, who抯 always
been a popular choice ?ah ha ha ?just like in the top ten dips briefly over here because maybe it was getting over used and then it comes back up. Keeps them all. They抮e in different colors. The color sort of cycles, so if we add someone else, like Ethel ?Ether, Ethel ?yeah, Ethel, sorry, not so popular anymore. When Lucille Ball ?when 揑 Love Lucy?was on or
earlier, it was a popular time. The cycles of colors eventually will go back to black, so if we put in something like Bob, it goes back to black. Then you抣l see red again, then blue, then magenta. That抯 all given
to you in the handout.
If you hit clear, everything goes away, except for the gridlines, and you can sort of go again from there, like here抯 George and you can see George
has a slight decline. Here抯 four back here and now he抯 like somewhere
okay if it goes off the window occasionally, okay? in the hundreds. It抯
But the resizing is kind of the key to this and that抯 what we抮e going
to ?one of the things we抮e gonna look at today. Okay.
So that抯 what you want to keep in mind for the assignment, resizing, because the demo that抯 on the website because it runs in a web browser, doesn抰 resize and it sort just has it as the little warning down at the bottom. It just shows you how the program actually works so you can try out typing in different names and see the behavior. But it doesn抰 resize
because its size it stuck by the browser and changing the browser window doesn抰 actually change the size of the applet. That抯 just life in the
city, okay? But that抯 the way NameSurfer works.
So what we wanna think about is actually building programs that have this kind of property and to understand how programs that have this kind of property work, what we need to think about is something known as a component and related to that is a container. So first of all, I抣l show
you all the classes in Java that pertain to the components and containers. Not all of them, but a good number of them. So here抯 the classes in the
component hierarchy and some of these will look familiar to you. So programs of which Console program and Graphics program that you抳e been
using the whole time are j-applet, which is an applet, which is a panel, which is a container, which is a component.
So somewhere all the way up the food chain, right, the food chain before we didn抰 go that high. We just went up to applet when we showed you sort of this picture before. Turns out all your programs are components and containers. Every component is a container, or every container is a component. And so you may ask, well, what are containers and components? So the way you wanna think about this is at some generic level, a component is anything that can appear in a window. It抯 anything that can in some
sense be displayed. So your programs are appearing in a window that抯
getting displayed. That抯 why they抮e components, okay? Now, that also
means that a graphics program and a console program are also components because they抮e subclasses of program. Now at the same time, there抯
a notion of a container. What抯 a container? A container is simply
something that contains other components, so a container just contains a set of components and you might say, hey, Mehran, that抯 really weird.
A container is a component, but you抮e telling me it contains a set of
components? What抯 that all about? And the simplest way to think about it is it抯 this, okay? This is a component, this bag. It turns out this bag is also a container because it contains things and it抯 perfectly
fine for something to be a container and also to be a component. So here抯 what I mean, right. Your programs, as it turns out, are all components, which means they display in the screen, but they抮e also
containers because your programs contain other things. For example, in the display of your program, it may contain a button. Right? It may also contain, say, a text field. And the other thing that it may contain, if you have a graphics program besides these kind of components, which buttons and text fields are also components ?I抣l show you an example
of that in just a second ?it may contain another container. And it抯
perfectly fine for containers to contain containers. As a matter of fact, you抳e been using them for the whole time. Your graphics program, especially if you have a graphics program that has some interactors on it. It could have buttons. It could have text fields. It could have a G-canvas, and gee, guess what? A G-canvas is a container and a component. Because it抯 a component, it can be contained inside some other container, and because it itself is a container, it may have certain things in it. Oh, like here抯 our friend, the frog image from the mid-term. Yeah, that was just something that was in another container, okay? So there抯 no
reason why something that is a container can抰 be a component, which means
it can be contained in some other container, that抯 fine, and all
containers themselves are components, so they can be stuck in somewhere else. That抯 the basic idea. You should think of it as bags and you can
put bags inside of other bags, and bags contain things. So even though you see the hierarchy this way, the concept itself is not actually that difficult. Now, the thing you wanna think about this is I just mentioned to you your programs are actually components and containers. G-canvas is a container and a component, but components that we talked about before, j-components, like our friends, say, oh, j-button ?you actually saw this slide a couple classes ago, j-button or j-label or j-combo box, all these
you saw before ?are actually j-components. They all are subclasses things
of j-component, which means by being subclasses of j-component, they were also containers, strangely enough, and they are also components. We just think of them generally as components and we try to put them in other containers, like we put them inside the display for a program and that抯 its container. But that抯 the general idea that抯 kinda going on here.
So when you wanna think about containers and components, what you also wanna think about is that these components themselves, before we thought about like action listeners, right, like something happens like I click on some component and some particular event happens, like I clicked on it, something like that. We can think of the whole component as also listening for other events because a component is something that display stuff on the screen.
Stuff can happen to be components, like they can be resized and when a component抯 resized, some event can get generated and sent to that component that says, hey, guess what? You got resized. You need to do something. Like the canvas that shows all the graphics, it can get some event that says, hey, canvas, yeah, you were just resized. Do whatever you wanna do. Up until now, you didn抰 do anything. Someone came and
resized your canvas. You said, yeah, you抮e resizing my canvas. All of
the pieces I have in my canvas stay where they are. Nothing抯 changing.
Now what you抮e going to get is the ability to have the canvas be told, hey, you got resized or something else happened to you. You can respond to it however you want, which means you can redraw everything that抯 in
your canvas, so that, for example, you can have all the layout come out just fine when people resize your window. So what does that actually mean in terms of these components and containers? What it means is that we can have listeners in the same way that you kinda thought about listeners from mouse events and listeners for j-components. You can have listeners for components, okay, like we talked about resizing the window. Now, here抯 a little simple example of something that can go on with one of these components. So I抣l come back to Eclipse, I抣l run a little
program here ?I gotta compile ?and I抣l show you the very sort of simple
program that makes use of this concept of a component having a listener and being able to get certain events. So it抯 just called My Programming.
Here抯 what my program does. It draws a square. That抯 all it does is
it draws in a filled-in square. You抮e like why are you showing me this,
Mehran? I could抳e done this in the first week of class and I would say, no, you were doing terrible in the first week of class. And then you say, no, I could抳e done this in the second week of class and be like, okay, but could you do this? Oh. Yeah, when you did this before, that square just stayed where it was and the size of the window changed. Nothing happened. Now the square always remains in the center of the window no
super small. It抯 still in the center. Super matter how I resize. It抯
big, yeah. Another one of those things good for about 20 seconds. But that抯 the idea. How does it know when the window抯 getting resized that it
needs to do something to update its display? So the way this is going to work, in terms of having this square that recenters itself, is we wanna think about having a program that is a container. And so, up until now, you had console programs and graphics programs, and they were containers and what they did for you automatically for console programming, it created a console for you and put it in your container so that anything you printed showed up in that console.
And for a graphics program, it created a G-canvas for you and put it in the container and anything you drew showed up on that canvas. And now, what you抮e going to do is you抮e going to create your own program that
抯 not a graphics program or a console program, but to which you抮e going
to create your own canvas and add it. And so the way that would look is you would say something like 揚ublic Class?and give it the name, whatever name you want, so I call this 揗y Program?and this is gonna extend just
the generic program. It抯 not gonna extend console or graphics program. It抯 just gonna extend program. And so inside here, it抯 still gonna have
some init method, like you抳e come to know and love in other programs.
And inside init, what we抮e gonna do is say I抦 gonna create a new canvas.
But the canvas I抦 going to create is a canvas that is a new object I抦 going to create myself to define what that canvas is, rather than the basic G-canvas. So I抦 gonna call this My Canvas. I抦 going to do top
down design. My canvas is a class that doesn抰 exist yet, all right? It
抯 not a built-in class. It抯 my canvas. It抯 something that I抦 gonna
write the code for in just a second and I抦 gonna have some object called
揷anvas,?which is off top My Canvas and I will create a new My Canvas. At this point, you should be getting a little bit worried unless you抳e internalized top down design. If you抳e internalized top down design,
you say, yeah, I抦 just gonna go create My Canvas when it抯 time for me
to write that code. For right now, I抦 just going to assume it exists.
And then what I抦 gonna do is I抦 going to add this canvas to my container. When I do an add of something that is a component, in this case, canvas
will be a component ?you抣l see why it抯 a component in just a second ?it
says, hey, program, add this particular element to yourself, and program says, hey, I抦 a container, right? I don抰 already have a canvas. I don
抰 already have a console, but I抦 a container. You抮e giving me a canvas,
whoosh, the canvas goes up into my container, and if it抯 the only thing
in my container, its size will expand to fill up the whole screen. Kind of like you saw last time. And that抯 it. So what I抳e don抰 in this
program is said, hey, I抦 gonna have a program. I抦 gonna create a canvas
where all the action isn抰 gonna happen in that canvas, and I抦 going
to add that canvas to the display and then I抦 gonna let the canvas do
all the work. Is there any questions about this, just creating the canvas? So now we can actually sort of define what is My Canvas and I抣l show
you that on the computer because it抯 a little bit more involved. And
you don抰 need to worry about writing this all down. Actually, on Friday, I抣l give you a handout that has all this code in it. I just didn抰 want
to give it to you now because then you wouldn抰 pay attention to what
抯 going on on the screen, okay? So what I抦 gonna do is I抦 gonna have
canvas, so it抯 going a class My Canvas. And My Canvas is going to be a G-
to be an extension of a G-canvas. It抯 gonna extend G-canvas. So all My
Canvases are G-canvases. Because it抯 a G-canvas, that means it抯 a
a component, I can add it to a container. So thatcomponent. Because it抯
抯 why add works there.
Now, what am I gonna do with this thing? The other thing I wanna do is I wanna say, hey, this is a component that抯 gonna listen for stuff, and
so the way I do this is rather than doing add mouse listeners like I did before, or add action listeners, which look at actions of things like buttons, the way a component actually listens is it implements the component listener interface. So when you wanna have some component that is actually gonna get events that it抯 listening for, component events,
the way you do that is when you create the class, you say it implements component listener. That抯 just the way you say it, so it抯 going to
implement the interface. There抯 some set of methods it needs to provide
that implement that interface and I抣l show you the list of methods real
quickly. They抮e just down here. These four methods here, component resize, component hidden, component moved, and component shown are the methods that comprise that interface, the component listener interface. So anything that implements the component listener interface needs to provide these four methods. In a lot of cases, you won抰 necessarily care
that something happened and so, for example, if the component is hidden, which means some other window comes over it, the component is moved, or the component is shown, you抮e like, yeah, whatever, like I don抰 care.
Those are good things. I need to have methods that correspond to those things because in order to implement the interface, I need to provide
methods that correspond to all the methods that the interface is expecting, so I need to have these. But in three of these four cases, I抦 not going
to do anything, right? It抯 just open brace, close brace.
Someone comes along and says, hey, guess what? You know you were occluded. Someone hid you, so your component抯 hidden, and you抮e like, yeah, that
抯 cool. You抮e like, aren抰 you going to do anything? No, I like hiding. And it抯 like, oh, look, your component was moved. Someone came along and moved your window. Aren抰 you gonna do something? And you抮e like,
no. No, I抦 cool with that. That抯 fine. You moved me, all right? I won
抰 get into the music, but if you can think of that, what that reference actually is, it抯 not that difficult. Louie, Louie. Component shown, again, definitely, so the only time we actually care about doing something is when we抮e resized because when we抮e resized, we wanna say, hey,
our component was resized. Let me move that square to wherever the new center is of that window. So whenever my component抯 resized, I抦 gonna
get the component resized method called and I抦 just gonna call the method
called Update. And what抯 Update gonna do? Update抯 right up here. All
Update says is remove all, so who抯 the remove all message being sent
to? It抯 being sent to myself because I抦 not specifying any particular
object to send this message to. So when I say remove all, I抦 sending
it to My Canvas. Well, My Canvas is a G-canvas, which means remove all, removes everything that抯 on the canvas. It clears the canvas, which
means wherever the square was before, it just got cleared. And what I抦 gonna do is I抦 gonna add some rectangle, and I抣l show
pretty simple. So what I have is I have a private you the rectangle. It抯
G-rect that I call rect. It抯 just gonna be some private variable that
I keep track of. In the constructor for my class, what I抦 going to do
is I抦 gonna ?before I tell you what add component listener this does, I抦 going to create a new rectangle, who抯 width and height are whatever
I specify as constants is the box width and box height. They抮e just
constants, not a big deal. And I set it to be filled. So what I get is a filled square. I created this rectangle as a filled square. I haven
done anything yet with it other than create it, but I抳e created it 抰
and I have some variable rect that refers to it. So all Update does is it says, hey, you know what? Remove the square if it was anywhere on the screen before and now add that rectangle back at the center location of the square, right? What抯 the center location of this point? You should be good, real good, with figuring out how to center stuff on the screen. You take the width of the screen, subtract off the width of the object you抮e displaying, and divide by two. That抯 the x location. You take
the height of the screen, subtract off the height and divide by two. That抯 the y location. And this get width and get height will get the current
size of the component, which means when the components been resized, this update method gets called, it closed the screen, and it gets rid of the old box and draws a new box at wherever the new center of the screen is because this gets called, which means Update gets called after the component抯 been resized. So that way it抯 gonna redraw the square always
in the center of the screen.
The only other thing about this program that you need to know is in the constructor for My Canvas, My Canvas implements the component listener, so you not only need to say, hey, I implemented the component listener, but you need to let the ?you need to actually say, hey, you know what? I am a component listener, so add me to the component listener list, and the way it does that is you just call add component listener and you pass this, which means myself. So somewhere, I say, hey, you know what? Add me to the list of component listeners. I抦 giving you a parameter to
myself so you know who I am, so when something happens to me, you can call my component resize method to get resized. And that part up there, that Add Component Listener, is just a broiler plate, but it抯 gonna, for
example, show up in your NameSurfer assignment because guess what? In your NameSurfer assignment, when your component gets resized, you抮e going
to do something very similar to this. You抮e gonna find out what the new
dimensions of the screen are and redraw everything that should actually be on the screen, which means you need to have some way of being able to keep track of the stuff that抯 on the screen. So any questions about this?
All righty, so that抯 the basic notion of this idea of a component
listener, okay, and what we wanna think about next is how do I create a larger program with these kind of things. So this is just the simple hint. Now I抦 gonna give you something that抯 even a bigger hint to what抯
going on in NameSurfer.
And so what I抦 gonna do is one thing that抯 real popular these days is
kind of like music, right, like online music and albums and the whole deal. So what I wanna do is implement a program that keeps track of data related to music and at best, I抦 gonna have a little music store, the program
for the music score. And the basic idea here is that a lot of what ?well, I shouldn抰 say a lot, but so far you抳e been ?I don抰 know. You did
a lot of games in this class and games are great and I totally encourage games, and I抦 a big fan of games. I got into computer science because of games. It抯 a good time. But a lot of what computers are actually used for as well, like when you go to some .dot com site or whatever to like buy music, and I won抰 name a particular one because I might get sued, you know, it抯 doing data management, right. For them, when you go to their site, all they really care about are what are the songs they抮e
providing, do they ?you know, like you抮e buying a physical CD, do they