Hello,
I’d just thought I’d report that I’d managed to get the
LESS CSS Preprocessor
[1]
working with Vaadin. LESS, for the uninitiated, allows you to define variables and mixins for CSS, allowing you to easily change a basic colour throughout your style sheet.
I’d just thought I’d note down what I’d done, in case anyone else wants to try it out or even incorporate it into Vaadin (I saw Jouni was looking for a port of
CSS Crush
[2]
, but that looked too much like hard work to me!)
It’s a little bit hacky, but not tooo bad - could be improved significantly. All of the hard work and heavy lifting is done by
LESS for Java
[3]
Steps
a) Added lesscss-engine-1.1.42.jar, lesscss-servlet-1.1.42.jar, js-1.6R7.jar to my class path.
b) Created a very simple J2EE filter to forward all requests for requests ending in .less to be forwarded to the Less Servlet. This is clearly just a hack/demo piece of code - the matching and the name of the servlet to forward to should be configurable.
public class LessFilter implements Filter {
private ServletContext context;
public void init(FilterConfig filterConfig) throws ServletException {
this.context = filterConfig.getServletContext();
}
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
if (servletRequest instanceof HttpServletRequest) {
HttpServletRequest httpServletRequest = (HttpServletRequest) servletRequest;
String s = httpServletRequest.getPathInfo();
if (s.endsWith(".less")) {
context.getNamedDispatcher("less").forward(httpServletRequest, servletResponse);
} else {
filterChain.doFilter(servletRequest, servletResponse);
}
}
}
public void destroy() {
}
}c) Defined the less servlet and filter and mapping in the web.xml
<servlet>
<servlet-name>less</servlet-name>
<servlet-class>com.asual.lesscss.LessServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<filter>
<filter-name>LessFilter</filter-name>
<filter-class>com.hpdsoftware.aquarius.aura.framework.web.LessFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>LessFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>Note that it’s important the filter mapping comes before the VAADIN/* Mapping (or the application mapping) if you want to use .less files inside the VAADIN/themes directory structure
c) Changed my styles.css to simply @import a .less file
@import "../reindeer/styles.css";
@import "example.less";
You’ll note I am importing reinder in the styles.css file in the main styles.css file - that’s simply because I have left the static resources inside the vaadin jar. If I had extracted them, and put them in the WAR folder, then I could have included them from the .less file - which would give me concentation and optionally compression too.
I hope that these notes might help someone else who wants to try this out.
Cheers,
Charles
[1]
http://lesscss.org/
[2]
https://github.com/peteboere/css-crush
[3]
http://www.asual.com/lesscss/