Вопрос по java, tabs, tabbed-interface, jsf-2, jsf – Как получить компонент панели с вкладками в JSF 2.0 (Sun Mojarra)

3

Сейчас я изучаю / использую JSF 2.0 (Sun Mojarra) и хочу, чтобы в моем веб-приложении была панель с вкладками (отдельные вкладки можно было бы назвать General, Detail1, Detail2, ...).

Как мне этого добиться? Я не нашел никакой документации для этого до сих пор :(

Ваш Ответ

4   ответа
0

которые предоставляют более или менее привлекательные панели вкладок (среди многих других). RichFaces, IceFaces, OpenFaces (и PrimeFaces, как уже упоминалось). Каждый из них довольно полный, и вы, как правило, не можете смешивать и сочетать, поэтому посмотрите демонстрационные сайты для каждого и выберите тот, который вам нравится. Мне нравится RichFaces, но это отчасти потому, что это было по умолчанию на Seam2, где я впервые изучил JSF. рамки

3

тов.

PrimeFaces имеетTabView с возможностью добавления эффектов и динамического контента.

Для реализации PrimeFaces следуйтеинструкции

1

если можно так сказать. Из коробки он дает вам очень мало компонентов, так как это было задумано создателями - они хотели, чтобы другие расширили эту платформу своей собственной работой (если они следуют установленным стандартам, то есть). Теперь вы можете написать свои собственные компоненты или использовать такие инфраструктуры, как PrimeFaces, ICEFaces, RichFaces и т. Д., Которые уже содержат ряд компонентов.

6

основной Реализация JSF. Он предлагает минимальный набор обязательных компонентов, охватывающих большинство существующих элементов HTML (формы, поля ввода и таблицы). Поскольку HTML не предлагает панель с вкладками в одном элементе, базовая реализация JSF также не будет этого делать.

Панель с вкладками - это в основном набор ссылок (или кнопок) и панелей, которые должны быть скрытыми / видимыми. Для представления ссылок вы обычно используете HTML<a> элемент. Для представления панелей вы обычно используете HTML<div> элемент. Для переключения показать / скрыть есть два основных способа:

Напечатайте каждую панель в ответ, но скройте все другие панели, используя CSSdisplay: none и используйте JavaScript для переключения видимости, установив новую панель вdisplay: block и старая панель дляdisplay: none.

Или распечатайте запрошенную панель в ответ условно. Какая панель была запрошена, можно определить по параметрам запроса в ссылках (или кнопках).

Вотосновной 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"> и так далее, но до тех пор, пока вам не нужно связывать его с деревом компонентов поддержки и / или JSF-компонентом, тогда простой HTML-код также вполне допустим и имеет меньше накладных расходов.

Вы просто должны принести<ui:repeat> чтобы повторять вкладки и панели «динамически» на основе какого-либо списка. Также не забудьте добавить хороший пример CSS, чтобы все выглядело вкусно. Это в основном, где большая часть работы идет.

В конце концов, это в основном то, что нравится сторонним библиотекам компонентов.PrimeFaces, RichFaces а такжеICEfaces делают. Все они обеспечивают желаемую функциональность в одном компоненте, который выполняет всю повторяющуюся работу. PrimeFaces, например, имеет<p:tabView>RichFaces<rich:tabPanel>IceFaces<ice:panelTabSet> и так далее.

Похожие вопросы