RichFaces Migration Guide. 3.3.x - 4.x Migration - Skinning

Version 1
    IMPORTANTThat document is under continous development. It's published in order you to have the fastest access to all the new info posted there even considering that document itself will be extended more in the same time. So please be patient, and do not forget leave your feedback and requests for additional information at RichFaces Space Forum. We could do it really great together!

    Skins context-parameters

    That table shows the changes in configuration parameters related to Skins:

     

    RichFaces 4.xRichFaces 3.3.xDescription
    org.richfaces.skin

    org.richfaces.SKIN

    org.ajax4jsf.SKIN

    sets current application skin. Supports EL for value and could be changed in runtime.
    org.richfaces.baseSkinorg.richfaces.BASE_SKINsets the base skin for current skin. (all the properties not defined in current skin will be taken from base)
    org.richfaces.enableControlSkinningorg.richfaces.CONTROL_SKINNINGNote: now it's boolean property. true when you want turn standard skinning on globally
    org.richfaces.enableControlSkinningClassesorg.richfaces.CONTROL_SKINNING_CLASSES

    Note: now it's boolean property. true when you want load standard skinning stylesheets for explicit skinning classes definitions.

    -org.richfaces.CONTROL_SKINNING_LEVELSupport for old browsers like IE6 dropped. So not needed anymore.



     

     

    Built-in Skins

    The list of the skins available in RF 4:

     

    • blueSky
    • emeraldTown
    • ruby
    • classic
    • japanCherry
    • wine
    • deepMarine
    • NULL
    • DEFAULT
    • plain

     

    Note: laguna, glassX and darkX are not available - please refer to Plug'n'Skin section below.

     

    Skining stylesheets format

    Proprietary XCSS XML format are not supported anymore. Now we using ECSS (EL css) files which are the same CSS under the hood but allows referencing skin parameters dynamically using EL expressions. Example of simple panel ECSS stylesheet:

     

    .rf-panel{
     background-color:'#{richSkin.generalBackgroundColor}';
     color:'#{richSkin.panelBorderColor}';
     border-width:1px;
     border-style:solid;
     padding:1px;
    }
    
    .rf-panel-header{
    background-image:"url(#{resource['org.richfaces.renderkit.html.GradientA']})";
    }
    … other classes
    

     

    Loading the stylesheets

    a4j:loadStyle are not supported anymore. Just not needed as JSF 2 provides:

     

    <h:outputStylesheet name="panel.ecss"/>

    to load from the page.

    @ResourceDependency(name = "panel.ecss")

    To add resource dependency to the renderer classes.

    Plug'n'Skin

    Just not migrated in RF 4 final. Follow our announcements to learn more about migration plans.

     

    Standard Elements Skinning

    Just see the context parameters changes from above. In general feature remained  the same.

    Resource Plugin

    TBD