Java GUI Tutorial - Make a Login GUI

Java GUI czar one of the most requested comments on my videos so I'm gonna do another one for you if you wanna see the first one we make a button and that button increments a counter that's up on the screen now if you want to check that out but first my name is Alex Lee on this channel I posted Java tutorial every single week for you so if you might be interested in seeing that then please consider subscribing I also have awesome t-shirts most of us in college don't know what we're doing so it's literally just assure that says I have no idea what I'm doing sometimes it's just best to embrace it and the hut pretends like you have to know everything all the time you can use coupon codes six out ten to get ten percent off your order so first let's start our GUI by going to file new a Java project we'll call it GUI coolness to finish and then inside of that we'll go to new class on the source folder and we'll call it just GUI boom main method cool we've got a lot to do let's first start by making the frame and the panel GUI stands for graphical user interface so we're gonna be making a little window it's gonna have some labels some text fields to enter text and a button but that's got to be on something and we call that a frame there are a million ways to make gooeys but we're gonna use one called swing which is a really outdated one for java by teaches you the basics so we'll start off using swing to make it GUI by making a frame that's called a J frame call it frame just like any other object has this format we're gonna hover over it click import so we can use it we're also going to want to make a panel which is J panel import that and then we have the two fundamental ones we need to start making a GUI next we're going to configure it the little window that we're gonna have pop up so we're just going to use this frame object and use methods that it has to just set it up how we want we're gonna do one called set size with a width and a height we'll have it a hundred by a hundred and to make it close properly will do frame dot set default close operation this is just an integer but we can also call a variable called exit on clothes from the jframe library lastly we'll do frame dot set visible to true save and run this and now we see a 100 by 100 I believe these are pixels 100 500 window which is our frame and this is what we're gonna work with now this panel is sort of like the little invisible border guidelines for the elements that we're gonna put on it the frame is the window the panel is the layout but first we got to put the panel on the frame so we have to do actually frame dot add panel put the panel up here so it sees it now I've got the panel on the frame so if we save and run this then we get a nice little window and this little invisible panel that we're going to use so we configured the frame and that's great and everything but now let's start configuring the panel we can do panel dot set layout we'll just set this to know right now you can learn more about layouts and like rows and columns and ordering things later but right now I just want to give you the basic idea of like the application we're gonna do not really dive into the specifics of layouts right now we'll start off by making a label J label label equals new J label looks familiar huh it looks just like how we're making all the other objects boom import it you'll see javax.swing that's the library swing so we know we're using the right import statement now let's kind of set the texts to the label we can do that in here we're gonna have a user label with the user name Tech box then we're going to have the password label a password text box and then a login button when we click the button we'll have a little message that says you have been entered successfully login successful so let's start with that user label we'll just call it user next for that label we can set some bounds and padding to make it look nice so we can do set bounds put a X Y width and height I'm getting this from this great website called beginners books here so they actually have this example I'm just changing it a little and explaining it for you so if you want to see the full code you can get it here and the padding that they thought would look nice is 10 20 80 25 lastly we'll just add that label to the panel save run we don't see anything yet oh we do but we have to like kind of change it so I believe this it's that visible true has to come at the very end save a run that we have to click it for some reason well we'll worry about that in a little bit let's just get the elements on here now let's make that text field call jtextfield user text j text field import that user text dot set bounds to 120 165 25 again these are what the website said and look nice and then inside the constructor of the text fields we can say the length of that text field save it and run now we get I just took some time to load I guess we haven't added it so we got to do panel to add user texts boom beautiful there's just some little formatting issues so maybe let's just make this a little bigger say 350 and 200 so that it's shown in all of its glory beautiful let me get type in here and it's beautiful and the reason this works is because swing is a library that deals with all this to begin with so we don't have to code it all from scratch we can just use this swing library with objects and methods that's why Java is so great now let's add the password label and the password text box so I'll just name this user label replace that we'll do password label jlabel password on the password label we'll set the balance due 10 50 80 25 so if you notice here it's X Y width height X Y width height if we run this X Y starts at the top here so we go 10 to the right and 20 down X Y and then this is the width 80 and the height of the label here so when we do the password now we see 10 to the right 50 down so it'll be fear and the same width and height as this one let me add it then you'll see it's right where we set let's add that last text field except this one is a password field now so when you type your password you don't want everyone to see it like if someone's on your screen so you do the little circles right that one's called a password field 3gj password field password text boom you import that password text set bounds to 100 the same X as the user text so it lines up nicely 50 so it matches the y 165 25 so it's the same width and height of the user textbox add that to the panel password text save run and we got this beautiful username and password and it's awesome we could type stuff and this is different than this one because it's a password super cool stuff I love gooeys I wanted to be out like a front-end web developer guy because I love GUI so much now let's add a button this is called J button same jail as before just with a button now you import that and you'll notice we're racking up the imports up here we're using all these button will set the bounds this will be 10 so it matches up 80 down 80 width and 25 height should be button add it to the panel so you should notice a pattern here we're just doing the same thing for everything and the buttons blank and doesn't do anything which isn't very awesome so we can name it will say like log in here and now it'll say log in cool but now we want to check the text of the user and password see if it matches something and then if it matches show the successful login message so let's make the login message first and then tie an action to the login and get the text so let's add that success label this will be a jlabel the capital L success equals near J and here's where we set the text of the label will set it to nothing for now so it doesn't show up and this has to be this is tricky capital L there it'll screw up if you don't have that capital L we'll set the balance success just like before 10 110 some long amount because it's gonna be a pretty long message and regular height panel that edie success because we're successful save run now theoretically the label is right here but we only wanted to show if the user enters a correct username and the correct password hits login boom and then we want the message to show so all we're going to do is do success the label success dot set text that's what we're going to do like this success dot set text and we can set the text simple as that but let's first get the action on the button and get the text to add up action to a button in swing you just type the name of the button dot add action listener it's going to be inside of here which is this GUI class so we can just pass in like a new GUI object new GUI and we'll set it up accordingly this has to take in a parameter of action listener action listener is an object just like any other object but our GUI class is not an action listener object it has no relation to it so what we have to do is type implements action listener now our GUI I misspelled it yes now our GUI implements the action listener we'll just import that we get a red underline because we need to add that action listener method now we have the action performed method this code gets run whenever you click that button since we did button add action listener and the action listener is this class we did implements which means we add our own code to the action listener method right here since the buttons tied to this method we can now do stuff what we want to do is get the text of the user and the password but first we can just test that the button is working by printing out something like hi or else a button clicked save run now if we click it here in the console it'll say button clicked and that was one of the coolest moments for me like I did some Android stuff and like being able to click a button on my phone and then have it show up in the console here it was just like a super awesome moment for me I hope you have this moment too that's why I love programming but let's see if text matches up let's say there's a set username and password and we want to check will say that the string user is equal to the user text dot get text that's how we get the text but it doesn't have access to it since it's in the scope of the main method and this is in a different method we can't do user text get text so before we do this we should actually take out all of these and put them up so that everything can see it I would have done this from the beginning but I just wanted to make it simple for you to understand by doing it all sequentially in the main method so we're just gonna increase the scope by putting them up here we'll make them private as good practice okay label user label I'll skip through this I added private for good practice and static so we can access it easier and we don't need those in front of here now because the scope has increased it already knows that this exists now we just got to set it like normal so now we can do the string user is going to be equal to the user text dot get text and the password is going to be password text that get text get text you'll see a little underline this means that it's deprecated which means not in production anymore like they don't support this method anymore so it might not work but it works for this example and there are other ways to get around it I'm just going to keep it for simplicity now to illustrate this we'll just print out user and password boom run it now what type of user boom now when we click login it's not going to say button clicked because we changed it it's gonna say user plus password the things we got from the fields now all we have to do is say if it matches certain ones then we can do the login message so we could say if user equals I'll just do Alex using equals Alex and password equals fluffy dinosaur 1 2 3 then we'll do the message and the message is success so you can just do success dot set text to since it already is placed there we just need to just set the text to something login successful boom save it run it we actually don't need to print this out anymore run it you see this beautiful GUI beautiful GUI that me and you have made together it's been a lovely ride it's been a great ride let's see Alex fluffy dinosaur 1 2 3 login login successful beautiful if this was something different if we changed it it would still have login successful because we're not changing it back afterwards you could do that for yourself for extra credit just use set text to empty if they try login again and it doesn't match but as we can see if this is something else if it's not the username and password no message if it's message you get the idea I just like to do it again because it's so much fun so I hope you enjoyed this video I really enjoyed this video I might use more stuff like this gooeys again we're a super requested topic I hope this helped you learn Java gooeys hope you had some fun with it but I'll see you in the next video have a great rest of your day I'll see you later stay flat homie [Music]

Channel: Alex Lee

Views: 247,041

Rating: 4.9633789 out of 5

Keywords: java gui, gui in java, gui, gui java, java gui tutorial, gui login java, java login gui, graphical user interface, graphical user interface in java, java gui example, java gui code, gui example in java, alex lee, java, login gui

Id: iE8tZ0hn2Ws

Length: 19min 48sec (1188 seconds)

Published: Thu Feb 13 2020