Qooxdoo - how do i create a new theme and use it i

Question

I am quite new to qooxdoo and I need help in creating a custom theme for my application.

I copied the native Modern theme and modified some of its features, now my question is how do I add it as new theme to qooxdoo and how can I use it in my application?

any help or guidance would be greatly appreciated.

Answer 1

You don't need to copy it over, simply extending the theme would be good. If you created your app with the qooxdoo desktop skeleton using the create-application.py helper, you should already have a custom theme in place running and extending the modern theme. If not, you simply have to edit the config.json file which should be in your root project folder and search for a key named QXTHEME. The value of that key is a classname which specifies your theme. Change that to your custom theme class and rebuild the app to see the result. Here are some further resources on how to work with themes: http://manual.qooxdoo.org/current/pages/desktop/ui_custom_themes.html

Answer 2

To add a bit to Martin's answer: You don't copy and modify theme code, you extend and override, much as with class code.

If you create an application skeleton with create-application.py, the default code structure under source/class already contains custom theme classes (under source/class//theme/*). The thing is those theme classes extend from the Modern theme without actually overriding anything, so you effectively get the Modern look and feel.

But you can then go ahead and flesh out those custom theme classes, with properties that suite your taste, thereby creating your own theme.

Answer 3

i found it very difficult to create a custom theme by extending one of the existing native themes (classic, modern... etc) without looking at the source code, also i don't want to mess up the original API's files by modifying them, so i did the following:

1- replaced files in my application's directory: myapplication/source/class/myapplication/theme/ with the files in /qooxdoo-directory/framework/source/class/qx/theme/modern/. replaced four files in total (Appearance.js, Decoration.js, Color.js and Font.js).

2- copied decoration directory from /qooxdoo-directory/framework/source/resource/qx/decoration/Modern to my application's directory: myapplication/source/recourse/myapplication/decoration.

3- copied icons directory from qooxdoo-directory/framework/source/resource/qx/icon/Tango to my application's directory myapplication/source/resource/myapplication/icon.

4- copied Tango.js from qooxdoo-directory/framework/source/class/qx/theme/icon/Tango.js to my application's directory myapplication/source/class/myapplication/theme/icon/Icon.js.

5- edited the meta file Themes.js and changed it to:

    qx.Theme.define("myapplication.theme.Theme",
    {
      meta :
      {
        color : myapplication.theme.Color,
        decoration : myapplication.theme.Decoration,
        font : myapplication.theme.Font,
        icon : myapplication.theme.icon.Icon,
        appearance : myapplication.theme.Appearance
      }
    });

6- edited Icon.js file (which i copied from Tango.js in step 4) and changed it to:

    qx.Theme.define("myapplication.theme.icon.Icon",
    {
      title : "myIcons",
      aliases : {
        "icon" : "myapplication/icon"
      }
    });

7- edited Decoration.js, Appearance.js, Color.js and Font.js in my application's theme directory and changed the classes' namespaces from:

qx.Theme.define("qx.theme.modern.<file's name>",

to

qx.Theme.define("myapplication.theme.<file's name>",

8- corrected assets paths in Decoration.js and Appearance.js from the original path qx/decoration/Modern or qx/icon/Tango to the one relevant to my appliaction myapplication/decoration and myapplication/icon, for example:

    @asset(qx/decoration/Modern/toolbar/toolbar-part.gif)

changed to

    @asset(myapplication/decoration/toolbar/toolbar-part.gif)

ps: the relative path in an application is application-name/source/resource, so you can refer to any directory in this folder by application-name/folder-name.

9- likewise in step 8 i changed aliases in decoration.js to:

    aliases : {
      decoration : "myapplication/decoration"
    },

10 - ran generate.py file in myapplication/source.

and done, now i can change anything i want without crashing the API :)