Richfaces 自定义皮肤的两种方法

 Method one: change the whole application’s skin

  RichFaces comes with several skins: 

 To use a skin, all you need to do is set the name in web.xml file: 

<context-param>

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

                      <param-value>ruby</param-value>

                  </context-param> 

Suppose you like the skin, but you want to make some small changes to it. Here is what to do.  

Unzip richfaces-impl-3.x.x.GA.jar file. All the skin files are under META-INF/skin  

Take the skin you want to modify and save it under a different name in the root of your Java source folder. For example yourskinname.skin.properties  

Open the file and change the parameter you need. For example, changing the general font from 11px to 14px:    generalSizeFont=14px,then just set the new skin in web.xml file:

 

<context-param>

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

                       <param-value> yourskinname </param-value>

 </context-param>

 

Save and restart the server. Then you can see the change

 

  Method two: change the component’s skin(Plug-n-skin)      

    Copy and paste these Maven instructions to command line and execute them.

      

mvn archetype:create

-DarchetypeGroupId=org.richfaces.cdk

-DarchetypeArtifactId=maven-archetype-plug-n-skin

-DarchetypeVersion= 3.2.2.GA

-DartifactId=skin

-DgroupId=GROUP-ID

-Dversion= 1.0.-SNAPSHOT

 

Then, in  the  root  folder  of Maven  project  (the  one  that  contains  "pom.xml"  file)  you  should  run  the following command in the command line:

 

mvn cdk:add-skin -DbaseSkin=blueSky -DcreateExt=true -Dname=PlugnSkinDemo -Dpackage=SKINPACKAGE 

 

Now you can start editing the XCSS files located in "\src\main\resources\SKIN-PACKAGE\SKIN-

NAME\css\". New style properties can be assigned to the selectors (the selectors listed in the

XCSS files) in two ways, which are both valid, and it’s up to the developer what way to choose. 

The first way is to give css properties to the given selectors, such as: 

<f:verbatim>

                                  <![CDATA[             

                                       .rich-panel-header {

                                       font-weight:bold;background:#999999;

                                       border:3px solid #CD0000;

                                                                }

                                    ]]>

</f:verbatim>

 

The only thing, you have to keep in mind is that the selectors must be inside <f:verbatim> <![CDATA[ ...]]> </f:verbatim> tags 

The second way is to give the selectors properties and values (skin).such as: 

<u:selector name=".rich-panel">

                                  <u:style name="background-color" skin="headerBackgroundColor"/>  

                         <u:style name="border-width"  skin="tableBorderWidth"/>

                         <u:style name="border-style" value="solid" />    

                         <u:style name="border-color" value="#9A32CD" /> 

</u:selector>

 

Annotation: “skin” means use the base skin’s feature

 

But you have to bear in mind that the XCSS tags have to be placed outside <f: verbatim> <![CDATA[ ...]]> </f:verbatim>

 

Now we will  see  how  font  style  of  a  standard HTML  element  can  be  changed. We will take submit button for example.Please,open "extended.xcss" file located in "skin\src\main\resources\skinpackage\plugnskindemo\css\" and  put   “ font-weight:  bold; “ inside  the  curly  braces  of  these  coma  separated selectors  ,the CSS code should look like this.

 

button[type=&quot;button&quot;],  button[type=&quot;reset&quot;],

                                                button[type=&quot;submit&quot;],  input[type=&quot;re

 input[type=&quot;submit&quot;], input[type=&quot;button&quot;] {

font-weight: bold;

}

 

 As you read in the previous section, the skin should be built in the "skin" folder of the skin project by executing "mvn clean install "command.  This  procedure  results  in  creating  a  "target"  folder  that  contains  a  .jar  file  with  a compiled new skin, it our case the file is named "skin-1.0.-SNAPSHOT.jar". The next step is to import the new PlugnSkinDemo skin into the project.

 

What you need to do in order to have the new skin imported to the project is to

• Copy the "skin-1.0.-SNAPSHOT.jar" file to the "\WebContent\WEB-INF\lib\" folder.

 

Annotation: If you don’t want to add the xxx.jar to your project, you can use myeclipse to configure the bulidpath and add your skin project to web project

 

• Add the new skin's name to the "web.xml" file. It is done like this

 

<context-param>

                                                   <param-name>org.ajax4jsf.SKIN</param-name>

                                                   <param-value>PlugnSkinDemo</param-value>

<context-param>

 

Please, do not forget that standard controls skinning has to be enabled in the "web.xml" file, which

can be done by adding the following code to the "web.xml" file:

 

<context-param>

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

                                                      <param-value>enable</param-value>

                                      </context-param>

 

OK, everything is done, restart your server and enjoy your new skin.