ListBuilder Add-On

Hi fellow developers!

I thought it would be good to ‘announce’ my add-ons in the forums since it also provides a handy way to get feedback, feature requests and bug reports.

So this thread will be about the ListBuilder add-on. ListBuilder is built to bring ordering into the TwinColSelect component of Vaadin, and also to fix a few minor issues with the core component. You’ll find a list of the main features below:

  • Item ordering preserved (duh)
  • Prettier buttons with icons
  • Button state is updated based on what is selected
  • Fixes a few bugs from TwinColSelect which may result into simultaneously selected rows in both columns
  • Allow adding style names to left and right column captions
  • Latest version uses Lists internally and thus the getValue() method will return a List
  • The setValue method still accepts collections, although there’s not much sense in using e.g. a Set here
  • Latest version also implements select and unselect methods
    [url=http://vaadin.com/directory#addon/listbuilder]

The Add-On can be found here (download includes source code).
[/url]
[url=http://tepi.virtuallypreinstalled.com/listbuilder?restartApplication]

A simple demo application is running here.
[/url]

Please take a look at the demo and grab a copy from the directory!

-Teppo

This, sir, should be in the Vaadin core, since this has been reimplemented in various projects a countless number of times.

A very nice add-on.

It would be nice to have one more feature, though: the possibility to keep the left-hand list sorted when moving items back to it from the right. The tricky part is in which order it should be kept - maybe the original order given by the server.

Adding drag and drop to the widget (both re-ordering, selecting and de-selecting) could make it quite a bit more intuitive to use.

Thanks for the tip, I somehow overlooked that feature :slight_smile:

Version 0.6.0 which preserves the original item ordering on the left-hand list is now available in the directory (and testable in the demo app).

Good idea! I just have not yet done any d’n’d implementations on the client side so it sounds a bit scary. But it will definitely be on the enhancement list when I do have the time to learn about it.

Hi, Teppo!
Thanks for a useful addon.

There is a bug in ListBuilder: events sended on selecting/deselecting items store outdated list of selected items (the previous one, to be specific).

It happens because of changeVariables implementation in server-side component ListBuilder.
There is a diff of what must be changed to fix this issue:
diff

As you can see, setValue(newsel, true) is a method of AbstractSelect, and calling it we eventually will call fireValueChange, but the stored orderedValues haven’t been updated so far.
Changing the order fixes this issue.

Can you fix it and rebuild an addon, please? Thanks in advance!

Teppo,

I am looking for a method to detect if the right side of the listbuilder (the list) is empty.
I tried using size,row,col and value but none of these helped.
What should be used to detect that right col is empty?

Thanks and regards,
Geeta

Hi,

Thanks for the bug report and sorry for the very late reply, I must have somehow missed your post completely :frowning:

Anyway, there’s now a new version (0.7.0) of the ListBuilder available. The selection change handling is revised. The value provided in the ValueChangeEvent should now be the actual current value. I also noticed that changing the item ordering did not fire an event at all, so that is fixed also.

If this is still relevant to you, please try out the new version and report back if this fixed the issue you were having.

-tepi

You should simply use the getValue() method like with all other Vaadin fields. It will return an empty collection when there is nothing selected (meaning that the right side is empty).

Just wanted to market a bit :slight_smile:

There’s now a version of ListBuilder available made for the Vaadin 7 beta 11. Hopefully it will also work with the final Vaadin 7.

Please download it
from the directory
and give any feedback right in this thread. Thanks!

-tepi

Source code for the ListBuilder add-on is now available in
github
.

  • The source code of Vaadin 7 compatible version is under master branch.
  • The Vaadin 6 compatible version is now under a branch named ‘vaadin6’.
  • Ivy dependency management is used in the V7 compatible version.

-tepi

Is this working in Vaadin 7.0.6?

I am not sure, but I tried converting a TwinColSelect to a ListBuilder, changed the Sets to Lists, but somehow my values are not showing up in the right side. I build the list by adding in all of the IDs using addItem(), then use setItemCaption() to specify the labels to appear with each ID. The left side list appears to show all elements, with nothing in the right side. I am assuming that my ID (it’s a class we use called EsfUUID that encapsulates a UUID) is somehow not matching.

Also, when I do not set a width, the left/right selection lists are narrower than the labels shown inside.

When I set to 100% width, it would sometimes appear and then shrink, and another time each of the left and ride sides appeared to be 100% (so it was twice as wide as my screen). Because these are inside a Disclosure (the Animator add-on), it’s possible they are not working well together.

Is there any way to set width of left column list and right column list?

You can’t independently set the widths of the lists. However, there’s a method org.vaadin.tepi.listbuilder.ListBuilder.setColumns(int) which will set the ‘columns’ property for both of the lists, essentially dictating the width.

Hi,

You didn’t mention it but I assume you are calling setValue(…) with a collection containing whatever you want to be shown on the right side? Using some test classes this seems to work for me using Vaadin 7.0.6. Note that whatever you pass here should equal some item id from the left side in order for it to work. An easy way to test if it works at all is to call

listBuilder.setValue(Collections.singletonList(listBuilder.getItemIds().iterator().next())); which builds a collection out of the first item id in the container (left-hand side) and sets that as the value. After this call the first item should be on the right side.

This is a feature, not a bug :slight_smile: It should work the same way as the TwinColSelect: If you don’t set either the columns property or a specific width to the whole component, the lists will be rendered with a default width. There is no automatic sizing of the columns based on their contents.

I did not try this with the disclosure, but without it a 100% width and height seems to function correctly. I assume there’s some kind of incompatibility with the addons. Can you try if it works with a TwinColSelect in the Disclosure and report back?

-tepi

For Java 7, you can change the internal intermediate result to a LinkedHashSet, this will allow getValue to return the result in the selected order because Vaadin doesn’t convert Sets (until they change their implementation of course). Modified ListBuilder.java is attached.
To be honest, I don’t understand why the demo works, because it shouldn’t …
13097.java (17.4 KB)

Interesting addon. Wish this stuff was in Vaadin core.

Just a question out of curiosity: why did you made getOrderedValue() a private method? What’s the rationale of hiding it? I know we can use it via getInternalValue() which is protected, but… why? This forces to wrap it for no reason.

New version of ListBuilder (for V7) is out - 0.7.3.v7. This fixes the value ordering issue, now you can get the ordered value by just calling getValue() as usual. Sorry it took so long, I was accidentally looking at the Vaadin 6 version of the add-on all the time and there it has been working properly all the time. So getOrderedValue() is still private since it should not be needed (externally) anymore.

Hi,

I stumbled today on an issue with vaadin 6 version of ListBuilder (0.7.0). I have container filter attached to the container that I use with list builder and a text field that can be writen to that is used as the filter text.

Steps to reproduce are as follows:

  1. Select some items in list builder and add them to selection
  2. write something to the filter text field so that the selected items become invisible
  3. clear the filter so that the selected items should appear again

After this I would expect the items to appear again on list builder but instead they appear as entries with caption “undefined”.

When I reverted the code back to using TwinColSelect it works as expected.

I don’t know how actively you maintain the vaadin6 branch and it’s not urgent issue for me as I can stick with TwinColSelect. But maybe you can give it a shot to see if it works the same in V7. I’m happy to give additional details if it is needed though.

br,
Samuli