Authors

Monday, July 9, 2012

Jangaroo is not only about ActionScript-to-JavaScript compilation, but generally about providing free, Open Sourcetools for Enterprise Web Developers. So today's about a small tool we just added to the stack that integrates assembly of CSS sprites into your Maven build process.

You may
have heard or even used SmartSprites (http://csssprites.org) by Carrot Search / Stanislaw Osinski.
A small tool that lets you bundle your images into sprite sheets improving your
webapp's performance.

Using SmartSprites
from over and over again, it can be tedious to always start the process manually. Since
we aren't using Ant but Maven more regularly we thought about a slim Maven
integration. While SmartSprites does offer a Maven artifact, we only found an outdated, unfinished Maven plugin to actually apply SmartSprites as part of a Maven build, and so came up with something ourselves.

We arrived at a working first version (in fact it's 1.5 1.8 by now) of such a plugin. It can surely be improved further, but working well for our needs.

You could
leave out the configuration part completely and default values would be used.
Following you’ll find the complete configuration guide. As all configuration attributes follow their SmartSprites counterparts closely, the description can be taken directly from the SmartSprites documentation.Below you will find the correct camel case annotation and their default values if given.

<documentRootDirPath>

<logLevel>

<spritePngDepth>

<spritePngIeSix>

<cssFileEncoding>

<cssFileSuffix>

What about a demo
application?

Please find
a demo application on github showing you how to bundle your sprites in a webapp.
It is a small example just showing you how to integrate the
SmartSprites-Maven-Plugin into a webapp.

The example
is rather straightforward so you just might want to take a look at the
following files:

pom.xml

line
23-40 for the SmartSprites part

line
42-53 copy the generated ressources

line
55-69 Jetty

src/main/webapp/index.jsp

divs for showing the images, line 16-21

src/main/sprites/css/flags.css

css configuration part

The other
files are just for making this example look a bit nicer.Since we use the SmartSprites Maven plugin ourselves for building an Enterprise software product, it will be maintained for quite a while. So feel free to use it, too, and please don't hesitate to give feedback either here or at the Jangaroo user's group!