Java GUI Tutorial - Make a GUI in 13 Minutes

this has been one of the most requested videos by far this is how to make a GUI in Java and we're gonna do something super basic today it's a GUI with one button and one label and when you click the button it changes the label but before we get started my name is Alex I make a Java tutorial on this channel every single week so if you might be interested in seeing that then please consider subscribing I also have my own March says I have no idea what I'm doing I heard some people say it'd be great for a hackathon or just in class so if you want your I have no idea what I'm doing shirt you can get 10% off with the coupon code down below and yeah let's get started with the GUI so we're in Eclipse we're just gonna go to file new Java project as usual we'll call it our first GUI finish and then on source we'll go to new class : Dewey we're the main method and finish GUI stands for graphical user interface some people call it GUI but students professors and professional software engineers I'll call it a GUI this is like anything you see here discord sublime text notebook Crowe really anything that has graphics when you pull it up with buttons and colors is a GUI and this is one of my favorite parts of computer science so I'm excited to share this with you right now so how do you make doing there are 1 million ways to make a GUI based on what language you're using in Java there is a popular one that is very outdated but teaches you the basic concepts it's called swing so to start using swing and making a GUI let's do some setup here our GUI class is going to be our GUI object and we're going to make it in the main method and then when we make it when we hit run it'll run the main method which will make it using this constructor new GUI which will then bring up the window so now that we've made this little constructor here we have to implement the constructor so now we make our constructor called GUI now when we run main will create a new GUI object which goes to the constructor here which is basically a method and we'll set up the frame the layout and everything in here first thing we want to make is the frame the window and that's called jframe so we make a gem ring object just like any other object this format there read on your lines because we have to import it from the swing library so we do import jframe javax.swing there was that import statement at the top and now we can use the jframe now the frames basically the window but we want to put stuff inside the window we've got to have some sort of layout and that's where the panel comes in so we have to make a che panel just like any other object we're just saying the name of the object and calling the constructor boom import that too now that we've got these objects we've got to use them to use an object you write the name and do a dot and then it brings up a bunch of methods and variables you can do with it panel has a lot because it's really flexible a common series of things to do to your panel to get it set up is set up the border from the frame set the layout and then add elements to the layout so we'll just do the border set border now if we hover over set border we see that what goes into parenthesis the parameter is a border object and this is where a lot of people will get stuck I mean like well I don't know how to make a border object there's an easy way to do this and it just takes a little google searching thai border factory dot create and there's a lot of options here but we're just going to do create empty border we get a red underline because we need to import the border factory also from swing it's all helping us just make it gooey and inside here pass in parameters width of the top bottom left right for formatting we're gonna do top bottom ten from the left 30 from the right and these are all in pixels i believe now we'll set the layout set layout if we hover over set layout we see it takes in a layout manager object the one we're gonna use is called grid layout and so we create a grid layout just to match whatever is in the parameters just like we did here we found a border thing and now we're finding a what it's a called layout manager thing this takes in what we need to import it but the parameters this is the default constructor but you can enter rows and columns in here if you want don't worry about how I got this stuff it's really just google searching honestly but let me show you the working example before you get super bored so we'll do a friend ad and you can see here there are multiple ad methods but we're going to do the one with constraints so we're going to add our panel and this will be a boarder layouts dot Center a common thing to do to our frame is set default close operation we pass in jframe dot exit on close set the title set title to our gooey friend pack friend set visible true this is all regular setup stuff you'll see when using objects there are kind of best practices and you'll see that sometimes you'll have to do multiple steps like this so add the panel to the frame set what happens when they close the frame with these options set the title of the window the frame set the window to match a certain size and set the window to be visible and in focus so that's all this is don't feel like you have to memorize all this or how I got this oh yeah Alex shut up just run it and we get our little window get a little window here it's resizable but and we can close it but there's no buttons and there's no label so what happened there is when we click run it always shoots down to the main method and the main method has new GUI which creates a GUI object from this GUI class this is the constructor since it's the name and we treat the constructor like a method we just do the stuff inside the curly braces first we create a J frame object then we create a jpanel object we set up the panel next we added the panel to the frame we set the default close operation set the title and some window options so now let's add the button and then make it clickable and add that text label we're just going to make a J button now call J button import that in the constructor we can pass the name of the button I'll click me and we can add that to the panel panel dot Add button now if we run this we'll see the same window but we'll see a button on here and that's pretty sweet it's pretty big now let's add a label a label and the label will be number of clicks I'll just set it a hard-coded to zero right now import the jlabel add it to the panel and boom we have a button and a label the button doesn't do anything and the label doesn't change the reason the title is our GUI is because we set the title to our GUI so we've got our button a label we want the number of clicks to go up when we click the button so how do we do that we have to set up the button to be able to listen to click events so to do that you use the button object just like any other object you do button dot and the one we're gonna do is add action listener we're going to type this in here this means it goes to this class up here the one it's already in and uses an action listener method so how do we get that magical action listener method inside of here because it's not in here that's why it is a red underline we need to do implements action listener we have to import that and now the red underline goes away but implements means we have to take all the methods from actionlistener and put code in them that's why we get this we need to add the unimplemented methods which is the actionperformed method we want to increase the number of counts which means we have to have a count to begin with so to put it in the scope of all the methods we need to put it up here we'll say count starts at zero and then once the button is clicked clicked the action is performed so we call the code in here we want to increment the count and then we want to set the label to number of clicks 1 number of clicks - since this is in another method it doesn't know what label is doesn't know the jlabel exists so we have to bring it in the scope which is up here I'm just going to delete this and make it up here J label label and you might as well do the other ones too just as good practice we can make all of these private if we want to which is also a good practice so that when we make a GUI object the user doesn't have to worry about all these variables it'll just be hidden so we can just not have that object declaration but we can keep the button there that's fine now we know the label so we can do label dots set text and we'll set that text from number of clicks zero to number of clicks out save and run this now when we click the button it goes to the button and creates the button we add an action listener this which implements action listener and it'll just look for a method named actionperformed now the actionperformed method is tied to that button object this so when we click that button object it listens and runs code inside of here we increment the count then we set the count of the label I thought this was a really cool example I got this from a computer science website called HTTP intro CS CS Princeton and this was one of their examples I thought it was really cool really simple concepts just to get you the basics down and expose you to how gooeys work because we loved all the pretty things but how is that button tied to the code how does that button change the text the button listens to a click event from the user which runs code which changes other objects so I hope that makes sense I'm gonna make another GUI video a little more complex this is my first time making a GUI video like this so I tried my best to explain things again don't worry too much about like what all this border Factory create empty border stuff is don't feel like you have to memorize it because this is all really just different layouts and stuff and it can be kind of confusing but we used what worked to get the concept through and then you can dive deeper into making it look how you want by doing quick google searches on this code so again I hope this was helpful let me know if you liked it I'll see you in the next video have a great day [Music]

Channel: Alex Lee

Views: 536,359

Rating: 4.9102283 out of 5

Keywords: java gui, java gui tutorial, gui java, gui in java, graphical user interface, java gui example, how to make gui in java, gui in java example, java gui button, java swing, swing in java tutorial, swing java, swing gui java, gui

Id: 5o3fMLPY7qY

Length: 12min 58sec (778 seconds)

Published: Thu Feb 06 2020