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

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

3 голосов
/ 16 августа 2010

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

Ответы [ 4 ]

6 голосов
/ 16 августа 2010

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

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

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

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

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

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

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

3 голосов
/ 16 августа 2010

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

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

Чтобы реализовать PrimeFaces, следуйте инструкциям

1 голос
/ 16 августа 2010

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

0 голосов
/ 05 июня 2012

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

...