如何在Windows中为小部件设置主题?

时间:2017-11-01 20:29:23

标签: qooxdoo

使用qooxdoo.org上的教程我发现了如何主题化我的小部件。这适用于整体造型。 如果我配置"标签",我的所有标签都会变成黄色文本颜色。如果我配置"按钮/标签",我的按钮上的所有标签都变成红色文本颜色,而其他所有标签都保持黄色。好到目前为止。

如果我尝试为窗口内的标签设置文本颜色,那么该怎么办?

" window / label"," window / pane / label"," window / widget / label"如果没有这些键,我可以在窗口中更改label-widget的样式。

在窗口中为标签作为子元素提供不同风格的正确键是什么?

非常感谢 瑞奇

1 个答案:

答案 0 :(得分:1)

qx.ui.window.Window是一个实现 RemoteChildrenHandling 的容器。这意味着,当涉及到窗口内容时,子控件链会停止。

根据您想要达到的目标,您可以:

  • 标签添加到窗口并直接设置标签外观
  • 继承自 Window (即您自己的自定义 Dialog 类),添加内容标签作为对话框的 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'
}));

如果您只是某些标签对象的外观,并且您不想每次都添加appearance,那么您也可以将其子类化:

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

请注意,这两种解决方案都不会让您远离将外观设置为添加到窗口的所有标签。