Friday, May 11, 2012

Custom Skin in ADF


All organizations have their own UI standards and would like to have custom look and feel for all the UI's.
Apart from standardizing the UI's using ADF page templates , custom skins are very useful to achieve desired UI look.

Here are the steps to use custom skin in ADF.

1. Create a custom skin like MyCustom.css
In the New Gallery under Categories, expand Web Tier and select HTML.
- A basic css file will be created.
- You can style classes for adf components like :

af|commandButton
af|goButton
af|panelGroupLayout

2. Register a Custom Skin
-create XML file : trinidad-skins.xml

<skins xmlns="http://myfaces.apache.org/trinidad/skin">
<skin>
<id>MyCustom.desktop</id>
 <family>MyCustom</family>
 <extends>blafplus-rich.desktop</extends>
 <style-sheet-name>css/MyCustom.css</style-sheet-name>
</skin>
</skins>

one can have different skin for desktop/pda/mobile etc

like here is one from oracle docs :
<skin>
       <id>MyCustom.pda</id>
       <family>richDemo</family>
       <extends>blafplus-rich.pda</extends>
       <render-kit-id>pda</render-kit-id>
       <style-sheet-name>skins/richdemo/richdemo.css</style-sheet-name>
</skin>

3. Configure the application to use a skin:
Open the trinidad-config.xml file, add below code

<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
  <skin-family>MyCustom</skin-family>
</trinidad-config>

To conditionally set the value, enter an EL expression that can be evaluated to determine the skin to display.
<skin-family>#{facesContext.viewRoot.locale.language=='de' ? 'german' : 'english'}</skin-family>

4.To see your CSS changes without restarting the server
Open web.xml , set following params:

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


For more details refer : http://docs.oracle.com/cd/E16764_01/web.1111/b31973/af_skin.htm
Also refer : http://myfaces.apache.org/trinidad/skin-selectors.html