Using jQuery JavaScript library in Oracle ADF Faces (JDeveloper) application

Why jQuery and ADF Faces?

jQuery (as we all know) is quite useful js library and you can do amazing things with it. Oracle ADF Faces (which is based on Apache MyFaces Trinidad JSF library) is very useful and future rich JSF implementation. But, there are times when you do not want to follow all ADF framework bits and pieces and just solve your problem by programing stuff on client side using JavaScript and jQuery.

Steps

Off course, first download jQuery from jQuery site (I prefer non compressed version, because we are using ADF Faces mainly for application inside firewall and with high bandwidth).

Then create lib folder in your ADF application (inside View Controller Project in Web Content folder). Put jQuery library there.

If you want to use have access to jQuery library in all your jspx pages then put following tag in you template (before af:pageTemplateDef):

In this way you load jQuery js library from real path (using request object).

If you want to include jQuery in single page (jspx) then use af:resource (inside af:document) like so:

Using metaContainer facet and af:group is recommended Oracle method for loading js libraries.

Finding components

For finding specific ADF components (or plain simple HTML components), you can use id property from ADF components or you can use class attributes that are defined by ADF Faces.

It can be little tricky to find specific component (because ADF faces is not so simple on browser end), but tools like firebug can help you by identifying specific component and show it's name or id value.