In planning XUI 2.0 we sought suggestions for improvements and new features but we were a bit disappointed to instead be criticized for look and feel issues. We had considered such issues to be somewhat beyond the scope of XUI. After all, XUI is a framework to help build GUI applications, it doesn't replace Swing or prevent access to the APIs. We were of the opinion that anyone could plug-in a look and feel.

Despite this the criticism of some of certain LAF supporters was prooving annoying so we decided to spend a little effort providing some integration. Setting the LAF is really a trivial task, and in XUI it will be even more trivial. To employ a LAF like JGoodies all you need do is setup the startup parameters like this:

UseLAF=net.xoetrope.optional.laf.JGoodiesLafInstaller

or using the NetBeans 4.0 plugin you can do it interactively:

Enter Synth

While JGoodies is nice, it was Synth that really excited us. Being XML based, Synth was by far the most sympathic LAF from a XUI standpoint. Again plugging Synth was easy. Synth was configured via XML so why not integrate it more fully?

As Synth is installed as the look and feel it is necessary to point it to a configuration file. In XUI we use this as an opportunity to preprocess the configuration file.

Synth uses hexidecimal RGB color definitions such as #FF0000, but XUI already provides a css stylesheet like notion of styles to manage colors and fonts. We didn't want to loose this powerful feature when using Synth so we decided to do some processing of the Synth file to integrate the two.

XUI 2.0 includes a filter mechanism to allow replacement of XML by use of expression language like substitutions. For example

${getForegroundColor(styleName)}

gets the foreground color from the style names styleName. Using this type of expression we can replace the values for things like colors and fonts within the Synth configuration file.

XUI's filters can be built as a library of such replacement/substitution expressions and so far we have included a set for color and font processing. The upshot of this is that instead of distribution color and font definitions throughout the Synth configuration file they can be defined just once. Removing the color definitions from the Synth file also makes it easier to adapt a LAF to say the color scheme of a particular company.

Now this may not sound like a big deal but when coupled with XUI style editor it means that the Synth LAF can be quickly and easily configured with some nice color schemes without needing to fully understand how Synth operates.

Add some SVG...

While changing the colors as described is good, Synth makes extensive use of bitmps for things like buttons, border and so on. In changing the colors via the XUI styles we had a loophole where by could not set the colors for the LAF completely.

The obvious solution for this was to use SVG. In XUI we already had an SVG component and an SVG IconImage and we hoped to use these components. Unfortunately we could not completely susbtitute our resource loading mechanism for that of Synth (anyone with a solution for this should please get in touch). This problem meant that we could not get Synth to use SVG file directly.

Instead, we again used the preprocessing filter mechanism in XUI and the transcoder API built a converter for SVG to PNG converter. Using this mechanism we could load high quality SVG images, preprocess them and convert them to the PNGs required by Synth.

Within the Synth file we could now embed expressions such as ${SvgToPng(myfile.svg)} to read SVG files and create the equivalent PNG while return the name of the PNG image to the Synth configuration file. However, because of the size of the Batik libraries we made this a two step process. At design time, within a development environment we can include Batik and do the conversion. Then, once the user has previewed the application and fine tuned the colour scheme as needed the application the preprocessed Synth file is saved so that it can be used in applications that are not distributed with Batik.

Like the Synth file the SVG can include substitution expressions. SVG colors are declared in a slightly different manner to the Synth colors so we need a new set of expressions.

So far we have included some basic color substitutions and some substitution expressions designed to support things like gradients and HSB color spaces, but expect to see more over time.

With these substitutions we gain alot of control over the look and feel. Here are a few examples:

XUI 2.0 is still in gestation and we plan further enhancements and integrations of audio-visual effects to further increase the appeal of XUI applications.

With these visual enhancements we hope to silence the most vocal LAF critics. Well Ok, being practical we hope they will at least have less to carp about!

XUI 2.0 is still at a beta stage, but you can obtain the NetBeans module and a snapshot of the code used in this article on the Xoetrope site: https://xoetrope.com

References

Custom UIs are a breeze with the newest Swing look and feel by Michael Abernethy, IBM

Source code

CounterSynth.zip The complete example minus the Batik jars. Includes the NetBeans 4.0 project files.

Xui 2.0 Early Access All the source for XUI and the NetBeans plugin plus all the jars for Batik and other libraries used by the plugin.