如何为 windows 中的小部件设置主题？

Question

通过 qooxdoo.org 上的教程，我了解了如何为我的小部件设置主题。这非常适合整体造型。如果我配置 "label"，我所有的标签都会变成黄色文本颜色。如果我配置 "button/label"，我按钮上的所有标签都变成红色文本颜色，而其他标签保持黄色。目前还不错。

如果我尝试为 window:

中的标签设置文本颜色，则不起作用

"window/label"、"window/pane/label"、"window/widget/label" 使用这些键中的 none，我可以更改 window 中标签小部件的样式。

在我的 window 中将标签作为子元素赋予不同样式的正确键是什么？

非常感谢瑞奇

Answer 1

A qx.ui.window.Window 是一个实现了 RemoteChildrenHandling 的容器。这意味着，子控件链在涉及 window 内容时停止。

根据您想实现的目标，您可以：

给Window添加一个Label，直接设置Label外观
继承自Window（即自定义Dialog class），添加内容标签作为对话框的 childControl 并使用选择的子控件路径调整主题中的标签颜色

第一个选项将导致此代码：

var win = new qx.ui.window.Window("My Title");
win.setLayout(new qx.ui.layout.VBox(10));
win.add(new qx.ui.basic.Label("My content").set({
  appearance: 'custom-label-appearance'
}));

如果 Label 对象只有一些次出现，并且不想每次都添加 appearance，您也可以子class 它：

qx.Class.define("my.Label", {
  extend: qx.ui.basic.Label,
  properties: {
    appearance: {
      refine: true,
      init: 'custom-label-appearance'
    }
  }
});

var win = new qx.ui.window.Window("My Title");
win.setLayout(new qx.ui.layout.VBox(10));
win.add(new my.Label("My content"));

这是第二个选项的示例：

qx.Class.define("my.Dialog", {
  extend: qx.ui.window.Window,

  construct: function(title, label) {
    this.base(arguments, title);
    this.setLayout(new qx.ui.layout.Atom());
    this.getChildControl('my-label').setValue(label);
  },

  members: {
    //overridden
    _createChildControlImpl : function(id)
    {
      var control;

      switch (id)
      {
        case "my-label":
          control = new qx.ui.basic.Label();
          this.add(control);
          break;
      }

      return control || this.base(arguments, id);
    }
  }
});

在这种情况下，您可以设置外观路径window/my-label。

请注意，这两种解决方案都不会阻止您为添加到 window 的所有标签设置外观。

如何为 windows 中的小部件设置主题？

How do I set themes for widgets in windows?

qooxdoo