JavaFX Java GUI Tutorial - 31 - Introduction to FXML

alright guys welcome back and in this video I want to start talking to you guys about F XML now the easiest way I can explain what F XML is is it's essentially HTML for Java in other words you can use it to design the view in other words the layout or the interface for the user and then you can stick all of your brains all of the logic in a separate file called a controller and it breaks up everything it organizes your project really easily in there some other cool things that you can do with it as well so if you're using IntelliJ then it's really easy to get started if you just select new project and you click JavaFX then you can just say something like um F XML like example or whatever you want and finish and check it out so if I expand and show you guys what's going on I'm just done setting up all right so whenever we get our template F XML project we're giving three documents to start the first one is main we already know what that does it's our starting point the second one is controller and the third one is this F XML and that's what I'm going to be teaching you guys in this video so already you can see that in F XML it kind of resembles the basic template of HTML with all these you know tags in the structure of it and another thing I want to point out whenever IntelliJ gives you this default project they give you a bunch of little statements that you don't really need or you don't really use right now that's what these great little squiggles mean so what I did is on my github page if you go to the JavaFX section 31f XML I made a really simple cleaner template and this is a little bit easier to follow so again just copy all of this data from the sample F XML document and then we can just use this one instead it'll be a little bit easier to follow along with so before we just start jumping into this code I'll explain to you exactly how all of this fits together um real clearly and actually let me clean this up a little bit so it's going to be a little bit easier to understand all right so we know whenever the program first starts it calls mein and we already learned in FX ml main is going to go ahead and call start now in the start function what it's going to do is it's going to kick off this resource right here which is your simple dot F XML file so this is essentially the view in other words all the layout and design that the user sees and this sample F XML file is tied to this controller right here controller Java so this is pretty much the brains behind your F XML file so let me run this to show you guys what's going on if it kicks off any time now all right so this is our interface we can see in F X ml and I'll explain what all these little attributes in all this means later but we have a label so this is the label says I love bacon we have a button a submit bond there you go and when we click it nothing happens this again is just the overall layout the structure of the design so this right here what code would be right in here well whenever we click the button then you know print something out in the terminal whenever we um like submit a form send it to the database so all the behind-the-scenes um you know logic that's what we're going to stick in there now another thing you may be wondering is alright this is a great and all but why wouldn't I just design my entire interface through code I mean up until this point we've been learning how to write Java FX to essentially design a GUI a graphical user interface so why would I switch over to FX amount well one of the reasons is because obviously as I just demonstrated it breaks up your view and your logic so organizes your entire project a little bit easier and also you guys are going to love this in you know I just want to give you guys a little hint and I'll show you guys how to install scene builder in I don't know probably 10 tutorials or so but JavaFX has this tool called scene builder and again I'm we're kind of getting our head of ourselves but I want to show you um you know I just want to kind of get your mouth water in a little bit and it's pretty much an awesome application where you can pretty much drag-and-drop and design your layout incredibly easily now whenever you do this in scene builder what it's actually doing behind the scenes is it's editing your F XML file so before we just hop right into scene builder and start learning how to use that it's a better idea if we understand exactly what's going on so in case you get any bugs or you want to do anything manually then we can learn how to do that

Channel: thenewboston

Views: 156,467

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

Id: K7BOH-Ll8_g

Length: 5min 13sec (313 seconds)

Published: Wed Apr 29 2015