JavaFX Java GUI Tutorial - 1 - Creating a Basic Window

what is up guys my name is Bucky and welcome to your very first tutorial in Java FX now I'm guessing that most of you if you click this video then you probably already know what Java FX is and you just want to learn about the syntax and everything like that but for those of you who are just curious you you aren't really sure what it is Java FX is a platform for making really amazing looking GUI applications in Java so if you ever try to make a GUI program before in Java you probably notice that everything on it looks out of date maybe you're using swing and everything looks like it was like from Windows 95 or Craigslist and just really outdated well what Java FX gives you the ability to do is create amazing looking programs really really easily so that's the pretty much bare-bones basics of it and in addition to pretty much that which is you know the core of it it also comes with a bunch of other features for example you can create animations charts on there's 3d stuff but that's a little bit more advanced we're getting that later on so for now I just want to teach you guys the basics and yeah let's go ahead and get started now another thing I should mention is this Java FX is built right into the core JDK so we don't need to go online and find some weird package and download it and configure it so our program can use it as long as you have the most recent version of the JDK everything is built in for you which is amazingly awesome so again make sure you have the most recent version and by the way if you're watching this video I'm going to assume that you already know the basics of Java and you already have some kind of IDE installed I'm going to be using IntelliJ because is stinking awesome so um yeah that's all I need to say let's go ahead and start typing some code so the first thing we need to do is we need to import all the stuff now even though it's included in the JDK we still need to import it to say hey program we're using these packages so you can either pause the video right now and copy all these down or if you guys just want to watch this video and maybe you learn better if you don't type at the same time and follow along with it then what you can do is you can just watch the entire video and at the end you can go on my github page and I'm going to be posting all of the code from all of my tutorials right on there and I'll put a link below in the description so again if you just want to watch and then copy it at the end you can go ahead and do that but anyways once you got all this taken care of the first thing we need to do with every single JavaFX application is we need to extends a class called application now as you see right here it says JavaFX application that's the one we want what this allows us to do is pretty much get the functionality for a Java FX application so all that core functionality is in this class right here so now we're inheriting it and now we can use all that good stuff now this of course this is just a hello world line that they gave me whenever I started this project so we can just delete that now in your main method remember this is the first method that gets called whenever your programs launched what we want to do is we want to call launch args so what the heck is this method this is actually a method inside the application class and all this method is going to do is whenever we first start our main Java program it's going to call this method then it's going to go into application and it's pretty much going to set up your program as a Java FX application now after that's um pretty much done and set what application is going to do is it's going to call a method called start now we don't have that method yet so if we start typing it you can see that start is actually overridden because we're inheriting it from the applications class so I know that this is kind of confusing but if you're still with me um that was the hardest part so basically whenever your program starts it's going to call watch launch is going to go in the application set reefing up and then it's going to call start so all the code we write in here that's going to be our main JavaFX code simple enough alright so now we can go ahead and start learning the easy stuff now before I actually start typing I'm going to talk to you about terminology for like two seconds because it's going to save you guys a lot of headaches now in JavaFX language the entire window is called the stage so this entire window right here including the clothes maximize minimize in this title right here this entire thing is called the stage now the content inside your window or inside your stage that's the scene and on the scene is where we're going to be putting all the cool stuff like buttons widgets stuff like that so just remember um they don't call it a window and stuff inside your window they call it a stage and the scene alright so why did I just say that well because whenever we override the start method which is essentially the first method that gets called what it's going to do is it's going to pass in the primary stage and essentially this is our main window so one cool thing that we can do on this is primary stage set title in we can just pass in any string right here I'll just put title of the window and oh come on there we go title of the window and all this is going to do is it's just going to set the title of the window you see where this has new to notepad it's going to set that to title of the window so now let's go ahead and actually create something that we can look at rather than than just a blank window so in this demo I'm just going to show you guys how to create a really simple button just because it's really easy but eventually I'm going to show you guys how to do a bunch of other stuff so actually if I go up above main then I'll just name my button button and I can initialize it and start so I can set button equal to new button now right now we have a button and it has no text on it whatsoever so you always want to put text on your button so the user has a little indication of whenever they click it what does it do now you can either just use your button object and call a method on it called set text and I'll just feel like um click me or something like that or what you can do is you can actually just set it whenever you create your button or initialize it so two different ways but I actually prefer doing it that way just because I don't know lets me visually understand a little bit easier that we are setting text on the button right there and let me myself a little bit more space to work with don't want everything clam jammed up all right so now we added a title to the main window and we created a button but it's not going to appear on the screen right now because the first thing we need to do before we actually display anything on the screen is we need to make a layout now again a layout is essentially just how you want everything arranged on your screen and in this example again we only have one button so you're like how can you lay out a button like on the top in the middle that's it not that exciting but eventually we're going to be building programs with like menus and drop-down lists and bunch of cool stuff so that's when layout comes into play but for right now I'm just going to show you guys a really simple layout so if you call stack pane and you just name it layout or something like this you can set this equal to new stack pane and again this is just a really simple layout not going to be getting into too much detail but essentially what it's going to do is it's going to position this button in the middle so if you call that layout which is pretty much your main rules of how you want everything organized in position you can call get children and then you can add the button and again this is going to make a lot more sense whenever we talk about layouts but for right now I just want to show you guys a real quick example before kind of breaking anything down so the last thing that we actually need to do is remember right now we just made that main stage which is essentially the main entire window but I also told you guys that you need a scene as well the scene is essentially the contents inside your window so for here would be the area where I type this menu all of these buttons this tab all that stuff is included in the scene now for our little demo we just have a button in there so I'm not going to be that exciting but here's how you create a scene so in the scene class you can name your object anything you want I'm going to name my teen set it equal to new scene and get that out of the way now the first parameter it takes is your layout how do you want stuff arranged in your scene well the rules we just made in layout again more details on that later on and the other two parameters are just the size of your scene and since you're setting the size of your scene what it essentially does is it sets the size of your entire window so just for this demo I'm going to set mine equal to 300 by 250 and for the primary stage which is the main window after that you call set scene and you pass in your scene and this pretty much says use this scene for our window or main program and the last thing that we need to do is further stage which is the main window we just call show and you guys can probably guess what that does it just displays it to the user and I know I'm going a little quick and you're like alright I really understand this thing about the layout and why we need to like pass all these parameters in but I'm just going to go ahead and run this now and show you guys that it does indeed work so check that out so we now learn how to create a very simple Java FX application again I know I went through everything really quick and there's of course a bunch of other stuff to cover but for right now um well that's all you guys get so if you want this code again go to my github page link below thank you guys for watching and don't forget subscribe and well I'll see you guys in the next video

Channel: thenewboston

Views: 1,383,856

Keywords: javafx, java, gui, tutorial, scene, builder, 2.0, game, animation, application, swing, download, demo, sample, example, Graphical User Interface (Industry), Java (Programming Language)

Id: FLkOX4Eez6o

Length: 11min 21sec (681 seconds)

Published: Wed Mar 04 2015