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
×
Upcoming SlideShare
meet.js - QooXDoo
Next
Download to read offline and view in fullscreen.

0

Share

Download to read offline

qooxdoo Decorators

Download to read offline

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • 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!

Views

Total views

2,409

On Slideshare

0

From embeds

0

Number of embeds

1

Actions

Downloads

41

Shares

0

Comments

0

Likes

0

×