Render和visible----------ADF Faces入門（文檔閱讀）

 所有的ADF Faces顯示組件組件都會有兩個屬性用來控制這個組件是否顯示在頁面中讓用戶瞧見，這兩哥們就是rendered 和visible。那咱們來看看它哥兩各自的特點。

rendered屬性有着嚴格的意義，也可以這麼說，這哥特死板。當rendered屬性設置爲false的時候，在不和服務器交互的情況下，你沒有辦法在客戶端顯示這個組件。爲了支持動態隱藏以及顯示，RCF增加了visible屬性（也就是rendered的弟弟，天空一聲巨響，小子閃亮登場），當這屬性設置爲false的時候，在客戶端這個組件標記是可用的，只是它不顯示出來而已，所以只要調用setVisible(true)或者是setVisible(false) 你就可以讓它顯示或者是隱藏，前提是它哥哥是true（rendered），這個方法在JS，java中都可以調用。只有當你確切在無和服務器交互的情況下切換組件的可見性，例如在JS中切換，你應該使用visible，設置visible爲false。此時，不可見的組件仍然要通過組件的聲明週期，包括驗證。如果你不需要在客戶端切換組件的可見性，你應該選擇大哥（rendered）。使用大哥可以提高服務器的性能以及客戶端的響應時間，因爲這個組件在客戶端沒有客戶端的表現，以及不會通過該組件的聲明週期。

大哥（rendered）的例子：

<af:panelGroupLayout
layout="horizontal">
<af:inputText
label="Input some text"
id="input"
value="#{myBean.inputValue}"/>
<af:commandButton
text="Enter"/>
</af:panelGroupLayout>
<af:panelGroupLayout
layout="horizontal">
<af:outputLabel
value="You entered:"/>
<af:outputText
value="No text entered"
id="output1"
rendered="#{myBean.inputValue==null}"/>
<af:outputText
value="#{myBean.inputValue}"
rendered="#{myBean.inputValue !=null}"/>
</af:panelGroupLayout>

<af:panelGroupLayout layout="horizontal"> <af:inputText label="Input some text" id="input" value="#{myBean.inputValue}"/> <af:commandButton text="Enter"/> </af:panelGroupLayout> <af:panelGroupLayout layout="horizontal"> <af:outputLabel value="You entered:"/> <af:outputText value="No text entered" id="output1" rendered="#{myBean.inputValue==null}"/> <af:outputText value="#{myBean.inputValue}" rendered="#{myBean.inputValue !=null}"/> </af:panelGroupLayout>

弟弟的例子（visible）：

<af:panelGroupLayout
layout="horizontal">
<af:inputText
label="Input some text"
id="input"
value="#{myBean.inputValue}"/>
<af:commandButton
text="Enter"/>
</af:panelGroupLayout>
<af:panelGroupLayout
layout="horizontal">
<af:outputLabel
value="You entered:"/>
<af:outputText
value="No text entered"
id="output1"
visible="#{myBean.inputValue==null}"/>
<af:outputText
value="#{myBean.inputValue}"
visible="#{myBean.inputValue !=null}"/>
</af:panelGroupLayout>

<af:panelGroupLayout layout="horizontal"> <af:inputText label="Input some text" id="input" value="#{myBean.inputValue}"/> <af:commandButton text="Enter"/> </af:panelGroupLayout> <af:panelGroupLayout layout="horizontal"> <af:outputLabel value="You entered:"/> <af:outputText value="No text entered" id="output1" visible="#{myBean.inputValue==null}"/> <af:outputText value="#{myBean.inputValue}" visible="#{myBean.inputValue !=null}"/> </af:panelGroupLayout>

如何在客戶端使用JavaScript操作visible，例子：

<f:view>
<af:resource>
function showText()
{
var output1 = 
AdfUIComponent.findComponent("output1")
var output2 = AdfUIComponent.findComponent("output2")
var input = 
AdfUIComponent.findComponent("input")
if (input.value == "")
{
output1.setVisible(true);
}
else
{
output2.setVisible(true)
}
}
</af:resource>
<af:document>
<af:form>
<af:panelGroupLayout
layout="horizontal">
<af:inputText
label="Input some text"
id="input"
value="#{myBean.inputValue}"
clientComponent="true"
immediate="true"/>
<af:commandButton
text="Enter"
clientComponent="true">
<af:clientListener
method="showText"
type="action"/>
</af:commandButton>
</af:panelGroupLayout>
<af:panelGroupLayout
layout="horizontal">
<af:outputLabel
value="You entered:"
clientComponent="false"/>
<af:outputText
value="No text entered"
id="output1"
visible="false"
clientComponent="true"/>
<af:outputText
value="#{myBean.inputValue}"
id="output2"
visible="false"
clientComponent="true"/>
</af:panelGroupLayout>
</af:form>
</af:document>
</f:view>

<f:view> <af:resource> function showText() { var output1 = AdfUIComponent.findComponent("output1") var output2 = AdfUIComponent.findComponent("output2") var input = AdfUIComponent.findComponent("input") if (input.value == "") { output1.setVisible(true); } else { output2.setVisible(true) } } </af:resource> <af:document> <af:form> <af:panelGroupLayout layout="horizontal"> <af:inputText label="Input some text" id="input" value="#{myBean.inputValue}" clientComponent="true" immediate="true"/> <af:commandButton text="Enter" clientComponent="true"> <af:clientListener method="showText" type="action"/> </af:commandButton> </af:panelGroupLayout> <af:panelGroupLayout layout="horizontal"> <af:outputLabel value="You entered:" clientComponent="false"/> <af:outputText value="No text entered" id="output1" visible="false" clientComponent="true"/> <af:outputText value="#{myBean.inputValue}" id="output2" visible="false" clientComponent="true"/> </af:panelGroupLayout> </af:form> </af:document> </f:view>

最後小提下，Visible和isShowing函數

如果一個組件的visible屬性設置爲false，當針對於它的一個子組件的isVisivle函數跑的時候，由於這個自組件是visible是設置爲true的，因此這時候返回的是true，但是這個子組件實際上是不顯示的。顯而易見，這樣是不合理的，因此RCF提供了isShowing()這個函數來解決這個問題。

本文轉自：http://blog.csdn.net/com_d_d/article/details/6153624