Difference Between Render and Visible property of component in adf

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.

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>

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.

I hope it would be help full.

Thanks

Prateek