Select component, different component for each item

[Charles (Charles Anthony)]

Hello,

I think I know the answer to this, but I’ll post the question anyway.

Is there a widget - either in core, or in addons - that will allow me to present the user with a list of components and allow the user to select one?

Context : I’m prototyping a list of notes - free format text that a user can enter. As it’s free format, the length of each note will vary (and hence, the height)

Here’s a screen grab of a mockup in raw HTML

In this example, each note would be a separate Vaadin label (formatted with raw HTML).

Is there any way to get the ListSelect component to use a provided component? Or is this a roll-your-own scenario?
How would you approach this?

Cheers,

Charles.

[Henri2 (Henri Sara)]

@Charles Anthony

Is there a widget - either in core, or in addons - that will allow me to present the user with a list of components and allow the user to select one?

Context : I’m prototyping a list of notes - free format text that a user can enter. As it’s free format, the length of each note will vary (and hence, the height)

Here’s a screen grab of a mockup in raw HTML

In this example, each note would be a separate Vaadin label (formatted with raw HTML).

Is there any way to get the ListSelect component to use a provided component? Or is this a roll-your-own scenario?
How would you approach this?

I don’t think there is a widget for this, but this should not be too hard to implement on your own.

If you don’t want to do client side coding for this, you could base this on the
CustomField add-on
and compose your layout on the server side.

Inheriting AbstractSelect would probably be harder, as it is designed to be used with a client side widget that communicates in a certain way back to the server side, although it might be possible to make a subclass of it use VCustomLayout as its client side component and duplicate some of the logic (at least paintComponent()) from CustomComponent. This would still allow creating the component on the server side. Such an implementation would be somewhat more fragile in terms of Vaadin upgrades.

[Jouni1 (Jouni Koivuviita)]

I would compose this on the server side, even though I think it would be great to have such a component in the core as well.

Here’s my suggestion:
-Wrap everything inside a Panel (STYLE_LIGHT, if you wish). With a Panel, we gain keyboard focus as well, so up and down navigation can be made using that.
-The root layout of the Panel is a CssLayout, with a LayoutClickListener attached, for making the proper selection, and adding an additional stylename for the selected item.
-Each item is a CssLayout, with some components inside it.

The hardest part will be to make the scroll position follow the selection when the user navigates with the keyboard.
Panel.setScrollTop(int top)
will help some, but what you’d really need is
Panel.scrollIntoView(Component c)
which isn’t there yet.

EDIT: Now that I read Henri’s post, I see that inheriting CustomField will be a good starting point as well, you probably want this inside a form sometimes. So then the Panel would be the composition root for the CustomField.