問題描述
我現在正在學習/使用 JSF 2.0 (Sun Mojarra)，我希望在我的 web 應用中有一個選項卡式窗格(單個選項卡可以命名為 General、Detail1、Detail2...).
我如何實現這一目標?到目前為止，我還沒有找到任何文檔:(
其他人已經暗示過:Mojarra 是一個基本 JSF 實現.它提供了最少的強制性組件集，以涵蓋大多數現有的 HTML 元素(表單、輸入字段和表格).由于 HTML 沒有在單個元素中提供選項卡式面板，因此基本的 JSF 實現也不會這樣做.
選項卡式面板基本上是一堆鏈接(或按鈕)和面板，它們可以切換為隱藏/可見.為了表示鏈接，您通常使用 HTML <a> 元素.為了表示面板，您通常使用 HTML <div> 元素.要切換顯示/隱藏，基本上有兩種方法:
打印每個面板以響應，但使用 CSS
display: none隱藏所有其他面板，并使用 JavaScript 通過將新面板設置為display: block和舊面板到display: none.或者，有條件地將請求的面板打印到響應中.可以通過鏈接(或按鈕)中的請求參數來確定請求了哪個面板.
這是方式 1 的 basic copy'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:頭><title>SO 問題 3491969</title><script src="http://code.jquery.com/jquery-latest.min.js"></script><腳本>$(文檔).ready(函數() {$('#tabs a').click(function() {$('#panels').children().hide();$($(this).attr('href')).show();});});</腳本><風格>#tabs li { 列表樣式類型:無；顯示:內聯；邊框:1px純黑色；}#panels { 寬度:600px;高度:400px；邊框:1px純黑色；}.hide { 顯示:無；}</風格></h:head><h:body><ul id="標簽"><li><a href="#panel1">panel1</a></li><li><a href="#panel2">panel2</a></li><li><a href="#panel3">panel3</a></li></ul><div id="面板"><div id="panel1">panel1 內容</div><div id="panel2" class="hide">panel2 內容</div><div id="panel3" class="hide">panel3 內容</div></div></h:身體></html>您當然可以將 <a> 替換為 <h:outputLink> 和 <div> 替換為 <h:panelGroup layout="block"> 等等，但只要您不需要將它與支持 bean 和/或 JSF 組件樹綁定，那么純 HTML 就完美了也有效并且開銷更少.
您只需輸入 <ui:repeat> 即可根據某些列表動態"重復選項卡和面板.也不要忘記加入一個好的 CSS 鏡頭，讓它看起來很美味.這基本上是大部分工作的所在.
畢竟這基本上也是那些 3rd 方組件庫，如 PrimeFaces、RichFaces 和 IceFaces 正在做.它們都在一個組件中提供了所需的功能，該組件完成了所有重復和美觀的工作.例如 PrimeFaces 有一個 <p:tabView>，RichFaces 有一個 <rich:tabPanel>、IceFaces 和 <ice:panelTabSet> 等等.p>
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 :(
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: 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).
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.
這篇關于如何在 JSF 2.0 (Sun Mojarra) 中獲取選項卡式窗格組件的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！