当前位置：文江博客话题详情

如何在 JSF 2.0 中获取选项卡式窗格组件 (Sun Mojarra)

发布于 2024-09-14 04:21:56 字数 144 浏览 7 评论 0原文

我现在正在学习/使用 JSF 2.0 (Sun Mojarra)，我希望在我的 web 应用程序中有一个选项卡式窗格（单个选项卡可以命名为 General、Detail1、Detail2...）。

我该如何实现这一目标？到目前为止我还没有找到任何相关文档:(

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

倚栏听风 2024-09-21 04:21:57

其他人已经暗示过：Mojarra 是一个基本 JSF 实现。它提供了最小的强制组件集来覆盖大多数现有的 HTML 元素（表单、输入字段和表格）。由于 HTML 不在单个元素中提供选项卡式面板，因此基本的 JSF 实现也不会这样做。

选项卡式面板基本上是一堆链接（或按钮）和要切换隐藏/可见的面板。为了表示链接，通常使用 HTML 元素。为了表示面板，通常使用 HTML

元素。要切换显示/隐藏，基本上有两种方法：

打印每个面板以进行响应，但使用 CSS display: none 隐藏所有其他面板，并使用 JavaScript 通过设置新面板来切换可见性到 display: block 和旧面板到 display: none。打印
或者，有条件地将请求的面板打印到响应中。可以通过链接（或按钮）中的请求参数来确定已请求哪个面板。

这是方法 1 的基本复制'n'粘贴'n'可运行示例：

<!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>

您当然可以将替换为和

by 等等，但只要你不需要将其与支持 bean 和/或 JSF 组件树绑定在一起，那么纯 HTML 也是完全有效的，并且开销较小。

您只需引入即可根据某个列表“动态”重复选项卡和面板。另外，不要忘记添加一个很好的 CSS 镜头，让一切看起来都很美味。这基本上是大部分工作要做的地方。

毕竟这基本上也是那些 3rd 方组件库，如 PrimeFaces、RichFaces 和 IceFaces正在做。它们都在单个组件中提供了所需的功能，该组件完成了所有重复且令人眼花缭乱的工作。例如，PrimeFaces 有一个，RichFaces 有一个、IceFaces 和等等。

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">
    <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>

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. PrimeFaces for example has a <p:tabView>, RichFaces a <rich:tabPanel>, IceFaces an <ice:panelTabSet> and so on.

回复收藏 0 原文

给不了的爱 2024-09-21 04:21:57

考虑使用现有的组件库。

PrimeFaces 有一个 TabView 能够添加效果和动态内容。

要实施 PrimeFaces，请遵循说明

回复收藏 0 原文

满意归宿 2024-09-21 04:21:57

如果我可以这么称呼的话，JSF 只是一个“骨干”框架。开箱即用，它为您提供的组件非常少，因为这是创建者的意图 - 他们希望其他人用自己的工作扩展这个框架（只要他们遵循设定的标准）。现在，您可以编写自己的组件，也可以使用 PrimeFaces、ICEFaces、RichFaces 等框架，这些框架已经拥有许多组件。

回复收藏 0 原文

鹤仙姿 2024-09-21 04:21:57

JSF 有许多有用的组件，它们或多或少提供了更精美的选项卡面板（以及许多其他面板）。 RichFaces、IceFaces、OpenFaces（以及前面提到的 PrimeFaces）。其中每一个都相当完整，您通常无法混合搭配，因此请查看每一个的演示站点，然后选择您喜欢的一个。我喜欢 RichFaces，但这部分是因为它是 Seam2 上的默认设置，而 Seam2 是我第一次学习 JSF 的地方。框架

回复收藏 0 原文

~没有更多了~