Dynamic form perfromance issue

[aqorom]

Hi,
I'm new in smartGWT and I want to begin a proof of concept of using SmartGWT in our new product

I want to develop custom form item which contains following items (selectItem, textItem), see attached screenshot

I see it is doable in smartGWT as following:

public class myFormItem extends CanvasItem {

TextItem textItem;
SelectItem selectItem;

public myFormItem () {

textItem= new TextItem("myText", "myText");
textItem.setShowTitle(false);
selectItem= new SelectItem("ComboBoxItem ", "ComboBoxItem ");
textItem.setShowTitle(false);

DynamicForm form = new DynamicForm();
form.setItems(selectItem, textItem);
this.setCanvas(form);
}
}

Previous component is used many times in my view (approximately 30 times in one view), I see there is a layout performance bottleneck and I guess this is occurred because of using too many dynamic forms (31) in same view ( 30 sub dynamic forms + the container of them)
I debugged the issue using Chrome inspect element and I see most of time consumed in calling recalculate style and layout events and they called many many times

My Questions are:
1- Is using many dynamic forms produce layout performance bottleneck in smartGWT?
i.e. the view will have number of dynamic forms instances equals the number of textItems in it

2- Most of delay on adding the view to root panel, and this adding action produce many recalculate style and layout events in chrome debugging tools
How is possible to fix this performance bottleneck?

3- Is there an event fired when the view is completely rendered? I need to measure the time needed for my view to be rendered and attached to the document

Thanks

[Isomorphic]

No, there's no inherent performance issue with using a lot of DynamicForms.

Using RootPanel.add(), if that's what you're doing, is incorrect and could cause performance issues. Use draw(), as indicated in the QuickStart Guide.

When draw() is called, the DOM of a component has been rendered fully.

Other than this, you haven't posted enough information for anyone to correct your code or correct your analysis.

[aqorom]

Below is my code, it shows the way I used to draw the layouts, the performance bottleneck happens when user click on label header

public class DemoApplication implements EntryPoint {

	public void onModuleLoad() {

		VLayout bigLayout = new VLayout(); // Container Layout
		bigLayout.setSize("100%", "100%");

		VLayout header = new VLayout(); // Header Layout contains clickable label
		header.setWidth100();
		header.setHeight(50);
		
		Label lbl = new Label("Click me to show view that has performance bottleneck"); // Define my clickable label
		
		header.addMember(lbl);
		header.addMember(new LayoutSpacer());
		
		final HLayout bottomLayout = new HLayout();
		bottomLayout.setWidth100();
		bottomLayout.setHeight100();

		bigLayout.addMember(header);
		bigLayout.addMember(bottomLayout);

		bigLayout.draw();
		
		lbl.addClickHandler(new ClickHandler() {
			
			@Override
			public void onClick(ClickEvent event) {
				HPview hpview= new HPview();		
				bottomLayout.addChild(hpview); // this line of code consumes too much time
			}
		});

        }
}


	public class HPview extends HLayout{

		public HPview(){

			DynamicForm dynamicForm = new DynamicForm();

			MyFormItem myFormItem1 = new MyFormItem ();
			MyFormItem myFormItem2 = new MyFormItem ();
			MyFormItem myFormItem3 = new MyFormItem ();
			MyFormItem myFormItem4= new MyFormItem ();
			MyFormItem myFormItem5 = new MyFormItem ();
			MyFormItem myFormItem6 = new MyFormItem ();
			MyFormItem myFormItem7 = new MyFormItem ();
			MyFormItem myFormItem8 = new MyFormItem ();
			MyFormItem myFormItem9 = new MyFormItem ();
			MyFormItem myFormItem10 = new MyFormItem ();
			MyFormItem myFormItem11 = new MyFormItem ();
			MyFormItem myFormItem12 = new MyFormItem ();
			MyFormItem myFormItem13 = new MyFormItem ();
			MyFormItem myFormItem14 = new MyFormItem ();
			MyFormItem myFormItem15 = new MyFormItem ();
			MyFormItem myFormItem16 = new MyFormItem ();
			MyFormItem myFormItem17 = new MyFormItem ();
			MyFormItem myFormItem18 = new MyFormItem ();
			MyFormItem myFormItem19 = new MyFormItem ();
			MyFormItem myFormItem20 = new MyFormItem ();
			MyFormItem myFormItem21 = new MyFormItem ();
			MyFormItem myFormItem22 = new MyFormItem ();
			MyFormItem myFormItem23 = new MyFormItem ();
			MyFormItem myFormItem24 = new MyFormItem ();
			MyFormItem myFormItem25 = new MyFormItem ();
			MyFormItem myFormItem26 = new MyFormItem ();
			MyFormItem myFormItem27 = new MyFormItem ();
			MyFormItem myFormItem28 = new MyFormItem ();
			MyFormItem myFormItem29 = new MyFormItem ();
			MyFormItem myFormItem30 = new MyFormItem ();

			dynamicForm.setFields(myFormItem1 , myFormItem2, myFormItem3, myFormItem4, myFormItem5, myFormItem6, myFormItem7,
					myFormItem8, myFormItem9, myFormItem10, myFormItem11, myFormItem12, myFormItem13, myFormItem14, myFormItem15, myFormItem16, myFormItem17,
					myFormItem18, myFormItem19, myFormItem20, myFormItem21, myFormItem22, myFormItem23, myFormItem24, myFormItem25, myFormItem26, myFormItem27,
					myFormItem28, myFormItem29, myFormItem30);

			this.addChild(dynamicForm);
		}

	}


	public class MyFormItem extends CanvasItem {

		TextItem textItem;
		SelectItem selectItem;

		public myFormItem () {

			textItem= new TextItem("myText", "myText");
			textItem.setShowTitle(false);
			selectItem= new SelectItem("ComboBoxItem ", "ComboBoxItem ");
			textItem.setShowTitle(false);

			DynamicForm form = new DynamicForm();
			form.setItems(selectItem, textItem);
			this.setCanvas(form);	
		}
	}
}

[Isomorphic]

A few questions:
- are you testing in development or compiled mode? For performance evaluation, *always* run in compiled mode.

- which SmartGWT version are you running against? You can determine this by evaluating "isc.version" in the developer console (Please be sure to use the latest nightly build when reporting issues).

- assuming you're still seeing poor performance in compiled mode, which browser / OS are you encountering this on?

- how much time is this test case taking to render for you (vs your expectation)?

Thanks
Isomorphic Software