If you are developing a skin for your Fusion Application in JDeveloper you should know these tips.

 

1. Firebug is your friend

2. Uncompress the css style classes

3. CHECK_FILE_MODIFICATION so that you see your skinning changes right away 4. View the generated CSS File

 

1. Firebug is your friend

Install Firebug (http://getfirebug.com/layout) into Firefox and use it to view your rendered jspx page in the browser. You can select the HTML dom nodes on your page and you can see the css styles applied to each dom node.

 

2. Uncompress the css style classes

By default the styleclasses that are rendered are compressed. You may see style classes like class="x10" and class="x2e". But in your skin css file you have styleclasses like:

af|inputText::content or

af|panelBox::header

 

It is easier for you to develop a skin and debug a skin with Firebug if you see the uncompressed styleclasses. To do this, a. open web.xml b. add

  <context-param>

   

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

    <param-value>true</param-value>

  </context-param>

c. save

d. restart the server and re-run your page.

 

3. CHECK_FILE_MODIFICATION so that you see your skinning changes right away

 

For performance sake the ADF Faces framework does not check if you skin .css file has changed on every render. But this is exactly what you want to happen when you are developing or debugging a skin. You want your changes to get noticed right away, without restarting the server.

 

To do this,

a. open web.xml

b. add

  <context-param>

    <description>If this parameter is true, there will be an automatic check of the modification date of your JSPs, and saved state will be discarded when JSP's change. It will also automatically check if your skinning css files have changed without you having to restart the server. This makes development easier, but adds overhead. For this reason this parameter should be set to false when your application is deployed.</description>

   

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

    <param-value>false</param-value>

  </context-param>

c. save

d. restart the server and re-run your page.

e. from then on, you can change your skin's .css file, save it and refresh your page and you should see the changes right away

 

4. View the generated CSS File

 

There are different ways to view the generated CSS File which is your skin's css file merged in with all the skins it extends and processed and generated to the filesystem and linked to your generated html page.

One way is to view it with Firebug. The problem with this approach is you might see something that is a little different than the actual css file because Firebug may do some extra processing.

I like to view the generated css file by:

Right click on your page in the browser