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
