in this video we'll start by taking a
whirlwind tour of a few javafx features in this video we'll start by taking a
that we haven't touched on yet in that whirlwind tour of a few javafx features
section of the course we're going to that we haven't touched on yet in that
learn how to do a couple of things that section of the course we're going to
most client applications will learn how to do a couple of things that
typically want to do we're gonna start most client applications will
with styling controls using CSS now typically want to do we're gonna start
we've already done this in a previous with styling controls using CSS now
lecture we added a border to control so we've already done this in a previous
that we can see it better within a lecture we added a border to control so
layout but we didn't really discuss it that we can see it better within a
or explain the power of using CSS to layout but we didn't really discuss it
style controls let's start by creating a or explain the power of using CSS to
new project so i'm going to click on the style controls let's start by creating a
create new project we're going to new project so i'm going to click on the
select javafx click on next create new project we're going to
i'm going to call this one javafx select javafx click on next
application and click on finish i'm going to call this one javafx
give us a bit more room here application and click on finish
alright so going to start by give us a bit more room here
changing our fxml file and what alright so going to start by
we're going to do here is we're going to changing our fxml file and what
add some buttons.... we're going to do here is we're going to
... add some buttons....
... ...
no surprises there it's actually working ...
well alright so let's now change the no surprises there it's actually working
background color of button 1 to green and well alright so let's now change the
the text color to white now we could set background color of button 1 to green and
the text color by setting the buttons the text color to white now we could set
text field property since button if you the text color by setting the buttons
recall descends from the labeled class text field property since button if you
let's actually try doing this with recall descends from the labeled class
or using CSS and for the background color let's actually try doing this with
already seen that we have to use CSS to or using CSS and for the background color
change that we've done that previously already seen that we have to use CSS to
let's go back to our fxml file for button change that we've done that previously
one and will add.... let's go back to our fxml file for button
... one and will add....
... ...
...so if we run this ...
application we should see the background ...so if we run this
green text on white so that's working application we should see the background
nicely so be nice if we can actually green text on white so that's working
just quickly do that so all the buttons nicely so be nice if we can actually
in the application try to look the just quickly do that so all the buttons
same in the application try to look the
let's try changing button 2 so we same
could do something similar button 2 we let's try changing button 2 so we
can literally just copy the same code could do something similar button 2 we
just replace that line... can literally just copy the same code
.... just replace that line...
obviously we can do that change the ....
second one run it again obviously we can do that change the
no surprises there we should see the second one run it again
second button has now got the same color no surprises there we should see the
scheme or the same style so it would be second button has now got the same color
nice if we could do this to all the scheme or the same style so it would be
buttons in our application so they look nice if we could do this to all the
the same buttons in our application so they look
now obviously we can just set the style the same
for the remaining three buttons you can now obviously we can just set the style
just come back and do the equivalent for the remaining three buttons you can
thing here in the sample dot fxml file just come back and do the equivalent
to make the buttons three four and five thing here in the sample dot fxml file
look the same but think about scenario to make the buttons three four and five
where your applications perhaps got look the same but think about scenario
hundreds of buttons and whatever have where your applications perhaps got
lots of Windows and dialogues each defined hundreds of buttons and whatever have
in their own fxml file imagine lots of Windows and dialogues each defined
having to go through three literally in their own fxml file imagine
every fxml file to find every button having to go through three literally
and then adding the style properly to it every fxml file to find every button
and worse imagine that we didn't do it and then adding the style properly to it
we actually spent consider and worse imagine that we didn't do it
amount of time we change the buttons so we actually spent consider
they will have a green background and amount of time we change the buttons so
white text but then our manager or a client they will have a green background and
change their mind and decided that no white text but then our manager or a client
we don't want green we want change their mind and decided that no
our buttons in fact to we don't want green we want
have a blue background our buttons in fact to
you then have to go back and change the have a blue background
fxml for every button all you then have to go back and change the
over again so that would be a bit of a fxml for every button all
nightmare but fortunately there's a way over again so that would be a bit of a
to style all the buttons in our nightmare but fortunately there's a way
application without having to add the to style all the buttons in our
style property to every single application without having to add the
button we can actually put our styles style property to every single
into a separate file just as we can with button we can actually put our styles
the CSS for a webpage so let's actually into a separate file just as we can with
add a CSS file now what we need to do is the CSS for a webpage so let's actually
just to open up our project pane need to add a CSS file now what we need to do is
make sure that this is expanded we're in just to open up our project pane need to
sample we want to actually put it in the make sure that this is expanded we're in
sample package so click on sample click sample we want to actually put it in the
on file new the new file i'm going to sample package so click on sample click
call this file that we're creating on file new the new file i'm going to
styles.css just call this file that we're creating
close the bottom window so you see up styles.css just
here just with a little icon that close the bottom window so you see up
intellij does recognize that this is a here just with a little icon that
CSS file based on the file extension so intellij does recognize that this is a
okay we want all our buttons in our CSS file based on the file extension so
application to have a green background okay we want all our buttons in our
and white text now in CSS we can use a application to have a green background
selector to specify what we want to and white text now in CSS we can use a
style when we wanted to find a style for selector to specify what we want to
all the buttons on our application we style when we wanted to find a style for
use the dot button selector because we all the buttons on our application we
want to style all instances of the use the dot button selector because we
button class so going to assign the want to style all instances of the
properties within a set of curly braces button class so going to assign the
and separate the property and value with properties within a set of curly braces
a colon just as we did in the fxml and separate the property and value with
so let's go ahead and do a colon just as we did in the fxml
that bearing in mind that each properly so let's go ahead and do
assignment in CSS ends with a semicolon that bearing in mind that each properly
so we'll start with... assignment in CSS ends with a semicolon
.... so we'll start with...
... ....
... ...
.... ...
....
... ...
alright so now we've created the styles ...
. CSS file we need to associate that alright so now we've created the styles
file with our application . CSS file we need to associate that
so we do that in the fxml file will come file with our application
back here to our sample .fxml so we do that in the fxml file will come
and clear up some of these imports back here to our sample .fxml
that we added automatically but aren't and clear up some of these imports
being used at the moment that we added automatically but aren't
alright so we do it in the fxml files being used at the moment
as I mentioned using the stylesheet properly alright so we do it in the fxml files
and actually put that up here in our grid as I mentioned using the stylesheet properly
pane so we're going to come down here and actually put that up here in our grid
... pane so we're going to come down here
.... ...
....
... ...
alright so let's now run the app and ...
just make sure that it works now and you alright so let's now run the app and
can see all five buttons have been just make sure that it works now and you
styled based on the how we defined can see all five buttons have been
that in the styles . CSS file so styled based on the how we defined
hopefully getting an idea and seeing how that in the styles . CSS file so
CSS makes it much easier to change the hopefully getting an idea and seeing how
entire appearance of an application CSS makes it much easier to change the
rather than having to manually sort of entire appearance of an application
go through and do each element which rather than having to manually sort of
would be a rather painful exercise and go through and do each element which
turns out in fact that our applications would be a rather painful exercise and
been using CSS behind-the-scenes all turns out in fact that our applications
along and that's because javafx uses a been using CSS behind-the-scenes all
default style sheet to style javafx along and that's because javafx uses a
applications now obviously this is not a default style sheet to style javafx
CSS course I can't go into a lot of applications now obviously this is not a
detail with CSS but you are familiar CSS course I can't go into a lot of
with web development or software like detail with CSS but you are familiar
wordpress you probably know that you with web development or software like
can change the appearance of a website wordpress you probably know that you
by changing its theme sometimes called a can change the appearance of a website
template so a theme is simply a set of CSS by changing its theme sometimes called a
definitions javafx uses themes and the template so a theme is simply a set of CSS
default theme is the medina theme in a definitions javafx uses themes and the
minute we going to see how to change to default theme is the medina theme in a
another theme provided by javafx minute we going to see how to change to
but first looking at to our was sample another theme provided by javafx
.fxml let's consider what we'd but first looking at to our was sample
do if we want button 3 in our .fxml let's consider what we'd
application to have a blue background do if we want button 3 in our
now it's obviously can come down here application to have a blue background
and actually try to make a change to now it's obviously can come down here
that style and actually try to make a change to
and we can put... that style
.... and we can put...
...if you run ....
that we can see that works the buttons ...if you run
button three now got a blue background that we can see that works the buttons
and white text and that's because when button three now got a blue background
the CSS is included in the fxml and white text and that's because when
within a control element or in line in the CSS is included in the fxml
other words it takes precedence over the within a control element or in line in
CSS in the style sheet so in other words other words it takes precedence over the
it overrides the definition in the style CSS in the style sheet so in other words
sheet in a similar way to how the it overrides the definition in the style
overriding a method works in Java as sheet in a similar way to how the
we talk about in the course but with that said overriding a method works in Java as
defining CSS in line generally isn't we talk about in the course but with that said
recommended if we decided to change the defining CSS in line generally isn't
background color of button 3 to yellow recommended if we decided to change the
we then have to change in the fxml file background color of button 3 to yellow
again this would be trivial for small we then have to change in the fxml file
application like this one but in a again this would be trivial for small
larger application we might not actually application like this one but in a
know that the style and the style sheet larger application we might not actually
has been overridden in the fxml file and know that the style and the style sheet
we might try to set the color for button 3 has been overridden in the fxml file and
in the style sheet which will see how to we might try to set the color for button 3
do in a minute and wonder why it's not in the style sheet which will see how to
working and also it could be that do in a minute and wonder why it's not
another developer is not familiar with working and also it could be that
the code that has to make the change and another developer is not familiar with
that they would actually look at the the code that has to make the change and
style sheet first that they would actually look at the
so generally again in lining these style sheet first
styles isn't recommended so go back so generally again in lining these
to our sample fxml file instead of styles isn't recommended so go back
styling button 3 in line we can to our sample fxml file instead of
actually do it in the stylesheet now styling button 3 in line we can
this time we won't use a cart class actually do it in the stylesheet now
selector because we don't want every this time we won't use a cart class
button instance in our application to selector because we don't want every
have a blue background instead we can button instance in our application to
use an ID selector so first thing we have a blue background instead we can
need to do is assign an ID to the button use an ID selector so first thing we
this case button three let's go back to need to do is assign an ID to the button
do that so here we're going to put... this case button three let's go back to
... do that so here we're going to put...
... ...
...and just a ...
note here not we're not assigning the ...and just a
fx colon ID which we do when we note here not we're not assigning the
want to reference a control in our fx colon ID which we do when we
control in our controller this is an want to reference a control in our
id which is a different which is control in our controller this is an
different to that completely id which is a different which is
alright and you notice that I also different to that completely
remove the in-line style definition alright and you notice that I also
so next we go back to our styles remove the in-line style definition
. CSS file I'm going to make a change so next we go back to our styles
here instead of it being . . CSS file I'm going to make a change
button I will delete that will make that here instead of it being .
... button I will delete that will make that
everything else actually remains the same other ...
than the fact here going to change everything else actually remains the same other
from green to blue now when referring to than the fact here going to change
an id we're using a hash character in case your from green to blue now when referring to
wondering why i have used to hash their an id we're using a hash character in case your
so that relates to the the id that we wondering why i have used to hash their
specified here so the style sheet would so that relates to the the id that we
know which basically which control this specified here so the style sheet would
case to override alright so let's know which basically which control this
actually try running that and we can see case to override alright so let's
now that the button 3 has got a actually try running that and we can see
blue background and better that is still now that the button 3 has got a
an all-out styling is in a style sheet blue background and better that is still
and that's going to make changing the an all-out styling is in a style sheet
style is much easier in the future and that's going to make changing the
because we go straight to the styles style is much easier in the future
. CSS file for making our changes because we go straight to the styles
alright so that's the basics of styling . CSS file for making our changes
our application using CSS now we can also alright so that's the basics of styling
style controls within the java code by our application using CSS now we can also
calling the appropriate methods using style controls within the java code by
the instances we want to style but i'll calling the appropriate methods using
leave that as an exercise for you the instances we want to style but i'll
because generally speaking you probably leave that as an exercise for you
don't want to do that very often because generally speaking you probably
now to find out what selectors to use don't want to do that very often
when styling java fx controls check now to find out what selectors to use
the javafx ccs says documentation and when styling java fx controls check
i'm just going to copy link and i'm the javafx ccs says documentation and
going to just open it up so you can take i'm just going to copy link and i'm
a look at that at your leisure going to just open it up so you can take
so there's the page a look at that at your leisure
there's a lot of information you can so there's the page
find out about CSS how it relates to there's a lot of information you can
javafx controls on this page so i find out about CSS how it relates to
suggest you check it out and looking javafx controls on this page so i
through here to spend a bit of time suggest you check it out and looking
through there you'll actually find out through here to spend a bit of time
that you can also style layouts and other through there you'll actually find out
javafx elements but there's actually that you can also style layouts and other
advanced features which you won't be javafx elements but there's actually
going into this section now before we advanced features which you won't be
leave see css though let's go back going into this section now before we
to our code and change the appearance by leave see css though let's go back
changing the theme and what I'll do you saw all to our code and change the appearance by
those programs are running their so changing the theme and what I'll do you saw all
stop some of those probably should close those programs are running their so
this down before stop some of those probably should close
ok so how do we do this how do we change the this down before
appearance of our application by changing ok so how do we do this how do we change the
the entire theme now I mentioned theirs appearance of our application by changing
a medina is the default theme use the entire theme now I mentioned theirs
by javafx but we can also use the a medina is the default theme use
Caspian theme that's provided also by by javafx but we can also use the
javafx and to do that we actually go Caspian theme that's provided also by
back to our main start up here and what javafx and to do that we actually go
we need to do is use the set user agent back to our main start up here and what
stylesheet method to actually we need to do is use the set user agent
activate this particular style sheet we stylesheet method to actually
want to do that right under this parent activate this particular style sheet we
root so we would type... want to do that right under this parent
... root so we would type...
... ...
alright so let's actually run this but ...
bearing in mind that the changes when alright so let's actually run this but
we run it is going to be very subtle because the bearing in mind that the changes when
interface is actually so simple at this stage we run it is going to be very subtle because the
so you can see there that i'm not sure interface is actually so simple at this stage
you've noticed but size it up so you can see there that i'm not sure
a little bit but the button corners you've noticed but size it up
are more rounded when we use the Caspian a little bit but the button corners
theme then when we used the medina theme are more rounded when we use the Caspian
so let's just try adding a radio button theme then when we used the medina theme
to our layout in the second row so we can so let's just try adding a radio button
maybe get a better idea what this is to our layout in the second row so we can
going to look like going back to our maybe get a better idea what this is
samples and we'll add the radio button going to look like going back to our
on the next line the next row so text samples and we'll add the radio button
here on the next line the next row so text
... here
... ...
...so let's have a look and ...
see what that looks like ...so let's have a look and
alright so that shows you again what see what that looks like
this caspian theme or style alright so that shows you again what
sheet looks like what we do this caspian theme or style
we'll run this again but i'll actually sheet looks like what we do
leave that running so we can actually we'll run this again but i'll actually
compare the two themes and come back leave that running so we can actually
here and actually comment out the setting compare the two themes and come back
so we can see what they both look like so we here and actually comment out the setting
run that again so we can see what they both look like so we
ok now we've got the two side by side so run that again
you can see that there is a difference ok now we've got the two side by side so
that in also in the background color you can see that there is a difference
which may be different if you're running that in also in the background color
on windows or linux compared to me which may be different if you're running
running on the mac but definitely you on windows or linux compared to me
can see the buttons certainly on this running on the mac but definitely you
side here over here with the Caspian style sheet can see the buttons certainly on this
they're much more rounded so side here over here with the Caspian style sheet
close it down we go back to the code they're much more rounded so
again you might be asking why we setting close it down we go back to the code
the style sheet through code rather than again you might be asking why we setting
associating it with our the style sheet through code rather than
application in the fxml file associating it with our
well in this particular case we're application in the fxml file
setting the theme for the entire well in this particular case we're
application so the theme stylesheet will setting the theme for the entire
apply to every window and dialogue in application so the theme stylesheet will
control without having to specifically apply to every window and dialogue in
add it to every fxml file so we can control without having to specifically
override the themes style definitions by add it to every fxml file so we can
adding stylesheets to fxml file or override the themes style definitions by
using inline CSS so here's the order of adding stylesheets to fxml file or
precedence so inline CSS takes using inline CSS so here's the order of
precedence over the fxml style sheet precedence so inline CSS takes
which in turn takes precedence over the precedence over the fxml style sheet
applications theme style sheet in fact which in turn takes precedence over the
when we've been changing our control applications theme style sheet in fact
looks by using CSS by assigning a when we've been changing our control
property in the fXML what we've actually looks by using CSS by assigning a
been doing is overriding the default property in the fXML what we've actually
setting defined by the theme we're using been doing is overriding the default
for the application so note that when we setting defined by the theme we're using
set a CSS property by calling for the application so note that when we
methods in our java code the value we set a CSS property by calling
set will override any existing value methods in our java code the value we
for that properly set will override any existing value
now if you search the web you find for that properly
themes that can be used in javafx now if you search the web you find
applications the set user agent style sheet themes that can be used in javafx
method that we call on line applications the set user agent style sheet
fourteen accept a URL parameter so all method that we call on line
we have to do is provide the URL of the fourteen accept a URL parameter so all
stylesheet that contains all the style we have to do is provide the URL of the
definitions for the theme of course you stylesheet that contains all the style
can also start writing your own themes definitions for the theme of course you
and using them within your can also start writing your own themes
applications as well and using them within your
alright so that's it with our whirldwind applications as well
tour of CSS in the next video we're going to alright so that's it with our whirldwind
start taking a look at transforming tour of CSS in the next video we're going to
nodes and see you in the next video start taking a look at transforming