Large amount of components in a Layout

Hi!
Say I need to place many TextFields to a layout which extends CustomComponent, how to make it quicker to show on a page?

The plan is to make a matrix (~ 20 x 20) of TextField elements, for that I use GridLayout (which seems more like a matrix) and place TextFields by i, j indexes in two loops, one is nested. Rendering whole this component takes pretty much time, how can I reduce this time?

I don’t know if I need to post any code here, all I do is create a new TextField, change some properties and addComponent to the GridLayout with some indexes.



int idx = 0;

for (final RouteStop x : sortedRouteStops) {

	for (final RouteStop y : sortedRouteStops) {

		if (y.getOrderOnRoute() == x.getOrderOnRoute()) {
			break;
		}

		final TextField txtDistance = new TextField();
		txtDistance.setWidth(MATRIX_FIELD_WIDTH, UNITS_PIXELS);
		
		txtDistance.setImmediate(true);
		txtDistance.setTabIndex(idx);
		txtDistance.setValue(someDistance);
		txtDistance.setData(m);
		txtDistance.addListener(new ValueChangeListener() {

			private static final long serialVersionUID = 6940742735577682681L;

			@Override
			public void valueChange(ValueChangeEvent event) {
				// Send changes to database
			}
		});

		txtDistance.setDescription("from < - > to");
		txtDistance.setEnabled(true);

		matrixGridLayout.addComponent(txtDistance,x.getOrderOnRoute(),y.getOrderOnRoute());
		
		idx++;
		
	}

}

Browser waits ~ 10 sec to load and show this “matrix”, is it better to add elements one by one and how to do it better?

Hi,

I guess you’re using Firefox 3, which has the most problems with big layouts. Unfortunately layouts with lots of components inside has some performance problems when using the core layouts in Vaadin. The recommended solution right now is to use CssLayout, which depends on CSS rules and the browser. Using CssLayout your performance should be much better, but you will need to position the fields correctly yourself using CSS.

Another option might be to move this grid of text fields to the client side by creating a custom widget for it.

HTH,
/Jonatan

Another option is to use the FastGrid component from the FastLayouts add-on:
FastLayouts
(done by one of the core developers here at Vaadin – Matti to be exact).

Thank for the tip!
I tried to add FastLayouts to my project but never succeeded and discovered that I can’t add any of the widgets and get always something like this



[ERROR]
 25.02.2011 18:50:13 com.vaadin.terminal.gwt.widgetsetutils.ClassPathExplorer getAvailableWidgetSets
[ERROR]
 INFO: Widgetsets found from classpath:
[ERROR]
         org.vaadin.hezamu.googlemapwidget.widgetset.GooglemapwidgetWidgetset in jar:file:C:/Users/Roman/.m2/repository/org/vaadin/addons/googlemapwidget
/0.9.13/googlemapwidget-0.9.13.jar!/
[ERROR]
         com.vaadin.terminal.gwt.DefaultWidgetSet in jar:file:C:/Users/Ro
man/.m2/repository/com/vaadin/vaadin/6.5.1/vaadin-6.5.1.jar!/
[ERROR]
         com.testonica.gwt.ColorPickerWidgetSet in file://C/Users/Roman/w
orkspace/sandbox/vadja/src/main/java
[ERROR]

[ERROR]
 25.02.2011 18:50:13 com.vaadin.terminal.gwt.widgetsetutils.ClassPathExpl
orer getAvailableWidgetSets
[ERROR]
 INFO: Search took 13ms

Thats just for some clean vaadin project and adding GooglemapwidgetWidgetset to it, I have no idea what to fix

As stated in several other locations and as I replied to
your other thread
about this, these are not really errors but just how Maven interprets certain output as errors.

However, based on “and adding GooglemapwidgetWidgetset to it”, it is not clear to me whether you are using widgetsets correctly or not. Your project should have its own widgetset, which should inherit the default widgetset and any add-on widgetsets. You should not try to use/compile one of the add-on widgetsets directly, but consider it a “fragment” of a widgetset.

Refer to e.g.
these instructions
for using add-ons with Maven.