Question

我是qooxdoo的新手，我需要帮助为我的应用程序创建自定义主题。

我复制了原生的Modern主题并修改了它的一些功能，现在我的问题是如何将它作为新主题添加到qooxdoo中，如何在我的应用程序中使用它？

非常感谢任何帮助或指导。

Answer 1

你不需要复制它，只需扩展主题就可以了。如果您使用create-application.py帮助程序使用qooxdoo桌面骨架创建了应用程序，那么您应该已经有一个自定义主题来运行和扩展现代主题。如果没有，您只需编辑config.json文件，该文件应位于根项目文件夹中，并搜索名为QXTHEME的密钥。该键的值是一个指定主题的类名。将其更改为您的自定义主题类并重建应用程序以查看结果。以下是有关如何使用主题的更多资源：http://manual.qooxdoo.org/current/pages/desktop/ui_custom_themes.html

Answer 2

为Martin的回答添加一点：您不复制和修改主题代码，扩展和覆盖，就像使用类代码一样。

如果使用 create-application.py 创建应用程序框架， source / class 下的默认代码结构已包含自定义主题类（在 source /下）类//主题/ * ）。问题是那些主题类扩展自 Modern 主题，而实际上覆盖了任何内容，因此您可以有效地获得 Modern 外观。

但是你可以继续前进并充实这些自定义主题类，其中包含符合您口味的属性，从而创建您自己的主题。

Answer 3

我发现通过扩展其中一个现有的原生主题（经典，现代......等）而不查看源代码来创建自定义主题非常困难，我也不想搞砸原始API的文件通过修改它们，所以我做了以下几点：

1-替换了我的应用程序目录中的文件：myapplication/source/class/myapplication/theme/，文件位于/qooxdoo-directory/framework/source/class/qx/theme/modern/。总共替换了四个文件（Appearance.js，Decoration.js，Color.js和Font.js）。

2-复制装饰目录从/qooxdoo-directory/framework/source/resource/qx/decoration/Modern到我的应用程序目录：myapplication/source/recourse/myapplication/decoration。

3-从qooxdoo-directory/framework/source/resource/qx/icon/Tango复制图标目录到我的应用程序目录myapplication/source/resource/myapplication/icon。

从Tango.js复制qooxdoo-directory/framework/source/class/qx/theme/icon/Tango.js到我的应用程序目录myapplication/source/class/myapplication/theme/icon/Icon.js。

5-编辑了元文件 Themes.js 并将其更改为：

    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-编辑 Icon.js 文件（我在步骤4中从Tango.js复制）并将其更改为：

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

7-编辑 Decoration.js ， Appearance.js ， Color.js 和 Font.js 我的应用程序的主题目录并更改了类的命名空间：

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

到

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

将 Decoration.js 和 Appearance.js 中的资源路径从原始路径qx/decoration/Modern或qx/icon/Tango更正为相关的路径我的应用myapplication/decoration和myapplication/icon，例如：

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

更改为

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

ps：应用程序中的相对路径为application-name/source/resource，因此您可以application-name/folder-name引用此文件夹中的任何目录。

9-同样在步骤8中，我将decoration.js中的别名更改为：

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

10 - 在myapplication/source中运行generate.py文件。

并完成了，现在我可以更改我想要的任何内容而不会崩溃API：）

Qooxdoo - 如何创建新主题并在应用程序中使用它？

3 个答案: