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>