How to get tabbed component in JSF 2.0 (Sun Mojarra)

I am learning / using JSF 2.0 (Sun Mojarra) now, and I want to have a tab bar in my webapp (the only tabs could be the names General, Detail1, Detail2, ...).

How do I achieve this? I have not yet found any documentation for this :(

+3
source share
4 answers

Others have already hinted: Mojarra is the base implementation of JSF. It offers a minimal set of required components to cover most existing HTML elements (forms, input fields, and tables). Since HTML does not offer tabbed panels in a single element, the underlying JSF implementation also does not.

A tabbed panel is basically a bunch of links (or buttons) and panels that should be hidden / visible. To represent links, you usually use an HTML element <a>. To represent panels, you usually use an HTML element <div>. There are two ways to toggle the show / hide:

  • , CSS display: none JavaScript , display: block display: none.

  • . , ( ).

basic copy'n'paste'n'runnable 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>

, , <a> <h:outputLink> <div> <h:panelGroup layout="block"> .., , bean / JSF, HTML .

<ui:repeat>, "" . CSS, . .

, , , PrimeFaces, RichFaces IceFaces. , . , PrimeFaces <p:tabView>, RichFaces a <rich:tabPanel>, IceFaces an <ice:panelTabSet> ..

+6

.

PrimeFaces TabView .

PrimeFaces,

+3

JSF - "" , . , - , ( , ). , , PrimeFaces, ICEFaces, RichFaces .., .

+1

There are many useful components for JSF that provide more or less attractive tabs (among many others). RichFaces, IceFaces, OpenFaces (and PrimeFaces, as mentioned). Each of them is quite complete, and you usually can’t mix and match, so see the demo sites for each of them and choose the one that you like. I like RichFaces, but partly because it was the default on Seam2, where I first learned JSF. framework

0
source

Source: https://habr.com/ru/post/1759851/


All Articles