DynamicForm not showing custom CanvasItem

[levi]

Hello,

I've created a custom widget, then a custom form item which extends CanvasItem and in the constructor I call setCanvas() with my custom widget.
When adding this as editorType in a DataSource, the widget isn't added in the form.

I've tested the same thing with a framework widget, and it's not showing either. Here, I expected "blablabla" to be shown in the "custom" column:

VLayout canvas = new VLayout();
canvas.setShowEdges(true);

DataSource ds = new DataSource();
DataSourceField field = new DataSourceField("text", FieldType.TEXT);
ds.addField(field);

field = new DataSourceField();
HTMLFlow flow = new HTMLFlow();
flow.setContents("blablabla");
CanvasItem canvasItem = new CanvasItem();
canvasItem.setCanvas(flow);
field.setEditorType(canvasItem);
field.setName("custom");
ds.addField(field);

DynamicForm form = new DynamicForm();
form.setDataSource(ds);

canvas.addMember(form);
canvas.addMember(flow); //add to canvas to check if it really shows something

As a test, I've added the HTMLFlow on the canvas itself and there it is shown as expected. But why is it not when the form is drawn?


I've tested it too with TextItem & TextAreaItem instead of a CanvasItem and those are OK. For FloatItem, I get an exception so there might be still something wrong with setEditorType().


version:
SmartGWT rev 627


thanks

[Isomorphic]

That's not a valid way to create a component that could be used multiple times (since there's only one HTMLFlow). Instead, you would subclass CanvasItem.

[levi]

Hi Isomporhic, thanks for the reply.

Using the same component twice also did not seem a good idea to me, but the first example did not throw any error.

My custom component is indeed a subclass of CanvasItem, so I tried it with HTMLFlow, but that also doesn't show anything. In developer console I see two SPANs in that table cell: one mentioning a CanvasItem ID, but the other one just has a space as content.

private class MyHTMLFlow extends CanvasItem {
	public MyHTMLFlow() {
		super();
		HTMLFlow flow = new HTMLFlow();
		flow.setContents("blablabla");
		setCanvas(flow);
	}
}

private VLayout getTest3sc() {
	VLayout canvas = new VLayout();
	canvas.setShowEdges(true);

	DataSource ds = new DataSource();
	DataSourceField field = new DataSourceField("text", FieldType.TEXT);
	ds.addField(field);

	field = new DataSourceField();
	field.setEditorType(new MyHTMLFlow());
	field.setName("custom");
	ds.addField(field);

	DynamicForm form = new DynamicForm();
	form.setDataSource(ds);

	canvas.addMember(form);

	return canvas;
}

[jmilton]

CanvasItem

Hi there,

This is my problem as well. I can get most FormItems to show up but if I try to do a custom item (i.e. using the CanvasItem) nothing happens.

Help with this would be greatly appreciated. :)

[levi]

I didn't succeed in getting it right. Only by adding the custom form items manually to the form, I got my items working. Which makes the setEditorType() unneeded. Getting the custom editors in a ListGrid is a nightmare (upgraded to SmartGWT 1.2): I didn't succeed in it either.

I tried setting an instance to setEditorType() so I had a handle to it, and saw it was not drawn. So I called draw() on the instance myself, which put it at location (0,0). But I don't think this made sense in doing that.

I've wondered about the Javadoc in com.smartgwt.client.types.FieldType whether this applies to SmartGWT or only to SmartClient.



I guess we'll have to see what the next version of SmartGWT brings as stated on Sanjiv's blog:

Looking ahead there are several exciting new features that are going to be in the next release. Deep level of customization of pretty much any widget is going to be supported.

[Isomorphic]

Search around and you'll find other threads where people are reporting that a custom CanvasItem is working for them - if you guys can post a *complete* standalone testcase (from onModuleLoad, no depedencies) then we can either point out the problem or look for a possible bug.

[levi]

Hi Isomorphic,

in attached file the whole class with all kinds of customizations we would like to get in.

Some notes:
* though grid.setAlwaysShowEditors(true) I only see the CustomItem on 1 row. I know its showing because I added bgcolor red to the CustomItem to see something.


* If you uncomment //setValue(new CustomDataType(0, 0)); then you do see the 0 0 values in the grid on the custom item. But they never change. I think the problem is that its setValue(CustomDataType) is never called by the framework.


* In the end, I would like my grid to always show my custom widget: in cell edit mode or not. Its a bit ugly to always show the editors on the normal textitem.


* I guess it's not a bug, but it seems that setting grid.setAlwaysShowEditors(true) adds a new empty row by default. When false, you don't see the extra row.


* For null values, I see "undefined" rather than my custom this.setEmptyDisplayValue("Empty Item")


Thanks so much for looking into this!

[Isomorphic]

A setValue() override won't work (on any FormItem). Use the Changed event.

However, bigger picture, a ListGrid in every grid row isn't going to scale very well. What's your actual goal for the overall UI here, explained not in terms of widgets and code but in terms of what the user is trying to do? There's probably a more effective approach.

[levi]

Well for one thing, we want to show our custom datatypes in a ListGrid. For some of our datatypes, we can only show the user a visual representation. For example, clickable images which represent a state. This has been created as a custom widget, because it contains logic, not just as static images: user needs to be able to edit it.
So also in a ListGrid we want to show those widgets - and always, not just in edit mode.

Now as seen in my example class, I've noted that somewhere a GWT (not SmartGWT) class calls toString on our datatypes. Only my last approach would be to implement toString to show a representation for the user in non-edit mode. In edit-mode we'll still need to show our custom items. For example, a duration datatype: the user needs a popup to set the value to "days/months/years". Our custom form items already exist to work like that.
But do you think it's normal that the toString is called?

I'll have a look at the changed event to set our datatype in a gird, thanks for that suggestion.


I also was thinking that form items in a ListGrid wasn't the best idea.
So I'm working on a widget which just creates rows of the same form items for all records in the datasource, all in separate DynamicForms. A ValuesManager doesn't seem to help in this case, as this divides only 1 record into multiple forms.

But in this post it seems that you recommend that a ListGrid is faster, which is why I didn't want to give up hope to get our custom datatypes in a ListGrid.

[Isomorphic]

A Vstack of forms or similar approach does sound more suitable than what you were attempting with the grid.

A ListGrid is generally going to be faster than a stack of Canvas-based elements because the table cells rendered by a gird are lighter weight than Canvases, but of course, if you're putting a Canvas in every grid cell, this difference disappears.