Your SlideShare is downloading. ×
0
qooxdoo Decorators
qooxdoo Decorators
qooxdoo Decorators
qooxdoo Decorators
qooxdoo Decorators
qooxdoo Decorators
qooxdoo Decorators
qooxdoo Decorators
qooxdoo Decorators
qooxdoo Decorators
qooxdoo Decorators
qooxdoo Decorators
qooxdoo Decorators
qooxdoo Decorators
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

qooxdoo Decorators

1,753

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,753
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
34
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 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 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. 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 BorderGrid 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. 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. 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. JavaScript FTW!

    ×