web-dev-qa-db-ja.com

<ui:include>を条件付きでレンダリングする

<rich:dataTable>を表示するページを切り替えようとしています。 <ui:include>テンプレートを含める前は、テーブル全体が表示されていました。

<ui:include src="../log/viewDlg.xhtml"/>

Webページでオン/オフを切り替えられるようにしたいと思います。ボタンやリンクを付けてページに表示します。どうすればそれを達成できますか?


更新1:なんらかの奇妙な理由で表示できません。これは、フィードバックに基づいてこれまでに書いたものです。

見る:

<a4j:commandLink value="View"
    action="#{bean.showview}" render="viewPanel"/>

<h:panelGroup id="viewPanel">
    <h:panelGroup id="tableRenderPanel" rendered="#{bean.showPolicyView}">    
        <ui:include src="../log/viewDlg.xhtml"/>
    </h:panelGroup>                         
</h:panelGroup>

バッキングビーン:

private boolean showPolicyView = false;

public void showView() {
    showPolicyView = !showPolicyView;
}

public boolean isShowPolicyView(){
    return showPolicyView;
}
12
Gilbert V

<ui:include>を2つの<h:panelGroup>要素でラップします。ここに問題があります。条件付きコンポーネントを再レンダリングすることはできません。なんでこれ?要素のrendered属性がfalseに解決されると、ビューのレンダリング中に考慮されないため、操作のターゲット(この場合はレンダリングに関連する)にはなりません。

コードにジャンプすると、次のようになります。

<h:panelGroup id="wrapperPanel">
    <h:panelGroup id="tableRenderPanel" rendered="#{yourBean.renderTable}">
        <ui:include src="../log/viewDlg.xhtml"/>
    </h:panelGroup>
</h:panelGroup>

yourBean#renderTableは、コンポーネントをレンダリングするかどうかを決定するBooleanプロパティです。 falseと評価された場合、コンポーネントはコンポーネントツリーに含まれません。


ビューの切り替え

ビューを切り替えるには、ページを更新するBeanメソッドを作成するだけです。

<h:commandLink action="#{yourBean.toggleTableView}"/>

またはAJAXを介して特定のパネル。 JSF 1.2でこれを行うには、可能であれば、RichFacesなどの拡張機能を使用してAJAXを導入します。たとえば、RichFacesを選択した場合、<a4j:commandLink/>とその便利なrender(または古いバージョンではreRender)属性を使用して、JSF2の<f:ajax/>で通常実行できることを実現できます。

<a4j:commandLink action="#{yourBean.toggleTableView}" reRender="wrapperPannel"/>

または、別の選択肢は

<a4j:commandLink action="#{yourBean.toggleTableView}">
    <a4j:support event="oncomplete" reRender="wrapperPannel"/>
</a4j:commandLink>

reRender属性はページの構造によって異なる場合がありますが、最後にラッピングパネルのIDを常に参照する必要があることに注意してください。また、RichFacesの後半のバージョンでは、reRenderの名前が単にrenderに変更されました。

したがって、renderTableyourBeanプロパティ(getter + setter)があるとすると、コンポーネントをレンダリングするかどうかを動的に定義するために、toggleTableViewはそれを変更する必要があります。ない(renderTable = false)。


RichFacesの紹介

プロジェクトでRichFacesを設定する際のヘルプについては、 このリンク を確認してください。

20
Fritz

ここのように_h:panelBoxes_を挿入するよりも、タグハンドラーを使用する方が好きです。

<c:choose> <c:when test="#{myBean.yourCondition()}"> <ui:include src="viewA.xhtml"/> </c:when> <c:otherwise> <ui:include src="viewB.xhtml"/> </c:otherwise> </c:choose>

利点:タグハンドラーはコンポーネントを表さず、ビューが構築されるとコンポーネントツリーの一部になることはありません。それはあなたのCSSと相互に干渉しません-逆に、_h:panelBox_はdivまたはspanを挿入します。

タグハンドラー(他の_c:xxx_など)をいじるときは、 Iコンポーネントとタグハンドラーの違い を必ず知っておいてください。つまり、UIコンポーネントとタグハンドラーは異なるフェーズでレンダリングされます。つまり、複合コンポーネントで変数を作成して、ネストされたタグハンドラーで使用することはできません。 _c:choose_と_ui:include_はどちらもタグハンドラーであるため、通常は問題ありません。リンクを読んでください、それは非常に短い例であり、非常に洞察に満ちています。