3

タブ付きのJSFページを作りたいです。このようなもの。しかし、Jquery でこれを行うことを選択した場合、遅延読み込みを実装できますか? JSF ページのタブをクリックすると、タブが開かれたときにコンテンツが生成されます。純粋な JSF でタブの遅延読み込みを実装することは可能ですか? どちらの場合も、AJAX を簡単に実装できると思います。

幸運をお祈りしています

4

4 に答える 4

7

Primefaces Tabviewコンポーネントは遅延読み込みをサポートしています。

ショーケースからの引用：

タブのコンテンツは、ajax を使用して遅延ロードすることもできます。dynamic 属性が「true」に設定されている場合、アクティブなタブのコンテンツのみがレンダリングされ、遅延タブをクリックすると、ajax を使用してタブのコンテンツが取得されます。この動作は、多くのコンテンツを持つタブを処理するときに帯域幅を節約し、ページ サイズを縮小するのに便利です。

ショーケースからの簡単な例:

<h:form id="form">  
    <p:tabView id="tabView" dynamic="true" cache="true"> 
      // tabs
    </p:tabView>
</h:form>

このcache属性は、タブを切り替える場合に、タブ コンテンツの ajax リロードを防ぐために使用されます。

于 2012-04-11T12:00:35.490 に答える
4

注: タブ Bean をセッション スコープにする場合は、回答の下部にある手順をお読みください...

サードパーティのライブラリを使用したくないので、ここに PureJSF + jQuery の例があります

JSF + Jquery + Ajax 遅延読み込み + ビュー スコープ Bean の例...

ところで、最終的には次のようになります。

JSF + Jquery 遅延読み込みタブ

各タブをクリックする@PostConstructと、Web サーバー コンソールの印刷出力を確認できます...@PreDestroy

タブのコンテンツ - xhtml ページとその Bean は、タブをクリックするとロードされ (遅延ロード)、他のタブをクリックすると破棄されます。

新しいプロジェクトを作成し、その中にすべてのファイルをゆっくりと配置し、再生して調べてみることをお勧めします... 100% 動作していますが、実際に動作していることを確認するためにいくつかの印刷物を配置しました...

例は非常に単純で簡単です....

まず、jQueryUI に移動してダウンロードします (1.8.18)

と配置jquery-1.7.1_.min.jsとjquery-ui-1.8.18.custom.min.js_ WebContent\resources\js_jquery-ui-1.8.18.custom.cssWebContent\resources\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+"\t@PostConstruct...");
}

@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+"\t@PreDestroy...");
}


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();
        }
    });
});

セッション スコープ Bean を使用するには:

のメソッドswitchPagesは、このように何も返さないようにするMyTabs.java必要がありますvoid

    public void switchPages(String selTab) {
    selectedTab = selTab;
}
于 2012-04-15T12:06:41.497 に答える
0

本の Core Java Server Faces third editionpage 339 を参照して、 で簡単なタブを実装する方法を確認できますh:panelGrid。

出力は次のようになります。

ここに画像の説明を入力

これは本のコード例です：

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

残念ながら、このコードに遅延読み込みと AJAX サポートを追加する方法がわかりません。

于 2012-04-15T09:37:34.640 に答える