ユーザーの情報の詳細をプレーンテキストで表示するか、目的の詳細が現在接続しているユーザーのものである場合は編集可能な入力テキストフィールドで表示する複合コンポーネントを実装しようとしています。
すべてのUIコンポーネントはrendered属性を介してレンダリングできることを知っていますが、UIコンポーネントではないものはどうですか(たとえばdivs)
<div class = "userDetails" rendered = "#{cc.attrs.value.id != sessionController.authUser.id}">
Name: #{cc.attrs.value.name}
Details: #{cc.attrs.value.details}
</div>
<div class = "userDetails" rendered = "#{cc.attrs.value.id == sessionController.authUser.id}">
<h:form>
...
</h:form>
</div>
Divにはrendered属性がないことを知っており、おそらく正しいアプローチをまったく試していません。 JSTLタグは非常に簡単に使用できますが、それは避けたいと思います。
HTML <div>
要素を表す適切なJSFコンポーネントは、layout
属性がblock
に設定された<h:panelGroup>
です。だから、これはする必要があります:
<h:panelGroup layout="block" ... rendered="#{someCondition}">
...
</h:panelGroup>
または、<ui:fragment>
でラップします。
<ui:fragment rendered="#{someCondition}">
<div>
...
</div>
</ui:fragment>
条件付きでレンダリングされたコンポーネントをajax更新する場合は、代わりにその親コンポーネントをajax更新する必要があることに注意してください。
JSF 2.2以降、これは簡単です。パススルー要素を使用することにより、HTML要素を、レンダリングされた属性を持つJSFコンポーネントに変換できます。
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:jsf="http://xmlns.jcp.org/jsf">
<div class="userDetails" jsf:rendered="#{cc.attrs.value.id != sessionController.authUser.id}">
Name: #{cc.attrs.value.name}
Details: #{cc.attrs.value.details}
</div>
</html>
詳しくは https://jsflive.wordpress.com/2013/08/08/jsf22-html5/#elements
HTMLを<h:panelGroup>
でラップするだけです
<h:panelGroup rendered = "#{cc.attrs.value.id != sessionController.authUser.id}">
<div class = "userDetails">
Name: #{cc.attrs.value.name}
Details: #{cc.attrs.value.details}
</div>
</h:panelGroup>
<h:panelGroup rendered = "#{cc.attrs.value.id == sessionController.authUser.id}">
<div class = "userDetails">
<h:form>
...
</h:form>
</div>
</h:panelGroup>
もう1つのオプションは、プロジェクトに既に含まれているSeam(<s:div>
)またはTomahawk(<t:htmlTag>
)ライブラリのコンポーネントを使用することです。
参照: http://www.jsftoolbox.com/documentation/seam/09-TagReference/seam-div.html
<s:div styleClass = "userDetails" rendered = "#{cc.attrs.value.id != sessionController.authUser.id}">
Name: #{cc.attrs.value.name}
Details: #{cc.attrs.value.details}
</s:div>
<s:div styleClass = "userDetails" rendered = "#{cc.attrs.value.id == sessionController.authUser.id}">
<h:form>
...
</h:form>
</s:div>
または: http://myfaces.Apache.org/tomahawk-project/tomahawk12/tagdoc/t_htmlTag.html
<t:htmlTag value="div" styleClass = "userDetails" rendered = "#{cc.attrs.value.id != sessionController.authUser.id}">
Name: #{cc.attrs.value.name}
Details: #{cc.attrs.value.details}
</t:htmlTag>
<t:htmlTag value="div" styleClass = "userDetails" rendered = "#{cc.attrs.value.id == sessionController.authUser.id}">
<h:form>
...
</h:form>
</t:htmlTag>
別の複合コンポーネントを使用できます。 divやその他の追加タグはありません。必要なものだけです。この例を参照してください。
<table>
<tr>...</tr>
<my:cc rendered="false">
<tr>...</tr>
</my:cc>
<my:cc rendered="true">
<tr>...</tr>
</my:cc>
</table>
そして、my:ccコンポーネント:
<?xml version='1.0' encoding='UTF-8' ?>
<!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:cc="http://xmlns.jcp.org/jsf/composite">
<cc:interface>
</cc:interface>
<cc:implementation>
<cc:insertChildren />
</cc:implementation>
</html>
次のHTMLを生成します。追加のタグはまったくなく、ajaxで動作します。
<table><tr>...</tr><tr>...</tr></table>