Extending an Existing Component

The preferences screens for the sample application we developed in Chapter 9 are not all that user friendly. For instance, you can see the different setting only by navigating through the screens in a fixed order; you can’t jump simply from one setting to another. This type of data is better presented as tabs on one screen, as shown in Figure 14-1.

User preferences as tabs
Figure 14-1. User preferences as tabs

Much of what is needed for this design can be done with existing components. The contents of each tab can be represented by a panel component, e.g., with the <h:panelGroup> or <h:panelGrid> action elements. Yet another panel can hold the whole set of tabs together, but it needs a custom panel renderer that ensures that only the currently selected tab panel is rendered. The same custom renderer can also create the tab control bar, and pick up the tab label texts or images from facets attached to each tab panel.

The part of the design that makes sense to implement as a custom component is the tab label. Clicking on the label should result in the rendering of the corresponding tab panel’s content, so the label component must act as a command component with built-in event handling behavior, toggling the rendered attribute for the panels that make up the individual tabs.

Example 14-1 shows parts of the JSP page that creates a view based on this design with panels, a custom ...

Get JavaServer Faces now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.