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

ADF: Make findComponentByAbsoluteId JS work

JS: AdfPage.PAGE.findComponentByAbsoluteId(componentId); 
To make it work:

• There must be some validation/behaviour property or client attribute present in that component (as in figure, maximum length is present).
• Or the component itself should be client component.

<af:inputText label="Label 1" id="it1">
   <af:clientAttribute name="defaultFocusField" value="Y"/>
</af:inputText>

ADF: Including javascript/JS or CSS on JSF pages

How to include javascript or CSS on JSF page:
Drag and drop "resource" from operation pallet to page & select JS/CSS accordingly. "source" is optional, so you can either specify location or include js/css directly on page.

Note: you can include resource anywhere on page, but the more appropriate location will be inside "metaContainer" facet of <af:document >.

<f:facet name="metaContainer">
  <af:resource type="javascript" source="/js/custom.css" />
  <af:resource type="javascript">
    function lsp(){
      alert('hi');
    }
  </af:resource>
  <af:resource type="css">
    .text-label{
      color: #cdcdcd;
      font-weight: bold;
    }
  </af:resource>
</f:facet>

On page, wherever you want to call method from JS; just use <af:clientListener >.

 <af:commandbutton id="cb1" text="commandButton 1">
     <af:clientlistener method="lsp" type="action" />
  </af:commandbutton>