Layout manager for row and column spanning

[manny31]

Hi,

i posted about this issue last week: http://forums.smartclient.com/showthread.php?t=15595

The problem
------------
I am looking for a layout component that natively supports row and column spanning. Basically a SmartGWT equivalent of an HTML table when used for layout purposes. This component should:

- allow number of rows and columns to specified (explicitly or not)
- manage both row heights and column widths in order to keep tabular appearance intact.
Row height = largest height of component in this row.
Column width = largest width of component in this column
- allow any arbitrary Canvas to be included at an x (column), y (row) positioned cell
- allow any cell to span rows and columns, with row and column integrity kept intact

Suggestions and research thus far
---------------------------------
3 suggestions were made: (thank you for these)

1. Make use of DynamicForm and CanvasItems. CanvasItem allows specification of row and column spanning by way of FormItem and can display an arbitrary Canvas, not necessarily editing anything.

Problems with this approach:
The CanvasItem effectively takes up 2 columns in the DynamicForm layout, 1 for the label, 1 for the CanvasItems' associated Canvas. Hiding of all the label portions of these CanvasItems was difficult. I could never completely hide the label portion of the CanvasItem, even explicitly setting its width. This also resulted in a non pixel perfect layout of the CanvasItems Canvas objects. I also experienced issues with unwanted scrollbars (on resizing the window smaller scroll bars would appear, then resizing the window smaller still caused them to disappear), even though my widths / heights had been set appropriately.

2. Experiment with ListGrid and recordComponents.

Problem with this approach:
The ListGrid component only appears to allow spanning in column/row header context and cannot be used as a top level layout manager. It manages layout/grouping of rows/columns of data bound by a DataSource, not abitrary Canvas's that can span both rows and columns.

3. Experiment with nested HLayout and VLayout containers to achieve row and col spanning.

Problem with this approach:
This is the closest i have come to a potential solution. If we remember that my desired functionality is a tabular layout manager that manages both rows and columns. For combinations of HLayout and VLayout components, in order to replicate any form of widget width consistency in each column and widget height consistency in each row, tight bespoke control of all component widths and heights is required. If any components are required simply to size according to their content (i.e. no explicit width or height set), this approach falls down and the facade of a table with managed columns and rows disintegrates.


The Questions
-------------

Is there a SmartGWT 2.4 component that provides this desired layout behaviour?

If not, has there been any work done in the community to create such a layout component?


Any help would be greatly appreciated. The alternative is to write my own GridLayout manager which i would be glad to contribute back to the community. Any help or input will be valued.

Thanks

Manny31

[davidj6]

Don't know if it will help but you might get some additional responses if you give some idea why you need this type of layout. In other words, what are you trying to accomplish instead of I need this feature.

Note you should have no problem dropping the titles from canvasitems or any formitem so that exactly one column is used. If you are having that problem, perhaps a posting with your code attempt would provide you with helpful information to fix it.

[manny31]

I am using SmartGWT 2.4 experimenting with DynamicForm and CanvasItems to achieve the functionality described above.

Please bare in mind that this is an attempt at creating a row/col spanning layout manager, not a form. All CanvasItems have their titles hidden.

My example code is:

public class TestSmartGWT implements EntryPoint {

public void onModuleLoad() {
	DynamicForm dynForm = new DynamicForm();
	dynForm.setWidth("100%");
	dynForm.setBackgroundColor("black");
	dynForm.setCellPadding(0);
	dynForm.setMargin(0);
	dynForm.setPadding(0);
	dynForm.setNumCols(5);
	dynForm.setColWidths("20%", "20%", "20%", "20%", "20%");

	// Cell 1 - each cell is constructed from a CanvasItem displaying a VLayout as its Canvas.
	// The VLayout contains the desired widget(s) to be displayed in this cell.
	//
	// The CanvasItem is used to:
	// 1. Specify the Canvas to be displayed. Always a VLayout containing 1 or more other widgets.
	// 2. Take advantage of the column and row spanning functionality
	// 3. To specify no title to be shown for the FormItem
	// 4. To signify whether this CanvasItem is at the row end
	CanvasItem canvas1 = new CanvasItem();
	canvas1.setShowTitle(false);
	
	VLayout vl1 = new VLayout();
	// The VLayout component is used to manage heights of the contained widget(s).
	// Height of the VLayout is set to "*" so that contained widget heights are respected.
	// If this is not set then a default height appears to be set for the contained widget
	// instead of respecting the specified height.
	vl1.setHeight("*");
	vl1.setBackgroundColor("white");
	// A contained widget on which the desired height is set.
	// If no height is set, the height is determined by the content.
	HTMLFlow label1 = new HTMLFlow("Cell 1 - Blah blah. Blah blah. Blah blah. Blah blah. Blah blah. Blah blah. Blah blah. Blah blah. Blah blah. Blah blah. Blah blah. Blah blah. Blah blah. Blah blah. Blah blah. Blah blah. Blah blah. Blah blah. Blah blah. Blah blah. Blah blah. Blah blah. Blah blah.");
	vl1.addMember(label1);
	label1.setBackgroundColor("yellow");
	label1.setHeight("25px");
	canvas1.setCanvas(vl1);
	

	// Cell 2
	CanvasItem canvas2 = new CanvasItem();
	canvas2.setColSpan(2);
	canvas2.setShowTitle(false);
	
	VLayout vl2 = new VLayout();
	vl2.setHeight("*");
	HTMLFlow label2 = new HTMLFlow("Cell 2 - colspan 2. Height 50px.");
	label2.setHeight("50px");
	vl2.addMember(label2);
	label2.setBackgroundColor("#7777ff");
	canvas2.setCanvas(vl2);
	

	// Cell 3
	CanvasItem canvas3 = new CanvasItem();
	canvas3.setShowTitle(false);
	canvas3.setRowSpan(2);
	canvas3.setColSpan(2);
	canvas3.setEndRow(true);
	
	VLayout vl3 = new VLayout();
	vl3.setHeight("*");
	HTMLFlow label3 = new HTMLFlow("Cell 3 - colspan 2, rowspan 2. No height specified.");
	vl3.addMember(label3);
	label3.setBackgroundColor("orange");
	canvas3.setCanvas(vl3);
	

	// Cell 4
	CanvasItem canvas4 = new CanvasItem();
	canvas4.setShowTitle(false);
	
	VLayout vl4 = new VLayout();
	vl4.setHeight("*");
	HTMLFlow label4 = new HTMLFlow("Cell 4");
	vl4.addMember(label4);
	label4.setBackgroundColor("white");
	canvas4.setCanvas(vl4);


	// Cell 5
	CanvasItem canvas5 = new CanvasItem();
	canvas5.setShowTitle(false);
	
	VLayout vl5 = new VLayout();
	vl5.setHeight("*");
	HTMLFlow label5 = new HTMLFlow("Cell 5. Blah blah. Blah blah. Blah blah. Blah blah. Blah blah.");
	vl5.addMember(label5);
	label5.setBackgroundColor("yellow");
	canvas5.setCanvas(vl5);
	
	// Cell 6
	CanvasItem canvas6 = new CanvasItem();
	canvas6.setRowSpan(3);
	canvas6.setShowTitle(false);
	
	VLayout vl6 = new VLayout();
	vl6.setHeight("*");
	HTMLFlow label6 = new HTMLFlow("Cell 6 - rowspan 3. Blah blah. Blah blah. Blah blah. Blah blah.");
	vl6.addMember(label6);
	label6.setBackgroundColor("red");
	canvas6.setCanvas(vl6);
	
	// Cell 7
	CanvasItem canvas7 = new CanvasItem();
	canvas7.setColSpan(2);
	canvas7.setShowTitle(false);
	
	VLayout vl7 = new VLayout();
	vl7.setHeight("*");
	HTMLFlow label7 = new HTMLFlow("Cell 7 - colspan 2");
	vl7.addMember(label7);
	label7.setBackgroundColor("orange");
	canvas7.setCanvas(vl7);
	

	// Cell 8
	CanvasItem canvas8 = new CanvasItem();
	canvas8.setShowTitle(false);
	
	VLayout vl8 = new VLayout();
	vl8.setHeight("*");
	HTMLFlow label8 = new HTMLFlow("Cell 8");
	vl8.addMember(label8);
	label8.setBackgroundColor("white");
	canvas8.setCanvas(vl8);
	

	// Cell 9
	CanvasItem canvas9 = new CanvasItem();
	canvas9.setEndRow(true);
	canvas9.setShowTitle(false);

	VLayout vl9 = new VLayout();
	vl9.setHeight("*");
	HTMLFlow label9 = new HTMLFlow("Cell 9");
	vl9.addMember(label9);
	label9.setBackgroundColor("yellow");
	canvas9.setCanvas(vl9);
	

	// Cell 10
	CanvasItem canvas10 = new CanvasItem();
	canvas10.setShowTitle(false);
	
	VLayout vl10 = new VLayout();
	vl10.setHeight("*");
	HTMLFlow label10 = new HTMLFlow("Cell 10");
	vl10.addMember(label10);
	label10.setBackgroundColor("#7777ff");
	canvas10.setCanvas(vl10);
	

	// Cell 11
	CanvasItem canvas11 = new CanvasItem();
	canvas11.setShowTitle(false);
	
	VLayout vl11 = new VLayout();
	vl11.setHeight("*");
	HTMLFlow label11 = new HTMLFlow("Cell 11");
	vl11.addMember(label11);
	label11.setBackgroundColor("white");
	canvas11.setCanvas(vl11);
	

	// Cell 12
	CanvasItem canvas12 = new CanvasItem();
	canvas12.setShowTitle(false);
	
	VLayout vl12 = new VLayout();
	vl12.setHeight("*");
	HTMLFlow label12 = new HTMLFlow("Cell 12");
	vl12.addMember(label12);
	label12.setBackgroundColor("orange");
	canvas12.setCanvas(vl12);
	

	// Cell 13
	CanvasItem canvas13 = new CanvasItem();
	canvas13.setEndRow(true);
	canvas13.setShowTitle(false);
	
	VLayout vl13 = new VLayout();
	vl13.setHeight("*");
	HTMLFlow label13 = new HTMLFlow("Cell 13");
	vl13.addMember(label13);
	label13.setBackgroundColor("#7777ff");
	canvas13.setCanvas(vl13);
	
	
	
	dynForm.setFields(canvas1, canvas2, canvas3, canvas4, canvas5, canvas6, canvas7, canvas8, canvas9, canvas10, canvas11, canvas12, canvas13);
	RootPanel.get().add(dynForm);
	dynForm.redraw();
}

}

NOTE: when looking at the example, any black background is the background color of the DynamicForm. Any other color is the background color of a displayed widget. This enables easy viewing of how much of its cell each widget occupies and its vertical alignment.

I have 2 issues
-------

1. It seems that when any widget height is less than the height of the row it is in, the widget is center vertically aligned by default (see cells 2,3,4 and 6 in the example code).

I have looked at the DynamicForm, CanvasItem and FormItem APIs and i cannot find any means of controlling the vertical alignment of widgets within cells (there is control over vertical alignment of titles for FormItems).

(I have tested in FireFox 3.6.13, IE8 and Chrome 9.0.597.98 with all displaying the same behaviour)

Can anyone suggest a means of aligning widgets to the top of their cells in a DynamicForm when using row/col spanning?


2. Note the last line of code in the example....

dynForm.redraw();

If this is taken out, when testing in IE8 and Chrome 9.0.597.98, when the page first loads the dynamic form background (black) is all that is visible. Upon resizing the screen (forcing a redraw) the contained widgets suddenly appear. However this does not happen in FireFox 3.6.13.

upon adding the line of code above, the form and all contained widgets are rendered correctly, but only because i have now effectively drawn the DynamicForm twice.

I am keen to keep browser load to a minimum so cannot afford to implement a draw twice workaround. Has anyone else experienced this issue? Does anyone know of a solution?


Once again, any help would be greatly appreciated. Many thanks to all those who have made replies to this and related posts thus far.

(thank you davidj6 for prompting me back to the DynamicForm route, i am almost there!)

Manny31

[davidj6]

1. Don't know of an option set the vertical alignment of the formitem in the cell.
2. Don't use the RootPanel. Create a full screen layout (like VLayout) and put the form in it. Then just draw the layout. See the samples in the distribution.

[Isomorphic]

Don't try to use the form to enable vertical alignment within a cell, instead, have the VLayout fill the cell and use centering within the VLayout (setAlign(center)).

However, wherever you do not need special centering behavior, don't use an additional VLayout within the CanvasItem, just use whatever you meant to contain directly.