I was interested in getting reuse from the CSS-styles generated by a graphics designer. I would like to be able to generate the styles for different color and image brandings, based on the same structural framework. At first I looked at generating the necessary CSS files using my own template engine. Then I came across FMPP, FreeMarker-based text file PreProcessor. This seemed to already provide what my engine had, plus more, plus a lot of other people are already using it.
This article describes a simple scenario describing how to use FMPP to create two sets of CSS theme files from the same initial template. It is admittedly a limited use of FMPP, but in creating it, perhaps it will help others to quickly set up and get running without delving too much into the FMPP vocabulary.
At the end of the steps described here, you will have a template, a set of properties files for each of the different themes, and a build script which you can use to generate your templates.
Requirements: ANT, FMPP.
Download template: themegen.zip
Step 1. Setup
You will need ANT and FMPP. If you are using Eclipse, you already have ANT. To download FMPP, visit http://fmpp.sourceforge.net/.
Take the five files from the fmpp_0.9.2/lib directory and make them available to ANT. In Eclipse you can do this by right-clicking on the build.xml and selecting build..., then add the jars to the classpath for ANT:
bsh.jar, fmpp.jar, freemarker.jar, oro.jar, resolver.jar
Step 2. Set up the directory structure for your project
If you have an existing project, you will need to adapt the provided scripts for your structure. Ideally, depending on how you are using the theme attributes in Spring, you will either have directory names or file names substitution for each of your themes.
Step 3. Create a Template
Take the CSS files from your graphic artist and insert common variables into them for the items you wish to have be a function of the properties file. In the example, the template is style/style.css.
Step 4. Create the properties files
These will be used in conjunction with the template to produce the output files. In the example, these are called blue.tdd and green.tdd.
Step 5. Run ant and refresh eclipse
You should see two new files: out/style/blue/style.css, and out/style/green.css.
You should be careful not to replace your original template during the process, or you will lose it.
References.
Dekany, D. 2007. FreeMarker-based text file PreProcessor. http://fmpp.sourceforge.net/