javascriptqooxdootheming

How to save theme styles for library widget?


I have a main project A which depends on a project B. The project B contains special button and there is B/theme folder in which I describe specific styles. If I use B.Button in B and compile and run B - styles work fine. Hovewer if I use the button B.Button in A I get button without styles at all.

Is there right way to save styles of B.Button in A project?

The theme styles for the button:

qx.Theme.define("B.theme.Appearance",
{
  extend : qx.theme.indigo.Appearance,

  appearances :
  {
    "mybutton": {
      include: "button",
      style: function(states){
        return {
          padding: 100
        };
      }
    }
  }
});

I understand I could separate styles into a special theme project and describe all required stuff there but I think about about B as a fully independent project which I could load from another location (e.g. remote repository) and this project is provided with own styles too among widgets/classes.


Solution

  • The B project works because it has the B.theme compiled into it; if you compile project A, you either need that project to be compiled to use the same theme (eg in compile.json you set applications[].theme to be "B.theme"), or if project A already has a theme that you don't want to loose, you need to include it somehow.

    One solution is to create your theming as Mixins - eg in project B, create a

    qx.Theme.define("B.theme.MAppearance", {
      appearances : {
        "mybutton": { /* ... snip ... */ }
      }
    });
    

    and also:

    qx.Theme.define("B.theme.Appearance", {
      extend : qx.theme.indigo.Appearance,
      include: [ B.theme.MAppearance ]
    });
    
    

    Then in project A you can also do:

    qx.Theme.define("A.theme.Appearance", {
      extend : qx.theme.indigo.Appearance,
      include: [ B.theme.MAppearance ]
    });
    
    

    You can use the mixin approach with all aspects of a theme, eg Decorators, Colors, etc - so you might like to create a set of mixin for your buttons, and then a separate set of mixins for some other, unrelated set of widgets