Wouldn't it be great to style a Griffon application using CSS? If you do a quick google search for "Swing css" you will find plenty of information on how to do it (even a link back to this blog -> CSS + Swing + Groovy? you bet!), what strikes me as odd is that Swing Clarity is not among the first hits. This small library comes from the same people that brought you ajaxian.com, yup that's true, Ben & Dion. I remember clearly watching Ben demonstrating the library back at JavaOne 2007, it's been a while...

Back on topic, Swing Clarity borrows behavior from popular Javascript libraries like Prototype and JQuery, it even provides JQuery-like CSS selector methods -> $() and $$(). Creating a Groovy friendly wrapper for this library is quite simple, as a matter of fact there is a new builder on the works: CSSBuilder. This class is responsible for handling a new attribute that can be placed on any SwingBuilder node: cssClass, this attribute has the same effect as class has on an HTML element. Another thing the builder does is inject the following methods to the java.awt.Container class

• $(String name) -> finds a JComponent by name
• $s(String... names) -> finds all JComponents whose names match the parameters
• $$(String selector) -> finds all JComponents using a CSS selector

It also is able to inject these methods to a Griffon controller, those versions take a java.awt.Container as preceding parameter. Enough theory, let's look at this puppy in action, here is a screenshot of a sample application



I'm sorry for the bright colors, I didn't say the image would be pretty, did I? This little application has been styled using the following 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; }This are the required steps for styling the application

1. Copy CSSBuilder and its dependencies into your app's lib directory [http://svn.codehaus.org//griffon/builders/cssbuilder/trunk/]

2. Configure the builder to be used with Griffon's CompositeBuilder, your griffon-app/conf/Builder.config should look like
root { 'groovy.swing.SwingBuilder' { controller = ['Threading'] view = '*' } 'griffon.app.ApplicationBuilder' { view = '*' } 'griffon.builder.css.CSSBuilder' { controller = ['CSS'] view = '*' } } 3. Make sure the style is applied after all the views have been created, place the following code at griffon-app/lifecycle/Startup.groovy
, be mindful that the stylesheet file will be read inside the EDT, the UI will be updated inside the EDT as well. import griffon.builder.css.CSSDecorator CSSDecorator.decorate("style",app.appFrames[0]) 4. Finally, let's configure a simple view. You have the choice of setting a name: property on a target component or using the new cssClass: attribute
application(title:'css', //size:[320,480], pack:true, //location:[50,50], 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") } } CSSBuilder is still in the early stages, the default CSS properties handled by Swing Clarity are but a small set of CSS2, there are also a few others that can be created specifically for Swing. A Griffon plugin will be available once CSSBuilder makes its first release (hopefully soon!)

A big shoutout goes to Ben & Dion for making this great library!

Keep on Groovying!