红帽全球峰会此内容没有您所选择的语言版本。
4.4.11. Plug-n-Skin
Plug-n-Skin lets you easily create, customize, and plug in a custom skin to your project. You can create skins based on the parameters of predefined RichFaces skins. Plug-n-Skin also lets you unify the appearance of rich controls with standard HTML elements. This section contains step-by-step instructions for creating your own skin with Plug-n-Skin.
First, use Maven to create a template for your new skin. (You can find more information about configuring Maven for RichFaces in the JBoss wiki article. These Maven instructions can be copied and pasted into the command line interface to execute them.
Primary keys for the command:
archetypeVersion— indicates the RichFaces version; for example,3.3.1.GAartifactId— the artifact ID of the projectgroupId— the group ID of the projectversion— the version of the project you create. By default, this is set to1.0.-SNAPSHOT
This operation creates a directory named after your
ARTIFACT-ID. The directory contains a template of the Maven project.
The following steps will guide you though creating of the skin itself.
Run the following command from the root directory of the Maven project. (This directory will contain your
pom.xml file.)
... mvn cdk:add-skin -Dname=SKIN-NAME -Dpackage=SKIN-PACKAGE ...
...
mvn cdk:add-skin -Dname=SKIN-NAME -Dpackage=SKIN-PACKAGE
...
Primary keys for the command:
name— defines the name of the new skinpackage— the base package of the skin. By default, the project'sgroupIdis used.
Additional optional keys for the command:
baseSkin— defines the name of the base skin.createExt— if set totrue, extended CSS classes are added. For more information, please, see Section 4.4.8, “Standard Controls Skinning”.
Refer to Table 4.34, “Files and Fodlers Created By the
mvn cdk:add-skin -Dname=SKIN-NAME -Dpackage=SKIN-PACKAGE Command” for which files are created by the command.
|
File Name
|
Location
|
Description
|
|---|---|---|
BaseImage.java
| \src\main\java\SKIN-PACKAGE\SKIN-NAME\images\
|
the base class used to store images.
|
|
BaseImageTest.java
| \src\test\java\SKIN-PACKAGE\SKIN-NAME\images\
|
a test version of a class that stores images.
|
|
XCSS files
| \src\main\resources\SKIN-PACKAGE\SKIN-NAME\css\
|
define the new look of RichFaces components affected by the new skin.
|
SKIN-NAME.properties
| \src\main\resources\SKIN-PACKAGE\SKIN-NAME\css\
|
a file that contains the new skin's properties.
The following properties are used to configure the
SKIN-NAME.properties file:
|
SKIN-NAME.xcss
| src\main\resources\META-INF\skins
|
an XCSS file that imports the component's XCSS files to be modified by the new skin.
|
|
XCSS files
| \src\main\resources\SKIN-PACKAGE\SKIN-NAME\css\
|
determine styles for standard controls (
extended_classes.xcss and extended.xcss), if the createExt key is set to true.
|
SKIN-NAME-ext.xcss
| src\main\resources\META-INF\skins.
|
imports defining styles for standard controls if
createExt is set to true.
|
SKIN-NAME-resources.xml
| src\main\config\resources.
|
contains descriptions of all files listed previously.
|
You can now start editing the XCSS files located in
\src\main\resources\SKIN-PACKAGE\SKIN-NAME\css\. Assign new style properties to your selectors (listed in the XCSS files) in either of the following ways:
- Standard CSS coding approach (that is, add CSS properties to the selectors). Remember that the selectors must be within
<f:verbatim> </f:verbatim>tags. For example:... .rich-calendar-cell { background: #537df8; } ...... .rich-calendar-cell { background: #537df8; } ...Copy to Clipboard Copied! Toggle word wrap Toggle overflow - XCSS coding approach (the usual method of creating XCSS files in RichFaces). XCSS tags must be placed outside
<f:verbatim> </f:verbatim>tags.Copy to Clipboard Copied! Toggle word wrap Toggle overflow
Once you have performed these steps and edited the XCSS files, build the new skin and plug it into the project. To build the skin, execute the following command from the root directory of your skin project (the directory that contains your
pom.xml file):
... mvn clean install ...
...
mvn clean install
...
The Plug-n-skin feature also has a number of predefined gradients. The following code can be used to apply a gradient:
The
background-image CSS property is defined with <f:resource f:key="org.richfaces.renderkit.html.CustomizeableGradient">, which sets the gradient. The gradient type can be specified in the SKIN-NAME.properties with the gradientType property, which can be set to glass, plastic, or plain. The gradient can then be adjusted with the baseColor, gradientColor, gradientHeight, valign attributes, as seen in the previous code snippet.
You can now use your newly-created skin in your project by adding your new skin parameters to the
web.xml file, and placing the JAR file containing your skin (located in the target directory of your skin project) in the \WebContent\WEB-INF\lib\.
4.4.11.1. Details of Usage
复制链接链接已复制到粘贴板!
This section covers some practical aspects of Plug-n-Skin implementation. We assume that you have read the section of the guide describing the Plug-n-Skin prototype creation process.
First, we must create a new skin (as described in the previous section). The following creates a template of the new skin project:
You can now browse the
P-n-S directory to view the files and folders created.
Next, use Maven to add all required files to the skin project, like so:
mvn cdk:add-skin -DbaseSkin=blueSky -DcreateExt=true -Dname=PlugnSkinDemo -Dpackage=SKINPACKAGE
mvn cdk:add-skin -DbaseSkin=blueSky -DcreateExt=true -Dname=PlugnSkinDemo -Dpackage=SKINPACKAGE
As mentioned in the previous section,
-DbaseSkin defines the RichFaces built-in skin to use as a base, and -DcreateExt=true, which determines that the new skin will include XCSS files that unify the appearance of the rich components and the standard HTML controls.
Once your resources have been created, you can begin refining the newly-created skin. Begin by editing the rich components' XCSS files.
As an example of the Plug-n-Skin feature, we will edit some
<rich:calendar> style attributes and some basic HTML controls. We will show you how to:
- Recolor the background of the current day in the
<rich:calendar>; - Recolor a standard HTML submit button;
To edit
<rich:properties>'s style properties, you must open the calendar.xcss file, located in P-n-S\src\main\resources\skinpackage\plugnskindemo\css\.
In the
calendar.xcss file, find the .rich-calendar-today selector and amend it as follows:background-color: #075ad1;. This will change the background color of the current day.
Next we will change the font style of a standard HTML submit button. Open the
extended.xcss file from the P-n-S\src\main\resources\skinpackage\plugnskindemo\css\ directory and insert font-weight: bold; between the curly braces of these selectors, like so:
button[type="button"], button[type="reset"], button[type="submit"], input[type="reset"], input[type="submit"], input[type="button"] {
font-weight: bold;
}
button[type="button"], button[type="reset"], button[type="submit"], input[type="reset"], input[type="submit"], input[type="button"] {
font-weight: bold;
}
The desired changes have now been made, and you can proceed to building the new
PlugnSkinDemo skin and importing it into the project.
Build the skin by executing
mvn clean install from the P-n-S directory. This creates a target directory containing a JAR file with a newly-compiled skin. In our case, the file is named P-n-S-1.0.-SNAPSHOT.jar.
Next, import the new
PlugnSkinDemo skin into your project:
- Copy the
P-n-S-1.0.-SNAPSHOT.jarfile to the\WebContent\WEB-INF\lib\directory. - Add the name of the new skin to the
web.xmlfile, like so:<context-param> <param-name>org.ajax4jsf.SKIN</param-name> <param-value>PlugnSkinDemo</param-value> </context-param>
<context-param> <param-name>org.ajax4jsf.SKIN</param-name> <param-value>PlugnSkinDemo</param-value> </context-param>Copy to Clipboard Copied! Toggle word wrap Toggle overflow
Remember, standard controls skinning must be enabled in
web.xml. Add the following to enable standard controls skinning:
<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</param-name>
<param-value>enable</param-value>
</context-param>
The results of each alteration to the skin are shown in the figures that follow:
Figure 4.6. Plug-n-Skin feature in action.
'%20d='M201.5%20305.5c-13.8%200-24.9-11.1-24.9-24.6%200-13.8%2011.1-24.9%2024.9-24.9%2013.6%200%2024.6%2011.1%2024.6%2024.9%200%2013.6-11.1%2024.6-24.6%2024.6zM504%20256c0%20137-111%20248-248%20248S8%20393%208%20256%20119%208%20256%208s248%20111%20248%20248zm-132.3-41.2c-9.4%200-17.7%203.9-23.8%2010-22.4-15.5-52.6-25.5-86.1-26.6l17.4-78.3%2055.4%2012.5c0%2013.6%2011.1%2024.6%2024.6%2024.6%2013.8%200%2024.9-11.3%2024.9-24.9s-11.1-24.9-24.9-24.9c-9.7%200-18%205.8-22.1%2013.8l-61.2-13.6c-3-.8-6.1%201.4-6.9%204.4l-19.1%2086.4c-33.2%201.4-63.1%2011.3-85.5%2026.8-6.1-6.4-14.7-10.2-24.1-10.2-34.9%200-46.3%2046.9-14.4%2062.8-1.1%205-1.7%2010.2-1.7%2015.5%200%2052.6%2059.2%2095.2%20132%2095.2%2073.1%200%20132.3-42.6%20132.3-95.2%200-5.3-.6-10.8-1.9-15.8%2031.3-16%2019.8-62.5-14.9-62.5zM302.8%20331c-18.2%2018.2-76.1%2017.9-93.6%200-2.2-2.2-6.1-2.2-8.3%200-2.5%202.5-2.5%206.4%200%208.6%2022.8%2022.8%2087.3%2022.8%20110.2%200%202.5-2.2%202.5-6.1%200-8.6-2.2-2.2-6.1-2.2-8.3%200zm7.7-75c-13.6%200-24.6%2011.1-24.6%2024.9%200%2013.6%2011.1%2024.6%2024.6%2024.6%2013.8%200%2024.9-11.1%2024.9-24.6%200-13.8-11-24.9-24.9-24.9z'/%3e%3c/svg%3e){kind=small}