 And welcome to Simple Java GUI Tutorial. In this tutorial, I'm gonna teach you the absolute basics you need to make a Java GUI app. And this app is gonna be a temperature converter where we take Celsius and convert it to Fahrenheit or and or Fahrenheit and convert it to Celsius. So a quick shout out to my members. Thank you so much for supporting the channel. Couldn't do it without you guys. And if anybody's interested in joining, please click the join button or subscribe below. So let's take a look at what we're gonna be doing. We're gonna be creating a very simple app where we convert Celsius to Fahrenheit. So you can see here we've got some labels, a label that says Celsius, we've got a label that says Fahrenheit. We've got a little text box that's where we're gonna put our Celsius. We've got a text box where we're gonna put our Fahrenheit. And we've got a couple buttons. So one button for calculating Celsius to Fahrenheit and one button for calculating Fahrenheit to Celsius and all of these elements are inside of something called a frame and I've called that FRM main and I'll come back to this in a little bit. So some of the coding concepts we're gonna be looking at here is Java Swing, which is, let's us make GUIs in Java. The different UI components, which I just talked about buttons, labels and text fields and also frames. We're gonna be using static variables and methods. We're gonna be using something called an action listener and action event and then we'll be using the double classes parse double method. Now I designed this tutorial for my students that I'm currently teaching in AP Computer Science and they've been doing Java for a couple months. So I'm trying to stick to things that they know and that they know how to do. So going back to the app, so let's take a look at this. If you haven't done GUI programming before, I'll try and keep it simple for you. So basically a GUI is a graphical user interface and you can see here we've got a window and in this particular window we've got a frame and this frame we've called FRM main. So that's kind of the background. That's where we're gonna put everything into. Now again, GUI stuff can get very, very complex. I'm keeping this as simple as humanly possible. So GUIs are made up of different UI elements. In this case we've got labels, we've got text fields and we've got buttons. So basically we need to create those labels, we need to create the text fields, we need to create the buttons and just kind of tie it all together with a little bit of code. Now notice the names that I've used. So the labels I started with LBL and the text fields I started with text, the buttons I started with BTN. Now I don't have to do it that way but it just makes sense to me and it's very, very clear I think what each thing is and probably gives you a very good idea of what each thing does. Students always just wanna call it like button A, button B and be a little bit lazy like that but it causes problems later when you're trying to debug your code. So proper naming is just super duper important. Let's go ahead and get started and I'll come back to this from time to time. Let's go ahead and get started on the code. So I'm gonna go over to my ID text editor which I use something called Genie. Feel free to use whatever you want but I like Genie, it's free, it's open source. Check it out if you get a chance. Now I've already gone ahead and typed the class and this is class temperature converter and I've saved it as temperatureconverter.java so that has to match. I've made my main method and so if this does not look familiar to you probably this is not the right tutorial for you. Go start somewhere else. But if it does look good to you, first thing we're gonna do is we're gonna need to import some classes. So I'm gonna go ahead and import javax.swing. I'm gonna put an asterisk here. If you haven't seen the asterisk basically what this means is import all of the different classes under javax.swing. Now we could import them one by one if we knew exactly what we're gonna use and if you're using an ID like IntelliJ it'll actually kind of figure all that out for you. I think Alt-Enter and it does some things automatically. But anyway, I'm using Genie, I'm trying to keep it simple so let's stick with that. I'm also gonna use import java.awt.event and .asteris, semicolon and awt is the all windows toolkit and I think it's the original GUI, I don't know the original GUI library or whatever you wanna call it here for Java but I think that was replaced by swing. Don't quote me on that though. It's been a while since I studied this stuff and then I'm gonna do java.awt.asterisk. And again, if you don't understand every single little detail don't stress over it. This is just kind of a get you started kind of thing. So I've imported all of the various classes that I'm going to need for this particular project. So let me go back real quick and take a look at what the app is gonna look like. So as a reminder, we need two labels, we need two text fields, we need two buttons and we need one frame. Okay, so we need to create those things in our Java app. So let's go back and give it a shot. So now watch where I do this. If you haven't seen this style before, this might be a little confusing. So I'm gonna go ahead and say, I'm gonna declare the GUI elements. Now as I mentioned, we have a frame. So I wanna put public static. So right now we're using all static methods and all static variables. Now again, Java, you're supposed to do things a bit more object oriented style. I'm gonna stick to this again because I think it's easier for my students than teaching. We haven't quite gotten to those things yet and I think everybody will find this a lot easier. So I'm gonna make a J frame. This is a J frame object and I called it FRM main. I also have, as I mentioned before, a J label and that one is LBL Celsius. I have public static and I need a J text field. Be careful with the capitalization and that's gonna be text Celsius. And then I'm gonna go ahead and I'm gonna need another public static J label. I spelled that wrong, you can see that. Label, fair, and height. Now again, you could just use capital F, like label F, yeah, that's fine. I tend to type things out just because I know later on things can get very confusing if you don't do that. And again, J text field, text, fair, and height. And I think we need a couple buttons, too. So public static J button, button calculate C2F and public static J button, button calculate. Calculate F2C. So what we've done is inside my temperature converter class, I have gone ahead and created basically null objects for the frame, the label, the text fields. Well, like I said, both the labels, both text fields and both buttons. So then later what we're gonna do is we're gonna go ahead and use those. Okay, so now, again, this is outside of public static void main. This is just before but inside the class. The imports are up here. Okay, so what I need to do is I first need to go ahead and create the frame. Let's go ahead and go back to the app preview. So this is gonna be our frame. Now we can't actually see the title thing here because I kind of shrank it down, but we need to create that first. So I'm gonna go ahead and go back to my code and I'm gonna go ahead and type it in here. Let's go to shot. So the first thing is set up the frame. Now I've already instantiated it up here, but I gotta actually, I should say declared, I haven't instantiated it really. So I need to add an actual J frame. So frm main equals new J frame. Note the capitalization again and I'm gonna call this temperature convert by, we'll play at Tokyo EdTech. That's me. Now we're actually gonna really see that part. And I'm gonna go ahead frm main dot set size and I'm gonna make it 150 by 200 pixels. Now your computer might be a little different. I don't know quite know how that works, but you can play around with the numbers and we can resize it later. I'm gonna do frm main dot set layout and the layout thing gets a little complicated. So I'm just gonna use what's called a flow layout and this kind of automatically places the elements for you and you'll see what happens in a minute. Well, a couple of minutes. And notice there's an extra set of parentheses here and so new flow layout. Okay, so I've set up the frame. So let me go ahead and compile that and see what happens. It's compiled and I'm gonna run it and see what happens. Okay, absolutely nothing should have happened. Okay, so this is kind of what I expected. Program ran and then it exit itself. So I think we're missing a line and that line is gonna go actually at the very bottom. I'm gonna put that at the bottom of this program. I don't know if it has to go at the bottom of the program, but that's where I have it. And okay, so I wanna go ahead and say make the frame visible. So I'm gonna go ahead and do frame main dot set visible to true. I think this will do what we want it to do. So I'm gonna go ahead and run that and I'm gonna go ahead and boom. And there is our window. Okay, now if I can make this wide, you can see where it says temperature converter by Tokyo ed tech, but it started out something like that because we set this to 150 by 200. So you can set it to whatever size you're comfortable with. You'll see as we start adding these different elements, what things will look like. Okay, so I'm gonna go ahead and close that and get out of there and hopefully. Now if you're using Genie, I had to go up and down here and hit I think control Z and then enter so I can keep working on this. So what we need to do now is just to start adding our different elements. So here we go, let's go ahead and do it. So I'm gonna go ahead and here it creates gooey elements and let's just do one together real quick. So I'm gonna do label Celsius equals new J label and it's gonna say sell Celsius. Celsius, call them quote, so I call them, okay. So then again, remember up here, I've already declared it, okay. Now I'm actually instantiating it and giving it, you know, giving it, I don't know, giving it some code, I don't know, making it real. I'm not quite sure how to say it. And I go ahead and create the gooey elements. Let's go ahead and compile this and run it. And you'll notice that you don't see anything and this is to be expected, okay. So even though we've created it, now notice down here again, if you're using Genie, I gotta hit control Z then enter and this should be white. It's a little bit of an extra step for this because we have a little gooey thing running. There's something, there's another step I have to do to get this to work, okay. So what I gotta do is before I make the frame visible, I'm gonna go ahead and add the gooey element, elements to the frame. So I'm gonna type frame main dot add label Celsius. I'm gonna put them in the order that I want them to appear, okay. So let's go ahead and test that and there you go. So there is our first gooey element. So let me just kind of go back and review that because that's the first part of it. That's setting up the gooey. So if I go back to the app preview here. So what we've done is we've created the form of the frame, excuse me. We've added one label and we've made the frame visible, okay. So probably what I should have done is I probably shouldn't have added these parts first. I should have just done this by itself. Anyway, live and learn. But I think you get the idea. So the first thing you did was we set up the frame, okay. Because everything that we create after that's gotta go into that frame. Oops, let me go back. Sorry, I was wrong screen there. So sorry, let me go back and explain what I just said again. So basically, you know, we created the elements. I probably should have just done this part first and then done it one at a time. But anyway, I didn't. So here we are. And so first thing is we set up the frame because everything goes into that frame. So I made a new J frame and it's temperature converter. This is the title that goes into the window. And then I set the size in pixels. And then I set this layout thing. Again, there are other layouts. It gets very complicated. But for now, let's just use the flow thingy because it's easy. Then I created my first GUI element, which was my label Celsius. And I added that label to the frame. And then of course I made the frame visible. And then we could see it. So if we go back to the app preview, the next thing up is my text Celsius, then label Fahrenheit, then text Fahrenheit, then button and button. So I'm just gonna go ahead and do that part real quick. And I'll talk through it, but basically it's pretty straightforward. So next up is text Celsius equals. And it's new J, I think it is text, what is it? Sorry, new J text field. And now the number I wanna put here, actually let's do 10, okay, is the number of columns of that text field. So I wanna do form main.add text Celsius. So I'm just gonna go ahead, I forgot to close this, hit enter, compile and run it. And now I've got this cool little text box, okay. Now 10 is the number of columns, so let's say zero, one, two, three, four, five, six, seven, eight, nine. Well it was supposed to be 10 columns, but oh well they gave us a few extra. I'm not gonna complain. But 10 is supposedly the number of columns in the text field, but who knows. Anyway, we'll leave it like that. So I'm gonna go ahead and just kinda go ahead and do my next couple labels, or my next label, my next text field. And this is gonna be Fahrenheit. And again, if I'm going too fast, just pause it, rewind. But notice how I'm hoping you notice that these consistent names make things a little bit easier. So once I get one thing working, then I can just go ahead and copy it and make the changes I need. Now students have this annoying tendency to, I'm sorry to say that, but it was annoying tendency to just go ahead and type everything through and then try to fix it. But that's a bad idea because if you do it step by step then you know exactly where the problem is. So I'm gonna compile that and run it. And now I've got my two labels, I've got my two text fields. All right, so we are clearly making progress, which makes me happy. So the next thing we need is our buttons. And we got what? We got, let's see here. So it's button, convert. Think it was first one was C to F. That's what it was. Equals new J button. And this is gonna be what the button says. So convert C to F. And then button convert F to C equals new J button. Convert F to C. And then down here, just like we did for main or framing.add button, convert C to F. Convert, it's calculate, that's why. I was wondering why it wasn't popping up there. So calculate, probably should have made a conversion, right? Calculate. I know people are always watching like, oh, I knew what you were doing wrong before you knew. Yeah, probably, it's hard to talk and type, trust me. All right, so let's go ahead and compile that, run it. And here we go. So you can see already we've got decent looking. Now watch what happens when I change the size here. This is what I was talking about, the flow layout. So as I give it more space, it automatically moves the elements around. So if you prefer like this style, like more horizontal looking thing, you can do it that way. That way it's nice, you can see the title here. Or I prefer like a more vertical alignment myself. You can just leave it like that, it's really up to you. So now if I click the button, of course nothing happens. But at this point you should have a working GUI, or at least a functioning GUI I should say. And now it's kind of interesting. Now if you're coming from say a JavaScript background where you just basically you can just add a callback, it's very, very simple. Or if you're coming from something like Python with TK inter, it's very, very simple just to add a function to something. If you're doing like JavaScript with HTML, use the on click thing, it's very, very simple to do. Of course Java, God help me, I don't know why. It's really complicated to do this. So I'm gonna walk you through this. And this is what I was up at three o'clock this morning working on. So I've got my button calculate C2F. So I'm gonna put this here. I don't have to put it here, but it just seems like it's logical. Okay, so I'm gonna say, I'm gonna add the listener. Listener for this particular button. So watch what I do. So we put the name, calculate C2F dot add action listener. And here's how I'm gonna do this. Now this is where it gets weird. So new action listener parentheses. Okay, now be careful. This is a brace or a left brace, left brace. These are parentheses. And in here, I'm gonna put public void action performed. Action event E. And then now I'm just gonna kind of close all this stuff up so I know that I've gotten this. So at this point, what I'm gonna do is I'm gonna go ahead and compile it. And just to make sure it's working. Okay, it didn't compile because I forgot the semicolon here at the end. I think that's what I need. Yeah, I think that's what I need. Let's check that one more time. Three errors, okay. Java line 38, action listener. Oh, I know I did wrong. This, I knew that was weird. Sorry about that. This is a parenthesis and this is a parenthesis. And yeah, I think that's right. There we go. Okay, so I do apologize for that. So it is parenthesis, parenthesis, brace, brace, brace, brace. Yeah, that's Java for you. Anyway, so it compiles. Now what we want to happen, so in here is where we're going to convert C to F. So the code's gonna go in here. Now at this point, I could make another static method, put the method down here and do everything inside the method. The reason I'm not doing that is because I haven't done methods with my students. They know how to use them, they know how to call them, but they don't know how to write them yet. So I'm gonna do it this way. Now, think about what we have here. So if I, let's make sure I say that. I'm gonna go back to my app preview. So I've got, so basically what I'm gonna do is so I'm gonna put like a hundred in here in this Celsius text box here, okay. So I'm gonna put a hundred in there. So I need to pull this information out of there. I need to pull the information out of that. Then I need to convert it to Fahrenheit. Now a couple of things. When I pull it out of here, it is actually a string. So I've gotta convert that string to a double, okay. So now this is just kind of some, this is more or less kind of standard Java, I guess you'd say. So I'm gonna make a string and I'm gonna call this C, sorry, C text. Didn't have to call that, call that, but that kind of made sense to me. And this is coming from the text Celsius and it is get text like that. So whatever I've typed into that box is gonna be assigned to this variable. So I need this to be C Celsius. So I'm gonna use double dot parse double C text. So in my example here in the app preview, I've got 100 in that box. So if I go back to my code, so C text is gonna be 100, but a string. This will change it from 100 string to 100.0. Now I just need to use the formula and I had to Google this. So Fahrenheit equals, it's C times nine divided by five plus 32. And now the last step is text Fahrenheit, set text string dot value of F. Cause I'm setting the text of the Fahrenheit text box. And it's gotta be a string. So this is a double. So I'm gonna take the value of F, whatever it's converted to, and change it to a string, put that string into text Fahrenheit. And I'll pause that if you're having trouble, but hopefully that should make some sense. So I'm gonna go ahead and compile it and I'm gonna test it. Okay, so up here I'm gonna go ahead and put 100 and I'm gonna hit convert C to F. It should be 212.0 and boom, there we go. So let me just kind of explain what happened there one more time. So for button calculate C to F, we've added what's called an action listener. And this is basically just tells Java, hey listen for events like where the user in this case clicks on this button, okay? So it's a new action listener and then we have this method in here called action performed. Now this action event E thing is kinda hard to explain but basically I'm gonna put it like this is passed to that function. I'm just gonna leave it at that. We can pull information out of this but just copy it as it is. And then here this is where we actually pull information out of our GUI. So the value that's here, the text that's here, we put it into C text. We convert that to a double and we call it C. Then we just create a new double called F for Fahrenheit. We convert it using the formula. Convert it back to a string and then set the text in this box to the value of F. And that is the magic of GUI's, okay? Which is pretty cool, I'm pretty happy with that. Now, at this point what I would recommend that you do is to try to do this same thing for Fahrenheit to Celsius. Now, again, this is one of those things again I tell my students all the time and they never listen to me, say. Get one working perfectly. You notice how even I screw this up, this thing, the balance has to be correct, et cetera, et cetera. So you've got this matches this, this matches this, this matches this, this matches, and there's all kinds of things that have to be done. So what I would do is I would just go ahead and, because I know this works, I would just go ahead and copy this and put it here. And then just change what needs to be changed. So this is gonna be F to C. Now we're converting F to C in this case. So I'm just gonna go ahead and delete all this stuff because it's a little too easy to mess that one up. And then I'm just gonna go ahead and try to type my code. So I'm gonna do the same thing. So string F text, so in this case Fahrenheit text, equals text Fahrenheit dot get text. That pulls the text out of that text Fahrenheit text box there. Then I need to convert that to a double. So double Fahrenheit equals double dot parse double. And it's gonna be F text. So that converts this text into a double. And we have double Celsius C equals, it's F minus 32 times five divided by nine. Again, I don't need to put spaces in there. I just have this tendency to do that. I think it's easier to read. And then we take that result and put it back into text Celsius. So as we text Celsius dot set text string dot value. Oh, remember this is Java, so we have to convert everything ourselves. And again, watch the number of parentheses here. I think that should do it. So let's go ahead and compile it. Let's say kill this last one and compile it. And run it. Okay, so I'm gonna go ahead and type 212 and convert F to C. It gives me 100 Celsius. Now I'm gonna hit that again. So basically hitting these should not really change anything because they're converting back and forth to the same thing. One thing I like to do is the test is negative 40. I convert that to Fahrenheit because they are the same, that's where they cross. And then you can see that works. So that is a GUI app in Java. So that took 30 minutes, a little over 30 minutes to explain that. Yeah, so that's that. So let's just take a quick look at the code again. So remember, we have to import these items. We have our class. We declare the GUI elements outside of public static void main. Again, I gave them names that made sense. You could do LBL capital C or text capital C, but this label and this text is really, I think, important so we know what each thing is. Because we end up having, we can't have two things with the same name. We can have Celsius Celsius because the computer will get confused. So then inside of our main method, don't forget the static, by the way. First thing is we set up the frame. We created all of our GUI elements. And again, notice J label. You just put the label in there. The text field, you need to put the size. Again, I'm not sure why it went over 10, but hey, that's life. I don't know everything, sorry. I'm still kind of learning some of the stuff myself. And the button also, this is the label that we see over here. Now, this action listener thing is just, again, to my mind, it's just way over-complicate things. But I'm sure Java, people at Java will have a very good reason for that. So again, sorry, I messed it up initially, but do keep an eye on which symbols you're using here and here and here and make sure everything balances out. And again, do one, make sure it works, and then you can copy and paste for the second one. And then finally, you have to add the GUI elements to the frame and then make the frame visible. Again, I don't know that the order of this, maybe the action listeners could go later. I don't think it really matters when you put it in, but it seems to me this is kind of a logical thing. We create the button, then add the action listener. So, it's pretty cool. I mean, that was only 74 lines of code. I like to put a lot of spaces in there to make it look nice, but it's pretty short. So I hope you see the general, kind of what you need to do, import, declare, set it up, add the listeners, add the elements and make it visible. That's it. So I think given this knowledge, what you've done in this program, you can now basically take almost any input from the user, do almost anything you want with it and then output that back into another GUI element. So congratulations, you are now a GUI programmer. So hopefully you enjoyed that. You learned something from that and click like, subscribe, leave a comment. Whatever. Keep on coding. Have a good one. Bye-bye.