appearances, decorations 추가 하기 (예-버튼)

// Decoration

            var id, image0, image1, image2, image3

            var deco = qx.theme.manager.Decoration.getInstance();

            var decotheme = deco.getTheme();

            decotheme.decorations[id] = {

                decorator : [qx.ui.decoration.Background],

                style : {backgroundImage: image1}

            }

            decotheme.decorations[id + "-disabled"] = {

                include : "testButton",

                style : {backgroundImage: image2}

            }

            decotheme.decorations[id + "-focused"] = {

                include : "testButton",

                style : {backgroundImage: image1}

            }

            decotheme.decorations[id + "-hovered"] = {

                include : "testButton",

                style : {backgroundImage: image0}

            }

            decotheme.decorations[id + "-pressed"] = {

                include : "testButton",

                style : {backgroundImage: image3}

            }

            // testButton

            var appr = qx.theme.manager.testButton.getInstance();

            var apprtheme = appr.getTheme();

            apprtheme.appearances[id] = {

                alias : "atom",

                style : function(states)

                {

                    var decorator, textColor;

                    var padding = [3, 9]; // default padding css-case

                    if (states.checked && states.focused && !states.inner)

                    {

                        decorator = "button-checked-focused";

                        textColor = undefined;

                        padding = [1, 7];

                    }

                    else if (states.disabled)

                    {

                        decorator = id + "-disabled";

                        textColor = undefined;

                    }

                    else if (states.pressed)

                    {

                        decorator = id + "-pressed";

                        textColor = "text-hovered";

                    }

                    else if (states.hovered)

                    {

                        decorator = id + "-focused";

                        textColor = "text-hovered";

                    }

                    else if (states.focused && !states.inner)

                    {

                        decorator = id + "-focused";

                        textColor = undefined;

                        padding = [1, 7];

                    }

                    else

                    {

                        decorator = id;

                        textColor = undefined;

                    }

                    return {

                        decorator : decorator,

                        textColor : textColor,

                        padding : padding,

                        margin : [1, 0],

                        center : true

                    };

                }

            }

this.getRoot().add(new qx.ui.form.Button("testButton").setApperance("testButton"));

추가 정보 : 모든 값은 qx.theme.manager 를 통해서 변경 가능하다.

	Appearance		qx.theme.manager.Appearance Manager for appearance themes
	Color		qx.theme.manager.Color Manager for color themes
	Decoration		qx.theme.manager.Decoration Manager for decoration themes
	Font		qx.theme.manager.Font Manager for font themes
	Icon		qx.theme.manager.Icon Manager for icon themes
	Meta		qx.theme.manager.Meta Manager for meta themes