Page 4 of 5
Before we move on to JSF custom components, you should note that internationalization support for JSF is not complete. In
Listing 7, the text displayed by the Submit button is not localized because the JSF <command_button> tag does not support text localization. We could have internationalized the text with a scriptlet, but that involves ugly
code that should not exist in a JSP page. Internationalization support will be complete by JSF 1.0's release.
Note: Detailed coverage of JSTL internationalization is beyond the scope of this article. For more information about JSTL, see Resources.
Besides providing a standard set of components, a render kit that renders those components in HTML, and a set of corresponding JSP tags, JavaServer Faces also lets you create custom components. The application below contains two instances of a JSF custom component. That custom component keeps track of two images. When you click on the component, it toggles the image it currently displays.
Figure 5a. Two custom components display their primary images. Click on thumbnail to view full-size image.
Figure 5b. Application changes after user clicks on left-hand component. Click on thumbnail to view full-size image.
Figure 5c. Application changes again after user clicks on right-hand component. Click on thumbnail to view full-size image.
Figure 5a shows the application after it starts; the two custom components display their primary images. Figure 5b shows the application after the user clicks on the left-hand component, and Figure 5c shows the application after the user subsequently clicks on the right-hand component. If you click on the components a second time, the components will display their original image.
These custom components might seem trivial and somewhat useless; however, even though the former is true (the components are purposely trivial to illustrate JSF component implementation), the latter is not necessarily valid—this custom component can be used as part of any component that contains clickable images. For example, this custom component could be used in a tree control to expand or shrink nodes displayed in the tree.
Listing 9 lists the JSP page shown in Figure 5a.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Creating Custom Components with JavaServer Faces</title>
</head>
<body>
<%@ taglib uri="http://java.sun.com/j2ee/html_basic/" prefix="faces" %>
<%@ taglib uri="/WEB-INF/tlds/example.tld" prefix="sabreware" %>
<faces:usefaces>
<sabreware:toggleGraphic id='bananaKiwi'
imageOne='/graphics/banana.jpg'
imageTwo='/graphics/kiwi.jpg'/>
<sabreware:toggleGraphic id='pineappleStrawberry'
imageOne='/graphics/pineapple.jpg'
imageTwo='/graphics/strawberry.jpg'/>
</faces:usefaces>
</body>
</html>
The preceding JSP page is simple—it uses a custom tag to create two instances of our custom component. For completeness, the
tag library descriptor (TLD) associated with the <sabreware:toggleGraphic> tag is listed in Listing 10.