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）的例子：

[xhtml] view plaincopyprint?

1. <af:panelGroupLayoutlayout="horizontal">
2. <af:inputTextlabel="Input some text"id="input"
3. value="#{myBean.inputValue}"/>
4. <af:commandButtontext="Enter"/>
5. </af:panelGroupLayout>
6. <af:panelGroupLayoutlayout="horizontal">
7. <af:outputLabelvalue="You entered:"/>
8. <af:outputTextvalue="No text entered"id="output1"
9. rendered="#{myBean.inputValue==null}"/>
10. <af:outputTextvalue="#{myBean.inputValue}"
11. rendered="#{myBean.inputValue !=null}"/>
12. </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）：

[xhtml] view plaincopyprint?

1. <af:panelGroupLayoutlayout="horizontal">
2. <af:inputTextlabel="Input some text"id="input"
3. value="#{myBean.inputValue}"/>
4. <af:commandButtontext="Enter"/>
5. </af:panelGroupLayout>
6. <af:panelGroupLayoutlayout="horizontal">
7. <af:outputLabelvalue="You entered:"/>
8. <af:outputTextvalue="No text entered"id="output1"
9. visible="#{myBean.inputValue==null}"/>
10. <af:outputTextvalue="#{myBean.inputValue}"
11. visible="#{myBean.inputValue !=null}"/>
12. </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，例子：

[xhtml] view plaincopyprint?

1. <f:view>
2. <af:resource>
3. function showText()
4. {
5. var output1 = AdfUIComponent.findComponent("output1")
6. var output2 = AdfUIComponent.findComponent("output2")
7. var input = AdfUIComponent.findComponent("input")
8. if (input.value == "")
9. {
10. output1.setVisible(true);
11. }
12. else
13. {
14. output2.setVisible(true)
15. }
16. }
17. </af:resource>
18. <af:document>
19. <af:form>
20. <af:panelGroupLayoutlayout="horizontal">
21. <af:inputTextlabel="Input some text"id="input"
22. value="#{myBean.inputValue}"clientComponent="true"
23. immediate="true"/>
24. <af:commandButtontext="Enter"clientComponent="true">
25. <af:clientListenermethod="showText"type="action"/>
26. </af:commandButton>
27. </af:panelGroupLayout>
28. <af:panelGroupLayoutlayout="horizontal">
29. <af:outputLabelvalue="You entered:"clientComponent="false"/>
30. <af:outputTextvalue="No text entered"id="output1"
31. visible="false"clientComponent="true"/>
32. <af:outputTextvalue="#{myBean.inputValue}"id="output2"
33. visible="false"clientComponent="true"/>
34. </af:panelGroupLayout>
35. </af:form>
36. </af:document>
37. </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