Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Decorators
Which decorators are currently availabel? *                          * qooxdoo 1.3
WTF are decorators?!?• Used to style widgets• all in qx.ui.decoration • Contains 16 Files   •   1 init file   •   1 interfa...
11 Decorators?• Border drawing 1.   Single 2.   Double 3.   Beveled 4.   Uniform• Background drawing 5.   Background• Imag...
Not that easy...qx.ui.decoration                                           Abstract                                       ...
Border Image Selectconstruct : function(baseImage, insets){  this.base(arguments);  if (qx.ui.decoration.css3.BorderImage....
Java? No, JavaScript!qx.Class.define("qx.ui.decoration.Grid" {  extend : qx.ui.decoration.css3.BorderImage.IS_SUPPORTED ? ...
Feature combination?                Background   Single   Double   Beveled   Uniform   Grid   HBox   VBox   Insets        ...
What about new features? • Border Radius • multiple background images • gradients • box shadow • text rotation • transforms
All simple CSS styles• Could be valid in all permutations• 6 new features ➠ 6! new classes• Some old features also simple ...
Idea• Impement all feature as separate mixin• dynamically merge mixins in a abstract  baseclass
CompatibleCurrent Decoration.js      "main" :      {         decorator: qx.ui.decoration.Uniform,         style :         ...
HowCurrent decoration manager   var clazz = entry.decorator;   // ...   return cache[value] = (new clazz).set(entry.style)...
JavaScript FTW!
Upcoming SlideShare
Loading in …5
×

qooxdoo Decorators

2,314 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

qooxdoo Decorators

  1. 1. Decorators
  2. 2. Which decorators are currently availabel? * * qooxdoo 1.3
  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. 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. 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. 6. Border Image Selectconstruct : 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); } // ...}, GridDivmembers : { // forward each property and method {xor} use Grid} css3. BorderImage
  7. 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. 8. Feature combination? Background Single Double Beveled Uniform Grid HBox VBox Insets ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔Background Color ✔* ✔* ✔* ✔* ✔* Background Image ✔ ✔ ✔ ✔ ✔Single Border ✔ ✔ Double Border ✔ Beveled BorderGrid Border Image ✔HBox Border Image ✔VBox Border Image ✔ * Each implemented separately
  9. 9. What about new features? • Border Radius • multiple background images • gradients • box shadow • text rotation • transforms
  10. 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. 11. Idea• Impement all feature as separate mixin• dynamically merge mixins in a abstract baseclass
  12. 12. CompatibleCurrent Decoration.js "main" : { decorator: qx.ui.decoration.Uniform, style : { // ... } },Add border radius "main" : { decorator: [qx.ui.decoration.MUniformBorder, qx.ui.decoration.MBorderRadius], style : { // ... } },
  13. 13. HowCurrent 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. 14. JavaScript FTW!

×