Instructor: Hey in this video we're going to learn
how to display data with JSF lists.
We'll cover the following topics:
We'll learn how to create JSF UI lists.
We'll also define Managed Beans.
And then we'll wrap it all together with
the full JSF page example.
Alright, so a lot of good stuff here.
Let's go ahead and get started.
The main objective for this video is to build JSF lists
or display data using JSF lists.
So on this example here with the screenshot
we're going to display a list of students
and we're going to display them using a bullet list.
So I'll show you how to make use of
the JSF components to do this.
So what we'll do is we'll make use of JSF tags
to loop over our data.
So these JSF tags, they can loop over various types of data
like arrays, lists, or any type of collection in
the java.util package.
And I'll show you how to write code for returning the list
and also iterating and looping over the list.
Now as I've mentioned before, if you've followed along
my videos so far you know how I love to do lists.
I like to keep things simple and straightforward.
So here we're going to have our to do list,
the first thing we need to do is create a managed bean
and then the second thing we need to do
is create a JSF page for looping over the data
and displaying it in a list.
So let's start off with our step one right here,
creating a managed bean.
So what we're going to do is create this managed bean
that's going to provide data for our application.
So here in the source code,
line nines through eleven we have this class
called studentDataUtil, it's our managed bean.
On line ten note this bean is applicationScoped
so it's going to be shared
across all users of our application.
And this is a very common used case
for making applicationScoped beans.
Now moving down to line thirteen,
we set up our variable for students
simply going to be a list of student objects.
Lines fifteen through seventeen is our constructor,
our no arg constructor.
And here we simply call them at the loadSampleData.
So this loadSampleData method's defined
in lines nineteen through twenty five.
So here we're going to simply pre populate the list
with some students.
So create some students like
Mary Public, John Doe, Ajay Rao.
We're just going to hard code or pre populate the data.
Don't worry about the details right now,
as far as, database interaction.
We'll cover database in a later section.
Right now we'll just focus on
pre populating it with some data.
Now in lines twenty seven through twenty nine
we define the getter method.
So this is the getter method that will
actually be used by the JSF page.
They call getStudents and will return that list of
student objects that we just pre populated in this bean.
That's basically all the code here for our bean.
It's our StudentDataUtil that will give us access
to data for our JSF application.
Okay, so now we need to look at our JSF page for looping.
That's step two.
So we're going to create a JSF page that's going
to loop over our data
and it's going to generate a HTML unordered list
using the HTML tag, ul.
So let's look at the code here for
this file: studentlistdemo.xhtml.
I'd like to focus in on this section here for the ul.
So this is our unordered list.
This is going to give us a bullet list.
So inside of the ul tags
we're going to make use of a JSF component here
ui:repeat.
This will basically do a loop over a collection of data.
So think of it as for loop or a wow loop
and so we say ui repeat we give var temp student.
That's the temporary variable we'll have for each iteration
through the loop.
And then value equals studentDataUtil.students.
That's our reference to our managed bean.
And .students, it's going to call getstudents.
So that's going to give us that collection of student
objects we can iterate over.
Then inside of the loop we have the li
and we have tempStudent.firstName
tempStudent.lastName.
Now we'll just continue looping over and over
and at the end we'll have a bullet list
like in the bottom right corner for our students
Mary Public, John Doe, and Ajay Rao.
So there's a good code snippet
for looping over our collection.
So let's go ahead and move into eclipse.
I'm going to make use of this project
list and tables demo.
This project is available in the source code
that you downloaded earlier in the course.
I'm going to start off with step one
looking at our managed bean.
So I'm moving to our java source directory
and our package.
And I'll take a look at this StudentDataUtil.java.
So again this is this managed bean that's going
to provide data for us to use in our JSF application.
Alright expanding a window here.
So this our ManagedBean StudentDataUtil.
And remember on line ten
we sat this up as being ApplicationScoped.
So it's going to be shared by all users of the application.
And again a very good used case,
or a very common used case for making use of
DataUtils and ApplicationScopes.
On line thirteen we set up a list of students.
Lines fifteen through seventeen's our constructor.
We simply call it loadSampleData.
And then lines nineteen through twenty five
we simply loadSampleData.
So we construct ArrayList and then we just
pre populate it with three students.
Mary Public, John Doe, Ajay Rao.
And then on the bottom here we have our getStudents.
It's a public met that returns a list of student objects.
The JSF page who I should call this method to retrieve
the data and use it inside of that JSF page.
This all looks really good here for our managed bean.
And also just for completeness here,
we're returning a list of student objects.
You may wonder, well what is a student object.
Well it's simply a managed bean.
It has three fields.
First name, last name, and email.
We've seen this on a lot of previous videos,
but I'll just show it to you again as a quick refresher.
It has a constructor and it has the normal getter sentiment.
So it's really just very simple bean that simply holds
the first name, last name, and email address of the student.
Alright, so let's go ahead and look at a JSF page.
So the JSF page is in the web content folder.
And the file is called studentlistdemo.xhtml.
So I'll go ahead and open up this file.
I'll expand it so we can take a look at everything.
Scroll down, this is kind of a standard JSF page.
I won't harp on any of this stuff at the beginning,
but what I will do is I'll highlight this section here,
line fifteen through twenty one.
This is our ul, our unordered list.
Okay.
And inside of this list we care going to make use
of this ui repeat.
So this ui repeat is basically going to be our loop.
Like a for loop or a wow loop looping over our data.
And while we're looping over the data we have
tempStudent.firstName, tempStudent.lastName.
So that's basically our ui repeat.
So we loop over the data.
We have a var tempStudent.
That's our temporary variable.
Then the value studentDataUtil.students
that calls the get students method on our managed bean.
So this looks really good so far.
Good job.
Now let's go ahead and run the application.
I'll move here and I'll access this file
studentlistdemo.xhtml.
I'll just do a right click and I'll choose run as
and run on sever.
The system is going to prompt me which server to use.
I'll choose Tomcat
and I'll say always use this server when running.
Hit finish.
And I'm going to go ahead and start up my application.
And then we make it to the page here studentListDemo.
So this works our really good.
So this is our JSF page.
In the background it's making use of our managed bean.
It's getting a list of students from that managed bean.
And then it's using that ui repeat command
to simply loop over that data and give us
a bullet list.
So this looks really good.
Good job.
Alrighty, so we can go ahead and wrap up this video.
So in this video we created JSF ui lists.
We also defined our managed beans.
And we also put it all together by creating a JSF page
for displaying the output as a list.
So this is all good stuff.
Great job.