3 Embedded in 1 Table cell makes scrolling slow

Hi,

I display around 20 properties/columns in a table. One of these columns is a generated one and is showing 3 little (16x16 Pixel) Icons in a surrounding HorizontalLayout (see source code sample below). The Icons are only 4 different ones but the combination of these 4 Icons is free.

Now my problem: as long as this column is collapsed, the scrolling is smooth as it should be. But when the column is displayed, the scrolling is absolutely slow and jumpy. I can see differences in scrolling smoothness depending on the browser being used. The best smoothness is with Chrome (v16 tested) and the worst is with Firefox (v9.01 tested). The other browser are between these two.
This is not a database loading issue but rather a javascript/gwt/Vaadin problem. In addition: since I use only 4 static resources, the browser should cache them...

Is there anything I can do to get a better scrolling smoothness?

Thanks

Andreas

Sample source code:

public class BlaBlaList extends VerticalLayout
{
  private Table blaTable;
  private ThemeResource[] images;

  public BlaBlaList()
  {
    images = new ThemeResource[]
    {
      new ThemeResource("img/0_image.png"),
      new ThemeResource("img/1_image.png"),
      new ThemeResource("img/2_image.png"),
      new ThemeResource("img/3_image.png")
    };
    blaTable = new Table();
    blaTable.addGeneratedColumn("test", new Table.ColumnGenerator()
    {
      @Override
      public Component generateCell(Table source, Object itemId, Object columnId)
      {
        HorizontalLayout hl = new HorizontalLayout();
        Object obj = source.getItem(itemId);
        if (obj instanceof BeanItem)
        {
          final BlaBean bb = (BlaBean) ((BeanItem) obj).getBean();
          try
          {
            hl.addComponent(new Embedded(null, images[bb.getVal1()]));
            hl.addComponent(new Embedded(null, images[ib.getVal2()]));
            hl.addComponent(new Embedded(null, images[ib.getVal3()]));
          }
          catch (Exception ex)
          {
          }
        }
        return hl;
      }
    });
...
  }
}

Could you try CssLayout instead of HorizontalLayout?

Using the HorizontalLayout can cause performance problems because it does a quite some calculations.

Danny Roest: Could you try CssLayout instead of HorizontalLayout?

Hi Danny,

I tried your suggestion, but unfortunately it didn't help to speed up the scrolling.

Does someone else have a suggestion?

Or should I file a bug report?

Andreas

Layout performance is being worked on for Vaadin 7.

In the meanwhile, I suggest trying to fix the sizes of the icons and/or the layouts - set explicit pixel sizes for them to avoid possibly heavy layout size calculations. CssLayout should usually be at least somewhat faster than HorizontalLayout.

Hi Henri,

now I use CssLayout AND set the height and width of the Embedded component AND the CssLayout. Result: much faster scrolling now! It is still not perfect (on Firefox) but pretty close to that :)

Thank you

Andreas