Qooxdoo: style of individual widgets

Question

What is the most convenient way to apply a custom style to a single widget element that does not confirm the default styling style. I'm still confused using decorators. How to apply multiple decorators, for example. for border and background properties for a widget element.

I tried using custom decorators, for example:

var titleBar = new qx.ui.container.Composite(); titleBar.set({ decorator : qx.ui.decoration.MBackgroundImage, style : { backgroundImage : '/images/tbar.png' } }); 

But I get an error message:

Error in the qx.ui.container.Composite class property decorator in the setDecorator method with the input value '[Mixin qx.ui.decoration.MBackgroundImage]': Invalid!

Answer 1

You need to create an instance of the proper decorator, not one of the decorator mixers. For instance. in your case, something like this should work:

  var titleBar = new qx.ui.container.Composite(); var myBackground = new qx.ui.decoration.Background(); myBackground.setBackgroundImage("/images/tbar.png"); titleBar.set({ decorator : myBackground }); 

Answer 2

You should use Mixins decorations only when you define docorations using "qx.Theme.define".

I think the best way to define custom styles is to define a new appearance key and use that key for your widget instead.

  var titleBar = new qx.ui.container.Composite ();
     titleBar.setAppearance ("myApperanceKey");