3 Replies Latest reply on Feb 23, 2009 4:32 AM by nbelaevski

    How To: Skinnability: For JSF and seam components !

    allforjava

      Hi,

      I have following queries (w.r.t richfaces developer guide: Skinnability) and issues :

      1. The custom.skin.properties (customized message bundle for skin) are applied excluding scroller-bar, selectOnemenu and toolTip (till now). Whay its not applying skins to these components and how to olve it.

      I'hv used Theme selector for dynamic skin selection in web.xml

       <context-param>
       <param-name>org.richfaces.SKIN</param-name>
       <param-value>#{themeSelector.theme}</param-value>
       </context-param>
      


      along with the skin controls

       <context-param>
       <param-name>org.richfaces.CONTROL_SKINNING</param-name>
       <param-value>enable</param-value>
       </context-param>
      
       <context-param>
       <param-name>org.richfaces.CONTROL_SKINNING_CLASSES</param-name>
       <param-value>le</param-value>
       </context-param>
      


      2. How and where to define .xcss to modify the skinnability specific to wrapping component. e.g I'm using the <s:link> as column header for rich:datatable. It is applied with selected skin color. Instead, I want to contradict the color as per skin selection and that to only for rich:datatable column header only.

      I'hv tried using the .css file however it accepts only constants values and not accepting parameters from custom.skin.properties bundle.

      3. Built-in Skinnability in RichFaces (w.r.t richfaces developer guide): Whats the use of renderer/renderkit? Any sample code how renderer id defined demonstrating the its use

      warm regards

        • 1. Re: How To: Skinnability: For JSF and seam components !
          nbelaevski

          Hello,

          1. The custom.skin.properties (customized message bundle for skin) are applied excluding scroller-bar, selectOnemenu and toolTip (till now). Whay its not applying skins to these components and how to olve it.


          1. Skin contains a set of properties that are used to build values for CSS styling attributes. If something is not affected by skin then most probably it is not skinned (e.g. selectOneMenu and scrollers) or custom skin doesn't redefine values used for skinning this component.

          2. How and where to define .xcss to modify the skinnability specific to wrapping component. e.g I'm using the <s:link> as column header for rich:datatable. It is applied with selected skin color. Instead, I want to contradict the color as per skin selection and that to only for rich:datatable column header only.


          2. Write appropriate CSS selector, e.g.
          .my-custom-class .rich-tree {...}
          and put it into .XCSS file. Load .XCSS file using a4j:loadStyle.

          3. Built-in Skinnability in RichFaces (w.r.t richfaces developer guide): Whats the use of renderer/renderkit? Any sample code how renderer id defined demonstrating the its use


          3. You can find this information in JSF specification or any JSF book.

          • 2. Re: How To: Skinnability: For JSF and seam components !
            allforjava

            Thank you sincerely, nbelaevski (for speedy, specific & structured reply).
            Is there any way I can rate your reply?

            1. Further,


            2. Write appropriate CSS selector, e.g.
            Code:
            .my-custom-class .rich-tree {...}
            

            and put it into .XCSS file. Load .XCSS file using a4j:loadStyle.


            may I get any example/demo (I'm newbie) or any link to tutorials in detail (showing the list of available parameters and way to use components in .xcss).

            2. Do I need to modify any settings in web.xml to load .xcss stylesheet?

            Regards,

            Prathamesh
            India

            • 3. Re: How To: Skinnability: For JSF and seam components !
              nbelaevski

              You welcome.

              1. Example of a4j:loadStyle usage: http://livedemo.exadel.com/richfaces-demo/richfaces/style.jsf?c=loadStyle&tab=usage
              List of classes for each component can be fond in documentation: http://www.jboss.org/file-access/default/members/jbossrichfaces/freezone/docs/devguide/en/html/panel.html#d0e48620

              2. You have to configure RichFaces filter, that's all. If component on your pages are styled correctly, then you've already done it.