(For more resources on JSF, see here.)
Injecting CSS in JSF
In this recipe, you will see how to add CSS styles to JSF tags. It is a simple solution, but it has the advantage that it can be applied to almost all JSF tags that render text, images, and so on.
Getting ready
We have developed this recipe with NetBeans 6.8, JSF 2.0, and GlassFish v3. The JSF 2.0 classes were obtained from the NetBeans JSF 2.0 bundled library.
How to do it…
When you need a simple and classic solution to integrate CSS in JSF it is important to know that JSF components support the styleClass and style attributes. The styleClass attribute is used when you are working with CSS classes, while the style attribute allows you to place CSS code directly in place between quotes.
You can see in the following code snippet how this works with the h:outputText component:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
>
<h:head>
<title>JSF and CSS example</title>
<style type="text/css">
.message { text-align: left;
letter-spacing:5px;
color:#000099
}
.message-overline { text-decoration:overline;
}
.message-font { font-family:georgia,garamond,serif;
font-size:20px;
font-style:italic;
}
</style>
</h:head>
<h:body>
<h:outputText styleClass="message"
value="This text is CSS formated by 'message' class!"/>
<br /><br />
<h:outputText styleClass="message message-overline"
value="This text is CSS formated by 'message' and
'message-overline' classes!"/>
<br /><br />
<h:outputText styleClass="message message-overline message-font"
value="This text is CSS formated by 'message',
'message-overline' and 'message-font' classes!"/>
<br /><br />
<h:outputText style="text-align: left;letter-spacing:5px;
color:#000099" value="This text is CSS formated
using the 'style' attribute instead of 'message' class!"/>
<br /><br />
<h:outputText style="text-align: left;letter-spacing:5px;
color:#000099;text-decoration:overline;"
value="This text is CSS formated using the
'style' attribute instead of 'message'
and 'message-overline' classes!"/>
<br /><br />
<h:outputText style="text-align: left;letter-spacing:5px;
color:#000099;text-decoration:overline;
font-family:georgia,garamond,serif;
font-size:20px;font-style:italic;
" value="This text is CSS formated using the
'style' attribute instead of 'message',
'message-overline' and 'message-font' classes!"/>
<br /><br />
</h:body>
</html>
Notice that when you need to specify more CSS classes under the same styleClass you need to separate their names by space.
How it works…
As you can see the JSF – CSS construction looks similar to HTML – CSS usage. The interaction between JSF – CSS imitates HTML – CSS interaction, but, as you will see in the next recipes, JSF is more flexible and supports more kinds of attributes for injecting CSS code in JSF pages.
JSF, CSS, and tables
There are two kinds of grids (tables) that are very often used in JSF, h:panelGrid and h:dataTable. Both of them can be styled with CSS in detail using a set of dedicated attributes. In this recipe you will see these attributes at work for h:panelGrid, but it is very simple to extrapolate this to h:dataTable.
Getting ready
We have developed this recipe with NetBeans 6.8, JSF 2.0, and GlassFish v3. The JSF 2.0 classes were obtained from the NetBeans JSF 2.0 bundled library.
How to do it…
Suppose that we have an h:panelGrid. We can “populate” it with CSS styles, using the following set of attributes:
|
Name |
Description |
|
columnClasses |
This is used to specify the comma-separated list of CSS style classes to be applied on the columns of the table. |
|
headerClass |
This is used to specify the spaces-separated list of CSS style classes to be applied on the header of the table. |
|
footerClass |
This is used to specify the spaces-separated list of CSS style classes to be applied on the footer of the table. |
|
rowClasses |
This is used to specify the comma-separated list of CSS style classes to be applied on the rows of the table. |
|
styleClass |
This is used to set the CSS class for the component. |
|
style |
This is used to set the CSS style definition for the component. |
Knowing these attributes, we build a JSF page to show you how to use them in practice (notice where we have placed the attributes):
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
>
<h:head>
<title>JSF and CSS example</title>
<style type="text/css">
.message { text-align: left;
letter-spacing:5px;
color:#000099
}
.message-font { font-family:georgia,garamond,serif;
font-size:20px;
font-style:italic;
}
.odd { background-color: blue }
.even { background-color: red }
</style>
</h:head>
<h:body>
<h:form>
<h:panelGrid columns="3" border="1" footerClass="message"
headerClass="message-font" rowClasses="odd, even"
title="PanelGrid and CSS">
<f:facet name="header">
<h:outputText value="Fill Names Below"/>
</f:facet>
<h:inputText/>
<h:inputText/>
<h:inputText/>
<h:inputText/>
<h:inputText/>
<h:inputText/>
<h:inputText/>
<h:inputText/>
<h:inputText/>
<h:inputText/>
<h:inputText/>
<h:inputText/>
<f:facet name="footer">
<h:outputText value="The End"/>
</f:facet>
</h:panelGrid>
</h:form>
</h:body>
</html>
How it works…
Since we have an attribute for each part of a grid, we can easily specify CSS styles to customize the design of each of these parts. JSF will combine the specified CSS styles to render a cool grid to the user.
There’s more…
The h:dataTable allows you to use the same CSS attributes for table header, footer, and so on.
Integrating JavaScript and JSF
JSF and JavaScript can combine their forces to develop powerful applications. For example, let’s see how we can use JavaScript code with h:commandLink and h:commandButton to obtain a confirmation before getting into action.
Getting ready
We have developed this recipe with NetBeans 6.8, JSF 2.0, and GlassFish v3. The JSF 2.0 classes were obtained from the NetBeans JSF 2.0 bundled library.
How to do it…
As you know the h:commandLink takes an action after a link is clicked (on the mouse click event), while h:commandButton does the same thing, but renders a button, instead of a text link. In this case, we place a JavaScript confirmation box before the action starts its effect. This is useful in user tasks that can’t be reversed, such as deleting accounts, database records, and so on.
Therefore, the onclick event was implemented as shown next:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
>
<h:head>
<title>JSF and JavaScript example</title>
</h:head>
<h:body>
<!-- using h:commandLink and JavaScript -->
<h:form id="myCLForm">
<h:commandLink id="cmdlinkID" value="Delete record"
onclick="if (!confirm('Are you sure you want to delete the
current record?')) return false"
action="#{bean.deleteRecord}"/>
</h:form>
<!-- using h:commandButton and JavaScript -->
<h:form id="myCBForm">
<h:commandButton id="cmdbtnID" value="Delete record"
onclick="if (!confirm('Are you sure you want to delete the
current record?')) return false"
action="#{bean.deleteRecord}"/>
</h:form>
</h:body>
</html>
How it works…
Notice that we embed the JavaScript code inside the onclick event (you also may put it separately in a JS function, per example). When the user clicks the link or the button, a JS confirmation box appear with two buttons. If you confirm the choice the JSF action takes place, while if you deny it then nothing happens.
There’s more…
You can use this recipe to display another JS box, such as prompt box or alert box.
