7 min read

(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:


br>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


>


JSF and CSS example



value="This text is CSS formated by 'message' class!"/>



value="This text is CSS formated by 'message' and
'message-overline' classes!"/>



value="This text is CSS formated by 'message',
'message-overline' and 'message-font' classes!"/>







value="This text is CSS formated using the
'style' attribute instead of 'message'
and 'message-overline' classes!"/>









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):


br>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


>


JSF and CSS example




headerClass="message-font" rowClasses="odd, even"
title="PanelGrid and CSS">






















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:


br>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


>


JSF and JavaScript example




onclick="if (!confirm('Are you sure you want to delete the
current record?')) return false"
action="#{bean.deleteRecord}"/>




onclick="if (!confirm('Are you sure you want to delete the
current record?')) return false"
action="#{bean.deleteRecord}"/>


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.


Subscribe to the weekly Packt Hub newsletter

* indicates required

LEAVE A REPLY

Please enter your comment!
Please enter your name here