Question

在使用qx.Desktop的qooxdoo中，我创建了一个菜单条，如下所示： menu strip in qooxdoo

如何像这样修改qx.ui.window.Window布局？（我在CSS中解决）

menu strip in JavaScript

目前的qooxdoo来源：

qx.Class.define("my_project.gameui.MainGameMenu",
{
  extend : qx.ui.window.Window,

    construct : function()
    {
      this.base(arguments, "MainGameMenu");
      // hide the window buttons
      this.setShowClose(false);
      this.setShowMaximize(false);
      this.setShowMinimize(false);
      // adjust size
      this.setWidth(400);
      this.setHeight(80);

      this.getChildControl("captionbar").setVisibility("excluded");

      var layout = new qx.ui.layout.Grid(0,0);
      this.setLayout(layout);
      var toolbar = new qx.ui.toolbar.ToolBar();
      this.add(toolbar, {row: 0, column: 0});

      var btn_status    = new qx.ui.toolbar.Button("STATUS");
      var btn_backpack  = new qx.ui.toolbar.Button("BACKPACK");
      var btn_crew      = new qx.ui.toolbar.Button("CREW");
      var btn_social    = new qx.ui.toolbar.Button("SOCIAL");
      var btn_mission   = new qx.ui.toolbar.Button("MISSION");
      var btn_system    = new qx.ui.toolbar.Button("SYSTEM");
      btn_status.setWidth(80);
      btn_status.setHeight(80);
      toolbar.add(btn_status);
      toolbar.add(btn_backpack);
      toolbar.add(btn_crew);
      toolbar.add(btn_social);
      toolbar.add(btn_mission);
      toolbar.add(btn_system);
    }
});

似乎我还远未完成。我需要删除此菜单条的默认布局并添加我自己的样式。我该怎么办？

Answer 1

这应该类似于您的屏幕截图，为您提供进一步调整的良好起点：

像这样编辑Appearance.js：

qx.Theme.define("my_project.theme.Appearance",
{
  extend : qx.theme.modern.Appearance,

  appearances :
  {
    "mywindow":
    {
      style : function(states)
      {
        return {
          paddingRight: 15,
          paddingLeft: 15,
          decorator: "horizontalrule"
        };
      }
    },

    "mybutton":
    {
      style : function(states)
      {
        return {
          padding: 10,
          marginBottom: 1,
          textColor: "blue",
          decorator: "redbox"
        };
      }
    }
  }
});

然后像这样编辑Decoration.js：

qx.Theme.define("my_project.theme.Decoration",
{
  extend : qx.theme.modern.Decoration,

  decorations :
  {
    "horizontalrule":
    {
        decorator : [
          qx.ui.decoration.MSingleBorder
        ],

        style:
        {
          widthBottom: 1,
          colorBottom: "black"
        }
    },

    "redbox":
    {
        decorator : [
          qx.ui.decoration.MSingleBorder
        ],

        style:
        {
          width: 1,
          color: "red"
        }
    }
  }
});

最后，您必须在小部件上设置外观：

qx.Class.define("my_project.gameui.MainGameMenu",
{
  extend : qx.ui.window.Window,

    construct : function()
    {
      this.base(arguments, "MainGameMenu");

      ...
      // reset appearance
      // (could also be done by defining an additional appearance like before)
      toolbar.setAppearance("");
      ...
      btn_status.setAppearance("mybutton");
      btn_backpack.setAppearance("mybutton");
      btn_crew.setAppearance("mybutton");
      btn_social.setAppearance("mybutton");
      btn_mission.setAppearance("mybutton");
      btn_system.setAppearance("mybutton");
      ...
      this.setAppearance("mywindow");
      ...

一些注意事项：

mywindow，mybutton，horizontalrule，redbox当然是任意字符串
而不是"black"你也可以写"#000"甚至是当前使用的主题的Color.js中的字符串[1]
这只是一个起点，因为我们现在已经覆盖了工具栏按钮的所有状态（悬停，按下，禁用...）。将style函数的原始框架代码从[{1]}复制到Appearance.js中，将其与您自己的return语句合并，并根据您的需要进行调整。

深入研究代码/手册：

一般主题：

更具体：

qooxdoo：菜单条的布局

1 个答案: