Newsletter sign-up
View all newsletters

Enterprise Java Newsletter
Stay up to date on the latest tutorials and Java community news posted on JavaWorld

Sponsored Links

Optimize with a SATA RAID Storage Solution
Range of capacities as low as $1250 per TB. Ideal if you currently rely on servers/disks/JBODs

JavaWorld.com > Java Enterprise Edition >

A first look at JavaServer Faces, Part 2

Explore JavaServer Faces components

By David Geary, JavaWorld.com, 12/27/02

  • Print
  • Feedback
. What's this?

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.

Implement custom components

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.

Listing 9. /index.jsp

<!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.

  • Print
  • Feedback
What is Tech Briefcase?
TechBriefcase is a new, free service where IT Professionals can Search, Store and Share IT white papers and content like this. Learn more
Bookmark content
Speed up your research efforts with content across the web.
Search and Store
Find the white papers you need. Create folders for any topic.
View Anywhere
Open your briefcase on your iPhone, tablet or desktop. Share with colleagues.
Don't have an account yet?

Resources