Qooxdoo : styling individual widgets

Question

What is the most convenient way to apply some custom styling to an individual widget element that does not confirm to the default styling of the theme. I am still confused with the usage of decorators . How does one apply multiple decorators eg. for border properties and background to a widget element.

I have tried using custom decorators eg. :


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

But I recieve an error :

Error in property decorator of class qx.ui.container.Composite in method setDecorator with incoming value '[Mixin qx.ui.decoration.MBackgroundImage]': Is invalid!

score 2 · Accepted Answer · answered Jan 25 '12 at 15:56

You have to instantiate a proper decorator, not one of the decorator mixins. E.g. 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
    });

score 2 · Answer 2 · answered Jan 26 '12 at 08:33

You should use the decoration Mixins only when you define docorations with "qx.Theme.define".

I think a better way to define custom styles is to define a new appearance key and use this key for your widget instead.

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

Qooxdoo : styling individual widgets

2 Answers2