7

私が達成しようとしていること

データのロードはコストのかかる操作であるため、rich:tabPanelwithswitchType="client"があり、タブの1つがに設定されていますswitchType。ajaxこのAjaxタブをクリックすると、タイトルを[読み込み中... ]に変更して、クリックが認識されたことを示します。ロードが完了すると、タイトルはAjaxタブに戻ります。

[Client Tab] [Ajax Tab]
<click on 'Ajax Tab'>
[Client Tab] [Loading...]
<wait...>
[Client Tab] [Ajax Tab]
<click on 'Client Tab'>
[Client Tab] [Ajax Tab]

問題の説明

実際、上記のほとんどは期待どおりに機能しますが、私が抱えている唯一の問題は、Ajaxタブから他のタブに移動すると、Ajaxタブのタイトルが読み込みに戻ることです...：

[Client Tab] [Ajax Tab]
<click on 'Ajax Tab'>
[Client Tab] [Loading...]
<wait...>
[Client Tab] [Ajax Tab]
<click on 'Client Tab'>
[Client Tab] [Loading...]

リサーチ

RichFacesのJIRAで問題を見つけましたが、この問題はバージョン3.2.1以降で修正されています。さらに、私は数時間グーグルで検索しましたが、同様の問題を見つけることができませんでした。

環境

  • Tomcat 7.0.30
  • クロサギ2.1.12
  • RichFaces4.2.2。ファイナル

コード（縮小）

JSF

<ui:composition template="WEB-INF/templates/default.xhtml">
    <ui:define name="content">
        <h:form id="form">
            <rich:tabPanel id="tabPanel" switchType="client">
                <rich:tab id="clientTab">
                    <f:facet name="header">
                        <h:outputText value="Client Tab" />
                    </f:facet>
                    <h:outputText value="Foo" />
                </rich:tab>
                <rich:tab id="ajaxTab" switchType="ajax" status="ajaxTabStatus">
                    <f:facet name="header">
                        <a4j:status id="ajaxTabStatus">
                            <f:facet name="start">
                                <h:outputText value="Loading..." />
                            </f:facet>
                            <f:facet name="stop">
                                <h:outputText value="Ajax Tab" />
                            </f:facet>
                        </a4j:status>
                    </f:facet>
                    <h:outputText value="#{bean.value}" />
                </rich:tab>
            </rich:tabPanel>
        </h:form>
    </ui:define>
</ui:composition>

AjaxタブのバッキングBean

@ManagedBean
@ViewScoped
public class Bean implements Serializable {

    private static final long serialVersionUID = -8405248908693334970L;

    private String value = "noValue";

    private static final Logger log = LoggerFactory.getLogger(Bean.class);

    @PostConstruct
    public void init() {
        log.info("Init bean.");
        value = getDummyValueWithFakeDelay();
    }

    public String getValue() {
        log.info("Get value.");
        return value;
    }

    private String getDummyValueWithFakeDelay() {
        try {
            Thread.sleep(1000);
        } catch (InterruptedException ex) {
        }

        return DateFormat.getTimeInstance().format(new Date());
    }
}

アップデート1：

の識別子（つまり、のように指定したもの<rich:someTag ... status="someStatus" />）は、その属性a4j:statusではなく、idそのname属性であることがわかりました。だから私a4j:statusはそのページのすべてのAjaxリクエストにぴったりです。ただし、名前を付けてこの名前付きステータスを使用することはできません。これは、現在何も起こらないためです。

<rich:tab id="ajaxTab" switchType="ajax" status="ajaxTabStatus">
    <f:facet name="header">
        <a4j:status id="ajaxTabStatus" name="ajaxTabStatus">
            <f:facet name="start">
                <h:outputText value="Loading..." />
            </f:facet>
            <f:facet name="stop">
                <h:outputText value="Ajax Tab" />
            </f:facet>
        </a4j:status>
    </f:facet>
    <h:outputText value="#{bean.value}" />
</rich:tab>

アップデート2：

また、次のようなコードonbeginで属性を使用する別のアプローチも見つけました。oncomplete

<rich:tab id="ajaxTab" switchType="ajax"
    onbegin="#{rich:component('ajaxTab')}.?"
    oncomplete="#{rich:component('ajaxTab')}.?">

ご覧のとおり、タブのタイトルを操作する方法はまだ見つかりませんでした（そして、rich：componentで何ができるかについての有用なドキュメントは見つかりませんでした）。

4

2 に答える 2

1

以下のコードは、richfaces 4.3.7 で実行します。うまくいくようです。(タブヘッダーを変更する代わりに読み込みパネルを表示します。)

<a4j:status oncomplete="#{rich:component('busy')}.hide()"
    onerror="#{rich:component('busy')}.hide()"
    onbegin="#{rich:component('busy')}.show()">
    <rich:popupPanel id="busy" modal="true" moveable="false"
        resizeable="false" autosized="true">
        <h:panelGrid styleClass="alignCenter" width="100%" id="busyPanel"
            columns="1" border="0" cellpadding="0" cellspacing="2">
            <h:outputLabel value="Loading..." />
        </h:panelGrid>
    </rich:popupPanel>
</a4j:status>
<h:form>
    <rich:tabPanel switchType="ajax" 
        oncomplete="#{rich:component('busy')}.hide()" 
        onerror="#{rich:component('busy')}.hide()"
        onbegin="#{rich:component('busy')}.show()"
        >
        <rich:tab label="Client Tab" switchType="client">
          Tab - client
        </rich:tab>

        <rich:tab label="Ajax Tab" id="ajaxTab" >
          <h:outputText value="#{bean.value}" />
        </rich:tab>
    </rich:tabPanel>
</h:form>
于 2015-05-08T21:39:16.610 に答える
1

私はあまり詳しくありませんRichFaces 4.x。ただし、これは で行う方法ですRichFaces 3。
これをあなたと仮定しますtabPanel。

<h:form>
  <rich:tabPanel>
    <rich:tab label="Client Tab" switchType="client">
      Tab - client
    </rich:tab>

    <rich:tab label="Ajax Tab" id="ajaxTab" switchType="ajax" ontabenter="changeLabel(event)">
      <h:outputText value="#{bean.value}" />
    </rich:tab>
  </rich:tabPanel>
</h:form>

ontabenterajax タブのイベントに注意してください。

これで、スクリプトは次のようになります。

<script>
    function changeLabel(tabId) {
        var tabLabel = event.target || event.srcElement;
        tabLabel.innerHTML = 'Loading...';
    }
</script>

についてはよくわかりませんRF4。ただし、タブにイベントをRF3追加する必要はありません。oncomplete

于 2012-11-27T05:07:07.150 に答える