Difference between Render and Visible property of component:
In this post i would like to explain difference between Render and Visible
Render property decide whether this component need to render on UI or not.Or whether this component added into tree model or not.
Moreover all ADF component will render into html.if we put render false on any component then in this case ADF render kit is not going to create the html code for that component.and since no html code generated so that this component is not going to participate in ADF/JSF life cycle.
Visible is same as Render but it differ slightly.If the visible if false still html code will generated from render kit and also it is going to participate in life cycle even though it is not visible.
The following use case will explain the situation where we need to bit caution if we are using visible false and require true at same time .
Suppose you have one UI page which contains more than 10-20 components.But by mistake you make one component as visible false and require true.And if you are submitting the form then in this case it is not going to submit the form because on the process validation phase the validation is failing so the life cycle is advance to render response and same time also it is not reporting any error message on UI.
Apart from this also we do not have any clue why page in not submitting.Because it is client side validation and internally it is throwing error message but component it self is not visible so how it will show error message on UI.
Practical Explanation :
For Explaining above scenario i have created one page which contains following code
if you run the project and i you have fire bug install on Mozilla then you can see the following htnl code :
And if you make first input text component as render false.and run the page then in this case if you see the html code through fire bug it does not have html code for that.
And if you make second component as visible false and run the page then in this case you can see the html code of this component.
Last point but this is very importance point .
if you make second component visible false and require true and try to submit. It will not navigate you to on second page because require validation if failed of second component.
But we have one option to see the require message and that option is
<h:messages id="m1"></h:messages>
put this code on the page and run the page .And if you click on the button it will show global message on the page saying require validation is failed.
In this post i would like to explain difference between Render and Visible
Render property decide whether this component need to render on UI or not.Or whether this component added into tree model or not.
Moreover all ADF component will render into html.if we put render false on any component then in this case ADF render kit is not going to create the html code for that component.and since no html code generated so that this component is not going to participate in ADF/JSF life cycle.
Visible is same as Render but it differ slightly.If the visible if false still html code will generated from render kit and also it is going to participate in life cycle even though it is not visible.
The following use case will explain the situation where we need to bit caution if we are using visible false and require true at same time .
Suppose you have one UI page which contains more than 10-20 components.But by mistake you make one component as visible false and require true.And if you are submitting the form then in this case it is not going to submit the form because on the process validation phase the validation is failing so the life cycle is advance to render response and same time also it is not reporting any error message on UI.
Apart from this also we do not have any clue why page in not submitting.Because it is client side validation and internally it is throwing error message but component it self is not visible so how it will show error message on UI.
Property | Render (true) | Render (false) | Visible (true) | Visible (false) |
Html Code Generation | Yes | No | Yes | Yes |
Participating in life cycle | Yes | No | Yes | Yes |
Required validation | Yes | No | Yes | Yes |
Coming on UI Screen | Yes | No | Yes | No |
Practical Explanation :
For Explaining above scenario i have created one page which contains following code
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<f:view>
<af:document id="d1">
<af:form id="f1">
<af:panelFormLayout id="pfl1">
<af:inputText label="RenderComponent" id="it1"
binding="#{backingBeanScope.backingBean.renderComponentBinding}"/>
<af:inputText label="VisibleComponent" id="it2"
binding="#{backingBeanScope.backingBean.visibleComponentBinding}"/>
<af:commandButton text="Next Page" id="cb1"
actionListener="#{backingBeanScope.backingBean.renderComponentActionListener}"/>
</af:panelFormLayout>
</af:form>
</af:document>
</f:view>
</jsp:root>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<f:view>
<af:document id="d1">
<af:form id="f1">
<af:panelFormLayout id="pfl1">
<af:inputText label="RenderComponent" id="it1"
binding="#{backingBeanScope.backingBean.renderComponentBinding}"/>
<af:inputText label="VisibleComponent" id="it2"
binding="#{backingBeanScope.backingBean.visibleComponentBinding}"/>
<af:commandButton text="Next Page" id="cb1"
actionListener="#{backingBeanScope.backingBean.renderComponentActionListener}"/>
</af:panelFormLayout>
</af:form>
</af:document>
</f:view>
</jsp:root>
if you run the project and i you have fire bug install on Mozilla then you can see the following htnl code :
And if you make first input text component as render false.and run the page then in this case if you see the html code through fire bug it does not have html code for that.
Last point but this is very importance point .
if you make second component visible false and require true and try to submit. It will not navigate you to on second page because require validation if failed of second component.
But we have one option to see the require message and that option is
<h:messages id="m1"></h:messages>
put this code on the page and run the page .And if you click on the button it will show global message on the page saying require validation is failed.
I hope it would be help full.
Thanks
Prateek