Preview
Video Player
00:00
00:00
Styling
6:57CSS is the way to avoid repeating yourself in design. Let's learn how to apply it.
You may have heard of Cascading
Style Sheets, or CSS, before, and
0:00
most likely in regards to web development.
0:05
Well, a little known fact is that CSS can
be used in just about any markup language.
0:07
Now it's super power is the ability to
separate presentation, the way something
0:12
looks, from the structure of your markup,
what something means.
0:17
We saw hints of a common design
problem starting to rear its head.
0:21
We were about to start
repeating ourselves.
0:25
And on top of that bad practice,
0:27
we were also about to start locking
ourselves into design decisions.
0:29
That was only one screen, too.
0:33
Imagine if our app had 30 plus screens.
0:35
Now CSS provides a great way to
define styles for groups of elements.
0:38
In many cases,
we can make a single change and
0:42
give the entire app a new look, or skin.
0:45
I'm gonna show you some
styling concepts first, and
0:48
then we'll flip into even
better practices after that.
0:51
Let's set up some default styling for
our awesome app.
0:55
All right.
Again,
0:58
I want to show you some bad form first,
just to hammer home some concepts.
1:00
It's like training wheels to kind of get
the feeling of the balance on a bike,
1:05
before you go out and pop a wheelie.
1:09
So it's possible to add
inline styles on elements.
1:11
Now the best idea, of course is to use an
external style sheet in a separate file.
1:15
But for now,
let's use this in line method.
1:19
So every node has a style attribute, and
1:23
in the value, you can actually
set any valid CSS expression.
1:25
So let's make a new style attribute,
so I'll say style.
1:31
In CSS, that looks like property and
then colon and then value.
1:36
So JavaFX adds a prefix of -fx-
before setting a property.
1:39
Now property names on elements are
CamelCased, and here, they're dasherized.
1:46
So remember how we set the font
before using set Font?
1:51
So we would do font-family.
1:55
Family was the parameter that was passed
in there, it's describing the type here.
2:01
So Papyrus.
2:06
So now let's run that.
2:10
And see how everything is in that font?
2:12
Everything looks like that
Avatar font Cool, right?
2:14
Now that's because children
inherit the parent's style.
2:17
Just like we see in
the object oriented world.
2:22
And just like in that world,
2:25
you can override specific
values on specific elements.
2:26
So let's override the default font
size on the title and make it larger.
2:31
Also know that you can separate different
CSS statements with a semicolon, so
2:36
let's make this,
let's make the font size larger here.
2:40
So we'll say style.
2:43
Fx-font-size, let's make that 80 pixels.
2:48
And then we are going to go ahead and
do a semicolon,
2:55
cause we want to put two in here,
and we'll do -fx.
2:59
And then to set the background
color you fill it with a color, so
3:02
we want to fill it and
there's a word called Aqua.
3:06
I'll show you how you can
find that sort of stuff, and
3:08
what you can do to things here.
3:12
It's in the reference.
3:15
And let's take a look at
that really quick actually.
3:17
Let's flip over there.
3:18
It's in the teacher's notes.
3:20
So this is the reference and
3:22
it is a little bit strange that it's a CSS
reference and it's not styled very well.
3:24
We'll let it slide.
3:31
One of the most important concepts
I think to grasp here is that
3:31
the FXML naming structure is just
like the Java structure, but
3:38
instead of being camel cased,
it's dasherized, okay, and
3:43
it all starts with the -fx style.
3:47
There's some great stuff to read here.
3:50
What I want you to know too, is that CSS
3:52
normally of course doesn't have have
this -fx-, but you can live within it.
3:56
You can have other CSS
living inside this file.
4:00
So you might share a CSS file
between a web application,
4:02
as well as your Java FX application.
4:07
And any thing with -fx- will be fx,
your app, specific.
4:09
So if we scroll through here,
you'll see some naming conventions, and
4:14
it will show you what
the defaults are here.
4:19
So let's go ahead and
let's take a look and
4:21
see what can happen up
here on a grid pane.
4:24
So this is what's really nice
is you can come in here and
4:28
you can see what can
you do to a grid pane.
4:30
So you can set the h gap
if you do -fx-gap and
4:33
you'll see here that it defaults to zero.
4:38
If you click here, this is the type
that is expected from the XML and
4:40
it will explain to you how they work.
4:44
So this is a number and you can do .px
which you saw that's what I did for
4:46
pixels.
4:49
And you can do these
different things here.
4:50
It will explain through
different bits here.
4:52
Here you can set the grid lines visible.
4:55
Remember how we did that?
4:57
And you can do boolean, and
boolean's either a true or a false.
4:58
Also, you can see here that it
inherits properties from right,
5:01
because this is mimicking basically
Java classes, ciz it kind of has to.
5:04
So it's going to call these sets, just
like we're doing, the attributes there.
5:09
So if we click this pane, we come here and
it says the pane expose's region,
5:12
there's nothing here so you click region,
and then here there's a whole bunch of
5:16
stuff that you can do to all
the different types of panes.
5:19
And this is a nice way to look
through things to find out what it is
5:22
that you could do.
5:25
I wanted to let you
know that this is here,
5:26
there's a lot of exploration that you
can do to make things look different.
5:28
So let's scroll back a bit
to where that grid pane was.
5:33
And it looks like we could set
the alignment and the h gap and the v gap,
5:37
all those that we were setting,
we were setting those in those attributes.
5:40
So let's go ahead and let's flip back and
let's put those all in the style.
5:43
So we'll say -fxalignment is center and
5:46
then -fx-hgap : 10 and
5:55
-fx-vgap: 10.
6:01
And then we can get rid of
all of these attributes.
6:06
So that's kind of powerful.
6:09
One thing that we can do is we
can copy and paste this style
6:10
through every one of the grid panes
we created, but that's not great.
6:15
We don't want to have to do that.
6:20
It sure would be nice if we
could default every grid pane
6:22
ever created on our app, wouldn't it?
6:25
Well we can.
6:28
Let's take a look at putting these
definitions into an external resource.
6:29
CSS is a very powerful tool
to have at your disposal.
6:34
We're just going to
scratch the surface of it.
6:36
But like always,
6:38
there is a ton of content on Treehouse
that will help expand your CSS skills.
6:39
Now, I've linked to some of my
faves in the Teacher's Notes.
6:44
All right, so
6:47
I promised you that I'd show off the best
practice of file-based CSS rules.
6:48
But before we do that,
6:52
let's learn about resources,
right after this quick exercise.
6:54