Twin column select with manual sort

Vaadin 6 / 7 / 8 Framework UI
1

Hello

I am looking at moving our application from Wicket to Vaadin. The Wicket “palette” component (similar to Vaadin TwinColSelect) has a manual sort feature i.e. you can sort the items in the selected list by selecting an item, then clicking the up or down arrow icon to move the item up or down in the list.

How much work would this be to implement in Vaadin and how would one go about it?

2

How about using two table-components side by side and doing sorting and adding with with drag and drop. Something like this
example
.

3

Sounds like a good idea - I will try it.

Thanks

4

Sounds like a useful and quite generic component. Why not submit it also on
http://vaadin.com/directory
?

5

I am not sure which component you are referring to - your suggestion of using two tables plus drag-and-drop? Should I be creating a new component that implements this? How do I create a new component? (Sorry - I am still trying to get to grips with the basics of Vaadin. No fault of yours - the documentation I have seen so far is excellent.)

Or are you referring to the Wicket-style component that I mentioned, with the up / down arrows for sorting? What would be involved in modifying the existing Vaadin / GWT component to include this?

6

An implementation using two tables, drag-and-drop and up and down buttons (for those who prefer this approach) can be wrapped in a CustomComponent (or a
CustomField
 if you want to implement the Field API) with server side component composition, without any custom client side components. Server side add-ons are also easier to take into use as no custom widgetset is needed.

So, you could create a subclass of CustomComponent with a suitable API and package that as a simple Vaadin add-on. For server side add-ons, this is simply a JAR with a suitable manifest and some license information etc. See
the authoring instructions
 for some more information.

7

Thanks Henri
Could you point me to an existing add-on that has a similar structure to the one I need to implement?

8

For example
BorderLayout
 is a very simple server-side component add-on.

In your case, the base class would probably be CustomComponent or CustomField, and you need to set its content root in your component constructor.

9

Late addendum:
There seems now to exist a component like this:
TwinSelectOrderedColumns

10

Please see also the
ListBuilder
 add-on which has been in the directory quite a bit longer :)

-Tepi