Adding Javascripts or inline CSS to ADF page

The best way to add javascript or css to ADF page is use of af:resource. This component adds CSS or JavaScript resource to rendered HTML header. Tag af:resource is processed on the initial creation of the document.

You can point external js or css file, as shown bellow:

<af:document>
   <af:resource type="javascript" source="/js/MyJsCode.js"/>
...
</af:document>

or insert javascript / css code inside tag body:

<af:document>
   <af:resource type="javascript">
      function myJavascriptFunction(){
          alert('This is my function');
      }
   </af:resource>
...
</af:document>

The parent of a af:resource component should be af:document. There is not recommended use of af:resource inside other adf component.

Another way of adding scripts/css to ADF page is "standard" JSF way:
<af:document>
...
   <f:facet>
      <script type="text/javascript">
          function myJavascriptFunction(){
            alert('This is my function');

          }
      </script>
   </f:facet>
...
</af:document>

If you need put CSS into <f:facet> you can encounter problems when compiling. To avoid simillar problems you can wrap tags <style></style> section <![CDATA[ ]]>.