Narrator: Hey, in this video, we're gonna apply
Cascading Style Sheets to a JSF data table,
and we'll actually have fun with this one.
So hang in, we'll have a fun time with this section.
In the previous video, we learned how to use a JSF table
to display our data, using rows and columns,
and it worked out fine.
However, the only problem is that the table was plain.
In fact, it was kind of ugly, (laughs).
There was no real style to it, no real pizzazz or color
to it, just a very plain table.
What we're gonna do in this section is
that we're gonna add some style to our table.
We're gonna make it pretty.
We're gonna dress it up, so going from a plain ugly table
to a nice pretty beautiful table
that's full of style and full of flair.
So let me unveil our new table.
We're gonna add some color to it,
have a nice header for blue,
we're gonna change up the rows a bit.
We'll also make use of alternating colors on the rows,
and so on, so we're gonna add some style to this table,
add some flair, and again, with Cascading Style Sheets,
you can make the table as pretty as you want.
It's really up to you as far as all the various styles
that you wanna apply to it.
So here's our to do list.
The first thing we need to do is create
a Cascading Style Sheet, and then once we have
the style sheet, then we need to apply it
to our JSF data table.
So that's our step-by-step process.
Let's go ahead and dive in.
So the first step is creating the Cascading Style Sheet.
So we're gonna create our Cascading Style Sheet
in a separate file.
I'll call this file student_table_demo.css.
What I'm gonna do is define four different styles,
so I'll define a style for the main demo table,
then I'll define a style for our table header,
I'll create a style for our odd row,
and a style for our even row.
So this is all CSS information.
Now, I assume that you have some background on CSS.
If not, feel free to find some free tutorials on Youtube,
but we're simply gonna take an existing CSS file,
and then we'll apply that Cascading Style Sheet file
to our JSF data table.
Alright, now where do we place the CSS file?
Well, you must place it in a special directory.
So it has to be under WebContent/resources,
and then from there you can place it in a folder called CSS,
and then place your actual file in that folder.
Once you have it in the folder,
then you need to load the CSS file.
So here we have h:outputStylesheet
library="css",
that's the actual folder name,
and then name="student_table_demo.css".
That's the actual CSS file.
Now that we have the CSS file loaded,
we need to apply the CSS file to our data table,
so in line 20, we specify the styleClass.
Here it's demo-table.
We also specify the headerClass on line 21.
Again, here, demo-table-header, and this all
from the CSS file, and then we specify our rowClasses.
So here we have table-odd-row, table-even-row.
It'll alternate between these two styles
to apply the odd and even rows.
So that's basically it for adding the CSS styles
to our JSF data table.
Okay, great, so we saw a lot of the code here in the slides.
Let's go ahead and take a look at a demo in Eclipse.
So moving to Eclipse, what we'll do is we'll make use
of an existing project from before, list-and-table-demo.
Again, this source code is available in the downloads
from earlier in the course.
The first thing I'll do is I'll expand
this WebContent directory, and I'll take a look
at this file, student_table_demo_with_css_styles.xhtml.
Now I'll open up this file, I wanna expand it here
for a quick second, and the important this is on line 9,
we reference our Cascading Style Sheet,
so we have h:outputStylesheet library="css"
name="student_table_demo.css"
So again, remember the actual directory structure here,
so under WebContent/resources, we have a directory
called CSS, and then our file is located in that directory.
So again, the link between library="css",
that's the name of our folder that's gonna be
under WebContent/resources.
So you have to make sure you have the CSS file
in the correct directory.
Now moving on down lines 19 through 23,
this is where we actually apply the style sheet,
so for our h:data table, there's another attribute
called styleClass, I reference demo-table.
For headerClass, I call it demo-table-header,
and then for rowClasses, demo-table-odd-row,
demo-table-even-row, and again for the rowClasses,
it'll simply alternate between those two
to actually style the odd and even rows.
And these are all styles that are defined
in that CSS file.
And that's basically it here for styling our data table.
Now let's go ahead and run our application.
I'll choose the file here.
I'll just right click,
I'll choose Run As, and I'll select Run on Server.
So it's gonna run our application, and note here,
we have a nice pretty table with a lot of style,
with a lot of flair, and this is all thanks
to that Cascading Style Sheet.
We defined styles in there for the table header,
for the table rows, even and odd, and so on.
So, we've really improved the look and feel of our table
just by applying the Cascading Style Sheets.
So it's totally up to you as far as whatever styles you want
to add and apply to the data table to make it look pretty.
So this is great.
So we can go ahead and wrap up this video.
So in this video we learned how
to create Cascading Style Sheets and apply them
to our JSF data table.
Good job.