Skip to: Site menu | Main content

A Grails-like Rich Internet Framework

CSSBuilder Print

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.

Team Members

Andres Almiray [aalmiray at users dot sourceforge dot net]

Download

cssbuilder-0.4

Installing

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

Pre-requisites

Groovy 1.6.0 is the required minimum version to run CSSBuilder 0.4

It is recommended that you upgrade to the 1.6.x series in order to take advantage of

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

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

Property Values Maps to Applied to
font-family   setFont() JComponent
font-size xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger

or use an integer with % or pt suffix
setFont() JComponent
font-weight normal, bold setFont() JComponent
font-style normal, italic setFont() JComponent
color a CSS2 color or a hex color starting with # setForeground() JComponent
background-color a CSS2 color or a hex color starting with # setBackground() JComponent
width an integer value setSize() JComponent
height an integer value setSize() JComponent
min-width an integer value setMinimumSize() JComponent
min-height an integer value setMinimumSize() JComponent
max-width an integer value setMaximumSize() JComponent
max-height an integer value setMaximumSize() JComponent
pref-width an integer value setPreferredSize() JComponent
pref-height an integer value setPreferredSize() JComponent
padding a set of 1, 2, 3 or 4 integer values setBorder() JComponent
padding-top an integer value setBorder() JComponent
padding-bottom an integer value setBorder() JComponent
padding-left an integer value setBorder() JComponent
padding-right an integer value setBorder() JComponent
border-color a CSS2 color or a hex color starting with # setBorder() JComponent
border-width a set of 1, 2, 3 or 4 integer values setBorder() JComponent
border-top-width an integer value setBorder() JComponent
border-left-width an integer value setBorder() JComponent
border-bottom-width an integer value setBorder() JComponent
border-right-width an integer value setBorder() JComponent
swing-row-height an integer value setRowHeight() JTable

JTree
swing-client-property a Groovy map literal surrounded with quotes putClientProperty() JComponent
swing-halign left, right, or center setHorizontalAlignment() JLabel

AbstractButton

JTextField
swing-valign top, bottom or middle setVerticalAlignment() JLabel

AbstractButton
swing-cell-height an integer value setFixedCellHeight() JList
swing-cell-width an integer value setFixedCellWidth() JList
swing-row-margin an integer value setRowMargin() JTable
swing-grid-color a CSS2 color or a hex color starting with # setGridColor() JTable
swing-selection-color a CSS2 color or a hex color starting with # setSelectionForeGround()

setSelectionForeGround()

setSelectionColor()
JTable

JList

JTextComponent
swing-selection-background-color a CSS2 color or a hex color starting with # setSelectionBackground() JTable

JList
swing-row-selection-allowed boolean setRowSelectionAllowed() JTable
swing-column-selection-allowed boolean setColumnSelectionAllowed() JTable
swing-auto-resize-mode off, next_column, last_column, all_columns, subsequent_columns setAutoResizeMode() JTable
swing-show-grid boolean setShowGrid() JTable
swing-show-vertical-lines boolean setShowVerticalLines() JTable
swing-cell-selection-enabled boolean setCellSelectionEnabled() JTable
swing-show-horizontal-lines boolean setShowHorizontalLines() JTable
swing-fills-viewport-height boolean setFillsViewportHeight() JTable
swing-selection-mode single, single_interval, multiple_interval setSelectionMode() JTable

JList
swing-border-painted boolean setBorderPainted JToolBar

JMenuBar

JProgressBar
swing-floatable boolean setFloatable() JToolBar
swing-margin an integer value setMargin() JToolbBar

JMenuBar

JTextComponent
swing-orientation horizontal, vertical setOrientation() JToolBar

JProgressBar

JScrollBar

JSlider

JSeparator

JSplitPane
swing-rollover boolean setRollover() JToolBar
swing-columns an integer value setColumns() JTextField

JTextArea
swing-rows an integer value setRows() JTextArea
swing-line-wrap boolean setLineWrap() JTextArea
swing-tab-size an integer value setTabSize() JTextArea
swing-tab-placement top, left, bottom, right setTabPlacement() JTabbedPane
swing-tab-layout-policy wrap, scroll setTabLayoutPolicy() JTabbedPane
swing-wrap-style-word boolean setWrapStyleWord() JTextArea
swing-caret-color a CSS2 color or a hex color starting with # setCaretColor() JTextComponent
swing-disabled-text-color a CSS2 color or a hex color starting with # setDisabledTextColor() JTextComponent
swing-selected-text-color a CSS2 color or a hex color starting with # setSelectedTextColor() JTextComponent
swing-editable boolean setEditable() JTextComponent

JComoboBox

JTree
swing-horizontal-scrollbar-policy as_needed, never, always setHorizontalScrollBarPolicy() JScrollPane
swing-vertical-scrollbar-policy as_needed, never, always setVerticalScrollBarPolicy() JScrollPane
swing-viewport-border-color a CSS2 color or a hex color starting with # setViewportBorder() JScrollPane
swing-viewport-border-width an integer value setViewportBorder() JScrollPane
swing-viewport-border-top-width an integer value setViewportBorder() JScrollPane
swing-viewport-border-left-width an integer value setViewportBorder() JScrollPane
swing-viewport-border-bottom-width an integer value setViewportBorder() JScrollPane
swing-viewport-border-right-width an integer value setViewportBorder() JScrollPane
swing-horizontal-text-position left, center, right, leading, trailing setHorizontalTextPosition() JLabel

AbstractButton
swing-vertical-text-position top, middle, bottom setVerticalTextPosition() JLabel
swing-icon-text-gap an integer value setIconTextGap() JLabel
swing-resizable boolean setResizable() JFrame

JDialog

JInternalFrame
swing-indeterminate boolean setIndeterminate() JProgressBar
swing-minimum an integer value setMinimum() JProgressBar

JScrollBar

JSlider
swing-maximum an integer value setMaximum() JProgressBar

JScrollBar

JSlider
swing-inverted boolean setInverted() JSlider
swing-paint-labels boolean setPaintLabels() JSlider
swing-paint-ticks boolean setPaintTicks() JSlider
swing-paint-tracks boolean setPaintTracks() JSlider
swing-snap-to-ticks boolean setSnapToTicks() JSlider

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

Building

CSSBuilder uses Ant as its build tool, which means that if you want to

build your own version of CSSBuilder from source you'll need to have it

installed. Follow the instructions at http://ant.apache.org

Contributing

Please contact the team members by e-mail.