Why can't a member map be used to store toolbars?

Question

I defined the following window:

qx.Class.define('my.Window', {
   ...

   construct: function(caption, icon) {
       this.base(arguments, caption, icon);
       this.setLayout(new qx.ui.layout.VBox(10));

       this.add(new qx.ui.form.renderer.Single(this.getForm('some')));
       this.add(new qx.ui.form.renderer.Single(this.getForm('other')));

       this.add(this.getToolbar('test'));  // This is shown
       this.add(this.getToolbar('some'));  // This is not shown
       this.add(this.getToolbar('other')); // This is not shown
   },

   members: {
      _forms: {},
      _toolbars: {},

      getForm: function(id) {
          if(this._forms[id]) return this._forms[id];

          if(id = 'some') this._forms[id] = new Form();
          else if(id == 'other') this._forms[id] = new OtherForm();

          return this._forms[id];
      },

      getToolbar: function(id) {
          if(id == 'test') {
             if(this._tb) return this._tb;
             this._tb = new TestToolbar();
             return this._tb;
          }
          else if(id == 'some') this._toolbars[id] = new SomeToolbar();
          else if(id == 'other') this._toolbars[id] = new OtherToolbar();

          return this._toolbars[id];              
      }
  }
});

When I show the window, the forms ('some' and 'other') are shown. Other items, such as TestToolbar and a List, are also shown. However, the other Toolbars ('test', 'some', and 'other') are not shown..

I tried to change _toolbars from an object to an array, but I got the same behavior.

note that you should NOT initialize member properties with objects ... you have todo this in the constructor or they will be shared by all instances of your class ... this._forms = {}; — Tobi Oetiker, Jun 22 '16 at 20:59
if you add this to the playground https://demo.qooxdoo.org/current/playground then it will be easier for others to see how your code fails — Tobi Oetiker, Jun 22 '16 at 21:02
Yeshua please create a complete playgound example as Tobi said. If you are able to replicate the faulty behaviour there it would easier to find out what's wrong with the code. But to give a short answer to your question: it IS possible to hold instances in member maps, even toolbar instances. — level420, Jun 23 '16 at 05:39

score 3 · Accepted Answer · answered Jun 23 '16 at 09:58

In your example, the getToolbar() method will always create a new Toolbar no matter what; this means that while the constructor will add a new toolbar to the window, if you subsequently call getToolbar() and add widgets to it you are adding to the wrong toolbar (i.e. adding to a toolbar which has not been added to the window).

Here's a slightly modified version of your example that does work in the playground

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

   construct: function(caption, icon) {
       this.base(arguments, caption, icon);
       this.setLayout(new qx.ui.layout.VBox(10));

       this._toolbars = {};

       //commented out because
       //this.add(new qx.ui.form.renderer.Single(this.getForm('some')));
       //this.add(new qx.ui.form.renderer.Single(this.getForm('other')));

       this.add(this.getToolbar('test'));  // This is shown
       this.add(this.getToolbar('some'));  // This is not shown
       this.add(this.getToolbar('other')); // This is not shown

       this.getToolbar('test').add(new qx.ui.toolbar.Button("Test Button"));
       this.getToolbar('some').add(new qx.ui.toolbar.Button("Some Button"));
       this.getToolbar('other').add(new qx.ui.toolbar.Button("Other Button"));
   },

   members: {
      _forms: null,
      _toolbars: null,

      getForm: function(id) {
          if(this._forms[id]) return this._forms[id];

          if(id == 'some') this._forms[id] = new Form();
          else if(id == 'other') this._forms[id] = new OtherForm();

          return this._forms[id];
      },

      getToolbar: function(id) {
        if (!this._toolbars[id]) {
          if(id == 'test') {
             if(this._tb) return this._tb;
             this._tb = new qx.ui.toolbar.ToolBar();
             return this._tb;
          }
          else if(id == 'some') this._toolbars[id] = new qx.ui.toolbar.ToolBar();
          else if(id == 'other') this._toolbars[id] = new qx.ui.toolbar.ToolBar();
        }
        return this._toolbars[id];              
      }
  }
});
var win = new my.Window("First Window");
win.setWidth(300);
win.setHeight(200);
win.setShowMinimize(false);

this.getRoot().add(win, {left:20, top:20});
win.open();

Why can't a member map be used to store toolbars?

1 Answers1