3
タブ付きのJSFページを作成したいと思います。 thisのようなものです。しかし、Jqueryでこれを行うことを選択したのかどうか、遅延読み込みを実装できますか？JSFページのタブをクリックすると、タブが開いたときにコンテンツが生成されます。純粋なJSFでタブの遅延ロードを実装することは可能ですか？どちらの場合でもAJAXを簡単に実装できると思います。タブの作成方法 - JqueryまたはJSF
お祈り申し上げます
A
答えて
4
注：あなたは、タブ豆は、セッションスコープなりたい場合は、回答の湖底に指示を読んで...
あなたはここで、第三者Libararyを使用したくないされているのでPureJSFです+ jQueryの例
JSF +のjQuery + Ajaxの遅延読み込み+ビュースコープ豆例...
BT内容は...あなたはそれぞれのタブをクリックしたときには、@PostConstructと@PreDestroyのプリントアウト用のWebサーバコンソールで見ることができ
：Wここで、それは最終的にどのように見えるかですxhtmlページとそのBeanは、タブクリック（Lazy Loading）時に読み込まれ、他のタブをクリックすると破棄されます。
新しいプロジェクトを作成してゆっくりとその中にすべてのファイルを配置することをお勧めします演奏を開始し、それを調べる...その100％働いて、私はjQueryUI and download it(1.8.18)
に行くとjquery-1.7.1_.min.jsを置く....例は非常にシンプルで簡単です...ちょうどそれが本当に機能していることを確認するために、すべての
まず
をいくつかプリントアウトを置いそして他のファイルへの今
WebContent\resources\cssでWebContent\resources\jsでjquery-ui-1.8.18.custom.min.jsとjquery-ui-1.8.18.custom.css ...
myTabs.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<h:outputScript library="js" name="jquery-1.7.1_.min.js" target="head" />
<h:outputScript library="js" name="jquery-ui-1.8.18.custom.min.js" target="head" />
<h:outputStylesheet library="css" name="jquery-ui-1.8.18.custom.css" target="head" />
<h:outputScript library="js" name="mytabs.js" target="head" />
</h:head>
<h:body>
<f:view>
<h:form prependId="false">
<h:panelGroup id="tabs" layout="block">
<ul>
<c:forEach items="#{myTabs.tabs}" var="tab">
<li><a href="##{tab.tabid}" onclick="$('#button_#{tab.tabid}').click()">#{tab.tabid}</a></li>
<h:commandButton id="button_#{tab.tabid}" value="TabClick" action="#{myTabs.switchPages(tab.tabid)}" style="display:none">
<f:ajax render="tabs"></f:ajax>
</h:commandButton>
</c:forEach>
</ul>
<c:forEach items="#{myTabs.tabs}" var="tab">
<h:panelGroup id="#{tab.tabid}" layout="block" rendered="#{tab.tabid eq myTabs.selectedTab}">
<ui:include src="#{tab.tabfilename}"></ui:include>
</h:panelGroup>
</c:forEach>
</h:panelGroup>
</h:form>
</f:view>
</h:body>
</html>
MyTabs.java
package pack;
import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean
@SessionScoped
public class MyTabs{
@PostConstruct
public void init(){
tabs = new ArrayList<MyTabObject>();
tabs.add(new MyTabObject("tab1.xhtml", "tab1"));
tabs.add(new MyTabObject("tab2.xhtml", "tab2"));
tabs.add(new MyTabObject("tab3.xhtml", "tab3"));
}
String selectedTab="tab1";
public String getSelectedTab() {
return selectedTab;
}
public void setSelectedTab(String selectedTab) {
this.selectedTab = selectedTab;
}
public String switchPages(String selTab) {
selectedTab = selTab;
return "myTabs.xhtml";
}
List<MyTabObject> tabs;
public List<MyTabObject> getTabs() {
return tabs;
}
public void setTabs(List<MyTabObject> tabs) {
this.tabs = tabs;
}
}
MyTabObject
package pack;
public class MyTabObject{
String tabfilename;
String tabid;
public String getTabfilename() {
return tabfilename;
}
public void setTabfilename(String tabfilename) {
this.tabfilename = tabfilename;
}
public String getTabid() {
return tabid;
}
public void setTabid(String tabid) {
this.tabid = tabid;
}
public MyTabObject(String tabfilename, String tabid) {
super();
this.tabfilename = tabfilename;
this.tabid = tabid;
}
}
Tab1Page、（Tab2Page及びTab3Pageがまったく同じであるが、単に数を変更しますすべての場所で）
package pack;
import java.io.Serializable;
import java.text.Format;
import java.text.SimpleDateFormat;
import java.util.Date;
import javax.annotation.PostConstruct;
import javax.annotation.PreDestroy;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
@ManagedBean
@ViewScoped
public class Tab1Page implements Serializable{
/**
*
*/
private static final long serialVersionUID = 254415216070877770L;
// Constants
public final static String hashKey = "tab1PageTab";
public String actionString = "";
@PostConstruct
public void post(){
Format formatter;
Date date = new Date();
// Time formate 01:12:53 AM
formatter = new SimpleDateFormat("hh:mm:ss a");
tabName = formatter.format(date);
System.out.println("Tab1Page\t"+tabName+"\[email protected]");
}
@PreDestroy
public void destroy(){
Format formatter;
Date date = new Date();
// Time formate 01:12:53 AM
formatter = new SimpleDateFormat("hh:mm:ss a");
tabName = formatter.format(date);
System.out.println("Tab1Page\t"+tabName+"\[email protected]");
}
String tabName;
public String getTabName() {
return this.getClass().getName().substring(this.getClass().getName().lastIndexOf("."))+"\t"+tabName;
}
public void setTabName(String tabName) {
this.tabName = tabName;
}
public String getActionString() {
return actionString;
}
public void setActionString(String actionString) {
this.actionString = actionString;
}
}
tab1.xhtml（tab2.xhtmlとtab3.xhtmlはまったく同じです - ただの数字に置き換える）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:panelGroup>
<h:form>
<h:outputText value="#{tab1Page.tabName}" />
</h:form>
</h:panelGroup>
</ui:composition>
と最後のファイルへ
mytabs.js （WebContent \ resources \ jsに配置）
$(document).ready(function() {
$("#tabs").tabs();
});
$(window).load(function() {
jsf.ajax.addOnEvent(function (data) {
if (data.status === "success") {
$("#tabs").tabs();
}
});
});
：
方法MyTabs.javaでswitchPagesはvoidである必要があり、はい、これが可能なソリューションです。この
public void switchPages(String selTab) {
selectedTab = selTab;
}
7
Primefaces Tabviewコンポーネントは、遅延ロードをサポートしています。ショーケースから
引用：
タブの内容は、動的 属性が「真」に設定されている場合にのみアクティブなタブの内容が がレンダリングや怠惰をクリックします、だけでなくAjaxでの遅延ロードすることができ
タブは ajaxでタブの内容を取得します。この動作は、バンド幅を節約し、多くのコンテンツを持つタブを扱うときにはページサイズを小さくするために便利です（ ）。ショーケースから
クイック例：
<h:form id="form">
<p:tabView id="tabView" dynamic="true" cache="true">
// tabs
</p:tabView>
</h:form>
cache属性は、あなたは、タブを切り替える場合は、タブのコンテンツのAjaxの再読み込みを防ぐために使用されます。
+0
のように、何も返しません。しかし、純粋なJSFで同じ結果を達成することは可能でしょうか？ –
+0
いいえ、少なくともいくつかのjavascriptとcssが必要です。 –
+0
私はJSFと遅延ロードでJQueryを使用できますか？どちらのソリューションでもリソースが少なくて済みます。私は例えば8つのタブを持つJSFページを持っています。すべてのタブにページ分割などのJSFデータテーブルがあります。どの2つのうちどれがコード行が多いJSFページに適していますか？ –
3
jQuery UIを使用してajaxタブを実装するのは問題ありません。
ajax hereのjQueryタブのドキュメントを参照し、必要なコードを見つけるために「ソースを表示」をクリックしてください。
0
h:panelGridで単純なタブを実装する方法については、Core Java Server Faces third editionページ339を参照してください。
出力はこのようなものです：
これは本からのコードの例です：
...
<h:form>
<h:panelGrid styleClass="tabbedPane" columnClasses="displayPanel">
<!-- Tabs -->
<f:facet name="header">
<h:panelGrid columns="4" styleClass="tabbedPaneHeader">
<h:commandLink tabindex="1"
title="#{msgs.jeffersonTooltip}"
styleClass="#{tp.jeffersonStyle}"
actionListener="#{tp.jeffersonAction}">
#{msgs.jeffersonTab}
</h:commandLink>
...
</h:panelGrid>
</f:facet>
<!-- Tabbed pane content -->
<ui:include src="washington.xhtml" />
<ui:include src="roosevelt.xhtml" />
<ui:include src="lincoln.xhtml" />
<ui:include src="jefferson.xhtml" />
</h:panelGrid>
</h:form>
...
これは説明です：残念ながら
The tabbed pane is implemented with h:panelGrid. Because we do not specify
the columns attribute, the panel has one column. The panel’s header—defined
with an f:facet tag—contains the tabs, which are implemented with another
h:panelGrid that contains h:commandLink tags for each tab. The only row in the panel
contains the content associated with the selected tab.
When a user selects a tab, the associated action listener for the command link is
invoked and modifies the data stored in the backing bean. Because we use a
different CSS style for the selected tab, the styleClass attribute of each h:commandLink
tag is pulled from the backing bean with a value reference expression.
As you can see from the top picture in Figure 8–11, we have used the title
attribute to associate a tooltip with each tab. Another accessibility feature is the
ability to move from one tab to another with the keyboard instead of the
mouse. We implemented that feature by specifying the tabindex attribute for
each h:commandLink.
The content associated with each tab is statically included with the JSP include
directive. For our application, that content is a picture and some text, but
you could modify the included JSF pages to contain any set of appropriate
components. Notice that even though all the JSF pages representing content are
included, only the content associated with the current tab is rendered. That is
achieved with the rendered attribute—for example, jefferson.xhtml looks like this:
Putting It All Together
<h:panelGrid columns="2" columnClasses="presidentDiscussionColumn"
rendered="#{tp.jeffersonCurrent}">
<h:graphicImage value="/images/jefferson.jpg"/>
<span class="tabbedPaneContent">"#{msgs.jeffersonDiscussion}"</span>
</h:panelGrid>
Figure 8–12 shows the directory structure for the tabbed pane application and
Listings 8–14 through 8–17 show the most important files.
I遅延ロードとAJAXサポートの追加方法を知らないコードです。
関連する問題
- 1. アンドロイドアプリケーションのタブ内にタブを作成する方法は？つまり、親タブと子タブの作成方法は？
- 2. タブの作成方法
- 3. Richfaces/JSF Dynamic Accordionの作成方法は？
- 4. JqueryネストされたAjaxタブを作成する方法
- 5. jquery mobileを使用してタブを作成する方法は？
- 6. jqueryの各タブのセッションを作成する方法
- 7. JQueryまたはJavaScriptを使用してタブを作成する
- 8. タブ付きMathematicaノートブックの作成方法
- 9. jQuery UIのタブまたはその他の方法
- 10. JQueryダイアログまたはboxy可視領域での作成方法
- 11. jsrenderまたはjqueryテンプレートライブラリの作成方法
- 12. jQueryシャウトボックスの作成方法
- 13. jQueryドロップダウンメニューの作成方法
- 14. jQuery UIアコーディオンまたはタブの透明な背景を作成するには？
- 15. ウェブブラウザのタブに似たipadアプリケーションでタブを作成する方法
- 16. JSF 2.0でカスタム404メッセージを作成する方法は？
- 17. JSF 1.xでビュースコープBeanを作成する方法は？
- 18. JSFでユーザーインターフェイスを作成する方法は？
- 19. jQueryのタブを作成する方法（）100％の高さと内容のスクロール
- 20. jQuery関数の作成方法は？
- 21. CSSとJQueryタブを作成する
- 22. jqueryでタブを作成する
- 23. jquery easyuiを使用して、タブにあるリンクでタブを作成する方法は？
- 24. 投稿後のリンクを含むJSFテーブルの作成方法
- 25. JSF内のタブ内にフォームページを含める方法
- 26. フラグメント内にタブを作成する方法の例は？
- 27. Airbnb iOS App Exploreタブの作成方法は？
- 28. CSSで枠線付きのタブを作成する方法は？
- 29. タブ補完をサポートするRubyコマンドラインアプリの作成方法は？
- 30. QtアプリケーションでMacスタイルのタブを作成する方法は？
非常に良い例です。良い答えをありがとう。 「Core Java Server faces」の本を見ると、純粋なJSFでタブを作成できることがわかりました。しかし、遅延ロードとAJAXを使用してJSFタブを作成することは可能ですか？ –
@PeterPenzov試していない...これは、Pure JSF＆Jquery＆Ajaxレイジーローディングでどうやって行うのですか？ – Daniel
@PeterPenzovは私の解決策ではありません。 – Daniel