8 Replies Latest reply on Dec 27, 2011 12:31 AM by ashishagw

    How to customize the Skin in richfaces

    ashishagw

      I want to customize whole look and feel of my web application. Currently am using Richfaces 4.1.0.

      1st Trial:

      To customize the SKIN I tried to follow http://www.packtpub.com/article/skin-customization-in-jboss-richfaces-3.3

      1. Added mySkin properties file.
      2. Updated Buld.xml
      3. Updated Web.xml.

      But All this is not fruitful. I am not able to customize the SKIN.

      2nd Trial:

      Ref Link:- http://docs.jboss.org/richfaces/latest_4_1_X/Developer_Guide/en-US/html/chap-Developer_Guide-Skinning_and_theming.html

      <context-param> <param-name>org.richfaces.skin</param-name> 
      <param-value>emeraldTown</param-value> </context-param>

      But this is also not working. To get it working am I required to add any additional RESOURCE??

      3rd Trial:

      <rich:tabPanel switchType="client" style="width: 70%;margin: auto;background-color:red;">

                     
      <rich:tab header="Overview">
                          Tab 1 Content
                     
      </rich:tab>
                     
      <rich:tab header="JSF 2 and RichFaces 4">
                          Tab 2 Content
                     
      </rich:tab>

             
      </rich:tabPanel>

      I tried to put background color Explicitly, but even this is failing.
      Please Help

        • 1. Re: How to customize the Skin in richfaces
          pvito

          Hi, Ashish Agarwal

           

          This works for me:

           

          @ManagedBean

          @SessionScoped

          public class WarSettings {

           

              private List<SelectItem> skinList;

              private String skin = "DEFAULT";

           

           

              public WarSettings() {

                  this.skinList = new ArrayList<SelectItem>();

                  this.skinList.add(new SelectItem("DEFAULT", "DEFAULT"));

                  this.skinList.add(new SelectItem("wine", "wine"));

                  this.skinList.add(new SelectItem("ruby", "ruby"));

                  this.skinList.add(new SelectItem("japanCherry", "japanCherry"));

                  this.skinList.add(new SelectItem("emeraldTown", "emeraldTown"));

                  this.skinList.add(new SelectItem("deepMarine", "deepMarine"));

                  this.skinList.add(new SelectItem("classic", "classic"));

                  this.skinList.add(new SelectItem("blueSky", "blueSky"));

              }

           

              public List<SelectItem> getSkinList() {

                  return skinList;

              }

           

              public void setSkinList(List<SelectItem> skinList) {

                  this.skinList = skinList;

              }

           

              public String getSkin() {

                  return skin;

              }

           

              public void setSkin(String skin) {

                  this.skin = skin;

              }

          }

           

          web.xml

          -//-

             <context-param>

                 <param-name>org.richfaces.skin</param-name>

                 <param-value>#{warSettings.skin}</param-value>

              </context-param>

          -//-

           

          facelet:

          -//-

           

             <h:form>

                <h:selectOneMenu value="#{warSettings.skin}" valueChangeListener="#{warSettings.saveToCookie}">

                   <f:selectItems value="#{warSettings.skinList}"/>

                 <a4j:ajax event="valueChange" execute="@form" oncomplete="location.reload();"/>

                </h:selectOneMenu>

             </h:form>

          -//-

           

          Regards, Vitaliy

          • 2. Re: How to customize the Skin in richfaces
            ashishagw

            Hi Vitaliy,

             

            Thanks for the help. I have few doubts with the above code

            1. Am I required to add any .Jar files to the project to achieve the goal.
            2. I guess your code is baiscally to change the Skin @runtime, but basically you are specifing the things in web.xml only. Just like my "2nd Trail". Am I correct?? If NOT, then how my 2nd Trail was failing, Can you please help me in understanding the things please.

             

            Your help is solicited.

             

            Thanks

            Ashish

            • 3. Re: How to customize the Skin in richfaces
              pvito

              Usually adding

               

              <context-param>

                <param-name>org.richfaces.skin</param-name>
                <param-value>emeraldTown</param-value>

              </context-param>

               

              into web.xml is enough.

               

              Libraries:

               

              sac-1.3.jar

              guava-r09.jar

              cssparser-0.9.5.jar

               

              must be in your project.

               

              Regards, Vitaliy

              1 of 1 people found this helpful
              • 4. Re: How to customize the Skin in richfaces
                ashishagw

                Yes..I  have added these jar files and have added the required things in Web.xml.

                 

                Can you please give me a link from where I can download a wroking exmaple to see the difference in my code and debug the things.

                 

                Or Can you please suggest me where am I going wrong?

                • 5. Re: How to customize the Skin in richfaces
                  pvito

                  I may send for You source code for example by e-mail

                  • 6. Re: How to customize the Skin in richfaces
                    ashishagw

                    Hi Vitaliy,

                     

                    It would great help if you can send me the code.

                     

                    My email id is ashish****@*****.com

                     

                    I am using Netbeans as IDE, if you can give me code that I can import directly in that would again the greatest kind of help, otherwise , even other case would be a great help.

                     

                    Eagerly waiting for the reply.

                     

                    Thanks

                    Ashish

                    • 7. Re: How to customize the Skin in richfaces
                      pvito

                      I sended  project for you.

                      I deleted libraries from project, to reduce size, but I enumerate all need libraries in 1.txt file.

                      • 8. Re: How to customize the Skin in richfaces
                        ashishagw

                        Hi Vitaliy,

                         

                        I tried few Different things, but for

                        1st Trail &

                        2ndTrail

                        I found the solution.

                         <mime-mapping>
                                   
                        <extension>ecss</extension>
                                   
                        <mime-type>text/css</mime-type>
                               
                        </mime-mapping>

                        was missing in web.xml, on adding the above line, I started to get expected results.

                        Speical Thanks to Vitaliy for the great HELP and EMAIL.