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
