Versions Compared


  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

CSSBuilder is a Groovy builder for styling a Swing application with CSS

Contribution Overview

CSSBuilder is based on Swing Clarity, a framework created by Ben Galbraith. It makes styling a Swing application with CSS a breeze.


Andres Almiray [aalmiray at users dot sourceforge dot net]




Drop cssbuilder-1.0.4 0 into $GROOVY_HOME/lib along with its dependencies


Code Block



Code Block

repositories {
    mavenRepo name: 'Codehaus', urls: ''

dependencies {
    compile 'org.codehaus.griffon:cssbuilder:1.0.40'


Groovy is the required minimum version to run CSSBuilder 0.5
It is recommended that you upgrade to the 1.8.x series in order to take advantage of

  • @Bindable and AST Transformations
  • short binding syntax
  • numerous enhancements made to SwingBuilder and FactoryBuilderSupport



CSSBuilder does not add new nodes as opposed to other popular builders, however it enhances every node with a new attribute: cssClass. Use this attribute to define (at least one) CSS class to be applied to that particular component. Additionally you can specify a name: property that will be used as a CSS id. This builder injects the following methods to the java.awt.Container class


Here is a sample demonstration of its usage, the following application relies solely on CSSBuilder to change its looks


Code Block

* {
  background-color: red;

jbutton {
  background-color: blue;
  font-size: 120%;

#button1 {
  background-color: green;
  font-style: italic;

.active {
  background-color: yellow;
  font-weight: bold;

view script

Code Block

application(title:'css', pack:true,
  iconImage: imageIcon('/griffon-icon-48x48.png').image,
  iconImages: [imageIcon('/griffon-icon-48x48.png').image,
               imageIcon('/griffon-icon-16x16.png').image]) {
   panel {
      gridLayout(cols: 1, rows: 3)
      button("One", name: "button1")
      button("Two", name: "button2")
      button("Three", name: "button3", cssClass: "active")

This style sheet was applied using

Code Block

import griffon.builder.css.CSSDecorator
CSSDecorator.decorate("style", mainFrame)


Starting with version 0.3 you'll be able to use Groovy expressions as values of CSS rules. You may add variables to a global CSSBindings object. CSSBindings's variables are observable. The following example demonstrates these new features

Code Block

import groovy.swing.SwingBuilder
import griffon.builder.css.CSSDecorator
import griffon.builder.css.CSSBindings
import java.beans.PropertyChangeListener

// initialize default variables, currently
// screen: size of default screen device 
def style = '''
jlabel {
  font-size: '${screen.width * 0.05}';
  color: '${active? "red": "blue"}';
''' = false
new SwingBuilder().edt {
  f = frame(size: [400, 200], show: true) {
    gridLayout(cols: 1, rows: 2)
    toggleButton("Click me!", id: "b")
    bean(CSSBindings.instance, active: bind{b.selected})
  CSSDecorator.applyStyle(style, f)
CSSBindings.instance.addPropertyChangeListener({evt ->
   CSSDecorator.applyStyle(style, f)
} as PropertyChangeListener)