6 Replies Latest reply on Jun 14, 2011 10:31 PM by Alex Thomas

    Use BaseGradient / RenderKit for custom gradient

    baguette Newbie

      Hello Forum!


      RichFaces handles the style of buttons through BaseGradient (resource-mappings.properties) and related classes. I've tried a couple of ways to extend this mechanism but to no avail.


      What do I need to do, so that I may use the CustomBaseGradient extends BaseGradient in my project?


      I've tried to put my own /META-INF/richfaces/resource-mappings.properties into the WAR, and it works, but i need to access java code. Thanks for your help!

        • 1. Re: Use BaseGradient / RenderKit for custom gradient
          Alex Thomas Newbie

          Anyone?  Is there a way to do this without writing a custom component or extending an existing component?  If not, when can we expect the CDK documentation for Richfaces 4 to be available?  The ability to easily customize gradients would be a powerful feature.

          • 2. Re: Use BaseGradient / RenderKit for custom gradient
            Nick Belaevski Master



            Can please somebody clarify on the question? Currently it's possible to change gradient colors mapping via skin, provide your own custom gradient via ECSS and reuse BaseGradient for custom component/ECSS. What other use cases are you expecting to be implemented?

            • 3. Re: Use BaseGradient / RenderKit for custom gradient
              Alex Thomas Newbie

              What I'm trying to do is add a cutom gradient to an a4j:outputPanel.  Originally, I went down the same route that baguette appears to have gone down, experimenting with ways to use BaseGradent via ecss to apply a gradient to the body of a panel.  Nothing has worked for me, and I have not come across Richfaces 4 documentation that seems to apply to this case. 


              There are two basic components to what I'm trying to do.  1.  Create a custom gradient.  2.  Apply that gradient to an area of a component that does not normally contain a gradient, i.e., a panel body.  If these capabilities are already implemented, please point me to the pertinent documentation.


              Thanks.  I appreciate the efforts of you and your team on behalf of the community.

              • 4. Re: Use BaseGradient / RenderKit for custom gradient
                baguette Newbie

                I would like to share my experience. There are many ways, this is just a suggestion.


                In order to create a custom gradient, you need to ...


                1.) Create META-INF/richfaces/resource-mappings.properties and set its content to something like:



                This file has the format <libraryName>:<resourceName>=<mappedClass>{<keyA>=<valueA>, <keyB>=<valueB>}. Propeties in {} are optional.


                2.) Create the class: public class FancyGradient extends AbstractJava2DUserResource implements StateHolderResource


                You can then override the paint method in particular. Just see the source code for RichFaces components that extend AbstractJava2DUserResource.


                3.) Introduce the init() method using @PostConstructResource


                You can access every parameter from the mySkin.skin.properties (assume the mySkin.skin.properties defines valueA=blah):



                public void initialize() {

                    FacesContext context = FacesContext.getCurrentInstance();

                    Skin skin = SkinFactory.getInstance(context).getSkin(context);

                    valueA = skin.getParameter(context, "valueA"); // evaluates to blah



                4.) If you want any property to be configurable through the resource-mappings.properties, add getter and setter and anotate the setter with @ResourceParameter



                publice void setValueA(String valueA) {

                    this.valueA = valueA;



                5.) Last but not least, pimp your stylesheet (.ecss):


                .rf-sel.myClass {

                    background-image: background-image: url(#{resource['my.company.project:myFancyGradient.png']});



                Note the \ is gone as opposed to the .properties.


                Note the combined syntax for classes, this will match every class that has .rf-sel (RichFaces select) and .myClass. You may need to tweak this selector to your needs, but maybe just .rf-sel will be enough.


                Hope this helps.

                • 6. Re: Use BaseGradient / RenderKit for custom gradient
                  Alex Thomas Newbie

                  I just got it to work.  It was much easier than I expected.  The more I use this framework, the more I like it.  There was one syntax change required to get the gradient to display.  In the ecss file, the following change was required:




                  .rf-sel.myClass {

                      background-image: background-image: url(#{resource['my.company.project:myFancyGradient.png']});





                  .rf-sel.myClass {

                  background-image: "url(#{resource['my.company.project:myFancyGradient.png']})";