View Source

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-1.0.0

Installing

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

Maven

  <repository>
    <id>codehaus-release</id>
    <name>Codehaus</name>
    <url>http://repository.codehaus.org</url>
  </repository>

  <dependency>
    <groupId>org.codehaus.griffon</groupId>
    <artifactId>cssbuilder</artifactId>
    <version>1.0.0</version>
  </dependency>

Gradle

repositories {
    mavenRepo name: 'Codehaus', urls: 'http://repository.codehaus.org'
}

dependencies {
    compile 'org.codehaus.griffon:cssbuilder:1.0.0'
}

Pre-requisites

Groovy 2.1.0 is the required minimum version to run CSSBuilder 1.0.0

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
Griffon > CSSBuilder > griffon_css.png

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

Source Control

https://github.com/griffon/cssbuilder

Building

CssBuilder uses Gradle as its build tool.

Contributing

Please contact the Griffon team members by e-mail.

Mailing List(s)

http://griffon.codehaus.org/Mailing+Lists

Issue tracker

http://jira.codehaus.org/browse/GRIFFON