Lecture 21 | Programming Methodology (Stanford)

Lecture by Professor Mehran Sahami for the Stanford Computer Science Department (CS106A). Professor Sahami continues lecturing on interactions and pushes it further.

CS106A is an Introduction to the engineering of computer applications emphasizing modern software engineering principles: object-oriented design, decomposition, encapsulation, abstraction, and testing. Uses the Java programming language. Emphasis is on good programming style and the built-in facilities of the Java language.

Complete Playlist for the Course:
http://www.youtube.com/view_play_list?p=84A56BC7F4A1F852

CS106A at Stanford Unversity:
http://www.stanford.edu/class/cs106a/

Stanford Center for Professional Development:
http://scpd.stanford.edu/

Stanford University:
http://www.stanford.edu

Stanford University Channel on YouTube:
http://www.youtube.com/stanford

[intro music]

This presentation is delivered by the Stanford Center for Professional Development.

It's time to delve into a continuation of our last great topic. Okay?

So, it's time to continue a bit with our friend the "interactor".

And if we think about the interactor, an action listener...so last time we talked about

having buttons and buttons-generated action events. Remember that?

So we're going to do a brief review of that and push it a little bit further.

So one of things we talked about is: how in your program, say, in your init method

somewhere you might have "public void init ()"

and inside here you would set up sort of the

parts of your program that you want to actually do something, like, the various

interactors so that when someone clicks on them something happens

and then you would say, "add ActionListeners". And what this would do

is basically say,"Hey I got some buttons in my program,

I want you to be listening for buttons so when someone clicks on a button, I want you to call

a particular method for me called 'ActionPerformed'

and then based on when you call ActionPerformed, I'll figure out what button was clicked

and then actually do something."
Okay?

So, over here we had our friend

"public void ActionPerformed"

And "ActionPerformed" would get as its parameter something called an "ActionEvent".

And an ActionEvent (we'd just refer to it as "e"),

was basically what it would check to see

what action was actually taken or basically which button was actually clicked. Okay?

So hopefully you remember that. That's a little bit of review from last time.

Now, when we got this action event we said there are a couple things you could do with it.

Well, there is actually one main thing we talked about which you could do with it

and you could figure out which command was actually the thing that caused this action event

to be generated by saying, "Hey, you know what i want to do?"

I wanna pull out as a string (and I'll just call it 'cmd' for 'command')

the command, or, the name of the interactor

that caused this ActionPerformed method to be called." So here I would say

e dot

command equals e dot

getActionCommand

and what GetActionCommand does...it's just a method

of this ActionEvent that says,"Hey, I'll return to you the name of the interactor as a string

and buttons' names are basically just whatever displays on the button.

So then I could have some ifs in here based on this command, "if command dot equals"

and I can check for some name, then I might wanna take some action based on that button.

It turns out there something else you can ask this ActionEvent e for

other than the action command

you saw this very briefly last time in the program that we did and you're going to see it a little bit more now,

so i want to spend a little bit more time on it

which is something where you can say, "Hey e,

what i want to get from you is not the action command, I want to get the source of the action."

Now the interesting thing about what "getSource" returns to you...actually let me not put the semicolon

here right now...

is getSource actually returns to you an object.

It returns to you the object that caused this event to be generated, which means if a button was clicked

e.getActionCommand will get the name of the button

e.getSource will actually give you a reference to the button object.

So what you're getting back from this is an object. You're getting a reference to that object.

So, what does that mean for you in, sort of, your everyday life?

What that means is: over here when you want to set up your initialization

You could say, "Hey I want to create a button."

And so i'll have some button i want to create

so I'll say "new JButton"

and maybe that button, i want it to say "Hi" on it

And so one thing I can do is I could say, "hi = new JButton"and "hi"

what I'm going to do is make that an instance variable

so somewhere down here in my program where I have my ivars, my instance variables,

i would have "private JButton hi;"
So I just do the declaration of a variable called "Hi"

which is of type JButton and then in my initialization method

i actually create that button with the label "Hi" on it

and then i go ahead and add it somewhere to

one of the control bars in my programs. So I would say, "add 'hi' maybe to the SOUTH control bar"

because we really like adding things to the SOUTH control bar

It's just fun when buttons show up on the bottom of our screen.

So we say, "Add it there" and then wait for something to happen.

So add my action listener in case this button gets clicked.

Now when the button gets clicked over here,

what i can do

as i could actually

ask command to get its name. Right? Or I could ask the action event to get the action command name

and then i could say something like," if (cmd.equals "

and the name of the particular button that i created over there happens to be ("Hi"). If it happens to be "Hi"

then there's something i want to do, like maybe i'd want to print something on the screen or whatever the case may be.

That's one way i could write this

and this is kind of the classic way that you've seen it written before.

Okay? That's the way you saw it last time.

The other way i can write it with my friend "get source" is: rather than getting the name of the command

and checking to see if the command is equal to ("Hi")

i can actually say, "Hey, you know what? Mehran told me about this thing called e.getSource

as a matter of fact i don't even need this line for command

anymore let me just comment it out so I don't erase it, okay?

And I can say, " if (e.getSource ... this returns an object to me

i want to check to see if that object that it returns is my ("Hi") button

so here i check directly, is it equal equal to "hi" and then I do whatever I was going to do

so this has exactly the same effect as before. It's checking to see if I've gotten a button

that is the "Hi" button that was clicked. Okay?

so the difference between these two things if you kind of think about them, right?, one of them is

i'm just using the name is a string and the other ones i'm using the actual object

Now if you think about more deeply what that means if i think about the name over here, right?

If i think just in terms of the name i never need to be able to refer to the actual object

which means that if i don't need to refer to the actual object again over here

I don't necessarily need it as an instance variable. I only need it as an instance variable if I'm going to refer

to it again in someplace that's in a different method

that's some other method i may have already used it in.

So let me show you an example of what i mean by that in code to make that more concrete.

Okay, so if we come over here to code

here's essentially the code i just wrote

for basically creating a button so it's just the code i wrote on the board, right?

except I just made the font bigger. i create a button with the name "hi"

i put in the southern region. I add my action listeners to listen for that button getting clicked.

When the button gets clicked I say, "Hey. Is the thing that got clicked this button I created?"

Here i actually called it HiButton.

instead of just "hi" over there. I shortened it to "hi" so it would take up less board space.

if it's actually the source of that action is not have my high but not all

will print out below them

so i can go ahead and run this program

and if i run this program this is now i click on get the same thing i saw the four everytime i click on a get

hello there

now alternatively i could have written some slightly differently which is the

way you saw a blast time

what i can do here as i can say hey

when i'm going to do the added just go ahead and create that button and add it

all in one line because i don't need to have some variables it stores the button

because down here i'd i need to check for the source of

what that action and that was

i'm going to have a safe action event

give me your command

and the command is going to be the name of the button

so i no longer need a variable to actually store a reference to the actual

button object

because this is going to give me the name whenever i needed and so as a

result notice your i don't have an instance variable

so this is one of those things that's a trade-off it also should give you a

little bit more insight into when you have instance variables were so when you

don't have instance variables

you need to have the instance variable

in the case

where you need to have

and i want the new one

you want the instance variable in the case where

you want to be able to refer to this variable

in some method

it's different then perhaps the method which got created right so i created i

created the button over here and start somewhere

but i need to be able to refer to and some other method so it's got to be an

instance variable

if i don't need to refer to any other method which is what i saw on the second

place

i don't need to report would again here is a matter fact there's no other place

i need to refer to it after i created then i don't need distorting

and questions about her

was so that's about the neurological at the computer shouldn't try to figure out

which one could if you give it to bond with the same name

i have no idea

right and it's going to cause you problems they don't do it if you want to

see what happens go ahead and dry bread it's a bug in logic not about and what

the computers executing

any other questions are gone

up it's not going to get the actual button so

you're saying in this other case ever here

what is this thing going to return if i didn't create a variable over here

this thing starting to return some reference to your object

the only issue for you now though is you have no way of checking for equality

with some object right as you know if you don't have the same instance

variable you can check to see if that things equal the high button so if you

created high button over here just immediately added it never kept track of

it over here

this guy would return to you

a pointer too high but menu take right i got appointed a high button how do you

know it's high button

you don't because you have no way of comparing it to the actual hot button

created

and that's why we need to work

so why do i show these to differ quite of doing it the reason why i say these

two different ways of doing it is now you're actually make use of this

with respect to some other interact or is the tracks and see where we care

about doing debt source as opposed to you

the uh... action plan

so what we're gonna do next

is going to say you know allot of times and programs that you really want to

have if you want to have some way of letting the user specified

some taxed

in a program that's running interactively that's not consul right

they'd like to be able to type something and so let me just show you example of

this

dvd buchanan

so you have a program that's got what we refer to as a text feel down here

and i call that name and so if i say hey my name is maryland

it says hello maryland

and then i say are not and i was joking my name is really sally

most of you don't know this

as as a hollow sally right so it's just some way of being able to

have some taxes

field over here that the user fails and in the senate interact a right this is

just one fields dot on the console

and then do some action in the action we have to do here is to write something

the console

that makes use of the tax that the

the use your actually typed in

so how do we get something like that to work

so what we need to do is

av and interact with it's called the text field

and basically text field is

is just epping use alright it's a little place where someone can type some text

isn't interact or such as if it under control bars

and then potentially one make it enter

you get some action event that tells you unique actually or if you want you can

do something with this text

so that's the basic idea what you really get is a box and that's all you get with

it if you want to add a label to that box like the added name over here

we need to sort of specified that

and i'll show you how to do that in just a second but what you're really get at

the box in a new types in something

and then hits began turkey then potentially some of them is generated

for you

so how does that actually set up so the thing we want to create is called ej

text field ok it's just another one of these interact or just like you saw

before we had checkboxes in combo boxes and all that stuff it's just called it a

text field

off named this twenty ab

to stand for text field

and what you do when you trade and you want to be easy to use a new g tax to be

loved and what you've given as a parameter here's the funky thing

you don't give it its label

the label doesn't come with the tax till you need to create the label separately

what you give it is the size of that text feel how big it should be in terms

of the maximum number of characters that would show up in their so if we say ten

for example you're saying is i want to have some text you'll get a hold almost

ten characters and if you some font that's variable with it automatically

gives you the size of like ten ends kazan is the widest character in case

you didn't know that's just life in the city

now the funny thing about this right were let relative to add this action

performed

is one the user hits answer

if i didn't do anything else you would not actually get this call to action

performed

we'll because action performed only called for you for buttons

so what you need to do is after you actually create this text field you need

to say hey you know what

i need to let you know about this text field add something that can generate

actions and so the way you do this is a looks a little bit funky

would you tell the tax field

not and

action listeners

bits to pay

you don't need to worry about all that blood is that actually mean at a very

low level all you need to know if you're telling

this text field

hey guess what

you're going to be able to generate actions now and the thing that you're

going to let people know when you generate some actions is yourself which

is why we pass this

but anytime you create excel the youngest do this once for all text of

the via multiple text fields

you need to send this add action listener this

message

each one independently we only have one year so we only need to do it once here

but what this basically gaza says

auto text field

that you can now generate these action events as well

so after you created any sort of set up this line and you would want to add it

some more inter program write to someone your program you would probably say

bad

kidnapped and we might add ginsburg's ample in the south as we had everything

in the south

when someone takes something and it's yep and hits internet will generate some

call to action event for prefer action performed pasternak shanavas

once that gets set up

how do you actually say grout

what was the text field that generated this about right because you could have

multiple text feels that someone could have typed into it hit the enter key

what you're doing teary-eyed use your friend if you just dot me dot get sore

so inside here which are to say is

he died gets worse

is people equal to so yeah

and at this point all kinds of warning bells should go out for you and so maybe

inside here you won't be something like you want to print len

where you want to say hi and then add to it the tax that's in that text box in

the way you do that as you just say the name of whatever the text field is and

the message you sended is get taxed and what it will give you back

act is it will just returned to you this thing by it's not just returns a string

of whatever's in that box on the user enter

so that's all right out hike and then whatever text they type in just like you

saw on the program except that was writing hello

and maybe that's what we want to do

but the warning bells it should be going off now what's the problem if i've just

written the code like this

it's not an instance variable writes i have no way if this is my payment method

over here i have no way of being able to report that's me up again

out here

so i need to create the instance variable right if this is my new method

public void in eight in front of him

what i need to do is this year somewhere else in my class let's say over here

which is where i declare my art bar's right which is just lower down in the

class umar

i need to actually have prided

jamie

packs

field

grossly out and then over here rather than declaring it

i'd just create the new thier so i need to set it up with an instance variable

okay just like this on the example of the button same kind of thing that's

going on here

except the surtax feels

so let me show you an example of this code inaction

so here's a little text field example what i want to do is i'm going to create

next and the consul program some so i don't have a console

in my hand nick i'm going to have

something called name field what's name field it's just a private j text field

right it's an instance variable so i can save off name field

name field i a nationwide over here to be some new jerry text field of site and

write is exactly what i just saw over there

now when i also want to do here is the one actor funk innocent program i want

to give that box a label so before i add this box to my control bar

i'm gonna adding new jail able with jess says names all j label does it just says

hey i'm going to create something that's just this name

or just this particular these attacks attacks happens to be named and i'm

going to add

to my southern control bar

so forth it's just going to write name out there and then after i write name

i'm going to add to my name field which is going to create the box after name

and then i'm going to show you you know i'm going to do exactly what i told you

where you have to tell me name field

you're going to add action listeners of yourself

so that if you do anything

you're going to let

someone else know that you actually have done some action when the user tight

since you would please enter

that means action performed is going to get called for you because now you're

going to be able to generate events to an action listener

and inaction performed

we check you don't get source we can compare against name field 'cause we

have that saved up down here is an instance variable

and will just right out hello and then the text assisted with name field

and money

increase the tax eyes here

just so it's a little bit bigger and we can all see what's actually going on set

for one

of the wild favorite career twenty four

aquino na make a bigger

yeah the asset just in case victor

so here once again they're on

hello marilyn c and one in those it's getting a bit like it in a row right

enter entertainer entertainers that exerc entertainer

that's another one of things it's only so much fun

trying to sell these were scroll emerge from one

not a lot of time going on their why does this gap of about two minutes maybe

one

so we can do it we can go ahead and do it this way now you can get information

pentax box

any questions about text box

behind the back

yeah so basically the way layout works is every time you add things they just

get added sequentially from left to right in whichever region you're adding

them to in this case the southern region and the whole set of stuff gets honored

so if you want to space stuff out which actually need to do our ad for example

more more j labels that might have to spaces in the mental creates more space

between stuff and there's no economic are just leave it here

ikea

so here's what i think india that's kinda funky is we can actually name of

the text field

you might say but maryland this won't get source thing yeah yeah keep around

the instance there but i'm not so keen on that

what i am comwork you not is giving things name so i can just refer to them

by their name inside ok thats cool you can you can have a name

so here that exact same example just slightly differently what i want to do

is on the air

had just one more line here so this is exactly the same code i had before

except after i create the name field i say hey name field

i want to give you an action need

and that were an action command and your action command is going to be name

so whenever you generate these events yeah i can check to see if your sources

actually but the source of that event is you

or if i've given you a name

i can do the same thing i just did with buttons which is down here i can get

action command that gives me the string which is the name of the object the

created this event

and i can see if it's equal to name which is the name that i gave it

so that's just showed you a little back and forth with buttons i kinda showed

you got for it with buttons you just need them cuz you always name buttons

will check against names

but you could actually

check against the source of the button if you want to

gatech still just kinda backwards j text field you always

in some sense have the tax field that you can get with debt source but if you

want to report will by name you have to explicitly given name because name

doesn't show up as part of it right if we want the label we still need to add

the separate label name over here

this is just naming the particular events that come from that box that's

all it does

answer any questions about them

at the max max shows

oss

yen named feel the stand i've are here it's really actually no longer necessary

cuz i don't need to refer to it over here so if i wanted to make it just is

deep sting little campaigns spank sidebars thanks for playing that's real

nice of you

and everything's

although i can't

that's why i did in here cause i still need to refer to it over here to get its

what i could to be honest actually what i could do is i could just

call you get source here and get it source and get it stacks i really don't

need to

but it is better stock that makes it clear that i'm getting the texture so

there is a way around it

but the cleaner ways to actually do it this way

already

get rid of the declaration

that's like c

sang questions about that j text field

uh... yeah

on weekends

and i'll show you that no about twenty minutes

but hand free seats away so before we get there

it's not something completely different

and i think it's completely different is this a how to get to the question in the

back of the room which is

and they're on these things are all sort of showing up centered on the bottom of

the screen cut i actually have these enter actor is laid out a different way

than this way that they're getting laid out for me and in fact you can and

strangely enough the thing you used to do that is called a layout

so i'll let you know controls the layout a particular interactions now it turns

out when you use your friendly console program

or your friend of the graphics program

what you got was a layout was called the border layouts and he was a matter of

fact artists on the border layouts

you saw the boarder layout last time it looked like this

which is you had some cena region you had a north south east and west borders

which is why this thing called a border layout

and what you

what happened with that

what happened with this border layouts

powerpoint wants comply

it at the center was were all the action takes place

the console program would add a console to the sensor automatically right that

is what happens in a consul program and a graphics program would added g canvas

to the center automatically which is what you're going to draw your stuff

and the other regions are only visible if you add stuff to them so in the very

early days when you had a graphics program

that was all just graphics you would say hey mera nothing showed up at is the

self region

yeah 'cause we didn't put any interact or if they are so

these enter actor region's only show up if we actually put in a raptor on

rightly said these are referred to as control bar say saudis last time

so how do i consider different kinds of layouts so there's a couple of other

layout also think about their something called a greed layout

and and the land grant layout works is you actually creighton object called

agreed to lay out and you specify inaccurate lay out how many rows and

columns are in the great layout so

we might take you rosen three columns which means we're going to have a laying

out the look something like this is just a grade with two rooms in three columns

and i say that the code for this in just two seconds and then the nitty-gritty

details

but conceptually here's what it is

now when i had i'd ims so what i do as i say hey you know what i want to set my

layout to leave is great layout

what now happens when i had i done is is it will add items the items being the

interact urs

one-by-one starting at the top most role in the leftmost center in the last most

square

and every time i add a new element it moved over by one until i get to the end

of the row and then it automatically comes down so go sequentially across row

by roe

but allows me to contemplate things that may grade

if i want to actually be able to do things and agreed so let me show you an

example of what a grid layout might look like

world on with you lou died

so great layout

here's a simple program it has a great layout what we do is we start off

inordinate method by saying

hey you know what i want to create a layout

so i want to set the existing layout that the program is going to use to be a

new grid layout that's to come at three to rose by three columns

now one thing that's interesting about this program if you look at great layout

example

it does not extend consul program

it does not extend graphics program these are not expiry of four house and

it's beautiful life and it's beautiful children

what have i done

what i've done is set i'm just going to extend the program i don't want you to

create a console for me and i don't want you to create a g canvas for me

cuz i want to take up the whole story with my barnes baby

so that's what i'm gonna do

almanac

six new buttons and these bonds are just going to get sequentially ad in the

order you just saw and then i'm not saying a tad weiss action listeners

and i'm not going to do anything understanding or the buttons but what i

really the reason why i'm doing this

is i just want to see some big fab but

on the air like that

six buttons that take up to the whole scream

it's a good

my enter actors filled up the graded

the layout takes up as much space as possible in the screen and more

importantly each of the interac yours that i put into agreed cell takes up as

much cell as much space and the cell as possible so there's one comes along and

says

all yeah i got so much space on lay down your likely why why do you do this is

the most bring everything ever i don't hahahaha

lying

didn't have any plan that separately

driving everyone talk about a right now

maybe afterwards

such as frightening as like avnet sound effects got

check this out as i resize the window all bein small uncw big buttons

that's why we

have layout managers because the layout manager just gives conceptually says

this is how your layouts going to be

and it says i'm going to handle all the dynamics of resizing and all that stuff

for ups_ people resize the window

but i need to know how things are laid out and if you give me more space

then i need to understand the take it out

great layout not so useful page or something to seize taken if you see in

the book you know it's talking about

there's another kind of layout

which is called a table layout

so that's another kind of lay out all the flow layout when i can talk about it

all

but there's something called a table layout

any table layout is basically just like agreed layout except for the niceties so

you also give it a number of rows and columns

except where it says is rather than having each one of the interact urs fill

up itself a maximum possible size

i'm just going to give that enter actor as much space is it needs in that cell

and no more

so what does that mean

that means if i come in here rather than a grid layout i say i want to create a

new table layout

and i run this

co-ordinate add more imports

are a little guide

i mean just grab the imports from over here

me

you happy

of graphics sorry

come on table layout

though table layout

let me just show you the

nice for example it cable

didi

sometimes in life

he just got to get on with it

we got ugly with it

table layout

there's table layout

six button still

we can spell resize the window but the button there just given as much sizes

they would actually need they don't fill up the whole

region of the actually ma

table layout such something slightly more useful for us than great layout to

the question came up before which was

hey can i actually link like buttons and text fields together

to create something a little bit more funky and in fact i can do that

initially that any context outside something aloo bit more interesting

which is a program that allows for conversion in temperature so this one's

actually in the books i didn't give me the code because although

cody is actually a the coated on the books i didn't get a chance ever handout

they say it is where i got a label called degrees fahrenheit a label called

degrees celsius

and inside here we can type in some value and if we click fahrenheit to

celsius

it will automatically oil

fill in the southeast field of course one value separately to is zero celsius

the other thing that's kinda funky if i don't necessarily have to click the

button i can type in say some value and hit enter

and that's just like

clicking the button

interesting so how do i create this program well if you think about this

program first i'm going to need is these things are not supersized but they're

all laid out in a grade so i'm going to need a table layout

that has to rosen three columns

the first

element that i have here is just the label that i'm going to have a field

that the text field as a matter fact i have a specialized kind of text field

owners to specialize context field

something called the into field and a double field

they work just like text fields except you're guaranteed to get an integer

value were double value from the menu mighty but now and what happens if

someone types and and wants to come for a twitter butcher

i clicked the wrong button they want to convert age were temperature

it says an internet injuring two brings up this pop-up box and gets in their

face and say oh yeah sorry my bad

so guarantees you get a major

and then i'm going to have a button and somehow i want to link the button and

the tax bills to do the same action

so let me show you the car for that it's actually a lot shorter than it looks

like

first thing to do is a case at the layout to be a table layout notice once

again here i am extending a program 'cause i don't want to console or canvas

created for me

i want to be able to specify the whole layout

so i'm just extending a program

i say set the layout to be a table layout to come in three

and again we're going to go sequentially through all the elements of what i want

to have in the first

element

basically the first thing i want to add to my layout i don't specify intel down

here the very first thing to add to my layout is

degrees fahrenheit as a label

then i'm going to add some fahrenheit field what how did i create that

fahrenheit field actually created it up here

what i did

first was declaring it as an instance variable so fahrenheit field isn't ants

field not agape text field that you feel which is just a specialization of eighty

eight ext field

to just give you back a major other than that it works just like a text field

except drugs one show you any feel totally feel

so i created new and field i specified financial value not its initial sides

but its initial value

its initial value is thirty two

then when i say is hey fahrenheit field

i'm going to set your action command

so that when you generate actions the name associated with the actions that

you generate

is going to be af

dash greater than which we can just think of as a rogue c

that's going to be your name so i said its name and i say you're going to

generate action events

someone adn action listener g love yourself

okay just like you sabi for the text helix up now we're going with an infield

we do exactly that same thing with something called the southeast feel

tells his films also declared to be an infield

it starts off the national volume zero we set it's action command to bc goes to

ap as opposed to ap goes to see so we give it a slide a different name

and we also set yet to listen to action events

okay or did generate action events

and then we're going to lay out our great so first element of the great is

the label as we talked about before

next element of our great is our little text box that's going to actually have

the numeric value in it

and last elements of our great on the first of all of the greatest

is a button that's name is bath goes to see

and you look at this and you say hey marron if i have a button its name is

apt goes to see and i named this guy af goes to see

aren't i getting back to the previous point over here of whether that's the

logical problem where i actually have two elements that have the same name

yeah bday i have to always have the same name but i want to do exactly the same

thing in both cases so it doesn't make a difference

so what i want to do is say someone clicks the button

i'm going to do the conversion so i'm going to have some kind of those who do

the conversion

if someone type something in the text field it hits enter

i'm going to do the same thing

so this is something you see a lot of times on the web where for example if

there's a search engine you use you type in the search engine then click search

or you can just take enter how many people actually click the search button

no one how many people just and hit enter

yet isn't it nice that you can just hit enter

that's the same thing we're doing in this program which is why we went

through the extra rigmarole of setting this action command here

'cause sometimes it's just nice to hear and

and we do exactly the same thing for the grease celsius

the name that was so we add that labeled degree celsius we had the southeast

field and then we create a new button whose name is the same as the action

command for the celsius field

and then we add action listeners that sets up our entire user interface or

entire graphical user interface and a good week

and then when the user clicks on a button we say hey

let me get the action command if the action commands f goes to see which

means you are they type something in the fahrenheit field and hit enter

or they click the button

then i'll get the value in the hair fahrenheit field

because fahrenheit field integer field i just always gives me back in a major

and i do a little bit of math if you don't know the map conversion from

fahrenheit the celsius

don't worry about it this is just how you convert from fahrenheit celsius

you taking nine fifth times the fahrenheit value minus thirty two and i

give you the celtics value now you know

what i do more interestingly if i set the value in the celsius field

to be whatever value i computed

so someone just type something into the fahrenheit feel that he enter or click

the ftc_ button

but in what i do to update the screen is ice change whatever values in the

celsius field

and i destroy the receptacle of that or i should say that

compliment reciprocal the inverse the mirror image how many words can you come

up for the same thing

of that if someone does see dat

which is i get the value that's in the celsius field

i do the map it's necessary to convert herself if the fahrenheit nice at the

fair field and that's the whole program right here is my instant variables

so if i run

my little temperature program

i have my label

i have my initial value and i have my fahrenheit to celsius and if i put in

some value here like a hundred degrees fahrenheit

is thirty eight degrees celsius

and two hundred twelve degrees fahrenheit will not touch the mouse just

hit on me in turkey

uh... an er does the same thing is if i click the mouse and same thing on the

second phase zero celsius

the actor into good times and not created a whole program of the graphical

user interface and i'd like to resize and it just doesn't know a lot always

centers for me is not nice if i make it east mall

while these things don't get too small just sent a i can see the screen that's

what the state

any questions about that

how can use the mikes please

i gotta keep reminding everyone views the microphones

p

but you can look really good

uh... there are ways the with table layout you can actually get it whatever

fortuitous at hands

to actually specify different sizes for things and i just didn't do that here

it's in the book if you want to do a but we're not going to

try to push it out for in this class use it but there are ways you can

so one final thing that we want to do is you might say all this is all good well

mirror on yeah i'm not kind of fun but

really what i like to some text in some graphics together and i want to interact

recycle wanted all right

i want tax taiwan wrapped on interactive you think back to busy rethinking man

hangman you had texting had graphics

but she didn't have interacted

here you have interact there is and i show you example interact arisen tax

twenty click the button and said hi and you know

gave your name or whatever now it's time to roll the enchilada and put them all

together in our friend

text and graphics

so what text and graphics is going to do

is it basically what we want to think about is having some consul in the

program

and the graphics canvas in the program and interact or is in the program so we

can just go to town and do whatever you want to do

how do we make this happen

first thing we're going to do

you had a little bit text on the board just to get out there a little

blood circulating in your legs and i know nothing about blood clots in your

legs where you're actually traveling too long on planes and blood clot

yeah we want to talk about that

i didn't give you a small hands of a save your life beverage traveling on a

trip is longer than two hours sometime during the trip or multiple times get up

and walk around

it will save your life

but nigger ever giving a lecture for longer than two hours

get up and walk around it'll save your life to not be the blood clots but

because your students would tell you have to drive you just sitting there

going like all i know not good bread that layout were which we're not going

to get into it

but is it accidentally so text and graphics

she retains the taste great together

you can decide which ones chocolate and which ones peanut butter

lettuce text and graphics and so it's like hangman but with interactives

so what we're going to do is we're going to extend consul program

and the reason why we're going to extend the consul program he's we still need

our plan the console that's what we're going to get the text portion of doing

this interaction

it's from having the consul program

and so what we have a console program what please give this is it gives us

the borders

that we've come to know when law writing gives us the north border in the south

border and western he's and these are places where we can still play so enter

actors

the interesting thing is what's going on in the center region

and what i told you before the consul program

fills up the senate region with a place where you can put text and that's all

you can do with it

so what we're going to say it a consul program what i want to do is in the

center regent i want to give you a different layout and put stuff in that

lady out

second potentially have some text in some graphic

uh...

so what am i going to do

the first thing i want to do is i'm going to think about having some layouts

okay mine layouts going applied to this middle region

the important thing to keep in mind as the console program what used to be was

created console the filled up the entire region

now what i'm going to get is a console as my first elements

which means however i do the layout whatever i do and that lay out the very

first thing like what i have a great that has three elements to it one row

the first elements of that

will be my consul

that you don't have any control over just because of the way the consul

program works the first elements of whatever layout you used when you extend

the consul program create a layout for wall waise bhi your whatever your text

it's

now you said hey

there on your awesome tell me about graphics but if i'm doing with the

consul program how do i get graphics

we give a little trick we did in hangman which is there's this thing called the g

candidates

and what we're going to do is create agee kandicn digi cam this importantly

is actually something that we can add to a linux

so what i can do is say hey crave my consul program i'm going to create some

layout but sam i have a great that's

i'm going to create some sort of way out like maybe i have agreed me out

one comment three

which would give me dressed

i know that my first things i think up my my console what i want to do is

creepy g canvas

and ad that you can visit is my second elements

and just to be super cool to give you something that normally you'd have to

pay twelve ninety five four but i want to get at you for for

we're going to create another g hands and added over here so that she can this

bills

so what we get is consul and to different g canvases

plus we can still add interac result round or screen

at this point you should be looking at this and shock horror and delight and

going

okay marron let's all put it together and five minutes because it's just that

he

so here's how it works

text and graphics ike's ten console program

okay 'cause that's going to get my consul

in miami i say set the layout

on one new grid layout remember great layout the elements of the great layout

expand to take how much space you give them

that's what i want in this case

because what i want to say as i want to have a great i want to give the consul

one-third of the whole grade and cute and this is another third of those

grades and grown too is large as they can be

then i'm going to do is i'm going to create to canvass so i need to have some

instance variables to refer to these canvases

i am i have to canvases

which are just type is g canvas by private labels i will call them the

right canvas and the left hand yes

animals have a text field in this program just for laughs just cuz i can

and that's going to be one of my characters so i want to have interact

respect graph

what am i going to do

first thing to do it on to say that left canvas create a new canvas

that can viz

and when i do this add it's adding it to my laid out

ham adding a whole candid so what is that do it says hey told me got a great

layout here ive already filled in the first thing with the console 'cause

that's what i do on the console program

you just told me to add a canvas

element number two will be the canvas

i do the same thing again for white canvas element number three is not the

right and so i have to big canvasses on there as the second and third elements

of my grade

i got a console

grid canvas tents not going to add to interact with because it's just that

cool i'm going to create a text field which they knew gatech steel text field

i declared as a private instance variable i just showed you that

maximum size is ten

i will add a label to it and the label just going to be called some text

sold the rights some tax

in the southern region

that'll adam i text field in the southern region and that ads at this

point you should come to know involved you always gotta remember to add your

action list are very common thing that happens people create a text field and

their type in an end stuff in the program enough things happening in their

tearing their hair and they're wondering why

they just forgot to add the action list you know it learn it live it probably

it's a good time

action listener for your text field

and then i would have to buttons just for good times so i have my tech said

i'm gonna have to more buttons a button that says draw on the left

and a button that says draw on the right

so i mean show you what all these things are going to do

before i show you the rest of the program

so what i want to show you text and graphics

uh...

out my consolation

i have to you can see them but they are side by side q different canvas windows

over here here's some text i can type in high

you typed

while

that exciting

drama left in my left hand that some just run rectangles offsite i do that

just a second

draw a right

drawing in my right candidates

how did i make that happen alright on your share of the programme so i've set

everything up right console to canvases

text field and two buttons at the bottom

here is where all the actions going on when action performed is called right i

mean someone's interacting with one of the interact urs there's nothing else i

can do in the program except interact with one of the inner actors

first a check for the text field if the interaction with the text field so if

the source of the interaction with the text field i write about you typed and

the text of the text field this will go into the consul biggest anytime you do

applicable in the text always goes in the consul so it just shows up in the

consul not a whole lot exciting going on there

alternatively if the thing they did was not stipe into the text field

they clicked one of the bottoms so i say hey i'm showing i could've been there

done all with get sore throat always get action command

i'm using both just to show you that you can mix and match if you want

so i say hey what was the command get action command

if it was drawl left then what i want to do is i'm going to create a new field a

rectangle let me show you create new filled rectangle it's very simple

it just

creates a rectangle that's fifty by twenty and yes they should have been

constant i didn't make them conference i wouldn't have to scroll down and show

you the constant

i said to be filled

and i return the rectangle solid does is create a filled rectangle on say hey

your ego

and although i do is i take that filled rectangle and i added

to my left hand dates

so because that's not a graphics program i can just a tad with the rectangle one

added if i want to add the rectangle somewhere i need to specify which canvas

of my adding a few i'm adding it's the left campus icao left hand this ads

yourself this rectangle where you can add it x location twenty and at one

location left y

left wide starts out with the value ten

and every time i add something i'd space down my wife's i'm just making wide go

down to buy some spacer mt which is thirty so i was doing is trying a

rectangle and essentially moving down toward drachmir x next rectangle below

it moving down to draw the next rectangle below it

and i do exactly the same thing for the right hand side

except after a quick quick filled rectangle i have a separate whitewater

which keeps track of how low of gotten on that side in terms of the white ford

net

and i add to the right canvas

that's the only difference

so when i run this program

right some text

right again if i type and great

by typing great

and hit enter it generates the event which does the sprint lynn on the screen

right it generates this event over here this action performed

the source was text field and i write out the text on the screen

if i click on one of the buttons drama apt

draws the filled rectangle and its incremented the why on the left hand

side for next time i clicked route left

it draws at lower and lower and lower and dry right does the same thing

notice of the x location for both

this canvas and this can this when i had the rectangles are both a twenty the

reason why it shows up to a different place in the screen is because they're

two different and this is in those kind of invisible border here

so you can create cameron text

graphics and interactive altogether and just go to town any questions

all right and i will see you on wednesday