Voiceover: Hey, welcome back.
So in this video, we're gonna learn how to list students
and this time we're gonna apply cascading style sheets.
So we'll cover the following topics.
We'll list the students out with cascading style sheets.
We'll also look at the Big Picture
just to see how everything fits together.
And then we'll do a Code Walk Through,
just to see how we can apply the
cascading style sheets to our JSF page.
Alright, so we have a lot of good things in store.
Let's go ahead and dig in.
So this is the GUI for our application
or our page, really, at the top we'll have a header
and then in the main section we'll
have our data table.
So for our header section we'll apply
one of our cascading style sheet
so we'll have a bold text with a background blue
and then for the center section
we'll have our data table component.
And so we'll apply some styles here.
We'll have a header section
and then we'll make use of alternating colors
for the various rows here in our table.
This will be very similar to the styles
that we applied in one of the previous videos.
Alright, so just to kind of make sure
we understand how everything fits together
this is the Big Picture.
So we're gonna have this new file here
called list-students.xhtml.
It's gonna apply the cascading styles to the page
and then this person will make use
of the student controller which in turn
delegates the call off to the Student Database Utility
which talks to the database.
So I won't cover the Controller or DbUtil that much
because we've already covered that portion of it
already in the previous videos.
I'll simply focus on applying the CSS styles
to this JSF page.
Alright, so let's go ahead and move into the clips
and let's do a code walkthrough.
So what I'd like to do is continue
to use the previous project that we had open.
Jdbc-student-tracker and that's the version 1
that we had in the previous video.
And what I'd like to do is go ahead
and go look at the web content folder.
There's a file on here called list-students.xhtml.
So this is the version of the JSF file
that will list out the students
and apply the style sheets accordingly.
So let's go ahead and open up
this file and take a look at it.
So on lines six through eight,
we're gonna use the same approach as before.
So preRenderView will call studentController.LoadStudents
and again this'll do all the heavy lifting
when the page is first loaded.
It'll get the students in the memory
and then we can use them later on in our application.
Now moving down to line 16, this is where
we actually load or reference the style sheet.
So here we have h:outputStylesheet
we give library of css
name style.css.
And, again, we've learned already how to
make use of style sheets and JSF,
but this is just a refresher.
So, moving back over to our directory structure,
under resources/css we have a file out there
called styles.css and this is basically
a cascading style sheet with all
your various styles in it.
So I won't go into that in details,
but the file is out there, you can review it
at your leisure.
Alright, so I'll just move back into the JSF page.
Lines 22-26 is basically setting up
that header section for FooBar University
applying an appropriate style that's mapped to that.
Here on line 32 we display any error messages that occurred.
And then on lines 36-39 we kind of start off
the reference here for our data table.
So, again, our data table's gonna make use
of the studentController.students,
have a temporary variable for tempStudent.
The most important part here is lines 37-39.
This is where we apply the appropriate styles
to this data table.
So we set up the class, the headerClass,
and the rowClasses for alternating colors.
And, again, we've seen this before,
just a refresh of it here for this example with JDCB.
And that's basically it, everything else stays the same.
So you're columns for your first name,
last name, and email, so on, that all stays the same.
Alright, so let's go ahead and run this one.
Select the file and right click.
Now choose Run As, then I'll say Run on Server.
Okay, great, so this runs and right here
on our browser we see the outputs.
So now we have FooBar University with those styles applied
and also our data table, so if you remember
from one of our previous videos,
we had a very basic, raw, ugly table.
Now we've applied styles to it and it looks pretty.
And, again, all of this information
is coming from the database thanks to
our Student Controller and our Student DbUtil.
So this is a very good first start
at building on our application
to retrieve information from the database
and also make it look pretty.
So good job so far.
So let's go ahead and wrap up this video.
We learned how to list students and also
apply cascading style sheets.
We looked at the Big Picture
and then we also did a Code Walk Through
So, good job.