如何在JSF 2.0(Sun Mojarra)中获得选项卡式窗格组件 [英] How do I get a tabbed pane component in JSF 2.0 (Sun Mojarra)
问题描述
我现在正在学习/使用JSF 2.0(Sun Mojarra)，我想在我的Web应用程序中使用一个选项卡式窗格(单个选项卡可以命名为General，Detail1，Detail2等).
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,...).
我该如何实现?到目前为止，我还没有发现任何文档:(
How do I achieve this? I haven't found any documetation for this so far :(
推荐答案
其他人已经暗示了这一点:Mojarra是基本的JSF实现.它提供了最少的必需组件集，以覆盖大多数现有的HTML元素(表单，输入字段和表).由于HTML在单个元素中没有提供选项卡式面板，因此基本的JSF实现也不会做到这一点.
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.
选项卡式面板基本上是一堆链接(或按钮)和要隐藏/可见切换的面板.为了表示链接，通常使用HTML <a>元素.为了表示面板，通常使用HTML <div>元素.要切换显示/隐藏，基本上有两种方法:
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:
-
打印每个面板以进行响应，但使用CSS
display: none隐藏所有其他面板，并通过将新面板设置为display: block，将旧面板设置为display: none，使用JavaScript切换可见性.
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).
这是方法1的基本复制'n'paste'n'可运行示例:
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>
您当然可以将<a>替换为<h:outputLink>，将<div>替换为<h:panelGroup layout="block">，依此类推，但是只要您不需要将其与后备bean和/或JSF组件绑定在一起即可.一棵树，那么普通的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.
您只需要带入<ui:repeat>即可根据某些列表动态"重复选项卡和面板.另外，不要忘了投掷CSS，使它们看起来都很好吃.基本上，这是大部分工作要做的地方.
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.
这基本上也是那些第三方组件库，例如 PrimeFaces ， IceFaces 正在进行中.它们都在单个组件中提供了所需的功能，从而完成了所有重复操作和吸引眼球的工作.例如，PrimeFaces具有<p:tabView>，RichFaces具有 <rich:tabPanel> ，IceFaces和<ice:panelTabSet>等.
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.
这篇关于如何在JSF 2.0(Sun Mojarra)中获得选项卡式窗格组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
