ansaurus

Question

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

Answer 1

+2 A:

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

Odelya 2010-08-16 09:36:31

Answer 2

A:

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.

Zenzen 2010-08-16 09:55:01

Answer 3

+1 A:

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"&gt;
    <h:head>
        <title>SO question 3491969</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
        <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.

BalusC 2010-08-16 13:27:31

ansaurus

tags:

views:

answers:

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

related questions