Create responsive Qooxdoo HBox layout where widgets don't show without enough space

Question

How can I create with Qooxdoo a user resizeable Window where the content is made out of a few widgets (e.g. Labels) where the display of some is disabled when the space isn't enough?

Example:
I have the three labels "unimportant" (right aligned), "very important" (left aligned) and "must have" (right) in the HBox. Any extra space should go just right of the left most label to keep the alignment requirements.
In ASCII art this would look like:

--------------------------------------------------------
|very important|                 |unimportant|must have|
--------------------------------------------------------

-----------------------------------------------
|very important|        |unimportant|must have|
-----------------------------------------------

--------------------------------------
|very important|unimportant|must have|
--------------------------------------

-------------------------------
|very important|    |must have|
-------------------------------
                                         <-- making the window smaller
--------------------------
|very important|must have|
--------------------------

-------------------
|       |must have|
-------------------

-----------
|must have|
-----------

The minimal width of the Window would be the space that "must have" requires.

Bonus question: the "unimportant" would actually be a label for "must have" which can be a widget that takes more vertical space. So both should be centered to each other, something that an Atom with those two might be normally used for.

goldim · Accepted Answer · 2023-01-15T01:47:03.300

Don't like implementation but it does work as intended:

const mainBar = new qx.ui.container.Composite(new qx.ui.layout.HBox());

// sub bar for right and center labels
const subBar = new qx.ui.container.Composite(new qx.ui.layout.HBox());
subBar.setMinWidth(0);// this line is important

// left static label
const left = new qx.ui.basic.Atom("very important");
subBar.add(left);

// center label has a minor priority
const center = new qx.ui.container.Composite(new qx.ui.layout.HBox());
const dummy = new qx.ui.basic.Atom();
center.add(dummy, {flex: 1});
const centerLabel = new qx.ui.basic.Atom("unimportant");
center.add(centerLabel);
subBar.add(center, {flex: 1});
mainBar.add(subBar, {flex: 1});

const right = new qx.ui.form.Button("must have");
mainBar.add(right);

const win = new qx.ui.window.Window().set({width: 600, height: 100});
win.setLayout(new qx.ui.layout.Grow());
win.add(mainBar);
win.setUseResizeFrame(false);
win.open();

const defaultLeftWidth = left.getSizeHint().width;
const defaultCenterWidth = center.getSizeHint().width;
win.addListener("resize", function(){
  this.info(center.getBounds().width, defaultCenterWidth);
  if (center.getBounds().width <= defaultCenterWidth){
    centerLabel.setVisibility("hidden");
  } else {
    centerLabel.setVisibility("visible");
  }
  
  if (subBar.getBounds().width < defaultLeftWidth){
    left.setVisibility("hidden");
  } else {
    left.setVisibility("visible");
  }
}, this);

// Document is the application root
const doc = this.getRoot();

// Add button to document at fixed coordinates
doc.add(win,
{
  left : 100,
  top  : 50
  
});

Thanks for the effort. But apart from the missing alignment (I tried to make it more clear in the description above) your solution doesn't have the "pop in"/"pop out" of the labels depending on the space available. — Chris, Jan 13 '23 at 16:56
Edited, under pop in / pop out you mean an animation? Now it just appears and disappears. — goldim, Jan 15 '23 at 01:49

Create responsive Qooxdoo HBox layout where widgets don't show without enough space

1 Answers1