JavaFX Login Form Tutorial using Scene Builder | JavaFX and Scene Builder Tutorial | 2020 Version

hello everyone today i'm going to show you how to create a beautiful login form in javafx using scene builder if you first need to install javafx i've made two videos where i explain how to do that in both intellij and eclipse so i'll link that in the description and if you need to install sim builder i also provided those links let's get started okay i have my javafx project set up this is the basic thing i haven't done a single change and the app works as you can see over here the first thing is i'm going to explain this bit of code so this is the basic bit of code that everyone gets okay in javafx everything is around stages and scenes this whole box is a stage and on this stage you set up a scene so this would be a scene and you can change scenes on this stage this is basically what we are going to do we will have a log in scene and then if the user enters correct information we will change the scene and let him see some other content so basically this piece of code sets our sample fxml which we are going to edit later to our root and then on the primary stage so on this whole box we set that scene it's now just white screen but eventually when we change it you will see the changes here and then we just show the stage so this is what this piece of code does and now what we want to do is edit our sample fxml with our scene builder so we go here right click and open in scene builder so the first thing we want to do is edit our layout so let's just go ahead and delete this so just click and delete and we're going to add a border pane so we'll be using this layout because it has a top element bottom element left element right element and the center element but we're going to use the left and the right so just again use this anchor pane and drag and drop it to the left section and in here we'll have our picture and then another an anchor pane in the right and in here it will be our login form so then search for image view and drop it inside this left left anchor pane as you can see here will be our picture so let's just drag and drop our picture if you want to get this exact picture you can find it in the description and then when you're ready just make it big as you want so let's just make it big like this okay let's now change the background so you click on the border pane and you go to properties and then in here style you click it and you can see fx background color and then in here you just paste your color so this is our image color you can just copy it and press enter and as you can see we already have a nice layout and the next thing we want to do is we want to create our login form actually so for that we're going to first let's just put a small picture here and drag and drop our picture in here and let's make it smaller and first let's make this section bigger okay no we want the picture and let's center it somewhere around here you can use your own pictures or your own layout but i'm going to do it like this okay now we're going to add some labels so you just search here for a label drag and drop it in here change this to a username and this color or any color you want but this is my yellow color let's make the font a bit bigger like something like this and let's make it bold okay and now you just copy and paste this and change it to password and let's align them like this it's a bit tricky to work in a scene builder but it's easy you just drag and drop basically for our username we're going to use a text field so search for text field and again just drag and drop it in here and for our password we'll use our password field obviously and again let's just drop it here again in here we can say username so the user knows what's to end what to enter and hint here password like that okay that that looks good and now let's add a button so just search here for a button and drag and drop it here somewhere in the center change this to log in and let's change our background color so again you go to style background color to our nice yellow color and make this a bit bigger and again center it okay and the last thing we want to do is we want to add a label which will have no text so let's drag and drop it here and we want to delete the text and we're going to insert the text by code but let's change the color to red we will change this text by code when the user enters wrong information as you will see later and now you can go to preview show preview and this is how your app looks like you can enter text and you can enter your password but now it does nothing because we haven't actually connected it to our java code and we're going to do that next now we need a way to connect let's say like this back end and front end so let's click on this username and we want to extract the text that the user enters but we first need to access this element so you click on the code down here and this id enter username and we're going to use that later because we want to connect this username field extract the text and save it in a variable in java that java can understand because java doesn't understand this part and we're going to do that same for password and for our button let's call it just button and for our label which is somewhere around here let's access it like this so this label which is empty let's call it a wrong block in and remember these names because we're going to have to use these exact names okay i'm back in main and we need to do some adjustments so change this to 600 and this to 400 because this is the width and height we set in the scene wheeler and let's run the program and it will not work as you can see the images are not here you can enter stuff here but the images are not here and now we're going to fix that problem okay so you need to go to your actual folder you can see the path here so you go there and you go to source and inside the source you add a folder named anything but i named it image because i'm going to store my images in there and then in there i dropped my images so you need to go to your exact folder on your desktop on your computer you add that folder so it's inside the source and you drop the images in there and then what you want to do is go to file project structure and you need to go to modules and then you need to go to source and the folder you created so mine is image and you need to mark it with resources and click apply and click ok and now you need to go to your scene builder again and now that you're in your scene builder you just go to that image view and properties go here and then you go to your location so mine is in image and this one and it's here and this lock is also in here okay you save and now when we run the program it should work and as you can see it works okay any change you did in the scene builder was actually written in here at the start our file looked a lot smaller and we had nothing actually in here but every change did inside the singular appeared here but now we need to do some coding here manually okay every every fxml file needs to have a controller a controller is a class that basically controls that scene so now we're going to go to our source and we're going to go to our sample and we're going to click new java class and let's name it log in and we need to set this class to be our controller we can actually delete this okay for our sample fxml and the way you do that you go to here and you go to border pane so the topmost element and you need to add this piece of code so fx controller and the name of the class that is going to control this scene so our sample dot log login it's simple because it's name of the package and then our login and you click save and now this class actually controls the behavior of this scene and in here we'll model the login but one more thing we need to do is we need to go back to our scene builder so here click the button and then you go to code and on action and in here you need to enter the name of the method so when the button is pressed that method will be called and let's call it user log in press enter save and minimize this okay i've already prepared the code because i don't want this to take too much of your time but i'm going to explain it line by line so remember when i said that we need to connect those buttons and those labels to our java code this is how you do it so you put fxml like here and then you say private button if it's a button and name it exactly but we named it here so as you can see we named button and our username is username and as you can see here we have it here and we did that for that label and for that password field the name you used here is the exactly the name you used in your scene builder as you can see when we create the button we use the button when we used password field we used this password field so basically just copy it here and now you can use it and this is the method that that's called on click as you saw in here so on action call user login this is this method and this method calls check login as you can see here we go to check login and ignore this for now i'll explain it in a second basically what our check login does it takes the text that user has entered so username get text to string and if it equals to java coding you can use any name you want but that's basically your username and password i've just put it to one two three you can again put it to anything you want we put the wrong login to success and then we change the scene i will explain changing scenes in a bit and if those fields are empty we say please enter your data and then if user enters wrong data we just say wrong username or password okay we're now ready to change the scenes i'm back in my main and the first thing you want to do is you want to create a fake stage let's let's call it like that because we're going to need this variable for changing the scenes and then in here you want to say okay my stage is equal to my primary stage which is this one and then you want to do some changes in here okay um semicolon we want to say primary stage dot set resizable to false so our user cannot maximize our window then we want to change the title to basically anything you want i'll just say falcon and leave the rest as it is and then we want to add us a one method which is going to change the scene and i'll just copy and paste in here basically what it does it you you pass your fxml file like this so sample.fxml to which you want to change the scene and then you load it just like it's loaded in here as you can see but you use your fxml file that you passed and not hardcoded text and then you the whole point of creating this stage was so you can do this stage get scene set root so basically what we did here but we do it with our past file and now we're ready to change the scenes and when you go to here we need to create a new object of our main so we can actually use this chain scene and then we say m.change scene and our after login which we're going to create right now so you go to sample new fxml file and call it after login and again we need to go to our scene builder and edit that so go here and open in scene builder so okay this is our after login it's basically empty and we need to do the same thing again so delete this drop the border pin and i'll just use this center so well again we need to change the background so let's do it background color and then we want to add image drag and drop in here and let's just use this one okay let's make it big and center it and we want to add our log out button so we want to enable our user to log out so add the button text log out and we're going to use our yellow color for the background so go to background color and yellow and let's make a bit bigger like this okay looks good and we need to add our code in here so go to code and id just a simple log out okay and now we're ready to change the scenes let's save this and actually one more thing we need to go to code code button and on action user log out okay now we're ready so save and you can minimize this and this and also we need a controller for our after login scene so you go to new java class and we'll call it apps after login okay and then you go here and remember you need to do this fx controller sample dot after login okay and you do it to the topmost element so this border pane so like the parent element and now we're ready so we go to after login and in here we have a simple method it's it's really simple so i'll just copy and paste it so it goes like this okay basically we just create a new main object and change the scene back to our login so when the user logs out you go to our first scene so our change scene method is really really useful and also we need to change this to our sample sample.fxml because login fxml doesn't exist so our main scene is sample our after login is after login so when we're done we want to go back to our sample and now we just add a button like this and now when a user presses this button this will happen so we'll go back to our sample live xml and we're ready to test our app let's run the program and see if it works okay let's enter our information so it's java coding and one two three and the user can log in now when the user logs in he can do some methods that are only available to that person and when he's done he presses logout and we are back to our normal screen and then you can log in once again and let's test the this case so as you can see please enter your data and if the user enters wrong data it says wrong username or password so everything works thank you for watching if you found this helpful please consider subscribing to the channel to support us if you have any questions feel free to ask me in the comments i'll see you in the next video bye

Channel: Java Coding Community - Programming Tutorials

Views: 23,371

Keywords:

Id: HBBtlwGpBek

Length: 19min 24sec (1164 seconds)

Published: Wed Dec 23 2020