As we have already announced in last week’s blog post, we are about to put the brand new Simple theme into trunk today. With that we are also adding some new features to the theme layer of qooxdoo. In this post we’ll first introduce the Simple theme, then explain the underlying improvements in qooxdoo’s theming layer.

Simple Theme

For most people the new Simple theme is certainly the most interesting part that comes out of the theming layer improvements. We tried to keep the theme simple (duh!) and to look more like a website. Additionally we tried to avoid the usage of images as much as possible. For example look at the radio button: it is built without a single image.

We also use as much as possible features that are now available in modern browsers. Due to that fact, and as you have surely guessed already, the theme does not look fully identical in all browsers. For instance, not every browser natively supports border radius, so you won’t have rounded corners in IE8 and similar. But nevertheless the theme looks still good and is fully functional even in those browsers. It just happens not to be a pixel-perfect fallback which would require to use a large number of images. So they may just missing out on the latest and greatest features that are built their more modern cousins. For the Simple theme we think it’s a fair tradeoff, especially as it fully leverages the increasing number of modern browser versions.

Talking about themes, a working app to demonstrate the new Simple theme is certainly worth more than a long explanation, so go ahead and check out the the simple feed reader or updated devel version of the demobrowser. You can see any demo in the new theme, just use the theme switch in the toolbar to select it.

We hope you like the new theme and give it a try with your own apps. If you see any inconsistencies, please report a bug in our bugzilla. Enjoy.

But now into the nitty-gritty of the theming layer:

Changes to the Decorators

The initial idea of the Simple theme was to take full advantage of all the new, shiny CSS features like box-shadow, border-radius and so on. As you might know, qooxdoo comes with a decoration system, which is capable of applying various styles to the widgets. For doing that so called “decorators” are being used.

Previously the set of decorators was mainly split up into decorators that focused on border features. So there used to be a pre-defined single-border decorator, a double-border decorator and so on. But where could we have added the border radius code for instance? Only to the single border because that is the one used most? No, not really!

To keep the whole set of features flexible and maintainable we came up with a much better approach: put each individual feature into a separate mixin and include it into the decorators. But still, one would have needed a lot of individual decorators to make all possible combinations of decorations available. Thats why we came up with an even more generic solution: The decorator is specified by its mixins, the theming system knows how to handle that setup and creates a decorator at runtime containing exactly those features.

For an example have a look at the decorator of the button:

"button-box" :
{
  decorator : [
    qx.ui.decoration.MLinearBackgroundGradient,
    qx.ui.decoration.MBorderRadius,
    qx.ui.decoration.MSingleBorder,
    qx.ui.decoration.MBackgroundColor
  ],

  style :
  {
    radius : 3,
    width : 1,
    color : "button-border",
    gradientStart : ["button-box-bright", 40],
    gradientEnd : ["button-box-dark", 70],
    backgroundColor : "button-box-bright"
  }
},

As you can see, the decorator is simply specified as an array of mixins. Each mixin implements exactly one feature. The style map can contain values for the properties supplied by the mixins: e.g. width and color are properties of the single border while radius specifies the border radius.

An additional new feature is the inheritance of decorators, very handy when creating and maintaining themes. The button is again a good example: Lets say button gets a different border color when hovered, so we would need another decorator. But instead of repeating all the properties of the button again, we just include them and make adjustments:

"button-box-pressed-hovered" :
{
  include : "button-box-pressed",

  style :
  {
    color : "button-border-hovered"
  }
},

As you can see, just specify the new color and that’s it.

New Decorators

Based on that new feature, we built some new decorators for the following features:

• Border Radius
• Box Shadow
• Linear Background Gradient

That was all we needed to create the pretty light-weight Simple theme. But as you can see, you can easily write your own mixin and include that into the decorator as well. Some more details on that will come to the manual soon.

As this more flexible decorator configuration is a brand new feature, we’d like to hear feedback from you. Particularly the custom theme creators should be able to provide some good feedback.