FormItem with multiple values

[ferranmc]

Hello,

I am looking for a kind of FormItem where I can enter multiple values.

It could be something like the Drag List (copy) example but with a simple FormItem on the left side instead of a list (I attached an image so you can have an idea).

http://www.smartclient.com/smartgwt/showcase/#effects_dd_copy_list

That way this multi-valued form item might be used for different types (text, integer, date, ...) and also for SelectItem or ComboBox.

Does this form item exist?

If not, could I build it myself?
Is there any documentation on custom form items?

Thank you!

Ferran

[Isomorphic]

This looks like a good use case for CanvasItem. See the samples for this in the Showcase.

[ferranmc]

Thanks!
I will have a look at them.

[ferranmc]

Hi,

I've seen the next post and the examples in the showcase and it seems that dealing with CanvasItem is not a trivial task.

http://forums.smartclient.com/showthread.php?t=11651&highlight=canvasitem+validate

Can you give me some clues about what I have to do?

For example, how can I validate my CanvasItem? How does the DynamicForm validate its items and how are the messages displayed? (Messages like "This value is required" or custom messages like "This password doesn't meet the security requirements").

Also, how should I store and retrieve the value of the CanvasItem. In my case, I am building a MultipleTextItem so the value is a List<String>. But I don't know what should I do to store and get that list.

For the moment, I have done this:

import java.util.ArrayList;
import java.util.List;

import com.allen_sauer.gwt.log.client.Log;
import com.smartgwt.client.data.RecordList;
import com.smartgwt.client.types.VerticalAlignment;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.TransferImgButton;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.CanvasItem;
import com.smartgwt.client.widgets.form.fields.TextItem;
import com.smartgwt.client.widgets.form.fields.events.ShowValueEvent;
import com.smartgwt.client.widgets.form.fields.events.ShowValueHandler;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.grid.ListGridField;
import com.smartgwt.client.widgets.grid.ListGridRecord;
import com.smartgwt.client.widgets.layout.HStack;
import com.smartgwt.client.widgets.layout.Layout;
import com.smartgwt.client.widgets.layout.VStack;

public class MultipleTextItem extends CanvasItem {

	private static final String ATTR_VALUE = "v";

	private TextItem textItem;
	private ListGrid grid;

	public MultipleTextItem(String name, String title) {
		
		super(name, title);
		
		textItem = new TextItem(name + "-item");
		textItem.setShowTitle(false);
		
		grid = new ListGrid();  
		grid.setShowAllRecords(true);
		grid.setShowHeader(false);
		grid.setFields( new ListGridField(ATTR_VALUE) );
		grid.setWidth(200);
		grid.setHeight(300);
		
		DynamicForm form = new DynamicForm();
		form.setFields(textItem);
		
		IButton button = new IButton("+");
		button.setWidth(20);
		button.addClickHandler(new ClickHandler() {
			@Override
			public void onClick(ClickEvent event) {
				Log.debug("Adding value");
				addValue(textItem.getValueAsString());
			}
		});
		
		Layout upperLayout = new HStack(5);
		upperLayout.addMember(form);
		upperLayout.addMember(button);

		Layout layout = new VStack(5);
		layout.addMember(upperLayout);
		layout.addMember(grid);

		setCanvas(layout);
		
		setShouldSaveValue(true);
	}
	
	private void addValue(String value) {
		
		grid.addData(new ValueRecord(value));
	}
	
	@SuppressWarnings("unchecked")
	@Override
	public void storeValue(Object value) {
		setValue((List<String>)value);
	}

	@Override
	public Object getValue() {
		
		return recordsToList(grid.getRecords());
	}

	@SuppressWarnings("unchecked")
	@Override
	public void setValue(Object value) {
		
		setValue((List<String>)value);
	}
	
	public void setValue(List<String> value) {
		
		grid.setData( listToRecords(value) );
	}

	private static ListGridRecord[] listToRecords(List<String> value) {
		
		ListGridRecord[] records = new ListGridRecord[value.size()];
		for (int i=0; i<value.size(); i++) {
			records[i] = new ValueRecord(value.get(i));
		}
		return records;
	}
	
	private static Object recordsToList(ListGridRecord[] records) {
		
		List<String> result = new ArrayList<String>();
		
		for (ListGridRecord record : records) {
			result.add( record.getAttributeAsString(ATTR_VALUE) );
		}
		
		return result;
	}
	
	@Override
	public Boolean validate() {
		Log.debug("Validating");
		if( isEmpty( grid.getRecords()) ) {
			textItem.setValue("");
			return textItem.validate();
		} else {
			return true;
		}
	}
	
	@Override
	public void setRequired(Boolean required) {
		textItem.setRequired(required);
	}

	private static class ValueRecord extends ListGridRecord {

		public ValueRecord(String value) {
			setAttribute(ATTR_VALUE, value);  
		}
	}
}

I apologize for that messy code, but I am still trying to understand things.

Thanks for your help.

[ferranmc]

Double post, sorry.

[ferranmc]

I have discovered how to add a CustomValidator in my MultipleTextItem:

		Validator validator = new CustomValidator() {
			
			@Override
			protected boolean condition(Object value) {
				Log.debug("Validator executed with value: " + value);
				return true; // TODO logic
			}			
		};
		
		validator.setErrorMessage("Error message here");
		
		setValidators(validator);

But condition(Object value) is always executed with a null value.
How can I change that value to the list of texts that my item contains?

Thanks!

[ferranmc]

I found that if I override setValue(Object) I should call the original super.setValue(Object) method:

	@SuppressWarnings("unchecked")
	@Override
	public void setValue(Object value) {
		Log.debug("setValue(Object) executed");
		grid.setData( listToRecords((List<T>)value) );
		fireGridUpdatedEvent();
	}

	private void fireGridUpdatedEvent() {
		Log.debug("Grid updated!");
		super.setValue( recordsToList(grid.getRecords()) );
	}

Now I need my fireGridUpdatedEvent() to fire the "changed" event, so I can add a ChangedHandler to my MultipleItem.
How can I do that? I see my ChangedHandler is never called, even when I call setValue(Object).

	FormItem valueInputItem = new TextItem();

	FormItem multipleItem =
		new MultipleItem<String>("cities", "Cities, valueInputItem);

	multipleItem.addChangedHandler(new ChangedHandler() {
		@Override
		public void onChanged(ChangedEvent event) {
			Log.debug("Changed to: " + event.getValue());
		}
	});

(Note: In the meantime I have generalized my MultipleTextItem to a generic MultipleItem<T>).

[ferranmc]

I've read the javadoc for CanvasItem and it says: "To provide a value to the form, call CanvasItem.storeValue whenever the user changes the value in your Canvas".

But when I call storeValue() I get an exception saying "Object doesn't support this property or method".

	private void fireGridUpdatedEvent() {
		Log.debug("Grid updated!");
		List<T> value = recordsToList(grid.getRecords());
		Log.debug("Storing value: " + value);
		storeValue(value); // Crashes!
	}

What can be happening? Am I doing something wrong?

The stack trace is:

com.google.gwt.event.shared.UmbrellaException: One or more exceptions caught, see full set in UmbrellaException#getCauses
    at com.google.gwt.event.shared.HandlerManager.fireEvent(HandlerManager.java:129)
    at com.smartgwt.client.widgets.BaseWidget.fireEvent(BaseWidget.java:67)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
    at java.lang.reflect.Method.invoke(Method.java:597)
    at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)
    at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)
    at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:167)
    at com.google.gwt.dev.shell.BrowserChannelServer.reactToMessagesWhileWaitingForReturn(BrowserChannelServer.java:326)
    at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:207)
    at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:132)
    at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:561)
    at com.google.gwt.dev.shell.ModuleSpace.invokeNativeObject(ModuleSpace.java:269)
    at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeObject(JavaScriptHost.java:91)
    at com.google.gwt.core.client.impl.Impl.apply(Impl.java)
    at com.google.gwt.core.client.impl.Impl.entry0(Impl.java:214)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
    at java.lang.reflect.Method.invoke(Method.java:597)
    at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)
    at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)
    at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:167)
    at com.google.gwt.dev.shell.BrowserChannelServer.reactToMessages(BrowserChannelServer.java:281)
    at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:531)
    at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:352)
    at java.lang.Thread.run(Thread.java:619)

Caused by: com.google.gwt.core.client.JavaScriptException: (TypeError): Object doesn't support this property or method
    at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:237)
    at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:132)
    at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:561)
    at com.google.gwt.dev.shell.ModuleSpace.invokeNativeVoid(ModuleSpace.java:289)
    at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeVoid(JavaScriptHost.java:107)
    at com.smartgwt.client.widgets.form.fields.CanvasItem.storeValue(CanvasItem.java)
    at MultipleItem.fireGridUpdatedEvent(MultipleItem.java:155)

[Isomorphic]

It looks like some of your posts are attempting to use old approaches for working with CanvasItems.
What you need to know about CanvasItems right now:
- You can use an initHandler to create a Canvas at runtime and apply it to the item via setCanvas()
- You can implement a showValueHandler() - this will be invoked every time 'setValue()' is called on your item - IE the items' value changes programmatically, and it should update the canvas to reflect the new value
- You should react to user iteractions with your canvas by calling "storeValue()". This will fire change handlers and store out the item value so it can be retrieved from the form the item is contained in.

Other than that your item will behave like other form items (so you can add validators, set required, etc).

The specific bug you're getting on "storeValue()" is probably a misunderstood data-type. I believe you're trying to edit / display an array of Strings (right)? So convert your grid data to the appropriate String[] and call "storeData".

If you really can't get this working we'd recommend posting a simple standalone test case that demonstrates the error

[ferranmc]

Hello Isomorphic,

I've followed your recommendations:

- Added a FormItemInitHandler where I create the canvas.
- Added a ShowValueHandler where I update the canvas (the ListGrid).
- Call storeValue() when the canvas (ListGrid) is modified.
- Store the value of the item as T[] instead of List<T>.

The storeValue() is still throwing an exception, although it is different than before (maybe because now I pass a T[] instead of a List<T>).

I attach a standalone test. It crashes when the grid is modified: that executes the fireGridUpdatedEvent() method which in turn calls storeValue(). And this call goes wrong.

The SC console says:

10:21:27.057:MUP8:WARN:Log:Error:
	'Object doesn't support this property or method'
	in http://localhost:8080/agd/mediateca/sc/modules/ISC_Core.js
	at line 52
    anonymous(_1=>Obj, _2=>Array[23])
    anonymous(_1=>Obj, _2=>[Ljava.lang.String;@1094c48, _3=>undef, _4=>undef, _5=>undef, _6=>undef, _7=>undef, _8=>undef, _9=>undef, _10=>undef, _11=>undef, _12=>undef, _13=>undef, _14=>undef, _15=>undef, _16=>undef, _17=>undef, _18=>undef, _19=>undef, _20=>undef, _21=>undef, _22=>undef, _23=>undef, _24=>undef, _25=>undef, _26=>undef, _27=>undef)
    [c]DynamicForm.compareValues(_1=>[Ljava.lang.String;@ef29c4, _2=>[Ljava.lang.String;@1094c48)
    FormItem.compareValues(_1=>[Ljava.lang.String;@ef29c4, _2=>[Ljava.lang.String;@1094c48)
    FormItem.storeValue(_1=>[Ljava.lang.String;@ef29c4)
    StatefulCanvas.handleActivate(_1=>Obj, _2=>undef)
    StatefulCanvas.handleClick(_1=>Obj, _2=>undef)
    [c]EventHandler.bubbleEvent(_1=>[IButton ID:isc_IButton_0], _2=>"click", _3=>undef, _4=>undef)
    [c]EventHandler.handleClick(_1=>[IButton ID:isc_IButton_0], _2=>undef)
    [c]EventHandler.$k5(_1=>Obj{type:error}, _2=>undef)
    [c]EventHandler.handleMouseUp(_1=>Obj{type:error}, _2=>undef)
    [c]EventHandler.dispatch(_1=>[c]EventHandler.handleMouseUp(), _2=>Obj{type:error})
    anonymous(event=>undef)
        "if (!isc.Browser.isIE && event == null) return;var returnVal=arguments.callee.$ch.isc.EH.dispatch(arguments.callee.$j2,event);return returnVal;"

and the GWT-Log says:

2011-10-14 10:16:10,307 [INFO ] MultipleItemTest.java:23 - Logging with gwt-log

2011-10-14 10:16:11,463 [WARN ] MultipleItem.java:122 - Show value event. Data value: [one, two, three]

2011-10-14 10:21:26,995 [DEBUG] MultipleItem.java:95 - Adding value

2011-10-14 10:21:27,010 [DEBUG] MultipleItem.java:167 - Storing value: [one, two, three, aaa]

2011-10-14 10:21:28,338 [FATAL] CanvasItem.java:-1 - Uncaught Exception:
com.google.gwt.event.shared.UmbrellaException: One or more exceptions caught, see full set in UmbrellaException#getCauses
    at com.google.gwt.event.shared.HandlerManager.fireEvent(HandlerManager.java:129)
    at com.smartgwt.client.widgets.BaseWidget.fireEvent(BaseWidget.java:67)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
    at java.lang.reflect.Method.invoke(Method.java:597)
    at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)
    at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)
    at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:167)
    at com.google.gwt.dev.shell.BrowserChannelServer.reactToMessagesWhileWaitingForReturn(BrowserChannelServer.java:326)
    at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:207)
    at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:132)
    at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:561)
    at com.google.gwt.dev.shell.ModuleSpace.invokeNativeObject(ModuleSpace.java:269)
    at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeObject(JavaScriptHost.java:91)
    at com.google.gwt.core.client.impl.Impl.apply(Impl.java)
    at com.google.gwt.core.client.impl.Impl.entry0(Impl.java:214)
    at sun.reflect.GeneratedMethodAccessor188.invoke(Unknown Source)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
    at java.lang.reflect.Method.invoke(Method.java:597)
    at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)
    at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)
    at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:167)
    at com.google.gwt.dev.shell.BrowserChannelServer.reactToMessages(BrowserChannelServer.java:281)
    at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:531)
    at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:352)
    at java.lang.Thread.run(Thread.java:619)

Caused by: com.google.gwt.core.client.JavaScriptException: (Error): Unknown failure
    at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:237)
    at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:132)
    at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:561)
    at com.google.gwt.dev.shell.ModuleSpace.invokeNativeVoid(ModuleSpace.java:289)
    at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeVoid(JavaScriptHost.java:107)
    at com.smartgwt.client.widgets.form.fields.CanvasItem.storeValue(CanvasItem.java)
    at cat.diba.jee.mediatecagwt.client.MultipleItem.fireGridUpdatedEvent(MultipleItem.java:169)
    at cat.diba.jee.mediatecagwt.client.MultipleItem.addValue(MultipleItem.java:160)
    at cat.diba.jee.mediatecagwt.client.MultipleItem.access$2(MultipleItem.java:158)
    at cat.diba.jee.mediatecagwt.client.MultipleItem$2.onClick(MultipleItem.java:97)
    at com.smartgwt.client.widgets.events.ClickEvent.dispatch(ClickEvent.java:99)
    at com.smartgwt.client.widgets.events.ClickEvent.dispatch(ClickEvent.java:1)
    at com.google.gwt.event.shared.GwtEvent.dispatch(GwtEvent.java:1)
    at com.google.web.bindery.event.shared.SimpleEventBus.doFire(SimpleEventBus.java:193)
    at com.google.web.bindery.event.shared.SimpleEventBus.fireEvent(SimpleEventBus.java:88)
    at com.google.gwt.event.shared.HandlerManager.fireEvent(HandlerManager.java:127)
    at com.smartgwt.client.widgets.BaseWidget.fireEvent(BaseWidget.java:67)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
    at java.lang.reflect.Method.invoke(Method.java:597)
    at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)
    at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)
    at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:167)
    at com.google.gwt.dev.shell.BrowserChannelServer.reactToMessagesWhileWaitingForReturn(BrowserChannelServer.java:326)
    at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:207)
    at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:132)
    at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:561)
    at com.google.gwt.dev.shell.ModuleSpace.invokeNativeObject(ModuleSpace.java:269)
    at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeObject(JavaScriptHost.java:91)
    at com.google.gwt.core.client.impl.Impl.apply(Impl.java)
    at com.google.gwt.core.client.impl.Impl.entry0(Impl.java:214)
    at sun.reflect.GeneratedMethodAccessor188.invoke(Unknown Source)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
    at java.lang.reflect.Method.invoke(Method.java:597)
    at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)
    at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)
    at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:167)
    at com.google.gwt.dev.shell.BrowserChannelServer.reactToMessages(BrowserChannelServer.java:281)
    at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:531)
    at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:352)
    at java.lang.Thread.run(Thread.java:619)

Thanks for your help!

Ferran

[ferranmc]

Any idea?

In the meantime, I am using this PatchedMultipleItem.

It works but I have to handle "changed" events myself; I suppose because I don't (can't) call storeValue().

[ferranmc]

My patched solution works in IE but not in Firefox. I suppose I should do it well, I should call storeValue() as you say Isomorphic. But I tried to call it and it threw an exception.
Can you give me some clues about how to do this multiple item?

Thank you

[ferranmc]

Hello,

First of all, this is a FormItem to store multiple values (a List of values). See the attached image to see what it looks like.

I was having problems so I looked again at the Showcase examples and saw there storeValue() is called passing grid.getDataAsRecordList().
But that doesn't work yet, so I finally passed new RecordList(grid.getRecords()) as Reed suggested here: http://forums.smartclient.com/showpo...00&postcount=7

I attach my MultipleItem in case someone would like to use it (and/or improve it).

MultipleItemTest is a simple test.

By the way, you can override configureListGridField() to configure the ListGridField in the ListGrid that MultipleItem contains.
For example, if you want to display multiple Dates, you can configure the date format in the ListGrid this way:

// valueInputItem is the field used to enter new values
DateItem valueInputItem = new DateItem();
valueInputItem.setUseTextField(true);
// We set the format of the valueInputItem 
valueInputItem.setDisplayFormat(
	DateDisplayFormat.TOEUROPEANSHORTDATE);
valueInputItem.setSuppressValueIcon(false);

MultipleItem<Date> multipleItem = new MultipleItem<Date>(valueInputItem) {
	// Overriding this method we also set the format of the ListGrid
	protected void configureListGridField(ListGridField listGridField) {
		listGridField.setDateFormatter(
			DateDisplayFormat.TOEUROPEANSHORTDATE);
	};
};

You can also create/configure the valueInputItem passed to the MultipleItem constructor so you can, for example, use a SelectItem to limit the possible values.

Hope it helps!

[ferranmc]

I still have a doubt: why ShowValueHandler.onShowValue() is never called?

[Isomorphic]

It looks like you've embarked on some kind of MultipleItem which class, but we don't understand what problem you're trying to solve.

If you think there's a bug in the framework, start a new thread, and create a *minimal* sample demonstrating a bug. We'd like to emphasize it should be *minimal* - not just a dump of a bunch of code for a custom FormItem, but minimal code clearly demonstrating a framework bug.