The blog for hints & tips about Oracle Application Development Framework and Mobile Application Framework

How-to learn ADF Skinning

Frank Nimphius
Master Principal Product Manager

Recently I observed an increase of questions on OTN and
Oracle internal that aim for applying CSS on the generated HTML output of an ADF
Faces application. Surely, skinning in ADF is not the same as using CSS in tools
like Dreamweaver, but it is the proper way of applying custom images and colors
to ADF Faces applications. The biggest risk in styling the generated ADF Faces HTML
output with CSS is change in the renderer classes. Oracle constantly works on
improving its ADF Faces components, for example using HTML 5 to replace Flash
and DHTML on some of the ADF Faces components. If you skinned applications on
the generated output, then with each of the changes Oracle applies, your custom
styles will break.

ADF sinning applies style sheet definitions to style
classes at runtime. In contrast to direct output styling, the style classes are
dynamically created and derived from the ADF Faces skin selectors. The
component developer ensures that the style classes are always set to the
correct location in the generated component output, ensuring that changes last
across Oracle JDeveloper versions and component changes. Though I can't save you from learning, I can help
you with pointers to sources you want to be aware of:

ADF skinning is documented in the Oracle® Fusion Middleware
Web User Interface Developer's Guide for Oracle Application Development Framework


An ADF insider recording exists that explains skinning in a
40 minute video. Though this recording doesn't show the new skin editor, you
learn a about how skinning works, how you dynamically detect skins at runtime
and how you debug skins using FireBug in FireFox.


As mentioned, a visual skin editor exists that you can use in
its stand-alone edition for JDeveloper 11g R1 (, applications
and integrated in JDeveloper 11g R2. An article that explains working with the
skin editor and a recommend workflow is published here


To download the stand alone skin editor (JDeveloper 11g R2
has it integrated and no extra download is required), use the link below


To learn about the stand alone and the integrate skin
editor, refer to the Oracle® Fusion Middleware Skin Editor User's Guide for
Oracle Application Development Framework, which you can access online from


To try the skin editor on a JDeveloper 11g R2 sample, you
can run through the hands-on exercise exposed as part of the Oracle learning


A video recording of how to use the skin editor can be found here


 And finally, a list of all skin selectors and ADF Faces
components can be read up in the Oracle Fusion Middleware Tag Reference for
Oracle ADF Faces Skin Selectors


This document is a well written by the ADF Faces component
developers and provides information that you don't find in other documentation. If you worked through all of this, Skinning should no
longer be a problem for you.

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.