How do you create your own ADF Faces skin?

Question

We are using the default Oracle ADF Faces 10g default skin. It looks super nice, but we want to make tweaks to it (changing the CSS and also how certain components are rendered -- for example the table component will place buttons above and below the table component-- we want them only on the bottom-- this appears to require a programmatic change in order to change this behavior).

Has anyone had success creating their own ADF Faces skin? Please post what you had to do to change component behavior.

Answer 1

we followed this documentation for webcenter spaces:

http://www.oracle.com/technetwork/middleware/webcenter/owcs-r11-extend-spaces-wp-132596.pdf

The documentation makes use of an already existing oracle extension (how to download the source is in the document).

Once we add the application, we simply added a new entry in the META-INF\trinidad-skins.xml :

<?xml version="1.0" encoding="ISO-8859-1"?>
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
  <!-- Previous skins here ... -->
  <skin>
    <id>myskin.custom.desktop</id>
    <family>My Skin</family>
    <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
    <style-sheet-name>custom/spaces/skins/myskin/myskin.css</style-sheet-name>
    <extends>default.desktop</extends>
  </skin>
</skins>

and added the css and img files inside the MET-INF directory in the specified paths (e.g. META-INF/custom/spaces/skins/myskin/myskin.css).

For custom applications on ADF the procedure should be the same.

Answer 2

Since Oracle 11g, Oracle prodives the so called 'skin editor' for your ADF applications.
Until 11.1.7.0, the skin editor was only available as an external application. In the current versions, you can choose for which application version you want to create the skin for your ADF Application (the wizard will give you an option for that when creating a new skin project).

Download Skin Editor:
http://www.oracle.com/technetwork/developer-tools/adf/downloads/index.html

Install instructions:
https://docs.oracle.com/middleware/1212/skineditor/ADFSI/adfsi.htm#ADFSI102

However, since 11.1.7.0 the skin editor is integrated with the Oracle JDeveloper IDE. I already used it for a couple of projects. Although it is easy to get into it and to configure your custom skin, you have to keep in mind that you have to do a lot of manual work to "fully" replace the default skin. There are some components which rely on icons - therefore you have to replace them one by one, using graphical editors (e.g. adobe photoshop or another comparable editor that suits you).