How do I get a tabbed pane component in JSF 2.0 (Sun Mojarra)

Question

How do I get a tabbed pane component in JSF 2.0 (Sun Mojarra)

16.4k views Asked by Tim At 16 August 2010 at 09:30

I am learning/using JSF 2.0 (Sun Mojarra) now and I want to have a tabbed pane in my webapp (single tabs could named be General, Detail1,Detail2,...).

How do I achieve this? I haven't found any documetation for this so far :(

Original Q&A

There are 4 answers

idarwin On 05 June 2012 at 18:50

There are numerous of useful components for JSF, which provide more or less fancier tab panels (among many others). RichFaces, IceFaces, OpenFaces (and PrimeFaces as mentioned). Each of these is fairly complete and you typically can't mix-and-match, so see the demo sites for each one, and pick the one you like. I like RichFaces, but that's in part because it was the default on Seam2 which is where I first learned JSF. frameworks

Mateusz Dymczyk On 16 August 2010 at 09:55

JSF is only a "backbone" framework if I may call it that way. Out of the box it gives you very few components as this was the intention of the creators - they wanted others to extend this framework with their own work (as long as they follow the set standards, that is). Now you can either write your own components or use frameworks such as PrimeFaces, ICEFaces, RichFaces etc. which already have a number of components.

Dejell On 16 August 2010 at 09:36

Consider using an existing component library.

PrimeFaces has a TabView with ability to add effects, and dynamic content.

In order to implement PrimeFaces, follow the instructions

**BalusC** · Accepted Answer · 2010-08-16 13:27:31

Others have already hinted it: Mojarra is a basic JSF implementation. It offers the minimum set of mandatory components to cover the most of existing HTML elements (forms, input fields and tables). Since HTML does not offer a tabbed panel in a single element, the basic JSF implementation won't do that as well.

A tabbed panel is basically a bunch of links (or buttons) and panels which are to be toggled hidden/visible. To represent links, you usually use the HTML <a> element. To represent panels, you usually use the HTML <div> element. To toggle show/hide either there are basically 2 ways:

Print every panel to response, but hide all other panels using CSS display: none and use JavaScript to toggle the visiblity by setting the new panel to display: block and the old panel to display: none.
Or, print the requested panel to the response conditionally. Which panel has been requested can be be determined by request parameters in the links (or buttons).

Here's a basic copy'n'paste'n'runnable example of way 1:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html">
    <h:head>
        <title>SO question 3491969</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                $('#tabs a').click(function() {
                    $('#panels').children().hide();
                    $($(this).attr('href')).show();
                });
            });
        </script>
        <style>
            #tabs li { list-style-type: none; display: inline; border: 1px solid black; }
            #panels { width: 600px; height: 400px; border: 1px solid black; }
            .hide { display: none; }
        </style>
    </h:head>
    <h:body>
        <ul id="tabs">
            <li><a href="#panel1">panel1</a></li>
            <li><a href="#panel2">panel2</a></li>
            <li><a href="#panel3">panel3</a></li>
        </ul>
        <div id="panels">
            <div id="panel1">panel1 content</div>
            <div id="panel2" class="hide">panel2 content</div>
            <div id="panel3" class="hide">panel3 content</div>
        </div>
    </h:body>
</html>

You can of course replace <a> by <h:outputLink> and <div> by <h:panelGroup layout="block"> and so on, but as long as you don't need to bind it in the with the backing bean and/or JSF component tree, then just plain HTML is perfectly valid as well and has less overhead.

You just have to bring <ui:repeat> in to repeat the tabs and the panels "dynamically" based on some list. Also don't forget to throw in a good shot of CSS to make it all look like tasty. This is basically where the most of the work goes in.

This is after all basically also what those 3rd party component libraries like PrimeFaces, RichFaces and IceFaces are doing. They all provide the desired functionality in a single component which does all the repeating and eye-candiness job. PrimeFaces for example has a <p:tabView>, RichFaces a <rich:tabPanel>, IceFaces an <ice:panelTabSet> and so on.

TechQA.

How do I get a tabbed pane component in JSF 2.0 (Sun Mojarra)

There are 4 answers

Related Questions in JAVA

Related Questions in JSF

Related Questions in JSF-2

Related Questions in TABS

Related Questions in TABBED-INTERFACE

Popular Questions

Popular Tags

Trending Questions