ADF: Ghost Labels

To have Ghost Labels on ADF pages:

• jquery is required & can be downloaded from (http://jquery.com/).
• Custom JS is written & can be downloaded from (Google Doc: label-in-field.zip).
• A <af:clientListener> method is added on "load" type.

    <af:document id="d1">
      <af:messages id="m1"/>
      <f:facet name="metaContainer">
        <af:resource type="javascript" source="/jquery-1.7.min.js"/>
        <af:resource type="javascript" source="/label-in-field.js"/>
        <af:resource type="css">
            .text-label {
                color: #cdcdcd;
                font-weight: bold; 
            }
        </af:resource>
      </f:facet>
      <af:form id="f1">
        <af:panelStretchLayout id="psl1">
          <f:facet name="center">
            <af:panelGroupLayout layout="scroll" id="pgl1" halign="center">
              <af:inputText label="Username" id="it1" simple="true"
                            required="true"/>
              <af:inputText label="Password" id="it2" secret="true"
                            simple="true" autoTab="true"/>
              <af:selectOneChoice value="#{bindings.DepartmentId.inputValue}"
                                  id="soc1">
                <f:selectItems value="#{bindings.DepartmentId.items}" id="si1"/>
              </af:selectOneChoice>
            </af:panelGroupLayout>
            <!-- id="af_one_column_stretched"   -->
          </f:facet>
        </af:panelStretchLayout>
      </af:form>
      <af:clientListener type="load" method="onPageLoad"/>
    </af:document>

Final Result will be like:

Note: http://lspatil25.blogspot.in/2012/05/adf-make-findcomponentbyabsoluteid-js.html