Plug-n-skin implementation details
This topic has not yet been written. The content below is from the topic description.
4.4.10.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: mvn archetype:create -DarchetypeGroupId=org.richfaces.cdk -DarchetypeArtifactId=maven-archetype-plug-n-skin -DarchetypeVersion=3.3.1.GA -DartifactId=P-n-S -DgroupId=GROUPID -Dversion=1.0.-SNAPSHOT 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 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 style attributes and some basic HTML controls. We will show you how to: Recolor the background of the current day in the ; Recolor a standard HTML submit button; To edit '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; } 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.jar file to the \WebContent\WEB-INF\lib\ directory. Add the name of the new skin to the web.xml file, like so: org.ajax4jsf.SKIN PlugnSkinDemo Remember, standard controls skinning must be enabled in web.xml. Add the following to enable standard controls skinning: org.richfaces.CONTROL_SKINNING enable The results of each alteration to the skin are shown in the figures that follow: Figure 4.6. Plug-n-Skin feature in action.