JavaFX Java GUI Tutorial - 35 - Working with Scene Builder Video Lecture | JavaFX Java GUI: Learn to build Powerful Applications - Front-End Programming

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