qooxdoo - qooxdoo : 菜单条的布局

Question

在 qooxdoo using 中qx.Desktop，我制作了一个菜单条，如下所示： qooxdoo 中的菜单条

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

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);
    }
});

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

score 2 · Accepted Answer

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

像这样编辑你的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"你也可以从当前使用的主题 [1] 中编写"#000"甚至是字符串Color.js
这只是一个起点，因为我们现在已经覆盖了工具栏按钮的所有状态（悬停、按下、禁用...）。将style函数的原始框架代码从 [2] 复制到您的中Appearance.js，将其与您自己的 return 语句合并并根据您的需要进行调整。

深入了解代码/手册：

一般主题：

更详细：

qooxdoo - qooxdoo : 菜单条的布局

1 回答 1

Related

Reference