Instructor: In this video,
I'm gonna show you how to use the JSF DataTable
to display data.
We'll cover the following topics:
We'll create a JSF data table,
we'll also define a managed bean,
and we'll pull it all together with the JSF page example.
Alright, so a lot of good information,
let's go ahead and get started.
So the main objective of this video
is to create a data table.
So we already have student information
and we wanna display it in a tabular format
with rows and columns.
First name, last name, email address.
That's the end goal.
And I'll show you how to build this table
using the JSF DataTable component.
Alright, so the JSF DataTable,
you can use it to loop over data
so just like in the previous videos,
we can use this component
to loop over arrays, lists, or collections.
So any type of collection
that's in the java.util package.
Okay, here's our to do list, our step-by-step process.
The first step is we want to create a managed bean.
And then for our second step,
we want to create a JSF page for looping over the data.
Okay, so let's go ahead and start with step one,
creating the managed bean.
So we're gonna have a managed bean that'll provide
a getter method for our list of data.
Now, this is the exact same managed bean
that we used in the previous video, StudentDataUtil.
It's an application-scoped bean,
we simply load up sample data,
and return that as a list of students.
So I'm not gonna go through all of the code for this
because you've seen it all before
in the previous video.
So just note, it's a managed bean,
we load sample data,
and we simply return a list of students.
Now here's our step two, creating the JSF page.
So we're going to create a JSF page
that's gonna loop over the data
and generate an HTML table.
And we'll accomplish this by using the DataTable component
in the JSF library.
Alright, so on line 17, we have this h:dataTable,
so again a component from the JSF library.
We have value="#{studentDataUtil.students}".
That simply calls our JSF managed bean to give us our data.
And then we'll have var="tempStudent".
that's simply our temporary variable that we'll use
as we loop over that collection.
We set border="1".
That's simply the size of the border for the table.
Then, in lines 20 through 25, or 26 actually,
we set up a column.
So the column name on line 22 is First Name,
and then the actual value
for the row is tempStudent.firstName.
We do a similar thing on lines 28 through 34.
We set up a column, Last Name, and then the actual value
on line 33 is tempStudent.lastName.
And that's basically it.
And that's the basic approach,
you simply define a column
and you specify the value that'll appear in the column.
So we just went through the process there
for the first name and last name
and you simply repeat this over and over again
for all of your additional columns.
Alright, so let's go ahead and look at a JSF table demo.
Alright, so let's go ahead and move into the clips.
I'm gonna make use of that same project as before,
list-and-table-demo, this source code is available
in the source code that you downloaded
earlier in the course.
I'll simply expand this project.
I'll go ahead and look at our Java source code for us
for our managed bean
and I'll take a look at this StudentDataUtil.java
and I'll go ahead and open up this file.
And again, remember,
this is the same code that we saw in the previous video.
So it's simply a managed bean that's application-scoped.
So I'm not gonna go through all the gory details here,
'cause we've seen this before.
I'm just gonna highlight it.
So we load sample data,
we simply prepopulate with some students,
and then 27 through 29,
we simply have a getter method.
This is the method that the JSF page will use
to retrieve the data.
And that's basically it.
So the same code that we saw from the previous video.
Alright, so let's go ahead and move to step two.
So step two is making use of our JSF page.
So it's in our WebContent folder,
and I'll look at student_table_demo.xhtml.
So this is the JSF page,
it's gonna generate the HTML table for us.
So I'll scroll down to line 17, h:dataTable,
so that's the JSF component.
I specify value="#{studentDataUtil.students}".
It'll call the getter method on that managed bean
and then var="tempStudent", our temporary variable.
Lines 20 through 26, we simply define the first column
for first name, the value's gonna be tempStudent.firstName.
And then we move down to the next column here,
column Last Name, and the actual value for that column
is tempStudent.lastName.
So again, we simply define the columns,
and we define the data that's gonna appear in those columns.
And then I'll scroll down, it's just more of the same
for all the additional columns here in our example.
So we also have an email column
and on line 41 we say tempStudent.email.
So here we simply define the three columns
that this HTML table will make use out of.
And that's it.
Alright, so let's go ahead and run the application.
I'll select this file here, student_table_demo.xhtml.
I'll right-click, I'll choose Run As,
and I'll choose Run on Server.
And this'll run my application
and we'll see the output here
for Student Table Demo.
So note here, this JSF component generated a table for us
and we specified each one of the columns,
First Name, Last Name, Email.
We also specified the data that would appear
in the actual table.
So that's it.
That's how you use the JSF DataTable component.
Great job!
Okay, so we can go ahead and wrap up this video.
In this video we learned how to create a JSF data table.
We started off by defining our managed bean
and then we put it all together
by creating a JSF page example.
Great job!