Vaddin 7 beta 3 - HorizontalLayout - not working as expected

All,
I’m quite new to Vaadin. Just switched 6 to 7-beta-3 for better data binding feature. Got stuck with the first try. It’s so basic that I’m sure I was wrong somewhere.

The horizontal layout just does not take effect, it always shows the output as if the (default) vertical layout is working. I also updated my Firefox (on Mac) to the very latest version.

Actually, I was converting a Vaadin 6 app to the vaadin 7 and encountered this problem. I reproduced the problem by tweaking the automatically generated app from the Maven archtype.

public class MyVaadinUI extends UI
{

public class MyComp extends CustomComponent {
	
	public MyComp() {
		HorizontalLayout main = new HorizontalLayout();
    	main.setWidth("100%");
        Button button = new Button("Click Me");
        button.addClickListener(new Button.ClickListener() {
            public void buttonClick(ClickEvent event) {
                event.getButton().getUI().addComponent(new Label("Thank you for clicking"));
            }
        });
        Button button2 = new Button("Click Me 2");
        main.addComponent(button);
        main.addComponent(button2);
        
    	setCompositionRoot(main);

	}

}

@Override
protected void init(VaadinRequest request) {
	
	addComponent(new MyComp());
	

}

}

I switched to an earlier version Vaadin 7 beta 2. The problem is solved.
I still don’t believe my eyes because this is such a basic regression test. I really wonder why nobody else is complaining about this.

Anyway, I will stick with beta 2 for another several weeks before try a newer version.

I tried your example with the latest nightly of Vaadin 7 and it is working fine for me. Are you sure you have updated your widgetset and themes after you’ve done the upgrade?

Beta4 should come out any moment now so please when it does try it and report back.

We’re seeing the same with beta7.

Custom composite component that extends CustomComponent and contains a few fields (meant to be removed/added dynamically and displayed horizontally), setCompositionRoot invoked passing a custom HorizontalLayout, as in the example above. Our custom component is then embedded in a Panel which is part of a TabSheet page, but its fields are displayed vertically as if setCompositionRoot didn’t actually do anything.

If we change our component to directly extend HorizontalLayout instead of CustomComponent, it works - but then we’re finding other assorted bugs with both addComponent(c, index) apparently inserting stuff in the wrong positions, misaligned components in the page as well as a client side exception when trying to nest our component inside another layout (client side exception “cannot read property ‘Jb’ of null”).

This looks about as broken as it can be…

Please create a ticket at http://dev.vaadin.com and attach a test which reproduces the problem. Then we can have a look at it and fix it

This most likely was the issue where the layout component hierarchy did not properly clean itself up under certain situations (
#9815
and
#10068
). Those just got fixed and should work in beta8.

The other issues your are having with the CustomComponents I really haven’t been able to reproduce. As Artur says, if you could make a ticket in our trac system and provide some code how we could reproduce the issue it would help us track the bug down and squash it.

Update after refactoring & cleaning up our code (it’s quite a complicated layout) and updating to beta8:

  • we can no longer reproduce the OP issue about setCompositionRoot apparently not working, so that might have been be a problem on our side.
  • we can no longer reproduce the client side exception when nesting layouts
  • however, we still have problems with addComponent(c,index) not working correctly when dynamically adding more than one component

Here’s a small snippet of code which shows the problem with beta8:

  private Component getTestLayout() {
    ComboBox a = new ComboBox();
    Button b = new Button("x");
    final HorizontalLayout hl = new HorizontalLayout(a, b);
    hl.setSpacing(true);
    Button add = new Button("add");
    add.addClickListener(new ClickListener() {
      @Override
      public void buttonClick(ClickEvent event) {
        hl.addComponent(new ComboBox(), 1);
        hl.addComponent(new ComboBox(), 2);
      }
    });
   return new VerticalLayout(hl, add);
  }

Here, if you press “add” the second combobox is inserted in the wrong position, unless there’s a gotcha somewhere I’m not aware of.
The button is supposed to remain the rightmost element in the layout, but it doesn’t. The spacing seems broken too.

Can you reproduce this?

Created http://dev.vaadin.com/ticket/10154 for the issue that the second component is added in the wrong position.