qooxdoo : Layout of a Menu Strip

Question

In qooxdoo using qx.Desktop, I made a menu strip which looks like this:

how to modify the qx.ui.window.Window layout like this ? (I work it out in CSS)

Current qooxdoo source:

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

Seems I am still far from complete. I need to remove the default layout for this menu strip and add my own style. How can I do it?

Answer 1

This should resemble your screenshot and give you a good starting point for further adaptions:

Edit your Appearance.js like this:

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

Then edit your Decoration.js like this:

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

Finally you have to set the appearances on the widgets:

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");
      ...

Some notes:

• mywindow, mybutton, horizontalrule, redbox are of course arbitrary strings
• instead of "black" you could also write "#000" or even a string from the Color.js of the currently used theme [1]
• this is just a starting point because we now have overwritten all states (hovered, pressed, disabled ...) for the toolbar buttons. Copy the originally framework code of the style function from [2] over in your Appearance.js, merge it with your own return statement and adapt it to your needs.

Dive deeper in the code/manual:

• [1] https://github.com/qooxdoo/qooxdoo/blob/master/framework/source/class/qx/theme/modern/Color.js
• [2] https://github.com/qooxdoo/qooxdoo/blob/master/framework/source/class/qx/theme/modern/Appearance.js#L1441

Theming in general:

• http://manual.qooxdoo.org/current/pages/desktop/ui_theming.html
• http://manual.qooxdoo.org/current/pages/desktop/ui_custom_themes.html

More specific:

• http://manual.qooxdoo.org/current/pages/desktop/ui_decorators.html
• http://manual.qooxdoo.org/current/pages/desktop/ui_appearance.html