Challenge Engineer Life !

エンジニア人生を楽しみたい!仕事や趣味で学んだ技術的なことを書いていくブログです。

PrimeFacesのTabViewでTabを非表示にする

PrimeFacesのTabViewコンポーネントで、条件によってTabを非表示にしたい状況がありました。

ここではわかりやすくするため、下図の画面を例にします。

タブとして乃木坂46メンバが並んでいる中に堀北真希さんが入っていて、(メンバじゃないので)堀北さんタブを非表示にしたい。

f:id:kikutaro777:20150121203048j:plain

自分の記憶では、PrimeFaces 3.5のときは普通にrenderedで非表示にできたと思うのですが…。PrimeFaces 5.1を使うと
下図のようになります。タブの中身が非表示^^;

f:id:kikutaro777:20150121203053j:plain

他のタブはちゃんと中身も表示されます。

f:id:kikutaro777:20150121203056j:plain

ビューの定義

<p:tabView id="tabview" dynamic="true" cache="false"
         value="#{indexBean.playerList}" var="player">
    <p:tab title="#{player.name}" rendered="#{!player.invisible">
        <h:outputText value="#{player.id}" />
    </p:tab>
</p:tabView>

仕方がないので、こうしました。Tabコンポが持つtitleStyleで、条件満たした際にdisplay : none。

<p:tabView id="tabview" dynamic="true" cache="false"
         value="#{indexBean.playerList}" var="player">
    <p:tab title="#{player.name}" titleStyle="#{player.invisible ? 'display : none;' : ''}">
        <h:outputText value="#{player.id}" />
    </p:tab>
</p:tabView>

実行すると次のようになります。

f:id:kikutaro777:20150121203059j:plain

PrimeFacesのTabViewではactiveIndexを内部で管理していて、renderedでタブを消したときとかに、あまり綺麗に管理されていなかった記憶があります。その辺をトータルに対応するために、中身だけ非表示になかったの…かな。リリースの対応履歴を一応みましたが、それっぽいのは見つけられませんでした。

にほんブログ村 IT技術ブログへ
にほんブログ村 にほんブログ村 IT技術ブログ Javaへ
にほんブログ村