Javascript in ADF

Using JavaScript in ADF Faces Rich Client Applications .pdf
Best Practice1:
-----------------
An oven alone doesn’t make a cook. Developers should ensure they understand the ADF Faces client architecture before using JavaScript in ADF Faces applications

Enhancing JavaServer Faces with ADF Faces By design, JavaServer Faces is a server-centric framework that executes server-side logic in response to form submits. In JSF, a client request is handled by up to six lifecycle phases that:
 Prepare the server-side memory tree
 Apply request parameter values
 Perform validation
 Update the business model
 Invoke component listeners and actions
 Prepare the response for render


ADF Faces JavaScript object scopes
---------------------------------------------
JavaScript doesn't know about abstract classes, or private, public and protected scopes. In ADF Faces however all of these are implemented through naming guidelines and coding patterns that application developers should not disregard. Abstract JavaScript classes in ADF Faces are implemented by some of its functions returning AdfAssert.failedInAbstractFunction when invoked. Abstract objects are indirectly used through their subclasses.

Object scopes in ADF Faces, not to be confused with JavaServer Faces memory scopes, are implemented by the following naming conventions:

Best Practice 2:
---------------------
Protected, package, or private methods and variables that DOM inspection tools like Firebug show for ADF Faces components and events should not be used in custom ADF Faces application development.


Adding JavaScript to on a page To use JavaScript on an ADF Faces view, application developers either add JavaScript code to the page source or reference it in an external library file. To ensure that the JavaScript sources are efficiently downloaded to the client,
ADF Faces provides the af:resource component tag, which must be added as a direct descendent of the af:document tag. Using JavaScript in ADF Faces Rich Client Applications 11 … 

/*
===


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

</af:document>

<af:document>
 <af:resource type="javascript">
 function customJsFunction(){ … }
 </af:resource>
 …
</af:document>

*/


Finding ADF Faces components on the client The hierarchy of ADF Faces components on the client is the same as the component hierarchy on the server. The difference though is that not all ADF Faces components are rendered as client objects by default, but server-side generated HTML. For JavaScript to be able to access an ADF Faces component by its client component API, the first development task, therefore, is to ensure that a client component is generated. Creating client components Only components with behavior, like ADF Faces tables, have a default JavaScript object representation. For all other components, a client object is created when one of the following conditions is met: 

 A component has an af:clientListener tag added. The af:clientListener component allows JavaScript function to listen for ADF Faces component events, like select or disclosure events, and browser DOM events like focus, mouse hover, mouse click, or keyboard events.  The component has its clientComponent property set to true.