Brief Instructions How to Make a Theme

Before you start creating your theme you should make sure that Maven is aware where it can obtain required dependencies. The easiest way to take care of that is to add a profile where you should specify the repositories where Maven will get the dependencies. You can add the profile to Maven_installation_folder\conf\settings.xml. The attached "jboss_profile.txt" file contains a profile with all settings you need have set up to make a new theme. You just need add the profile to the <profiles> section and  activate it in the <activeProfiles> section like this:

<activeProfiles>
    <activeProfile>jboss</activeProfile>
</activeProfiles>

In brief the following steps you need to take to create your own theme for the <rich:page> component:

1.

mvn archetype:create
-DarchetypeGroupId=org.richfaces.cdk
-DarchetypeArtifactId=maven-archetype-theme
-DarchetypeVersion=RF-VERSION
-DartifactId=ARTIFACT-ID
-DgroupId=GROUP-ID
-Dversion=VERSION

ARTIFACT-ID is a directory with the generated pom.xml inside.

2.

cdk:add-theme -Dname=THEME-NAME

This command creates a skeleton of a new theme.

3. If you are familiar with RichFaces CDK principles you can start editing the files of the skeleton.

Creating the "brewedcoffee" Theme

In this section we will make a new theme for the <rich:page/> component basing on the brewedcoffee CSS+HTML template  that you can download from the Free CSS Templates.

First, we need to make a seleton with the commands listed above. We will use real settings in these commans so that you can see how it all works.

mvn archetype:create
-DarchetypeGroupId=org.richfaces.cdk
-DarchetypeArtifactId=maven-archetype-theme
-DarchetypeVersion=3.3.2-SNAPSHOT
-DartifactId=brewedcoffee
-DgroupId=org.richfaces.docs
-Dversion=1.0

Now you see the brewedcoffee directory with the pom.xml file inside. Go to that folder and run this command:

mvn cdk:add-theme -Dname=brewedcoffee

Now you can see the src folder with this content:

brewedcoffee
    |-- pom.xml
    `-- src
        `-- main
            |-- config
            |   `-- component
            |       `-- brewedcoffee.xml
            |-- resources
            |   |-- META-INF
            |   |   `-- themes
            |   |       `-- brewedcoffee.theme.properties
            |   `-- org
            |       `-- richfaces
            |           `-- docs
            |               `-- renderkit
            |                   `-- html
            |                       `-- css
            |                           `-- brewedcoffee.xcss
            `-- templates
                `-- org
                    `-- richfaces
                        `-- docs
                            `-- brewedcoffee.jspx

You have evrything set up  now to make the theme.

Now download the brewedcoffee template from Free CSS Templates. Unzip the archive. You should see the following files and folders:

`-- brewedcoffee
    |-- images
    |   |-- img01.gif
    |   |-- img02.gif
    |   |-- img03.gif
    |   |-- img04.jpg
    |   `-- img05.gif
    |-- index.html
    |-- license.txt
    `-- style.css

Open the  brewedcoffee.jspx. It's a RichFaces CDK template for the theme. Let's edit it: copy main HTML code blocks from index.html file.

Your jspx template should look like this -brewedcoffee.jspx

Now it's time to merge the style.css file and brewedcoffee.xcss. Basically what you need to do is to just add the content of the style.css file to the     <f:verbatim> section of  brewedcoffee.xcss. Exept for the images that have to be added in a speical way, so that they can be correctly found in the package. This is how the images are included:

<u:selector name="body">
          <u:style name="background-image">
               <f:resource f:key="/org/richfaces/docs/renderkit/html/images/img01.gif" />
          </u:style>
     </u:selector>

Please have a look at the ready brewedcoffee.xcss file.

Next, you need to create a folder for images in the "brewedcoffee/src/main/resources/org/richfaces/docs/renderkit/html/", call it images and copy the 5 images to the folder.

That's it. The theme is ready now. You can build the theme with mvn clean install.

Add the new theme to your project either by copying the jar file from the target directory to the WEB-INF/lib of your project or add as a Maven dependency if you build your project with Maven. For example like this:

<dependency>
  <groupId>org.richfaces.docs</groupId>
  <artifactId>brewedcoffee</artifactId>
  <version>1.0</version>
</dependency>

Open a view file in your project and add the code from the  index.jsp file. Deploy and run the project on the server.

Finally you should see the following on your screen: screen.png