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>
弟弟的例子(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>
如何在客户端使用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>
最后小提下,Visible和isShowing函数
如果一个组件的visible属性设置为false,当针对于它的一个子组件的isVisivle函数跑的时候,由于这个自组件是visible是设置为true的,因此这时候返回的是true,但是这个子组件实际上是不显示的。显而易见,这样是不合理的,因此RCF提供了isShowing()这个函数来解决这个问题。