Как получить компонент панели с вкладками в JSF 2.0 (Sun Mojarra)

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

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

Источник

4 ответа

Решение

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

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

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

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

Вот базовый пример копирования 1 и вставки: 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> и так далее.

Источник

Рассмотрите возможность использования существующей библиотеки компонентов.

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

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

Источник

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

Источник

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

Источник
Другие вопросы по тегам