JavaFX Java GUI Tutorial - 35 - Working with Scene Builder

all righty Haas says welcome back in in this video I'm going to show you an example of how you can use scene builder to build an actual cool-looking interface and before we do I need to tell you sorry yesterday I was getting ice cream with my mom my sister and her boyfriend and we're at this restaurant called friendlies and this old guy walked in he was like must been like 70 something in he had a walking stick and my sister thought that it was a selfie stick because he was standing there waiting to get seated and he had it and uh if you guys don't know what a selfie stick is apparently it's just like long uh just like a stick basically that you stick your camera on the end and you can take selfies she thought he was carrying a 70 year old man a funny funny stuff there all right so where was I we're going to be using scene builder to build an actual interface but for those of you who have a JetBrains IDE like I do I'm using IntelliJ I'll show you how to set it up it's really easy if you go to file settings then drag to see you guys you see it go to languages and frameworks and click on Java effects it's going to ask for a path to see motor now as long as you installed it in all the default locations and you didn't do anything weird whenever um you were installing it your path is going to be right here you're essentially looking for this executable file now the reason that it needs that is because once you have that path set then what you can do is you can actually just right click these and choose I know you guys can see the option but there's option that call is called open and scene builder so there you go there's a little you know cool integration that you can do let me adjust this get everything nice and pretty and all right so let's say that we're making a program um like for a social network or something well what we want to do is if we don't have any template then we can just choose new but since we actually right-click that in jetbrains in hit open and see motor this file is actually a representation of this F XML file so you guys are going to see whenever I start dragging stuff and I save it this F XML is automatically going to be updated which is pretty cool so for this program I actually want to use a border pain so I'm going to delete this because it already is using a grid pain Popo pain delete that and drag out a border pain looking noice May all right so now we have five sections top left center right and bottom so for the top I actually want to put a menu bar across here and then some toolbars kind of like this is set up right here so the first thing I wanted to do is use a V box and I can either drag it right here and I could say okay top center try to get it exactly where I want it or you can actually just drag it right in here and I don't know I usually prefer dragging it right here because then you know exactly how things are going to be positioned so now our top section has a V box which is pretty cool so now if I just do something like menu bar and by the way you can either find everything manually like I want to add some controls but I'm not really sure what I want to add if you know exactly what you want to add then instead of looking through these menus it's actually faster just to type it so the first thing that I'm going to add is a menu bar and I'm going to drag that right in V box so now I have a menu bar and by default it gives you expand this it gives you a couple different menus of course you can override them later if you want and what can I do let me um also add an H box right here so each box in my V box so now we have an H box underneath this menu bar why did I do that well say that I wanted to have a section where the user could log in so I'm going to have a place for their username and I don't know maybe their password so if I take this text field then I'm going to drag it right in my H box so it appears right there and you can actually drag another one or if you just want to duplicate an item you can right click it and hit duplicate so now let me just add two buttons because this looks kind of weird so I'm going to take a button and also add it to my H box and I'm going to duplicate this as well all right now on the left hand side I am just going to put let's say we're going to make a tree view so the user can navigate so I'm going to take tree view and I'm going to stick it in the left all right so now this area on the left hand side is going to be a tree view now whenever I'm just designing and I didn't link it up to all my data behind the scenes yet I kind of like to have something there because it just looks weird this wireframe so if you actually go to view you can choose show sample data and that's just gonna give you some default data again whenever you actually run your program this isn't going to be here but just so you know you get a little better visualization of what's going on I like to have it now for the center area I actually want to have let's just have a text area for now so a text area dragged out in the center all right now the user can like type text in there and for the bottom I am sure going to have a H box as well so you know at like um like in the bottom of most software you have I don't know like these little icons and just like a little status bar of what's going on with your program I'm going to drag H box in the bottom and I'm just going to add a label to it in my H box alright so we have a really simple looking layout I mean I have all of my items exactly in the right sections that I want them but everything you know kind of looks a little bit goofy so let's start making this look a little bit prettier the first thing I want to do is change the text on these buttons so I'm going to double click this and I'm going to type a login so you can double click it and edit the text or what you can do is select it and you can edit the text in the properties panel and this one will be like settings and hit enter so the next thing I want to do if I myself a little bit more room here is I pretty much want to adjust the sizes of all of these sections or areas because usually this top area isn't taking up half your screen and right now it's just look like it's bunching everything else together so what I can actually do is this if I select V box I'm going to go to modify use computed sizes now I'm also going to go to this menu bar and when I select it by the blue outlines it looks like it's pretty good size right here you know it's not responsible for pushing everything down this H box however it's taking up a lot more area than I want so I'm going to choose modify use computed sizes as well now this actually just gives it a non static value and its really good for whenever you're making arm-like pieces of software that you want to be able to adjust no matter how big the window is I don't want to use the term responsive but if you guys know what a responsive website is basically adjust adjust properly to the size of the window then you probably want to use computed sizes so um all right that looks pretty good what I want to do now is actually just adjust the padding and spacing of these elements so make sure you have your H box selected which is this little toolbar section right here in the layout let's say that we want to give a margin of like 8 for everything so 8 8 8 eight all right that looks pretty good give me some you know margin around the borders but now these elements are still kind of bunched together so in a CH box you can actually just change the spacing of it and let's say let's see how ten looks and actually want to do the same for this bottom area since you know usually these bottom status bars are really thin so I'm going to select this H box modify use computed sizes and now let me give it a little bit of padding so I'll give it like um two pixels all around and someone has texted me in the middle of my video all right so that looks pretty good right there and by the way if you ever just want to preview this real quick in the actual window instead of just looking at it in the editor you can go to preview show preview in the window and there you go so alright this is stretching out exactly how I want it to you know whenever we expand it the height of it this tree view right here expands looks good everything is sweet but one other cool trick I'm going to show you guys is how to do this you know actually let me show you this you know whenever you have some toolbars you want some items on the left and some items on the right like these buttons right here well close out of that well say that we wanted to do that with our program well whenever we're expanding this actually want this login button and button which I thought I'd change the settings to appear on the right so anytime you want to do that you can actually just type region right like this and drag a blank region in between right like that so we now have this blank region between these inputs and these two buttons right here now obviously it doesn't look that great right now so we're going to go over to H 0 which means horizontal grill and we're going select always this means that it's always going to resize whenever the window resizes whenever the size of the window changes and now if we just go to modify use computed sizes check out what happens now so preview show Peruvian window our buttons are now floating to the right or they look like they are but we really know that there's an invisible region right here and whenever I resize my window pretty cool effect there all right so our interface is looking alright actually one other thing I want to do real quick before I show you guys how to hook up all the controllers and everything is in these text fields I am going to just add some prompt text so be like a username and for this one I'm just going to change it to password just so the user knows that they can actually type their stuff and log in if they want to so I type something like the new Boston and my password is a like ham bacon tuna whatever and of course we want to change that to a password field so it is in plain text but good enough so now you're like alright cool all my controls are looking sweet how do I actually hook this up to code well let me hide these and show you guys this so you know that what we're doing is essentially editing this F XML file and we want to hook it up to this controller right here so to do that if we go to the controller right here it's going to ask us for a controller class now remember this is sample dot controller so now whenever we run this it's going to be hooked up to that controller class how can we test this well if we actually hop right into the controller we can just build you know a test method real quick and we'll just say like public void um what can we do we just say that whenever we click this login button we're just going to print something out in the terminal this is just to show you guys how you can cut connect elements to your controller but you guys would obviously want to do something useful so say login button clicked and we'll just say system.out.print line user logged in all right so now we have a method in our controller called login button clicked so if we hop back over to seam builder we can actually click this login button right here and in the code section now that we hooked up our controller if we call on action you're going to see that we now have the method that we just made a login button click now again what you typically want to do is you want to give these buttons ID so you can reference them and our already told you guys had to do you know all the code so I don't want to repeat myself since you you know already know but now if we just hit file and save this and actually one other thing I want to do is this is the default size for our window right here I'm going to change this because 300 by 275 for that program is really small it's going to look good for you so I'm going to change the default window size to 800 by 500 but of course whenever you run this we can resize it if we want to so resize it and as you see already you see that tree view this is what I was talking about how that sample data is just for whenever we were designing it whenever we want run our actual program were actually going to want to populate this with like the different pages to whatever piece of software we're making but lalala typing in your password click log in and check it out whenever I click it we run some code so there you go that's the core basics of how you make a really simple interface with F X F XML and taking out that since I save that I'm going to hop back into my F XML file and IntelliJ and everything got updated manually so if I want to I can do you know some coding right in here hop back the scene builder everything is going to work fine and you can use these two tools in conjunction with each other and it makes for some really awesome GUI development so there you go hopefully you guys enjoyed any questions you can ask me I'm gonna form I'm also going to be taking all of this code and sticking it on my github page so if you just want to copy it paste it in and play around with it feel free and yeah see you guys later

Channel: thenewboston

Views: 294,181

Keywords: javafx, java, gui, tutorial, scene, builder, 2.0, game, animation, application, swing, download, demo, sample, example

Id: zvgWgpGZVKc

Length: 15min 27sec (927 seconds)

Published: Sat May 02 2015