[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