JavaFX Java GUI Tutorial - 35 - Working with Scene Builder

Facebook - https://www.facebook.com/TheNewBoston-464114846956315/
GitHub - https://github.com/buckyroberts
Google+ - https://plus.google.com/+BuckyRoberts
LinkedIn - https://www.linkedin.com/in/buckyroberts
reddit - https://www.reddit.com/r/thenewboston/
Support - https://www.patreon.com/thenewboston
thenewboston - https://thenewboston.com/
Twitter - https://twitter.com/bucky_roberts

---

Closed Caption:

already hostas welcome back in in this
video I'm going to show you an example
of how you can use seen builder to build
an actual cool-looking interface and
before we do
i'm here 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 here is like must
been like 70-something in the add 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 you can
take selfies
she thought he was carrying a 70 year
old man
God funny funny stuff they're all right
so where was I we're going to be using
seen 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
the
and drugs you guys you see it go two
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 in
all the default locations and you didn't
do anything weird whenever arm you're
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 in seen
builder
so there you go there's a little you
know cool integration that you can do
and let me adjust this get everything
nice and pretty and all right so let's
say that we're making a program on like
for 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 sense we actually right
click that inject brains and 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 X amount is unlikely 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 grip
pain the pain
delete that dragged out of border pain
look in noyce 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 want to do is use a
V box and I can either drag it right
here and i can say okay
top Center try to get it exactly where I
want it or you can actually just drag it
right in here in
I'm not I usually prefer dragging 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 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 vbox so now we have a menu bar
and by default it gives you explain 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 on 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
login so I'm going to have a place
further 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 added 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 treeview so the user can
navigate so I'm going to take tree view
and I'm going to stick it in the left
alright so now this area on the left
hand side is going to be a treeview 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 wire
frame
so if you actually go to view you can
choose show sample data and this is
going to 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 just have a
text area for now so text area dragged
out in the center
all right now the user can like type
text in there and for the bottom
I'm she going to have h box as well so
you know at like calm like in the bottom
of most software you have no like these
little icons and just like a little
status bar what's going on with your
program i'm going to drag each 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 later I mean I have all of my
items exactly in the right section is
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 by 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 vbox 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
um 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 are all right now it's
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 tool
bar section right here in in the layout
let's say that we want to give a margin
of like eight for everything so 8888
alright 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 each box you can actually just
change the spacing of it and let's say
let's see how 10 looks and actually want
to do the same for this bottom area
sense you know usually these bottom
status bars are really thin so i'm going
to select this H box modify use computed
sizes
and let me give you a little bit of
padding so i'll give it like two pixels
all around and someone has text me in
the middle of my baby alright so that
looks pretty good right there and by the
way if you ever just want to preview
this real quick an 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
all right this is stretching out exactly
how I wanted 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 will 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 change the settings to appear on the
right
so anytime you want to do that you can
actually just type of region right like
this in drag a blank region in between
very 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
Harry now so we're going to go over to H
go which means horizontal girl and we're
going to 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 to preview window our buns
are now floating to the right or they
look like they are but we really know
that there is a visible region right
here and whenever i resize my window
pretty cool factor alright so our
interface is looking are a actually one
other thing i want to do
quick before i show you guys how to hook
up all the controllers and everything is
in these text fields
i'm going to just add some prompt XO be
like on user name and for this one I'm
just going to change it to password just
so the user knows that they can actually
type your stuff and login if they want
to so I type something like the new
boston in my password is a like ham
bacon to know whatever
and of course we want to change it to
password field so it is a plain text but
good enough
so now you're like are a cool my
controls are looking sweet and i
actually hook this up to code
let me buy these in 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 .
controller so now whenever we run this
is 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 arm
what can we do we just say that whenever
we click this login by and we're just
going to print something out in terminal
this is just to show you guys how you
can cut connect elements to your
controller but I you guys would
obviously want to do something useful so
say login by and collect
and we'll just say system out print line
user log in
alright so now we have a method in our
controller called login button clicked
so if we hop back over to seem builder
you can actually click this log in
binary 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 we typically want to do
is you want to give these buttons ID so
you can reference them an hour 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 have file and save this and
actually one other thing i want to do is
this is the default size for win over
here i'm going to change this because
you're going to buy 275 for that program
is really small it's gonna look goofy so
i'm going to change the default window
size - 800 x 500 but of course whenever
you run this we can resize it if we want
to
so resize it in 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're designing it
whenever you want
run our actual program were actually
going to want to populate this would
like the different pages to whatever
piece of software making but Allah type
in your password click login 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 FX FX ml and take note
that since I say 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
hot back to seem 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 them to form
i'm also going to be taking all of this
code and sticking out on my github page
so if you just want to copy it paste it
in and play around with it feel free and
no yeah you guys later