Automatically resize a qx.ui.form.List according to the number of contained items

Hi,

Pretty much everything is in the title: I have a qx.ui.form.List which is a acting as a selector. I put a number of entries in it, and I would like the box's height to be automatically computed. Currently it seems it chooses a default height. Manually calling setHeight() works, but is not convenient (I dont know the exact height).

Ideally I would like it to resize automatically when adding or removing items to this list.

I tried a lot of things but none worked, I am quite stuck right now.

Jean-Noel

------------------------------------------------------------------------------
Are you an open source citizen? Join us for the Open Source Bridge conference!
Portland, OR, June 17-19. Two days of sessions, one day of unconference: $250.
Need another reason to go? 24-hour hacker lounge. Register today!
http://ad.doubleclick.net/clk;215844324;13503038;v?http://opensourcebridge.org
_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@...
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

[Fabian Jakobs]

hi Jean-Noël,

> Pretty much everything is in the title: I have a qx.ui.form.List which
> is a acting as a selector. I put a number of entries in it, and I
> would like the box's height to be automatically computed. Currently it
> seems it chooses a default height. Manually calling setHeight() works,
> but is not convenient (I dont know the exact height).
>
> Ideally I would like it to resize automatically when adding or
> removing items to this list.
>
> I tried a lot of things but none worked, I am quite stuck right now.

What happens if you give the list widget a height of "null". This means
"autosize" and should resize the list with its content.

What is the parent layout of the list?

Best fabian



--
Fabian Jakobs
JavaScript Framework Developer

1&1 Internet AG - Web Technologies
Ernst-Frey-Straße 9 · DE-76135 Karlsruhe
Telefon: [phone]
fabian.jakobs@...

Amtsgericht Montabaur / HRB 6484
Vorstände: Henning Ahlert, Ralph Dommermuth, Matthias Ehrlich, Thomas Gottschlich, Robert Hoffmann, Markus Huhn, Hans-Henning Kettler, Dr. Oliver Mauss, Jan Oetjen
Aufsichtsratsvorsitzender: Michael Scheeren


------------------------------------------------------------------------------
Are you an open source citizen? Join us for the Open Source Bridge conference!
Portland, OR, June 17-19. Two days of sessions, one day of unconference: $250.
Need another reason to go? 24-hour hacker lounge. Register today!
http://ad.doubleclick.net/clk;215844324;13503038;v?http://opensourcebridge.org
_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@...
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

[Alexander Back]

Hi Jean-Noel,

On Monday 22 June 2009 Jean-Noël Rivasseau wrote:
> Pretty much everything is in the title: I have a qx.ui.form.List which is a
> acting as a selector. I put a number of entries in it, and I would like the
> box's height to be automatically computed. Currently it seems it chooses a
> default height. Manually calling setHeight() works, but is not convenient
> (I dont know the exact height).
>
> Ideally I would like it to resize automatically when adding or removing
> items to this list.
Normally the list widget shows scrollbars and since this is the default
behaviour you need to do some extra lifting to getting things done.

First you can use the "addItem" and "removeItem" events to get informed that
an list item was added / removed.

You can attach a listener method with the following code

--snip--
// "this" refers to the list widget

var containerHeight = this.getChildrenContainer().getSizeHint().height;
this.setHeight(containerHeight + (this.getInsets().top * 2) + 16);
--snip--

Don't ask me where the "16" pixels coming from. I simply played with the
values to prevent the scrollbar to be shown.

Hope that helps,
  Alex



------------------------------------------------------------------------------
Are you an open source citizen? Join us for the Open Source Bridge conference!
Portland, OR, June 17-19. Two days of sessions, one day of unconference: $250.
Need another reason to go? 24-hour hacker lounge. Register today!
http://ad.doubleclick.net/clk;215844324;13503038;v?http://opensourcebridge.org
_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@...
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

[Fink, Andreas]

Hi Jean-Noel,

here is a small code snippet which works in qooxdoo playground to give you a example solution for your problem:

// Document is the application root
var doc = this.getRoot();
var list = new qx.ui.form.List();
for (var i = 0; i < 15; i++) {
  list.add(new qx.ui.form.ListItem("item " +i));
}

doc.add(list, {top : 20, left : 20});

//function to resize the list
var resizeList = function(e) {
  //this refers to the list
  qx.event.Timer.once(function() {
    var listChilds = this.getChildren();
    var lastChild = listChilds[listChilds.length - 1];
    this.setHeight(this.getItemBottom(lastChild) + 4);
  }, this, 20);
}

list.addListener("appear", resizeList); //resize when list appears
list.addListener("addItem", resizeList); //resize if item was added
list.addListener("removeItem", resizeList); //resize if item was removed

var addButton = new qx.ui.form.Button("append new item");
addButton.addListener("execute", function(e) {
  list.add(new qx.ui.form.ListItem("new item"));
});
doc.add(addButton, {top : 20, left : 150});
var removeButton = new qx.ui.form.Button("remove first item");
removeButton.addListener("execute", function(e) {
  list.remove(list.getChildren()[0]);
});
doc.add(removeButton, {top : 50, left : 150});


Regards,
Andreas

Von: Jean-Noël Rivasseau [mailto:elvanor@...]
Gesendet: Montag, 22. Juni 2009 17:40
An: qooxdoo Development
Betreff: [qooxdoo-devel] Automatically resize a qx.ui.form.List according tothe number of contained items

Hi,

Pretty much everything is in the title: I have a qx.ui.form.List which is a acting as a selector. I put a number of entries in it, and I would like the box's height to be automatically computed. Currently it seems it chooses a default height. Manually calling setHeight() works, but is not convenient (I dont know the exact height).

Ideally I would like it to resize automatically when adding or removing items to this list.

I tried a lot of things but none worked, I am quite stuck right now.

Jean-Noel
------------------------------------------------------------------------------
Are you an open source citizen? Join us for the Open Source Bridge conference!
Portland, OR, June 17-19. Two days of sessions, one day of unconference: $250.
Need another reason to go? 24-hour hacker lounge. Register today!
http://ad.doubleclick.net/clk;215844324;13503038;v?http://opensourcebridge.org
_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@...
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

[Vincent Bernardi]

>> I tried a lot of things but none worked, I am quite stuck right now.
> What is the parent layout of the list?

I intervene, since JN and me are working on this together.

Parent layout is a  qx.ui.popup.Popup(new qx.ui.layout.HBox()).
Quick testing shows that your suggestion seems to work very well.

 From me and JN, thanks a lot, and to everyone who answered.

V.



------------------------------------------------------------------------------
Are you an open source citizen? Join us for the Open Source Bridge conference!
Portland, OR, June 17-19. Two days of sessions, one day of unconference: $250.
Need another reason to go? 24-hour hacker lounge. Register today!
http://ad.doubleclick.net/clk;215844324;13503038;v?http://opensourcebridge.org
_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@...
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

[Ralf Nieuwenhuijsen-2]

Out of curiosity: are you using the qx.ui.popup.Popup containing a list as an sort of rich combo-box?
Does this work out nice in practice?

Mvg,
Ralf

On Tue, Jun 23, 2009 at 11:59 AM, Vincent Bernardi <vincent@...> wrote:

>> I tried a lot of things but none worked, I am quite stuck right now.

> What is the parent layout of the list?

I intervene, since JN and me are working on this together.

Parent layout is a  qx.ui.popup.Popup(new qx.ui.layout.HBox()).
Quick testing shows that your suggestion seems to work very well.

 From me and JN, thanks a lot, and to everyone who answered.

V.

------------------------------------------------------------------------------
Are you an open source citizen? Join us for the Open Source Bridge conference!
Portland, OR, June 17-19. Two days of sessions, one day of unconference: $250.
Need another reason to go? 24-hour hacker lounge. Register today!
http://ad.doubleclick.net/clk;215844324;13503038;v?http://opensourcebridge.org
_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@...
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

------------------------------------------------------------------------------

_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@...
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

[Vincent Bernardi]

On 5 juil. 09, at 15:41, Ralf Nieuwenhuijsen wrote:
> Out of curiosity: are you using the qx.ui.popup.Popup containing a  
> list as an sort of rich combo-box?
> Does this work out nice in practice?

If by a combo-box you mean both a list and an editable text field, not  
really, we just display the single-selection list containing a choice  
of options for the user. The popup is set to fade out after three  
seconds if the user doesn't enter the popup with the mouse. This works  
ok enough for now. I have improvements in mind but I don't know when  
I'll get around to it.

V.

------------------------------------------------------------------------------
_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@...
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

[Gene Amtower]

Ralf,

To your question about making a rich combo-box, I've created a filthy-rich combo box using a qx.ui.popup.Popup that contains a table instead of a list, allowing the selection of a table entry in the popup object.  It wasn't really that difficult to build the popup object with the table for this purpose, although I use the textfield to drive a backend search that populates the table entries.  You may be interested in more typical combo-box functionality, which is already provided by the qx.ui.form.ComboBox class in the framework.

So, in answer to your question, it's easy to build rich widget functionality by combining existing classes.  I just had to create a listener for the qx.ui.form.TextField widget to display the popup and an appropriate selection listener for my popup contents (list, table, etc.) to drive the behavior I needed from a user selection in the popup.  If you're interested in standard ComboBox functionality, just use the qx.ui.form.ComboBox class, otherwise you can build interesting popups in Qooxdoo quite easily like I did.

I'm really just a beginner myself, and this proved to be easy once I understood the Qooxdoo widget usage and listener functionality.  This is why the ComboBoxEx (textfield with a popup table) in 0.7.x was never ported to 0.8 - because it's so easy to build within your app code, you don't really need a widget in the framework.

   Gene

On Mon, 2009-07-06 at 09:43 +0200, Vincent Bernardi wrote:

On 5 juil. 09, at 15:41, Ralf Nieuwenhuijsen wrote:
> Out of curiosity: are you using the qx.ui.popup.Popup containing a  
> list as an sort of rich combo-box?
> Does this work out nice in practice?

If by a combo-box you mean both a list and an editable text field, not  
really, we just display the single-selection list containing a choice  
of options for the user. The popup is set to fade out after three  
seconds if the user doesn't enter the popup with the mouse. This works  
ok enough for now. I have improvements in mind but I don't know when  
I'll get around to it.

V.

------------------------------------------------------------------------------
_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@...
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

------------------------------------------------------------------------------
Enter the BlackBerry Developer Challenge  
This is your chance to win up to $100,000 in prizes! For a limited time,
vendors submitting new applications to BlackBerry App World(TM) will have
the opportunity to enter the BlackBerry Developer Challenge. See full prize
details at: http://p.sf.net/sfu/blackberry
_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@...
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel