JavaFX Java GUI Tutorial - 31 - Introduction to FXML Video Lecture | JavaFX Java GUI: Learn to build Powerful Applications - Front-End Programming

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