Question

Сould you please give me working example of nested editors ? I’ve read this document but it didn’t help me. In my code I have class Person and Organization.

Organization has field contactPerson of a type Person.

So I created following editor for Person:

public class PersonEditor extends Composite implements Editor<PersonProxy>
{
    interface PersonEditorUiBinder extends UiBinder<Widget, PersonEditor>
    {
    }

    private static PersonEditorUiBinder uiBinder = GWT.create(PersonEditorUiBinder.class);

    @UiField
    ValueBoxEditorDecorator<String> name;
    @UiField
    ValueBoxEditorDecorator<String> phoneNumber;
    @UiField
    ValueBoxEditorDecorator<String> email;

    @UiField
    CaptionPanel captionPanel;

    public void setCaptionText(String captionText)
    {
        captionPanel.setCaptionText(captionText);
    }

    public PersonEditor()
    {
        initWidget(uiBinder.createAndBindUi(this));
    }
}

its corresponding .ui.xml is

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
             xmlns:g='urn:import:com.google.gwt.user.client.ui'
             xmlns:e='urn:import:com.google.gwt.editor.ui.client'

             ui:generateFormat='com.google.gwt.i18n.rebind.format.PropertiesFormat'
             ui:generateKeys="com.google.gwt.i18n.server.keygen.MD5KeyGenerator"
             ui:generateLocales="en,ru">
    <ui:style src="../common.css"/>
    <g:CaptionPanel captionText="Test" ui:field="captionPanel">
        <g:HTMLPanel>
            <table class="{style.forform}">
                <tr>
                    <th class="{style.forform}">
                        <div>
                            <ui:msg meaning="person's name">Name:</ui:msg>
                        </div>
                    </th>
                    <td class="{style.forform}">
                        <e:ValueBoxEditorDecorator ui:field="name" stylePrimaryName="{style.forform}">
                            <e:valuebox>
                                <g:TextBox stylePrimaryName="{style.forform}"/>
                            </e:valuebox>
                        </e:ValueBoxEditorDecorator>
                    </td>
                </tr>
                <tr>
                    <th class="{style.forform}">
                        <div>
                            <ui:msg>Phone Number:</ui:msg>
                        </div>
                    </th>
                    <td class="{style.forform}">
                        <e:ValueBoxEditorDecorator ui:field="phoneNumber" stylePrimaryName="{style.forform}">
                            <e:valuebox>
                                <g:TextBox width="100%" stylePrimaryName="{style.forform}"/>
                            </e:valuebox>
                        </e:ValueBoxEditorDecorator>
                    </td>
                </tr>
                <tr>
                    <th class="{style.forform}">
                        <div>
                            <ui:msg>EMail:</ui:msg>
                        </div>
                    </th>
                    <td class="{style.forform}">
                        <e:ValueBoxEditorDecorator ui:field="email" stylePrimaryName="{style.forform}">
                            <e:valuebox>
                                <g:TextBox width="100%" stylePrimaryName="{style.forform}"/>
                            </e:valuebox>
                        </e:ValueBoxEditorDecorator>
                    </td>
                </tr>
            </table>
        </g:HTMLPanel>
    </g:CaptionPanel>
</ui:UiBinder>

It works nicely.

Here is editor for Organization:

public class OrganizationEditor extends Composite implements Editor<OrganizationProxy>
{
    interface OrganizationEditorUiBinder extends UiBinder<Widget, OrganizationEditor>
    {
    }

    private static OrganizationEditorUiBinder uiBinder = GWT.create(OrganizationEditorUiBinder.class);

    @UiField
    CaptionPanel captionPanel;

    @UiField
    ValueBoxEditorDecorator<String> name;

    @UiField
    ValueBoxEditorDecorator<String> address;

    @UiField
    PersonEditor personEditor;

    public void setCaptionText(String captionText)
    {
        captionPanel.setCaptionText(captionText);
    }

    public OrganizationEditor()
    {
        initWidget(uiBinder.createAndBindUi(this));
    }
}

and its corresponding .ui.xml is

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
             xmlns:g='urn:import:com.google.gwt.user.client.ui'
             xmlns:e='urn:import:com.google.gwt.editor.ui.client'
             xmlns:c='urn:import:com.zasutki.courierApp.client.customer'
             xmlns:myui='urn:import:com.zasutki.courierApp.client.ui'

             ui:generateFormat='com.google.gwt.i18n.rebind.format.PropertiesFormat'
             ui:generateKeys="com.google.gwt.i18n.server.keygen.MD5KeyGenerator"
             ui:generateLocales="en,ru">
    <ui:style src="../common.css"/>
    <g:CaptionPanel ui:field="captionPanel">
        <myui:VerticalFlowPanel>
            <g:HTMLPanel>
                <table class="{style.forform}">
                    <tr>
                        <th class="{style.forform}">
                            <div>
                                <ui:msg meaning="Name of organization">Name:</ui:msg>
                            </div>
                        </th>
                        <td class="{style.forform}">
                            <e:ValueBoxEditorDecorator ui:field="name" stylePrimaryName="{style.forform}">
                                <e:valuebox>
                                    <g:TextBox stylePrimaryName="{style.forform}"/>
                                </e:valuebox>
                            </e:ValueBoxEditorDecorator>
                        </td>
                    </tr>
                    <tr>
                        <th class="{style.forform}">
                            <div>
                                <ui:msg>Address:</ui:msg>
                            </div>
                        </th>
                        <td class="{style.forform}">
                            <e:ValueBoxEditorDecorator ui:field="address" stylePrimaryName="{style.forform}">
                                <e:valuebox>
                                    <g:TextBox stylePrimaryName="{style.forform}"/>
                                </e:valuebox>
                            </e:ValueBoxEditorDecorator>
                        </td>
                    </tr>
                </table>
                <c:PersonEditor ui:field="personEditor" captionText="Contact person">
                    <ui:attribute name="captionText"/>
                </c:PersonEditor>
            </g:HTMLPanel>
        </myui:VerticalFlowPanel>
    </g:CaptionPanel>
</ui:UiBinder>

interface for proxy of Organization is

@ProxyFor(value = Organization.class, locator = ObjectifyLocator.class)
public interface OrganizationProxy extends EntityProxy
{
    public String getName();
    public void setName(String name);
    public String getAddress();
    public void setAddress(String address);
    public PersonProxy getContactPerson();
    public void setContactPerson(PersonProxy contactPerson);
}

and finally here is class that uses all described above

public class NewOrderView extends Composite
{
    interface Binder extends UiBinder<Widget, NewOrderView>
    {
    }

    private static Binder uiBinder = GWT.create(Binder.class);

    // Empty interface declaration, similar to UiBinder
    interface OrganizationDriver extends SimpleBeanEditorDriver<OrganizationProxy, OrganizationEditor>
    {
    }

    OrganizationDriver driver = GWT.create(OrganizationDriver.class);

    @UiField
    Button save;

    @UiField
    OrganizationEditor orgEditor;

    OrganizationProxy organizationProxy;

    public NewOrderView()
    {
        initWidget(uiBinder.createAndBindUi(this));

        organizationProxy = createFactory().contextOrder().create(OrganizationProxy.class);

        // Initialize the driver with the top-level editor
        driver.initialize(orgEditor);

        // Copy the data in the object into the UI
        driver.edit(organizationProxy);
    }

    @UiHandler("save")
    void buttonClick(ClickEvent e)
    {
        e.stopPropagation();

        OrganizationProxy edited = driver.flush();
        PersonProxy person = edited.getContactPerson();
        // person is always null !!!
        if (driver.hasErrors())
        {
        }
    }
}

The question is why nested editor (PersonEditor) doesn’t get flushed automatically ? Is it supposed to happen ? What is the proper solution ?

Answer 1

Ah… I have to create proxy for contactPerson manually!

public class NewOrderView extends Composite
{
    public NewOrderView()
    {
        initWidget(uiBinder.createAndBindUi(this));

        AdminRequestFactory.OrderRequestContext orderRequestContext = createFactory().contextOrder();
        organizationProxy = orderRequestContext.create(OrganizationProxy.class);
        organizationProxy.setContactPerson(orderRequestContext.create(PersonProxy.class));

        // Initialize the driver with the top-level editor
        driver.initialize(orgEditor);

        // Copy the data in the object into the UI
        driver.edit(organizationProxy);
    }
}