ProgrammingMethodology-Lecture20.pdf

Programming Methodology-Lecture20

Instructor (Mehran Sahami): All right. Let's go ahead and get started. A couple quick

announcements. [Audio cuts in and out]

Sorry. A little technical difficulty. So when last we left off – hopefully you can hear me –

the idea is to create the coolest thing you possibly can while using graphics, okay? So

there's two categories that we're actually going to judge these on. One is esthetics, which

is just the nicest looking thing. It can still involve interaction, and probably should

involve interaction or animation, but just the coolest looking thing. Then the coolest thing

allorhythmically, depending on what kind of stuff you put in there. Is it a game? It doesn't

have to be a game. Whatever it might be.

So to give you an appropriate incentive for this, what we're going to do is when you turn

them in, Ben and I are going to look through them. We're going to take a first pass and

take a sub-set of them that we think are the best. Then we'll have the section leaders in

the class collectively vote as to what the winners are in both of the categories. You get, at

most, one entry. Your entry, you don't have to designate for a category. We'll look at

every entry as being entered in both categories. You just get one entry.

If you want to focus on a particular category, you can, but we'll look at both of them.

Then we'll have the section leaders vote and see who the winners are in the two

categories. Just to make your life a little bit more interesting, your prize, if you're a

winner, is 100 percent on whatever thing in the class ends up being your lowest score. It

could be the midterm, could be one of the programs, or it could be the final exam.

Whatever ends up dragging your score down the most.

So at this point, if you're a computer scientist, which means you're thinking ahead, you

could think to yourself and say, hey, if I know I win the contest, because you're going to

announce the contest winners on the last day of class, and I know my lowest score is

going to get replaced by 100 percent, were I to not take the final exam, would that not be

the lowest score in the class and would get replaced by 100 percent? Yes, in fact, that

would be the case, which means if you win the contest – if you choose. If you still want

to take the final, that's cool, and if it turns out that something else is lower, you can drop

that lower thing just as an added bonus if you want, but you don't have to take the final

exam. You just get 100 percent on it if you want.

Now, for those of you who are thinking, hey, doesn’t that blow out the curve and cause

all these other bad things to happen, no, as a matter of fact, it's goodness for you, too. The

reason why it's good for you is whoever wins the contest, we're not going to count

whatever that score was that we replaced with 100 percent as part of the curve. So it's a

very tiny thing. In a class of 300 people, it really doesn't make a difference, but even for

you, the person who won the contest, probably was going to do pretty well on the final

anyway or the midterm or whatever. So taking them out of the curve is actually a little

bonus to you as well.

The other thing, just to sort of say, if you enter and you're not one of the winners, we

don't want to say, all your work was for nothing, immediately. What we're going to do is

say, of all the people who entered the contest who have a serious entry – a serious entry

means you really put some reasonable amount of effort into it. You didn't just say, here's

my hangman program. I'm just going to turn that in as a contest entry. We want to see

some real effort. But for all entries that show some real effort into the contest, what you'll

get it we'll put you into a random drawing, and on that last day, when we announce the

winners in the two categories, we'll also do a random drawing of everyone who actually

entered the contest for one additional winner. That randomly drawn person will also get

100 percent on whatever their lowest score was in the class.

So just a little incentive for you. If you don't have time, you're like, oh, I'm so swamped

with all this other stuff. That's fine. You can take the little slip of paper about the contest,

put it in the recycle bin and just put it out of your head. It won't affect your grade at all.

But if you want to go for it, you're welcome to go for it. So any questions about that?

All right. So a couple other announcements. One thing that was kind of interesting was I

read all the evaluations, so the mid-quarter evaluations. Hopefully you already did for

[inaudible]. If you haven't you should go do them online. But I actually do read them all,

and I'm very serious about trying to improve things. So I was looking through, and there

were some that were kind of interesting that I wanted to share with you.

One of them was, when I review the lectures online, I noticed you say, Do, do, do, a lot. I

had no idea I did that, but do, do, do, now I do. Better throwing accuracy was a pretty

common theme. There were some things that I'm not sure how to deal with, so I'll give

you these two comments in a row.

He could go a little slower, which I can fully appreciate, and then, perhaps he could go a

little faster. I look at how many comments I get on each side to try to weigh that, but

there's a lot of comment of that form. There was one that I saw that made me go, hmm. It

was, I have never been to lecture. I was like, thanks for sharing, and you probably won't

actually ever see this because you don't go to lecture. One person asked – actually, a

couple people, I was amazed they asked for more baby or toddler pictures. That one's

easier fixed. When I get the overhead camera. There's life in the Sohami household.

Notice the book he's reading.

After a little while, you kind of go through the book, and when he gets later in the book,

he realizes this whole time, he hasn't actually been using JAVA 5.0. He gets a little upset,

but that's life in the city. There you go. There's more toddler pictures. Then the last one,

which I thought was interesting, out of all 300 that came in, but I saw Professor Sohami –

you can call me Maron. It's fine –at [inaudible] buying a hard drive yesterday. I wanted to

say hi, but I forgot how to pronounce his name. I was so embarrassed. It's Maron, and

thanks for sharing. All right.

So with that said – and then there were the other comments that I actually pay attention

to, not that I don't pay attention to these. If you saw me buying a hard drive, hey, yo also

works. I'm happy to chat with you about the latest hard drive configurations. Anyway, the

topic for today's class is our friend, the GUI. And you look at that, and you're like, GUI,

what's that all about?

This is what we refer to as a Graphical User Interface. But the way it's usually

pronounced, graphical – graphica. It's sort of more avant-garde that way. At times, you'll

hear people say this as a GUI. Like, oh, it's GUI. It's like taffy. They're just pronouncing

the letters, GUI.

The basic idea in a GUI, right – and actually, if you think about it so far, you've been

doing some stuff that involved the graphical interface before where you might've had a

program, and you did something that involved mouse clicks. So when the user clicked on

the mouse or they moved the mouse, like in breakdown, you were essentially creating an

interface for them that was graphical. But the notion of graphical interfaces that most

people are familiar with when they talk about GUIs are these things that you interact with

on the screen. Things like buttons that you may press or what we refer to as sliders,

which are little things that look kind of like this, and you move this button back and forth

along some scale from high to low. Check boxes, a lot of times, you see on forums on the

web. It's just a little box. Sometimes you can put a check mark in it, or you can click it

again, and it takes the check mark.

Something referred to as radio buttons, and this should hopefully be familiar because this

was on your midterm exam, except we had you do this very stylized version of it with the

graphics library. Radio buttons are just basically where you have a list of choices with

buttons, and when you pick one, it becomes selected. When you pick another one, this

one becomes unselected, and the other one becomes selected. So if you want to give

someone a short-list of options.

There are some other things that come up. For example, something that's called a combo

box. This also goes by other names. Sometimes people call it a drop-down box or a

chooser. It's one of those things that kind of looks like this. Sometimes you see a little

triangle next to it, and it might have some value in it like blue. You click on the triangle,

and you kind of get this thing that drops down, and you get other choices like black or red

or green or whatever the case may be. That's called a combo box or a drop-down box

because when you click on it, this thing kind of drops down.

Or just our friend the text box. A text box is just where there's some form you fill out.

You can enter some text in it. Okay? These are, collectively, what we refer to as

interactors because what they are, are things that allow the user to interact with your

application and provide some information to your application interactively, by clicking

on buttons, moving around sliders, setting check boxes or selecting from radio buttons or

picking some option in the combo box. That's all they are, so we refer to them

collectively as interactors.

Now, the interesting thing is, how do we actually use these in the context of a JAVA

program to allow someone to interact with our program more than they've done before?

So far, people have been able to enter text in a console window, or they've been able to

move a mouse or click. We want to be able to do something more. So in order to do

something more, we need to have the use of some libraries. The libraries that you need to

use for interactions, besides the standard ACM libraries that you use, like

ACM.program.star, is you want to input two JAVA libraries. One is called

JAVA.awt.event.star. These are all in the book, but you can write them down if you want.

You also want to import something that looks a little funkier. It's JAVA X, so just keep

that in mind. It's not JAVA. It's JAVAX.swing.star. And collectively, what these do is

these help you keep track of events when the user's interacting with something. Before,

when you had mouse events when the use clicked, and JAVA X swing is actually a

package that's part of the standard JAVA libraries that has a bunch of stuff that allows

you to create these graphical interactors very easily on the screen.

So those are the libraries that you're going to have. So to give you and idea of what's

actually going to be going on in your program, if we can go to the slides, let me show you

how the program or the interactor hierarchy looks. So in the JAVA world – this is in

JAVAX.swing. All interactors, in some sense, at the end of the day, are what we refer to

as J-components. J-component is kind of the basic, generic thing that all interactors are.

It's kind of like when you think about the graphics library. All the elements that are in the

graphics library like a G-oval or a G-rect or a G-label, are all G-objects at the end of the

day.

Same kind of way to think about it with interactors. At the end of the day, all the

interactors are J-components. Notice this is a J instead of a G because we refer to these as

– they're really JAVA objects, in some sense, so they all start with a J. That's just a

naming scheme in JAVA. Then there's various kinds of things we can have like a J-

button is a J-component. It's just going be a particular button that we're going to display

on the screen. There's different kind of buttons. There's your standard button.

There's other buttons like a toggle button, which we're not going to talk about because no

one ever uses toggle buttons in their raw form. But, for example, a check box and a radio

button, if you think about them, in some sense, are ways of doing some kind of selection

like a button. A button, you just click one thing. A check box, you set some box to either

be checked or unchecked, and a radio button, you pick on of many options. So in some

sense, it's just how much flexibility you have with them, but at the end of the day, you're

doing some interaction with something that involves clicking somewhere to turn

something on or off, basically.

There's a slider, which we talked about, a little slider thing that basically is some

spectrum that you can move some controller on. There's something called a J-label, not to

be confused with a G-label, but a J-label is very similar. It's just a piece of text that you

can put next to some of these other components to label what it is. It doesn't actually do

anything other than just sitting there, being a pretty label.

Combo box that we talked about, and a text field, which is basically like a text box. Now,

there's a few other things that are in here that kind of come up like entfield and

doublefield. We won't be talking about those. Most of the things in here, we're actually

going to cover today, and it's just important to see how they're related. They're all

components at the end of the day, much the same way that when we did graphics, all the

individual graphical kinds of objects were G-objects.

Now, with these interactors, how do we actually put them on the screen? We don't just

put them anywhere on the screen. They actually have a special way that they get laid out

on the screen. It turns out, now, again, you're old enough to find out something that we

sort of didn't tell you about this whole time, even though it existed this whole time. Now

it's time for you to know about it.

Your program window, whether it's a console program or a graphics program, actually

has five regions on it, okay? So far, you never used any of the four regions around the

side. You always just used the center region, but there was actually five regions labeled,

sort of by the points of the compass, north, south, east, west and then the center.

So the way this actually works is the center is where all the action was taking place in

your programs before. So when you had a console program, what you really got was a

text console that took up the center region, which was basically the whole screen at that

time. Anything you wrote out, it got written into the console. On the flip side, if you had

a graphics program, what a graphic's program did – remember, we talked about a G-

canvas. What it did was it put a G-canvas in the center and sort of made it big enough to

take up the whole screen. So that's what was going on this whole time.

You might say, but Maron, what happened to these other regions around the side? I didn't

see any space getting taken up by the regions. It turned out that the other regions are only

visible and only take up any space at all if you add interactors to them, which means if

they had buttons on them or sliders or combo boxes or whatever, when you put them on,

when you're going to put those interactors on, you're going to say which one of these

regions, north, south, east, west or center. Most of the time, you won't put them in center

because the action will still be going on in the center.

When you put them in one of the regions around the sides, it says, hey, I have some

interactor in the southern region. I need to now show the southern region. It will actually

take up space on your screen. Any questions about that?

I'll show you and example of this in just a second. So that's the basic idea of window

regions and what's actually going on with them. The one thing that is important to keep in

mind, just in terms of name, is when we place interactors in one of these regions, we refer

to that region as a control bar. So if we put some buttons, let's say, in the southern region,

what you'll see when your program runs is you'll actually get sort of this gray bar down at

the bottom, and your buttons will show up on it. We refer to that gray bar with the

buttons on it as just a control bar. If we want to be specific, the southern control bar.

That's just the name for it.

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: