HorizontalLayout as component in table cells

Vaadin 6 / 7 / 8 Framework UI
1

Hi @ll !

I am a newbie to Vaadin so please excuse any stupid questions :grin:

I went through the Vaadin tutorial with Vaadin 6.4.4, Gwt 2.0. In chapter ‘6.1. Turning email addresses into links’ (
Link
) I have implemented a different solution. Instead of a link, I decided to have a label and a button, that would open the email address when pressed:

table.addGeneratedColumn("email", new Table.ColumnGenerator() {

	@Override
	public Component generateCell(Table source, Object itemId, Object columnId) {
		final Person person = (Person) itemId;

		Button button = new Button("Open");
		button.addListener(new Button.ClickListener() {

			@Override
			public void buttonClick(ClickEvent event) {
				getMainWindow().open(new ExternalResource("mailto:" + person.getEmail()));
			}
		});

		HorizontalLayout component = new HorizontalLayout();
		Label label = new Label(person.getEmail());
		label.setEnabled(false);
		component.addComponent(label);
		component.addComponent(button);
		component.setComponentAlignment(button, Alignment.TOP_RIGHT);
		component.setSpacing(true);
		
		return component;
	}
});

This solution works fine except that the table selection does not change, if you click on the labels’ text. If you click in any other cell of the other columns, the selection is changed. Does anybody know what is wrong with my code? Found out, that the selection works, if i am using the label or button only.

Is it wrong to use containers inside table cells?
Is there a different way how to implement this? (Havent tried yet to implement it as a custom component but I asume the selection wount work either).

Thanks in advanced,

partyON.

2

The problem is that the label eats up the click event. This is the right behavior for some components, for example the button should do it, but then again the label shouldn’t. I can’t come up with any solution on how to fix this issue right now. Maybe someone else could pitch in on how to pass the click from the label to the table?

Only solution that I can come up with right now is to restructure the table. Could you split the column into two columns, where one is of type String and only contains the e-mail address and the other one has the buttons? Then a row could be selected by clicking the email address.

3

Thanks for the explanation.

Unfortunately I can not split the column. Our current application contains a couple of composites our end users are used to. So we want/have to implement them in the same way. May be I can find a different solution or avoid the problem by implementing a custom component.

Greetings Nico.