java 如何在 JSF 2.0 (Sun Mojarra) 中获得选项卡式窗格组件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3491969/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I get a tabbed pane component in JSF 2.0 (Sun Mojarra)
提问by Tim
I am learning/using JSF 2.0 (Sun Mojarra) now and I want to have a tabbed pane in my webapp (single tabs could named be General, Detail1,Detail2,...).
我现在正在学习/使用 JSF 2.0 (Sun Mojarra)，我想在我的 web 应用程序中有一个选项卡式窗格（单个选项卡可以命名为 General、Detail1、Detail2...）。
How do I achieve this? I haven't found any documetation for this so far :(
我如何实现这一目标？到目前为止，我还没有找到任何文档:(
回答by BalusC
Others have already hinted it: Mojarra is a basicJSF 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.
其他人已经暗示过：Mojarra 是一个基本的JSF 实现。它提供了最少的必需组件集，以涵盖大部分现有的 HTML 元素（表单、输入字段和表格）。由于 HTML 没有在单个元素中提供选项卡式面板，因此基本的 JSF 实现也不会这样做。
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:
选项卡式面板基本上是一堆链接（或按钮）和面板，它们将被切换为隐藏/可见。为了表示链接，您通常使用 HTML<a>元素。为了表示面板，您通常使用 HTML<div>元素。要切换显示/隐藏，基本上有两种方法：
Print every panel to response, but hide all other panels using CSS
display: noneand use JavaScript to toggle the visiblity by setting the new panel todisplay: blockand the old panel todisplay: 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).
打印每个面板以进行响应，但使用 CSS 隐藏所有其他面板，
display: none并使用 JavaScript 通过将新面板设置为display: block和将旧面板设置为 来切换可见性display: none。或者，有条件地将请求的面板打印到响应中。可以通过链接（或按钮）中的请求参数来确定已请求哪个面板。
Here's a basiccopy'n'paste'n'runnable example of way 1:
这是方式 1的基本复制'n'paste'n'runnable 示例：
<!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.
您当然可以替换<a>by<h:outputLink>和<div>by<h:panelGroup layout="block">等，但只要您不需要将它与支持 bean 和/或 JSF 组件树绑定，那么纯 HTML 也是完全有效的，并且开销更少.
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.
您只需要<ui:repeat>根据某个列表“动态”地重复选项卡和面板。也不要忘记加入一个很好的 CSS 镜头，让它看起来很好吃。这基本上是大部分工作要做的地方。
This is after all basically also what those 3rd party component libraries like PrimeFaces, RichFacesand IceFacesare 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.
毕竟这基本上也是像PrimeFaces、RichFaces和IceFaces这样的3rd 方组件库正在做的事情。它们都在一个组件中提供了所需的功能，该组件完成了所有重复和令人眼花缭乱的工作。例如 PrimeFaces 有 a <p:tabView>、 RichFaces a <rich:tabPanel>、 IceFaces an<ice:panelTabSet>等等。
回答by Dejell
Consider using an existing component library.
考虑使用现有的组件库。
PrimeFaceshas a TabViewwith ability to add effects, and dynamic content.
PrimeFaces有一个TabView，可以添加效果和动态内容。
In order to implement PrimeFaces, follow the instructions
为了实现 PrimeFaces，请按照说明进行操作
回答by Mateusz Dymczyk
JSF is only a "backbone" framework if I may call it that way. Out of the box it gives you very few components as this was the intention of the creators - they wanted others to extend this framework with their own work (as long as they follow the set standards, that is). Now you can either write your own components or use frameworks such as PrimeFaces, ICEFaces, RichFaces etc. which already have a number of components.
JSF 只是一个“骨干”框架，如果我可以这样称呼它的话。开箱即用它为您提供很少的组件，因为这是创建者的意图 - 他们希望其他人用他们自己的工作扩展这个框架（只要他们遵循既定标准）。现在，您可以编写自己的组件，也可以使用 PrimeFaces、ICEFaces、RichFaces 等框架，这些框架已经具有许多组件。
回答by idarwin
There are numerous of useful components for JSF, which provide more or less fancier tab panels (among many others). RichFaces, IceFaces, OpenFaces (and PrimeFaces as mentioned). Each of these is fairly complete and you typically can't mix-and-match, so see the demo sites for each one, and pick the one you like. I like RichFaces, but that's in part because it was the default on Seam2 which is where I first learned JSF. frameworks
JSF 有许多有用的组件，它们或多或少地提供了更漂亮的选项卡面板（以及许多其他组件）。RichFaces、IceFaces、OpenFaces（和前面提到的 PrimeFaces）。每一个都相当完整，您通常无法混合搭配，因此请查看每一个的演示站点，并选择您喜欢的一个。我喜欢 RichFaces，但部分原因是它是 Seam2 的默认设置，也是我第一次学习 JSF 的地方。构架
