This document discusses decorators in qooxdoo 1.3. It explains that there are currently 11 decorator classes available for styling widgets, covering features like borders, backgrounds, and image borders. It then discusses how the decorator classes are implemented using mixins to dynamically combine features like borders, backgrounds, radii, etc. rather than defining a separate class for every feature combination. This allows new features to be added easily as mixins rather than requiring new classes.

1. Decorators

2. Which decorators are
currently availabel? *
* qooxdoo 1.3

3. WTF are decorators?!?
• Used to style widgets
• all in qx.ui.decoration
• Contains 16 Files
• 1 init file
• 1 interface
• 1 mixin
• 2 abstract classes
• 11 class files

4. 11 Decorators?
• Border drawing
1. Single
2. Double
3. Beveled
4. Uniform
• Background drawing
5. Background
• Image broders
6. Grid
7. HBox
8. VBox

5. Not that easy...
qx.ui.decoration
Abstract
GridDiv
MBackgroundImage Background
{xor} use Grid
css3.
BorderImage
Double
AbstractBox use {xor}
Single
BoxDiv
Beveled
Uniform
HBox VBox

6. Border Image Select
construct : function(baseImage, insets)
{
this.base(arguments);
if (qx.ui.decoration.css3.BorderImage.IS_SUPPORTED)
{
this.__impl = new qx.ui.decoration.css3.BorderImage();
// ...
}
else
{
this.__impl = new qx.ui.decoration.GridDiv(baseImage);
}
// ...
}, GridDiv
members : {
// forward each property and method {xor} use Grid
}
css3.
BorderImage

7. Java? No, JavaScript!
qx.Class.define("qx.ui.decoration.Grid" {
extend : qx.ui.decoration.css3.BorderImage.IS_SUPPORTED ?
qx.ui.decoration.css3.BorderImage :
qx.ui.decoration.GridDiv
});
No need to forward methods and
properties!

8. Feature combination?
Background Single Double Beveled Uniform Grid HBox VBox
Insets ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔
Background
Color ✔* ✔* ✔* ✔* ✔*
Background
Image ✔ ✔ ✔ ✔ ✔
Single Border ✔ ✔
Double
Border ✔
Beveled
Border
Grid Border
Image ✔
HBox Border
Image ✔
VBox Border
Image ✔
* Each implemented separately

9. What about new features?
• Border Radius
• multiple background images
• gradients
• box shadow
• text rotation
• transforms

10. All simple CSS styles
• Could be valid in all permutations
• 6 new features ➠ 6! new classes
• Some old features also simple CSS ➠ (6+x)!
• Way too much classes to code!

11. Idea
• Impement all feature as separate mixin
• dynamically merge mixins in a abstract
baseclass

12. Compatible
Current Decoration.js
"main" :
{
decorator: qx.ui.decoration.Uniform,
style :
{
// ...
}
},
Add border radius
"main" :
{
decorator: [qx.ui.decoration.MUniformBorder,
qx.ui.decoration.MBorderRadius],
style :
{
// ...
}
},

13. How
Current decoration manager
var clazz = entry.decorator;
// ...
return cache[value] = (new clazz).set(entry.style);
New decoration manager
var clazz = entry.decorator;
// ...
if (clazz instanceof Array) {
var name = "qx.ui.decoration." + clazz.join("");
if (!qx.Class.getByName(name)) { *
qx.Class.define(name, {
extend : qx.ui.decoration.BaseFeature,
include : clazz
});
}
clazz = qx.Class.getByName(name);
}
return cache[value] = (new clazz).set(entry.style);
* should be a bit more intelligent

14. JavaScript FTW!