JavaFX 12 Tutorial - 15 - Scene Builder & FXML Overview

this episode we'll be teaching you how to use the JavaFX scene builder it's a really cool tool made by the same people who've maintained the JavaFX project it's a cool tool that allows you to build JavaFX applications with the GUI so it's like a drag-and-drop what you see what you get type of thing where you can design duis without even having to type a single line of code of course realistically you're still going to want to have to use code whenever you're working with these applications but it's going to help you a lot so you don't have to type all the code out to make a application okay so yeah we'll get more experience but don't worry if you don't know what I'm talking about so first one I wanted to show you here is we have a new project here I've just created it and you get the simple Java effects template that comes with IntelliJ so obviously everything's read here so that means we need to import the project itself or the library for Java excuse me so I will do that right now so I just need to find it so that's gonna be my C Drive where I downloaded it to now select the library and boom there we go cool click apply that's gonna play everything and now everything's not red anymore well it is red that the thing over here is red because I have get installed as a git repository managing this folder here so that's why it's red it has nothing to do with the code inside of it but this looks good now right so we can go ahead and edit this configuration and we need to paste this inside of here to make it run and yeah okay so now we can run this and see how it looks see our our template application looks and it should look pretty standard pretty simple application and there we go so now we have a simple little application here just like we expected and let's go over how this structure is laid out because before we just deleted everything we met our own project from scratch which is good because if we want to know how to make an application from the bottom up but now that we know a good amount of the JavaFX api we want to go ahead and learn the different ways of structuring your application okay so we have a main class here which is common for your application extents application and this is going to control the scenes and everything like that so you can set your scene set the title the window all that fun stuff and then you have a controller class here and it's empty but what this is going to do is basically allow you to control the events and stuff like that whenever you're working with the controls okay but yeah again you're just gonna put all of your events and stuff inside of here for example if you click on a button then that will be controlled inside of here basically okay I believe that's how that usually works that's how we're gonna use it and then finally we have the sampled F XML file here which is another way for you to code JavaFX applications and put nodes on the screen right so we have a grid pane here and the grid pain has alignment up Center as a HT gap as a V gap and usually whenever we make a grid pane and we would go to our code here and then make it as you can see here there's no grid paint object created inside of our code so yeah this is another way to create nodes and controls on to Java flex applications without even having to write a single line of code of course this code is for your window and for your scene but the controls itself and the nodes the child nodes will be made here so it makes everything easier and if you're wondering what F XML even means it's a type of file that is built off of XML which is a little I guess you could call it a programming language not really language but it's a type of language that you use usually with websites but XML is very common not really nowadays but it's very common for stuff and if you want to learn more about it then you can go to w3schools comm and you can learn an XML and the syntax for it there I'll leave the link for you in the description below so you can check that out but um yeah you can learn XML and it's basically going to use that same type of syntax for the F X amount because it's basically a customized version of XML but for traffic effects right because it's FX ml alright so this is going to be game changing for us now because instead of creating our grid pains and our nodes and stuff inside of here we're going to actually use F XML and you're wondering why the hell what I want to type it out like this you know that seems a little confusing rather than actually writing the code and we can easily write the code you know create some objects in like two seconds right because we know how to do it now so why use XML rather than code and the reason is it's because we're not actually gonna be writing an XML we're gonna use scene builder and the scene builder is gonna write it for us right so we can use the scene builder and it's automatically gonna generate the code for us and then if we ever want to make small changes within the XML we can so if I for example if I'm gonna change this H gap to like 20 I can easily do that you don't need to be an XML expert to be able to know how to use XML right so we can use the scene builder application to do all the heavy work and then we can do the small editing and stuff like that within the actual FX and they'll file okay so yeah that's basically how that works again the F XML is going to be a way for us to control the nodes on the screen without having to write a bunch of code okay so it's a much more structured way an easier way okay so yeah we're gonna get plenty of practice with this don't worry in case this is overwhelming for you because we haven't gone over XF XML at all either so now let's actually look at what scene builder is and how we can hook it into this right because I told you this will generate the XML code for us right so if we go to the website for it we need to download it obviously right so we can go here one second let me open this up open guest window because you don't want to see my history and there we go okay so now we can look up let's do it so seeing builder searches team builder I spelled wrong but you get the point and so now you get scene builder by gluon and gluon is the people who also manage the project for top effects if it does you can see down here up here so you can spy drama effects here you can download it here the current version is 12 and then 13 should be coming outside the access oh yeah the current version is 12 so that's our FX plus go back to scene builder now and we can see that we have this cool little application preview here where we can if you look closely we can see that we can be able to build applications with a drag-and-drop two UI interface so basically using a GUI to build a GUI kind of ironic but yeah that's pretty cool and so yeah let's go ahead and download this and install it onto our computer and we can choose whatever system we're using so windows installer looks like it's downloading come to second probably oh come on buddy hurry up there we go so now selling but if we go back here we can see that's for Java 11 not for Java 12 and this current series is working on 12s if right now but that's okay still going to work with what we're doing because the language showed the API doesn't change that much between versions okay at least currently so anyway we can go ahead and install this once it's done give it a second okay so now the installer for scene builder is opening up here so we can install it obviously okay this is pretty standard we can just accept this whatever scroll through if you want to read that you can do that and then it's gonna ask me yes or no in a second here just click yes there we go and then now it's gonna finish installing and that's all we need to do so click finish now and we're good to go so what we wanted to do first is going to tell EJ and there's a way for us to hook our effects and mail file to the scene builder so currently you can see that I have a text tab down here and then a scene builder tab but you probably won't see the scene builder tab because you haven't set it up yet so if I was to click this nothing what happened because it actually is broken for me also for some reason well we still need to install it so we can do some magical stuff okay so if we want to do that we can go to file settings and what we want to do is tell IntelliJ where to find the scene builder application all right so we can find let's find it it'll be your tools for your tools and then now we want to find JavaFX and it's not here probably that's fine somewhere okay under languages and frameworks that's where it is so then go to Java FX right here and now you have this one option path to scene builder I already sent mine obviously so you can set yours there's not gonna be anything here so just click this little file thing here and you need to find it so you're probably not going to know where to find it so usually by default whenever you install it it's gonna be on your C Drive or whatever the default drive is for your computer or whatever and then go to Program Files and then find scene builder so here team builder open that up then now we need to find the dot exe file there we go so scene builder exe click that and then click ok and so now we just set the path for us then click apply mine's already applied because I already had it set in the first place and then click OK once you're done ok so now it's so now it's setup so if you want to test it out you can try and see if this works for you doesn't work for me obviously but it might work for you maybe you're special so you can use that and switch between seeing scene builder in the text but something really cool that we can also do is if we want to open this FX and mouth I'll inseam builder itself we can right-click this and then do open opening scene builder right here okay so we can open an FX MMO files in scene builder and then it's not it's going to automatically change that file for us whenever we can make changes inside of here right because like I said before this is the same blurs not gonna automatically make the changes inside of here so we don't have to actually learn XML and code everything by hand okay so it makes our life way easier okay so anyway let's go to scene builder and check it out so we have a cool little um GUI here and it's not that hard it's kind of ugly to be honest in my opinion you would think that a GUI to make GUI so it'd be more sexy like IntelliJ but it's not it's kind of simple but whatever so we have a bunch of different options here if you want to preview your current application so preview into show preview window and then you have your application here okay it's kind of simple and then so this is one of the most important parts you have the document model and then under that you have the hierarchy you can open that hierarchy and you can see all the child nodes inside of the hierarchy so the root node is going to be the grid paint obviously because with the because the only you know note that we have is the grid pan so that's our root node right and so let's say we want to add something or let's say it was just delete this so backspace to delete that and so we can go into here and find any node that we want to add to our application okay so it's a really cool application builder so this is the controls tab but if we want to add a layout pane like the grid pane we can add it by going to containers so we can find all the different containers here are the grid paints or the layout panes right so let's select one that we like we'll just do the group paint again so you can see how it works Boop so now you have a grid pin here you have the columns and then you have the rows so it's a little big by default so this is one little cell so we can make that smaller we can edit it by going to the right here and you have the properties tab so we can open and close this so your property's layout and then code and code is gonna be useful in the future for a controller thing that I told you about and then you have layout which is porn for also changing the layout of this and then you have properties again which is going to be yeah it's just all pretty much you know for styling this and making it look sexy and customizing and all that fun stuff so imagine having to control all of this with the XML file or with the code even right that would be a lot of stuff you have to do so this makes it way simpler for you all you got to do is change your application inside of here and then when you save all of the changes will be automatically loaded into the FX and X M F XML file that you have here right so it hasn't changed yet because we haven't saved you right but we haven't you know really change anything the first place so let's add something here just to test it out so when we click this we can see it and I don't feel like oh it's just a simple blank thing so yeah if you want to edit something just click it in the document viewer here so right right so so yeah that's out of control your our child's node of any sort and we'll add a slider we never made one of those before so let's add a slider and you can choose where you want to add it pretty cool or you can just add it randomly and add it for you so yeah now we have a slider here inside of our application right pretty cool looks kind of ugly so far but we would have to mess around with worth it to make it look sexy so yeah we added it there so now let's try making your show up inside of here right because we haven't nothing has changed yet right so let's go back here and we'll do file file save or we can do ctrl s so let's do ctrl s ctrl s nothing happens but it's and then now it's saved so we go back here now look it added all this stuff for us so yeah just imagine having to talk to all of that out that would be very painful right so that's why scene build is very powerful not only can you build applications with a GUI so you don't have to type any code but we can also give our application more structure by using AF XML file instead of writing every node with a actual line of code okay so we're going to be transitioning into F XML rather than doing everything with code but don't worry we're obviously going to still be using code with the controller and just other stuff we need to do if like for example we need to still change scenes so we can't really do that with the with the FX and Mel thing here we're still need to do a lot of stuff that's going to be managed by a code but the front end of our application these stuff that's actually displayed is what we're gonna have inside of here okay so just structure it's all about structure hopefully I'm not too hopefully I'm not rambling too much hopefully you finding spring formative so yeah we can add more stuff once again a spinner here whatever that means so now if we do ctrl s and go back here we can see that it instantly changes to add it right down here spinner okay pretty cool save the slider and the spinner has children and we can even close this and if we close it you know it's gonna be gone right so if we want to open it back up we can automatically open it back up by going again they could do it here or we can go to the side here and then find it down here open scene builder and that's gonna open right back up for us to edit it so it's really fluid it's very uh it's hooked together really well so you cannot edit it very easily okay hopefully that makes sense but um yeah that's one way to do it you can make an F XML file and then open it with the same builder or you can open up scene builder manually without actually having to right click this and then you can start a new application by by a scratch paper so you can choose a mobile or you can choose any of these other templates so we can start it from here here here let's just choose a complex application so we get a cool tool template here nice pretty cool and now we can see in our document viewer here in the hierarchy tab we can see the different nodes that we have here so you have a V box that's a root node because it's at the very top and then the children of that is the menu bar the split pane in the H box pretty cool let's actually delete this we'll make a new project actually so new and let's just have a simple empty project okay so last episode we made the form with the grid pane but now let's try doing it with the same builder so we can see how easy it is instead of having to write all of that code out okay so let's make a grid pane here as a root thing of course right because that's what I've been used and so we'll find a grid pain pain there we go so add a grid pain and so now let's try adding we'll have a username and then a password and then have the fields here for they can type it in like we did last episode I believe and then so we need a label for that if we're gonna have the you know the text thing so I have the label so you're the label boom let's add one right there it's add one right there so we have two labels now we'll change will select the first one we're almost change it to user name use your name in the press enter and that's gonna be changed automatically and then looks like we change it from here that's pretty cool password bumps announcer password and now let's add the text boxes right this one will be a text view or a text field and this one will be a password field if you remember correctly correctly so text field right here and then we'll find the password field node password field there we go that's pretty cool and then finally down here we'll have the create account button so we'll find a button note here a button control whatever that's alphabetical order by the way so button right there okay so obviously this doesn't look really good and if you preview this it looks like crap so we need to push this forward a little bit like push them side-by-side and then just make the the cells are too like big obviously right so if you click on this we can oops you click on this we can see that the cells are very large right so let's try to make them the right size okay so we can do that well view here on the right side by clicking good pain then we can change the properties of the grid pain and then we can also change the layout with this tab here so let's try and changing some stuff okay so let's add a Buick app an age gap so the age gap is going to be the horizontal space so we'll make it like ten tens you can amount this what we did last episode so you can automatically see that now there is a space in between it shows you that very well and then we'll have to put the V gap so it also add the space for that pretty cool but still spaced out a lot so let's try fixing that so if preferred width and then preferred height oops that's cool it showed it if we clicked on that shirt it shows us the documentation for that that's awesome anyway we'll go back here yes this one okay so now we can change this to whatever you want let's change it to let's see what 100 looks like so hundred by hundred so this is gonna be the cell within the cell height the preferred obviously and then the rep and the min and the max used to preferred so it's all about this one really so anyway so it's one hundred five hundred currently so that's a little small obviously so let's change it to use computed size which is basically going to use these size that these and don't take up right so this node takes up a certain amount of space so that's the space is gonna use for the further preferred because certain nodes take up certain space so might as well just let this decide how much space they even used in the first place for each cell okay hopefully that makes sense but anyway let's add some padding here because everything's on the edges you can see if that's not very presentable so that's a padding we can click the grid pane and it's find the padding option that's gonna be in layout so go to layout we have the padding here so we had four different padding options obviously because there's four different sides so let's do was 30 that's way too much we'll do five mmm let's go ten by ten by ten by ten see how that looks looks way better and then we have a button down here change the text for the button okay would be up here for properties so create account like that so now we have the button here setup so this looks way better obviously so this already looks way better so we can type stuff in here put some stuff in here create account pretty cool right so let's push this so let's push this together to be on the same side as this so one way to do that so we can actually edit a whole column or a whole row just by clicking and that's kind of cool so if we edit this column here we can click on the column and then now we have the layout and the properties options for the column there's no property options for the column so we'll just click layout again and see what we can do so we have the H grow sometimes when we have the H alignment so let's set the alignment to the right so this will be pushed up onto the right of this here so I should do that so put that to the right and there we go so that is already on the right side of it that's kind of cool so yeah that's pretty much it for our little test application that we made of course last episode we added a emailed field also so they can turn their email but this is pretty much the same thing as we did so that's fine so now that we created this scene builder application or GUI how did we get this and turn it into a IntelliJ project right so currently it's not linked into any project because we never opened it with the you know the tool here right so we don't have anything for that so we need to save this to a file to an F XML file so we need a file save as and we can choose the save location so we'll go to spigot tutorial JavaFX here and then here and then now we can find the episode source sample and we can save it here so we're gonna name it we'll call this login login form and that's going to be saving it as login form F XML so it says changes save to you live informed of XML pretty cool right so what we did here is we created a new application with scene builder without leading linking it to a IntelliJ application and then we saved it as a F XML file then so that we can add that file to the application here so now we can go in here we can see that the file has appeared here and we could see all the code for it right pretty cool so how did we get this to show up in our projects right because currently if you run this it's still going to show the F XML or then it's still going to show this one here because that's the one it was set as right right here to see so as you can see here we're loading that into our application so how do we load so let's try loading in the one that we just added right so login form to F XML pretty cool right so we'll do that so parents a parent will call this let's call it but we'll call this login for new routes ok then we're going to load this in so we're loading the F XML file into our application basically okay so login form routes so we'll do FX ml loader dot load capital L looks like I know it's not lowercase L and then now once a parameter right we can just pretty much do what they did up here so we'll do a gig class dot get resource and then now we can provide the name of the file so login form F XML okay so I should load that file into its own little parent node here and we could use that parent node and turn it into a new scene object so scene login form is equal to new scene and then login form roots so what we did here basically is took our login form that we created with the scene builder and turned it into a scene so now we have two scenes we have one which is the default scene that we loaded this project with but now we have another scene called login form which is going to represent our obviously our login form right so currently if we run this again is still going to load the default scene because we haven't changed it down here so we can also so let's start changing that so the new set scene let's get rid of all this crap and we'll set the scene equal to login form so instead of loading the root scene it's going to load the login form scene ok there we go so now we get a form here so we were able to successfully create a GUI with the scene builder and then load it into our intellagen and then make a scene for and then display it on the screen right so now you can see hopefully that everything is starting to fit together and we're able to structure our application in more detailed ways and what I mean by that is we're going to start having different scenes for different F XML files right so there's different parts of our application obviously right sometimes you might have different windows sometimes you might have different screens that you will show on the screen and so you want to create an F XML file for each of those parts of the application and then create a scene for the each of those F XML files and then switch between and - yep and then switch between any of those scenes interchangeably yeah hopefully that made sense it probably didn't but yeah that's how it's gonna work you're basically gonna have scenes for different F XML files that's the way I would do it at least you just want to link each trip your F XML files to a scene ok and yeah so if you're still a little confused on how this is works don't worry we're going to get plenty of experience with this in the future so now that we're getting more advanced we're going to start making some actual applications so yeah don't worry about that so just one thing I wanna show you here is in actual application you might want to create a resources package here so resources and then now you can put all of your XML files and the resources package so I'll click OK and then put this one in here also so click OK so now we can have some more structure in our program so any of the XML files can be found in the resources package and also you can see that IntelliJ automatically renamed the location for the file so it still knows where to find it so that's pretty cool - so yeah just keep in mind if you ever make a package and then put that XML file in that package you just know that you need to actually specify the file specify the file location ok yeah that was a lot I told I showed you a lot today but that's pretty much it let's test something out actually real quick so we have our application here so if you run this we could see that it shows our Gy that we just created okay so now let's go back in here because we still have it out let's close this other one so we go back in here we can see that we still have this open let's try changing something inside of here so we'll change this from username to poop okay and then do control s and then open this up and it should be saved and it should have floated automatically so let's see if it automatically made the changes inside of our XML file like it did before and we can see that it did not it still says username so nothing changed right so the reason that is if we go back here we can see that it has changed in here but it didn't change in there so something went wrong so if we go here we can see file and we could see the save option is not available anymore and that's because remember we just changed the file location for the login form of XML so now it doesn't know where to change it because the files aren't even there anymore or it doesn't know where to save it because the file is not there anymore right so if we go ahead and select this and click Save now it knows where to save it so just yeah I do that and then now we can go back here you know it's gonna change so it says poop now right so that's pretty cool and so now if we make any further changes and knows where to save it so if we let's test that out so we'll change the password to something random do control s now I'll go back here and we can see that it was all that changed okay so yeah just keep in mind you need to change the file location on singing builder and if you change it within here okay so that's pretty much it I want to show you for this episode I give you a good overview of scene builder I hope hopefully you understand how it works and then how it hooks into IntelliJ and how you can use F XML files and hopefully you're not worried because you don't have to learn the XML language you can just use scene builder right and then any small changes obviously is going to be really easy to make because you know it's pretty verbose you can see that if you want to change the minimum height all you got to do is change it to 20 right do this employer that so yeah if you're a little confused on what I'll show you today you can ask any questions in the comment section below or I'd rather you join or discord server we have a discourse server where with about 400 people where you can join and ask me questions ask anybody questions and they'll try and help you out if you have any questions and yes hopefully enjoyed this episode hopefully you found it informative and leave suggestions for what you want to see and that's it so also all the code for today's episode is going to be the description below so make sure you check it out so you can see the code for future reference ok also if you want to support this channel by becoming a member you can click the join button below this video and you can join for $0.99 $5 or $10 a month and you can cancel at any time if you want to and by the way we have a new member called Joshua Pryor that's his name and yeah so thanks for joining Joshua and if you want to join just click page 1 button ok and that's it so if you liked the video leave a like if you wanna see more subscribe and peace [Music]

Channel: Kody Simpson

Views: 18,077

Keywords: javafx, fxml files, javafx fxml, Scene builder, javafx scene builder, intellij scene builder

Id: dOQxYK6Nfp4

Length: 27min 13sec (1633 seconds)

Published: Thu Dec 19 2019