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

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- 用/qooxdoo-directory/framework/source/class/qx/theme/modern/ 中的文件替换了我的应用程序目录中的文件：myapplication/source/class/myapplication/theme/。一共替换了四个文件（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。

4- 将 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", { 元： { 颜色：myapplication.theme.Color， 装饰：myapplication.theme.Decoration， 字体：myapplication.theme.Font， 图标：myapplication.theme.icon.Icon， 外观：myapplication.theme.Appearance } });

6- 编辑 Icon.js 文件（我在步骤 4 中从 Tango.js 复制）并将其更改为：

qx.Theme.define("myapplication.theme.icon.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>",

8- 更正了 Decoration.js 和 Appearance.js 中的资产路径，从原始路径 qx/decoration/Modern 或 qx/icon/Tango 到与我的应用程序相关的路径 @987654334 @ 和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 崩溃:)