CanvasItem showValue ?

[stonebranch1]

I am trying to use a CanvasItem to be used on a form. I see the docs say to implement showValue if you want the data to be set within this CanvasItem, but where is the showValue method that I should override?

"If you set shouldSaveValue:true, CanvasItem.showValue will be called to provide a value that your item should display. Implement showValue() and call methods on the Canvas you've created to cause the value to be displayed."

Is there a simple example for this somewhere?

[levi]

The official showcase has this great sample on the use of CanvasItem.

[stonebranch1]

Yes but it is doing things differently than what the doc for CanvasItem states. The sample does the following:

        ListGridItem countryField = new ListGridItem("countryName");  
        countryField.setGridData(CountrySampleData.getRecords());

to set the data in the CanvasItem explicitly in onModuleLoad.

The CanvasItem states:

"If you set shouldSaveValue:true, CanvasItem.showValue will be called to provide a value that your item should display. Implement showValue() and call methods on the Canvas you've created to cause the value to be displayed.

showValue() will be called in various situations where the form receives data, including a call to DynamicForm.setValues, DynamicForm.editRecord, or if DynamicForm.fetchData is called and a Record is returned. Bear in mind that showValue() can be called when the form and your item have not yet been drawn; in this case, store the value for later display."

I cannot find any example of this. Basically I have the CanvasItem added to my form and when the form is loaded, I expect the method "showValue()" to be called whereby I can then setup my CanvasItem as I need. However, there is no such method called "showValue()" on CanvasItem so I am confused.

I also tried using addShowValueHandler(new ShowValueHandler()... but it was never called either.

[levi]

You have to treat the CanvasItem like any other FormItem. Try setting up two FormItems on the same DynamicForm to compare. One a simple built in FormItem and the other one your own CanvasItem. Make sure you set a value in the record in the DynamicForm with the name attribute form both FormItems. If you see data in the normal FormItem, you should see data in your custom CanvasItem.

setInitHandler(...)

and

addShowValueHandler(new ShowValueHandler() {  
                @Override  
                public void onShowValue

is the correct API to use. I always create a standalone Widget which extends Canvas, then embed it in the CanvasItem. The onShowValue() will be called with data which I then pass on to the Widget which knows how to render that data.

I've got a few custom CanvasItems and they all are working like this (though my DynamicForms are attached to a ValuesManager). I'm not sure about the docs ;) Some CanvasItems are readOnly so I set them setShouldSaveValue(false) and still the onShowValue() is called.

[stonebranch1]

Levi, thanks for taking the time to respond, much appreciated.

I will give that another try. I thought I tried it earlier and the handler never was called but I will retry it again.

Cheers.

[stonebranch1]

Well still no go... Here is my simple CanvasItem:

public class CanvasTextItem extends CanvasItem {

    private DynamicForm form = new DynamicForm();
    private TextItem textItem = new TextItem();

    public CanvasTextItem(String name) {
        super(name);
        init();
    }

    private void init() {
        textItem.setShowTitle(false);
        form.setFields(textItem);
        setCanvas(form);
        setShouldSaveValue(Boolean.TRUE);
        // add the handler that should be called when form/data is loaded
        addShowValueHandler(new ShowValueHandler() {
            @Override
            public void onShowValue(ShowValueEvent event) {
                Object value = event.getDataValue();
                if (value != null) textItem.setValue(value);
                GWT.log("ShowValueHandler: " + value);
            }
        });
        // add the handler to store any changes back to the form
        textItem.addChangedHandler(new ChangedHandler() {
            @Override
            public void onChanged(ChangedEvent event) {
                Object value = event.getValue();
                if (value != null) CanvasTextItem.this.setValue(value.toString());
                else CanvasTextItem.this.setValue("");
            }
        });
    }
}

and here is the from where I am trying it out:

:
    TextItem name = new TextItem("name");
    CanvasTextItem name2 = new CanvasTextItem("name");
:
    form.setItems(name, name2);
:

When I load the panel (it is a master-details style) and click a record in the list grid, the TextItem name field is filled in but the CanvasTextItem name2 remains empty. If I type into the CanvasTextItem name 2 field the changes show up in the name field as well since I have the changed handler on that text item within the canvas.

What am I doing wrong or not doing that is preventing the CanvasItem from getting the data populated in it automatically?

Thanks!

[levi]

You don't have a setInitHandler(...) implemented.
Take a look at the sampe code in the showcase again. You cannot set any of your own widget code inside the CanvasItem class code as private methods or variables. The only correct way to create your widget is in the setInitHandler() code.
Then, in the onShowValue() you should get a reference to your widget from the ShowValueEvent. Again NOT from some stored variable inside your CanvasItem.

So remove your "private TextItem textItem & form" members and "setCanvas(form)". Everything goes inside the "public void onInit(FormItem item)" method.
I can really advice to create your own class which extends Canvas where you program your UI widget with some functions first. After that is working, create a CanvasItem and place your widget inside the setInitHandler() and use the addShowValueHandler() to get a reference to the widget and use your own API calls. You'll see that the code needed inside your CanvasItem implementation is very little and clean.

The basics of CanvasItem:
1) use setInitHandler to create the UI
2) use addShowValueHandler when you want your UI to change depending on the value


+ I'm not 100% sure if the same DynamicForm supports 2 FormItems having the same "name". In previous post, I meant use a "name1" & "name2" - so unqiue for both items, but give them the same value to test with.

[stonebranch1]

Great information. Thank You Kindly!