Small Talks/2009/July/ZKThemer

Author
José L. Casas Serradilla, M.M.T. Seguros, Spain

Date
July 2, 2009

Version
3.6.2, not tested on previous versions

ZKThemer

zkthemer is an automatic color theme generator

Download

You can download zkthemer from: ZK Forge or work for ZK3 and ZK5 version. New

How to Use

zkthemer is a java command line application, it should work on any Java 6 platform, though I have only tested it on Linux.

Generate a new color theme

The instructions shown are on a bash shell. It should be similar on a Windows cmd line.

$ java -jar zkthemer.jar 
Option is mandatory: --baseColor -c value : Base color in 6 hex digit format, for example: A4BC03
Option is mandatory: --themeName -t value : Theme name
Option is mandatory: --zklib -z value : Location (directory) containing the zk jars
The options available are:
	--baseColor -c value : Base color in 6 hex digit format, for example: A4BC03
	--themeName -t value : Theme name
	--zklib -z value : Location (directory) containing the zk jars
        --ignoreFiles -i value : The names of ignore components (splitter with comma such as '-i colorbox,grid', type '-i n' if won't)

The first step is to put all the zk jars of your current version (only really tested on 3.6.2) in one directory, for example:

$ ls /home/jlcasas/ZKTheme/zk-jars/
zcommon-3.6.2.jar  zhtml-3.6.2.jar  zk-3.6.2.jar  zkex-3.6.2.jar  zkplus-3.6.2.jar  zml-3.6.2.jar  zul-3.6.2.jar  zweb-3.6.2.jar

We then run zkthemer with the theme name "lila" (Spanish for violet), giving 3E48AC as the basic color.

$ java -jar zkthemer.jar -c 3e48ac -z /home/jlcasas/ZKTheme/zk-jars -t lila -i n
Generated file: lila.jar

After running the command a new jar called "lila.jar" is generated.

$ ls
lila.jar  zkthemer.jar

This is the theme jar that you should use in your application classpath.

If you want ignore some component such as colorbox, you can type '-i component name'

$ java -jar zkthemer.jar -c 3e48ac -z /home/jlcasas/ZKTheme/zk5-jars -t lila -i colorbox 
Generated file: lila.jar

or multiple

$ java -jar zkthemer.jar -c 3e48ac -z /home/jlcasas/ZKTheme/zk5-jars -t lila -i colorbox,grid
Generated file: lila.jar

Caution: In ZK 3, ignore some name maybe cause strange css, because it original design to put the css of multiple component in a file, I will upgrade it to filter css content instead of file name in my free time.

Use the new theme in your application

It's not enough to just drop the created jar in your application classpath. You have to do the following:

1. In your zk.xml add the following

<desktop-config>
	<theme-provider-class>zkthemer.ThemeProvider</theme-provider-class>
</desktop-config>

2. Place the lila.jar in your application classpath.

3. Restart your application. It should look like:

NOTICE The class zkthemer.ThemeProvider is included in the generated jar lila.jar. You may use another Theme Provider class as long as it injects the appropriate *.css.dsp URLs like the following code:

public class ThemeProvider implements org.zkoss.zk.ui.util.ThemeProvider {

    private String themeName;

    public ThemeProvider() {
        try {
            InputStream is = getClass().getResourceAsStream("/zkthemer.properties");
            if (is == null)
                throw new RuntimeException("Cannot find zkthemer.properties");
            Properties prop = new Properties();
            prop.load(is);
            themeName = (String) prop.get("theme");
            if (themeName == null) {
                throw new RuntimeException("zkthemer.properties found, but missing 'theme' entry");
            }
            is.close();
        } catch (IOException e) {
            throw new RuntimeException(e);
        }
    }

    @SuppressWarnings("unchecked")
    public Collection getThemeURIs(Execution exec, List uris) {

        List newUris = new ArrayList();

        for (Iterator it = uris.iterator(); it.hasNext();) {
            String uri = (String) it.next();
            if (uri.startsWith("~./")) {
                uri = "~./" + themeName + "/" + uri.substring(3);
            }
            newUris.add(uri);
        }

        return newUris;
    }

}

Source code

You can download the source code as an Eclipse project from: ZK3, ZK5(compatible ZK3)

See Also

For ZK5, you may refer to the discussion of forum. ZK Different Themes

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.