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.
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