Debugging Tips for Skinning
- by Christian David Straub
Another guest post by Jeanne Waldman.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
