so in this section we are going to be building some GUI applications in Java now Java
applications can obviously have graphical user interfaces and we haven't
used that at all in this course to date we've use everything from a main console
and done all our output and we've really has concentrated on the Java language
itself rather than producing sort of GUI type graphical user interfaces
thing is that Java applications can as I said have graphical user interfaces
that contain things such as buttons lists checkboxes menus toolbars and many
other controls that allow users to interact with rich client applications
now JavaFX is what we're going to be using here and that's a set of API's
that can be used to build interfaces in Java tnen what it is it's really
essentially a set of Java packages and it's the successor to swing which you may
heard of which was Java's UI toolkit
of choice and recommended for many years but that's actually been deprecated now and
Oracle's direction is to use JavaFX and that's why we've chosen or why I've
chosens that for this course now we can use JavaFX to develop the UI for desktop applications
Internet applications and mobile devices but what I'm going to do is focus
on desktop applications because obviously to really give justice to
JavaFX we need a complete course we haven't got that we just got this
section so we need to focus on that so we are gonna focus on desktop applications
now the other thing to keep in mind is that the latest version of JavaFX is
JavaFX 8 and it's packaged with the Java 8
JDK Java runtime Edition Java Development Kit so if you want to make
sure that you using the Java 8 SDK when you're building a JavaFX application
and if you followed the information in this course in through the installation
setup I did actually recommend that you downloaded the Java 8 SDK so if you
haven't done if you are using an older version JDK 7 or earlier
make sure you update it because you won't be able to use this
you will be finding you weill be getting all sorts of errors now IntelliJ has got a plugin that supports Java
FX applications which is pretty cool and when we installed IntelliJ earlier in the
course that plugin was installed and enabled by default at least it should
have been so what we going to do
is we are going to create our first JavaFX project and we are going to do
something very simple as a familiar hello world example cuz we need to start
on the basic so you can click on file new project or you can come over here and
click on Create new project and I'm going to choose JavaFX you can see I've
already got it selected I'm gonna choose that so normally we have been choosing Java up here and
I'm gonna choose JavaFX the other thing is I've actually invalidated my project SDK
because I wanted to bring something to your attention in that in
later parts of this section their is going to be some features that were using that
require a more up-to-date version of JDK 8 so I've mentioned that we actually
need JDK 8 but their is particular class for example that uses a particular
version of the JDK so it's a good opportunity to make sure you are up to date
as possible so what I'm going to do I've downloaded a new version of the JDK and installed it so I
just wanted to show you again how to do that and I deleted my old version that's
why it's now complaining because that was the version that I was using earlier
so gonna click on here and take this opportunity click on new JDK and what
IntelliJ should do is it shouldn't go to the
latest version anyway and depending on whether your on a Mac which I am I will
get that path and if your in windows you get a different paths and likewise for Linux
and possible you might need to go and find those folders manually
and if you need any help with that go back to the installation
videos
you know the first section of the course on how to do that so I'm gonna select the
latest version i download which is 1.8.0_73 click on OK and
that's version we are going to be using for the JavaFX application and click on Next we
need a name and I'm gonna call this one hello
world FX click on finish and that will then create a basic project and we have a look at that
and you can see it has created some other code here now before I get into that I just
want to also point out a few other things firstly to check if you got that plugins so if
you didn't see that JavaFX come up as an option on the screen you can come up into
IntelliJ coming into preferences and then select plugins
and typed in FX and it should come up automatically with JavaFX there and you
can see it's actually clicked and it's ready to go and basically it's installed and if
you click on enable you can see that it's actually installed so that should happen and by
chance it didn't happen and you couldn't see JavaFX you download the JavaFX
plugin like so and select it and their will be an option here to install it and then you need to restart IntelliJ and
then you'd have the version so if you find you didn't see that JavaFX
selection go back and install the plugin that way alright so let's return
back to our project again you can see that we've got some files here we've got
Controller.java Main.java
we've also got sample.fxml now JavaFX itself was designed with the MVC
which is multiple-view-controller patent in mind and what that is is in a nutshell is
that it's the patent that keeps the code that handles and applications data
separate from the UI or user interface code because of this when we are using the
MVC patent we wouldn't mix the code that deals with the UI and the
code that manipulates the application data in the same class so the controller is the
sort of middle man between the UI and the data so it sort of hands off the
requests to each and sort of manages that process now when you're working
with JavaFX the model corresponds to the applications data model the view is the
fxml and the controller is the code that determines what happens when a user
interacts with the UI now essentially the controller handles events and will
cover those in a later lesson and I guess what I've done their is I've over
simplified the MVC patent but it's enough for you right now to understand why
IntelliJ generates a controller Java file and a fxml file when we create a JavaFX
project now just to be clear JavaFX doesn't enforce the MVC patent but it's
absolutely a good idea and I really recommend that you do follow that now
for the simple hello world application there obviously isn't any data and also the
code generated by IntelliJ doesn't create any Java UI controls by default so
apart from the usual window controls you know minimize maximize and close
their is really nothing to interact with
and as a results if we open the controller code you can see quite literally that it's
actually empty at this stage so and that's because again we haven't actually
added any controls so we go back and open the main class and have a look at that and you can see
that there is some code their and obviously it should look pretty family because the
basic concept is very similar to what we've dealt with before we've got imports
and you notice there's a heap of imports on lines 3 to 7 and are added automatically
we've got a public class main extends application and we've also got a public
static void main down here and you can see that's little bit different we haven't seen
that before because that is actually launching something and we've got this start method
as you can see there and the start method has really got all the mechanisms
to kick-start our JavaFX application so to start with looking at line 9 you can
see that the class extends the the JavaFX .Application class
now JavaFX applications have to have a class that extends the application class and
this class will be the entry point for the application similar to the
classes we've created before the main classes in other projects it need to
have a main class and needed to have a main method in this case a JavaFX
application also needs to extend the application classes as were doing on line
9 now the application class manages the life cycle of a JavaFX application
the methods in the application class that we care about most are the init
method the start method and the stop method and at the moment you can see
we've got a start method in their when we run the application application.launch will
be called from the main method you can see that on line 21 that we were invoking
launch passing on the arguments that are passed to the main method that method
launches the JavaFX application and doesn't return until the application has exited
so in other words until we closed our UI so lets look at the start method in more detail that
starting on line 12 that was generated automatically by IntelliJ now the
method takes a stage parameter
now what a stage is a top level JavaFX container that extends the window class
so think of it essentially as a main window now the JavaFX runtime constructs
the initial stage and passes it into
to the start method itself so its passing that as a parameter you not having to do
that that's happening automatically with JavaFX you can see that again on line 12
so in the current version of JavaFX dialog are presented within the stage but we
don't explicitly create the stage now we used to dialog class which wraps the
dialogue in a stage for us and the JavaFX developers have said that in a
future version of JavaFX they might provide a light weight container for
dialogues rather than using a stage and you'll understand more about dialogues as we continue
moving forward but note that the dialog class was introduced in JavaFX or Java
version 8u40 so before then creating dialogues was a real pain so with the
later versions of Java the JDK it's a lot easier now because of what they've
introduced so we will use that dialog class at some point in the future but if you
have any issues
compiling these classes that reference dialog make sure that you've got a JDK
that is later than 8u40 and you saw that earlier I showed you when I was running
version 73 if in doubt go and download the latest JDK and make sure your using that
and you can either select that when you have chosen your project that's probably the
easiest thing to do but if you want to change it and you didn't get a chance to
change it lets say you've already created the project and you want to figure out how do I change my JDK you
can do that easy enough you can right-click the project and then come
down and select open module settings and you come down here into SDK and you
make sure you've got the right version selected you can see I've got 2 versions now the second one I created was
version 73 and I've also got the 1.8 which was the incorrect version so you would select
the new version after creating it so what you can also do here is you can also
click on the + button and that's how you go about setting up a new version of the
JDK for an application that you've already created but in this case I'm gonna leave it selected on
version 1.8
.0_73 click on ok because it is valid and I will give you a reminder when we used to dialog
class in later lectures about this but if you are having problems
make sure you're using the latest or fairly recent JDK version 8 so the
next line of code on line 13 is loading the UI from the fxml
file so what we'll do is we'll take a look at the fxml file now so I'm going to open that first and then
talk about it so think of fxml as a flavor xml which it is you could probably noticed some of
these that its got an XML look and feel now if you're part of my android course then
you'll be familiar with some of the XML but we haven't really touched
on XML much in this course to date but it's really just a mechanism a way
to described data so if your familiar with Android UI programming then fxml will probably
be old hat to you so in this application what we have is a grid pane and that's one of
the JavaFX layouts and you can see that on line 6 of the sample fxml
the fx:controller attribute tells the run time which classes the controller for this
window now the grid pane doesn't have any child elements and so when we run
the application the window is going to be empty will run it in a minute just to confirm and
for some reason the generated fxml contains a few
unnecessary imports
and we know they are unnecessary ones on line 1 4 and 5 because they are in gray but right now we only need
the grid pane because that is all we actually got in this file and you can see that on line 2
that the import is in green which tells us that it actually is in use so but later
on we are gonna actually add a label to this is well and as we progress through
you'll see that how this takes affect and how this gets change for us automatically so let's
now go back to start method again in main so again looking at line 13 when we
load the fxml file which we doing at line 13 all the UI objects defined in the
file are constructed to that point in time so we'll come back to the parent
root component on line 13 in a moment but on line 14 we set the title of the stage
and actually what I'll do before I go any further let us run this to see
what it actually does just to confirm that we've actually got something that
works we will run this and there's our little application and that's what this by
default is actually doing a simple GUI is just drawing this window there's the
title which we can see we are setting on line 14 and we've got three buttons I've
talking about earlier which are their by default minimize closed maximize and click on Close to close
the application down and notice by doing that
it then exited the app so getting back to line 14 when we set the title on the stage as
you can see there and since the window class is the parent of the stage class
and as we learned previously the stages is the top-level JavaFX container what this
essentially means is the window title will be set to hello world so
what we do is this .setTitle using primary stage that is setting the title and you saw
that when I just ran the app in the short time ago next we are gonna look at line 15 and you can see
it's got their primaryStage.setScene and we're doing just that we are setting
the stage as Scene now if you haven't already guessed the JavaFX developers were
going for a theater metaphor here so every stage requires a scene and backing every
scene is a scene graph and that's a tree in which each node corresponding to a UI
control or an area of the scene in this case for example a rectangle so let's take
a look at this code in more detail so again looking at line 15 when we load the
fxml we assign it to a variable of type parent with a name route now the parent class
descends directly from the node class and which is based class for the scene
graph nodes and that is taken exactly from the java doc itself so nodes that descend from
parent can have children in the scene graph now for the hello world application
the top level and in fact the only node is the grid pane which we saw in the
fxml file so the grid pane node will be the root of the scene graph and
as a result that's what was returned from the fxml loader.load method
which were used on line 13 now when we construct a scene we have to pass in the
root of that scene graph back the scene and will do that here on
line 15 we're talking about so we also set the width and the height of the scene
which in turn then becomes the width and height of the main window now you might be
asking why do we have to have a scene and a stage so to understand that lets go
back to the theater metaphor so just imagine that you are watching a play so the
curtain rises and we watched the first scene then the curtain falls stagehands
run around and change the furniture and backdrop and then the
curtain rises again so we might you know we may see a different looking set
and different actors but it's still essentially the same stage so if you go
back to JavaFX remember that a stage corresponds to a top-level UI container
like a window and a scene is backed by a scene graph and that essentially
contains the UI nodes so if you want to change what was shown in a stage the window
effectively is what a stage is then all we have to do is change the scene which is
the UI for that to happen so we don't have to construct a new stage object now in
practice you would load a different fxml file into a new scene and then just
call Stage.setScene like we did on line 15 now for
example if we had a wizard that we want to use it to step through using Next and
Previous buttons we could use the same window the stage in other words and just
change the scene each time they clicked next or previous or when we want to
change parts of the UI in response to user action and we don't have we don't
actually have to remove UI components or even make them invisible and add new
ones so we can just switch the scene in that scenario and that's what is particularly
a cool feature of JavaFX and that was to do that and sometimes it makes more
sense to just hide a few controls or something like that but other times
switching the entire scene is a better option it really depends on what we're
trying to do and what you trying to achieve essentially though scene make it easy to
reuse a container so just getting back to finish off this overview before we
start making changes let's have a look now at line sixteen and at this point
when it gets to this code
we have instantiated all the UI objects associated with our scene we've set the
stage so at this point we're ready to show the UI and by calling the .show method that
actually does that that's the code that launches the application well that's
the first video in the section I'm gonna stop this video here now in the next
video will continue on and will start looking at changing the code a little
bit and furthering our knowledge on JavaFX so see you in the next video