WEBVTT

1
00:00:01.300 --> 00:00:03.888
<v Narrator>Hey, in this video, we're gonna apply</v>

2
00:00:03.888 --> 00:00:07.446
Cascading Style Sheets to a JSF data table,

3
00:00:07.446 --> 00:00:09.964
and we'll actually have fun with this one.

4
00:00:09.964 --> 00:00:14.131
So hang in, we'll have a fun time with this section.

5
00:00:16.133 --> 00:00:19.159
In the previous video, we learned how to use a JSF table

6
00:00:19.159 --> 00:00:21.876
to display our data, using rows and columns,

7
00:00:21.876 --> 00:00:23.270
and it worked out fine.

8
00:00:23.270 --> 00:00:27.385
However, the only problem is that the table was plain.

9
00:00:27.385 --> 00:00:29.999
In fact, it was kind of ugly, (laughs).

10
00:00:29.999 --> 00:00:34.103
There was no real style to it, no real pizzazz or color

11
00:00:34.103 --> 00:00:36.667
to it, just a very plain table.

12
00:00:36.667 --> 00:00:38.488
What we're gonna do in this section is

13
00:00:38.488 --> 00:00:41.063
that we're gonna add some style to our table.

14
00:00:41.063 --> 00:00:42.356
We're gonna make it pretty.

15
00:00:42.356 --> 00:00:45.846
We're gonna dress it up, so going from a plain ugly table

16
00:00:45.846 --> 00:00:48.970
to a nice pretty beautiful table

17
00:00:48.970 --> 00:00:52.220
that's full of style and full of flair.

18
00:00:55.065 --> 00:00:57.572
So let me unveil our new table.

19
00:00:57.572 --> 00:00:59.121
We're gonna add some color to it,

20
00:00:59.121 --> 00:01:01.915
have a nice header for blue,

21
00:01:01.915 --> 00:01:03.995
we're gonna change up the rows a bit.

22
00:01:03.995 --> 00:01:07.574
We'll also make use of alternating colors on the rows,

23
00:01:07.574 --> 00:01:10.177
and so on, so we're gonna add some style to this table,

24
00:01:10.177 --> 00:01:13.507
add some flair, and again, with Cascading Style Sheets,

25
00:01:13.507 --> 00:01:15.574
you can make the table as pretty as you want.

26
00:01:15.574 --> 00:01:18.448
It's really up to you as far as all the various styles

27
00:01:18.448 --> 00:01:20.698
that you wanna apply to it.

28
00:01:24.674 --> 00:01:26.310
So here's our to do list.

29
00:01:26.310 --> 00:01:27.663
The first thing we need to do is create

30
00:01:27.663 --> 00:01:30.513
a Cascading Style Sheet, and then once we have

31
00:01:30.513 --> 00:01:32.879
the style sheet, then we need to apply it

32
00:01:32.879 --> 00:01:34.674
to our JSF data table.

33
00:01:34.674 --> 00:01:36.677
So that's our step-by-step process.

34
00:01:36.677 --> 00:01:39.525
Let's go ahead and dive in.

35
00:01:39.525 --> 00:01:42.843
So the first step is creating the Cascading Style Sheet.

36
00:01:42.843 --> 00:01:44.923
So we're gonna create our Cascading Style Sheet

37
00:01:44.923 --> 00:01:46.361
in a separate file.

38
00:01:46.361 --> 00:01:50.594
I'll call this file student_table_demo.css.

39
00:01:50.594 --> 00:01:54.316
What I'm gonna do is define four different styles,

40
00:01:54.316 --> 00:01:57.901
so I'll define a style for the main demo table,

41
00:01:57.901 --> 00:02:00.323
then I'll define a style for our table header,

42
00:02:00.323 --> 00:02:02.634
I'll create a style for our odd row,

43
00:02:02.634 --> 00:02:04.730
and a style for our even row.

44
00:02:04.730 --> 00:02:06.954
So this is all CSS information.

45
00:02:06.954 --> 00:02:11.123
Now, I assume that you have some background on CSS.

46
00:02:11.123 --> 00:02:14.599
If not, feel free to find some free tutorials on Youtube,

47
00:02:14.599 --> 00:02:17.612
but we're simply gonna take an existing CSS file,

48
00:02:17.612 --> 00:02:20.420
and then we'll apply that Cascading Style Sheet file

49
00:02:20.420 --> 00:02:22.253
to our JSF data table.

50
00:02:26.652 --> 00:02:29.233
Alright, now where do we place the CSS file?

51
00:02:29.233 --> 00:02:31.799
Well, you must place it in a special directory.

52
00:02:31.799 --> 00:02:36.009
So it has to be under WebContent/resources,

53
00:02:36.009 --> 00:02:38.759
and then from there you can place it in a folder called CSS,

54
00:02:38.759 --> 00:02:42.676
and then place your actual file in that folder.

55
00:02:46.926 --> 00:02:48.570
Once you have it in the folder,

56
00:02:48.570 --> 00:02:51.390
then you need to load the CSS file.

57
00:02:51.390 --> 00:02:54.223
So here we have h:outputStylesheet

58
00:02:56.056 --> 00:02:57.700
library="css",

59
00:02:57.700 --> 00:02:59.399
that's the actual folder name,

60
00:02:59.399 --> 00:03:03.306
and then name="student_table_demo.css".

61
00:03:03.306 --> 00:03:05.556
That's the actual CSS file.

62
00:03:10.647 --> 00:03:12.695
Now that we have the CSS file loaded,

63
00:03:12.695 --> 00:03:15.844
we need to apply the CSS file to our data table,

64
00:03:15.844 --> 00:03:18.898
so in line 20, we specify the styleClass.

65
00:03:18.898 --> 00:03:20.535
Here it's demo-table.

66
00:03:20.535 --> 00:03:24.007
We also specify the headerClass on line 21.

67
00:03:24.007 --> 00:03:26.854
Again, here, demo-table-header, and this all

68
00:03:26.854 --> 00:03:30.914
from the CSS file, and then we specify our rowClasses.

69
00:03:30.914 --> 00:03:34.745
So here we have table-odd-row, table-even-row.

70
00:03:34.745 --> 00:03:36.635
It'll alternate between these two styles

71
00:03:36.635 --> 00:03:39.170
to apply the odd and even rows.

72
00:03:39.170 --> 00:03:42.121
So that's basically it for adding the CSS styles

73
00:03:42.121 --> 00:03:43.954
to our JSF data table.

74
00:03:49.378 --> 00:03:52.572
Okay, great, so we saw a lot of the code here in the slides.

75
00:03:52.572 --> 00:03:56.739
Let's go ahead and take a look at a demo in Eclipse.

76
00:03:58.872 --> 00:04:01.740
So moving to Eclipse, what we'll do is we'll make use

77
00:04:01.740 --> 00:04:05.182
of an existing project from before, list-and-table-demo.

78
00:04:05.182 --> 00:04:08.272
Again, this source code is available in the downloads

79
00:04:08.272 --> 00:04:10.522
from earlier in the course.

80
00:04:14.033 --> 00:04:15.188
The first thing I'll do is I'll expand

81
00:04:15.188 --> 00:04:19.117
this WebContent directory, and I'll take a look

82
00:04:19.117 --> 00:04:23.284
at this file, student_table_demo_with_css_styles.xhtml.

83
00:04:30.636 --> 00:04:32.453
Now I'll open up this file, I wanna expand it here

84
00:04:32.453 --> 00:04:37.019
for a quick second, and the important this is on line 9,

85
00:04:37.019 --> 00:04:40.586
we reference our Cascading Style Sheet,

86
00:04:40.586 --> 00:04:45.028
so we have h:outputStylesheet library="css"

87
00:04:45.028 --> 00:04:47.861
name="student_table_demo.css"

88
00:04:50.290 --> 00:04:52.910
So again, remember the actual directory structure here,

89
00:04:52.910 --> 00:04:56.510
so under WebContent/resources, we have a directory

90
00:04:56.510 --> 00:05:00.451
called CSS, and then our file is located in that directory.

91
00:05:00.451 --> 00:05:04.147
So again, the link between library="css",

92
00:05:04.147 --> 00:05:06.431
that's the name of our folder that's gonna be

93
00:05:06.431 --> 00:05:10.054
under WebContent/resources.

94
00:05:10.054 --> 00:05:11.830
So you have to make sure you have the CSS file

95
00:05:11.830 --> 00:05:13.913
in the correct directory.

96
00:05:21.412 --> 00:05:24.085
Now moving on down lines 19 through 23,

97
00:05:24.085 --> 00:05:27.316
this is where we actually apply the style sheet,

98
00:05:27.316 --> 00:05:30.060
so for our h:data table, there's another attribute

99
00:05:30.060 --> 00:05:32.711
called styleClass, I reference demo-table.

100
00:05:32.711 --> 00:05:35.450
For headerClass, I call it demo-table-header,

101
00:05:35.450 --> 00:05:39.110
and then for rowClasses, demo-table-odd-row,

102
00:05:39.110 --> 00:05:42.632
demo-table-even-row, and again for the rowClasses,

103
00:05:42.632 --> 00:05:44.517
it'll simply alternate between those two

104
00:05:44.517 --> 00:05:47.942
to actually style the odd and even rows.

105
00:05:47.942 --> 00:05:49.490
And these are all styles that are defined

106
00:05:49.490 --> 00:05:50.907
in that CSS file.

107
00:05:53.643 --> 00:05:57.810
And that's basically it here for styling our data table.

108
00:05:58.720 --> 00:06:01.196
Now let's go ahead and run our application.

109
00:06:01.196 --> 00:06:03.471
I'll choose the file here.

110
00:06:03.471 --> 00:06:05.886
I'll just right click,

111
00:06:05.886 --> 00:06:10.053
I'll choose Run As, and I'll select Run on Server.

112
00:06:14.254 --> 00:06:16.373
So it's gonna run our application, and note here,

113
00:06:16.373 --> 00:06:19.488
we have a nice pretty table with a lot of style,

114
00:06:19.488 --> 00:06:21.365
with a lot of flair, and this is all thanks

115
00:06:21.365 --> 00:06:23.372
to that Cascading Style Sheet.

116
00:06:23.372 --> 00:06:26.203
We defined styles in there for the table header,

117
00:06:26.203 --> 00:06:29.667
for the table rows, even and odd, and so on.

118
00:06:29.667 --> 00:06:32.769
So, we've really improved the look and feel of our table

119
00:06:32.769 --> 00:06:36.180
just by applying the Cascading Style Sheets.

120
00:06:36.180 --> 00:06:38.416
So it's totally up to you as far as whatever styles you want

121
00:06:38.416 --> 00:06:42.244
to add and apply to the data table to make it look pretty.

122
00:06:42.244 --> 00:06:43.661
So this is great.

123
00:06:47.681 --> 00:06:49.796
So we can go ahead and wrap up this video.

124
00:06:49.796 --> 00:06:51.276
So in this video we learned how

125
00:06:51.276 --> 00:06:54.313
to create Cascading Style Sheets and apply them

126
00:06:54.313 --> 00:06:56.702
to our JSF data table.

127
00:06:56.702 --> 00:06:57.535
Good job.