Setting-up your Project for Skinning

I'd like to share my workflow whenever i have a requirement to quickly test/skin a certain component in ADF.

First of all, install firebug plugin to your mozilla firefox. Don't worry, this will only help us debug our skinning tags for later.

Create two files which you'll need for skinning on your ViewProject.
1. CSS file (of course) - ( eg. MySimpleSkin.css )
2. trinidad-skins.xml - This is where we will define the Skin name which the css file will be linked.

Let's initially configure the trinidad-skins.xml file to link our css file and also configure trinidad-config.xml to use the skin we defined in trinidad-skins.

By this time we can already create a page to test what we got so far. Any page will do, and since we are now extending to blafplus-rich.desktop then you should notice some major skin change from the fusion skin.

Not exactly the coolest of page but what I'd like you to see is the tags applied when i highlighted the component. Getting a hint yet? Yes those are the tags and no that's not what we want to skin. So to configure the tags to show during debug in firefox, we will need to do a little more configuration.

Configure your web.xml to disable the tag compression.

<context-param>
    <param-name>
                 org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION
    </param-name>
    <param-value>true</param-value>
  </context-param>

While you're in the web.xml file, let's also set an extra parameter to be true for the time being that we are designing.

  <context-param>   
    <param-name>
            org.apache.myfaces.trinidad.CHECK_FILE_MODIFICATION
    </param-name>
    <param-value>true</param-value>
  </context-param>

Both these settings will help us during our skinning procedure. Take NOTE that these settings needs to be turned off once you're done to save some processing time. More info on these in the Fusion Developers guide.

After running your app the 2nd time around, FireBug should now show you these tags.

I'm guessing by now you're already curious what each tag means, and yes there are a lot. Help document in JDeveloper is your bestfriend on this one as well as skinning tag guides in rea.oracle.com website and of course, practice will let you know and discover how to skin tags.

Some tips while skinning though.

1. If you're unsure that your skin is being applied, try coloring something that will notice you. I usually color the document green.

2. If you're wondering why your skin isn't taking effect, then clear your internet cache.
3. If you're still not sure, then make sure that you skin files (trinidad-config, trinidad-skins) are pointing correctly to the correct css file.
4. Lastly, if you want to merge skin files (css.files) the best way i found to do this is by using the skin addition in trinidad skins.

Example for #4 is if I'd like to let's say split css files depending on the component or for themes.

Hope that helps in setting your skinning project.