Contribution Overview

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

Download

cssbuilder-0.4

Documentation

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

$(String name) - performs a component lookup by name, returns a JComponent

$(String... names) - performs component lookup by names, returns a JComponent[]

$$(String selector) - performs component lookup by CSS selector, returns a JComponent[]

This is the list of currently supported CSS properties and some non-standard Swing related properties

You can use the following selectors:

• * (star) will match every component
• <classname> will match all components of that classname, example jbutton
• #<name> matches a component by its name: attribute
• .<class> matches a component by its cssClass: attribute

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

stylesheet

* {
  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

application(title:'css', pack:true,
  locationByPlatform:true,
  iconImage: imageIcon('/griffon-icon-48x48.png').image,
  iconImages: [imageIcon('/griffon-icon-48x48.png').image,
               imageIcon('/griffon-icon-32x32.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

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

All CSSDecorate.decorate() variants will read a stylesheet from a file, however if you would like to set an style using a String then make sure to call CSSDecorator.applyStyle() instead.

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

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 
CSSBindings.instance.initDefaults()
def style = '''
jlabel {
  font-size: '${screen.width * 0.05}';
  color: '${active? "red": "blue"}';
}
'''
CSSBindings.instance.active = false
 
new SwingBuilder().edt {
  f = frame(size: [400, 200], show: true) {
    gridLayout(cols: 1, rows: 2)
    label("GROOVY")
    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)

Developers

Andres Almiray

Community