gwt - 在复杂用例中使用 GWT 编辑器

Question

我正在尝试创建一个与 Google 表单创建页面非常相似的页面。



这就是我尝试使用 GWT MVP 框架(地点和事件)和编辑器对其建模的方式。

CreateFormActivity (事件和演示者)

CreateFormView ( View 接口(interface)，带有嵌套的Presenter接口(interface))

CreateFormViewImpl (实现 CreateFormView 和 Editor

CreateFormViewImpl 有以下子编辑器:

文本框标题

文本框描述

QuestionListEditor questionList

QuestionListEditor 实现 IsEditor< ListEditor< QuestionProxy, QuestionEditor>>

QuestionEditor 实现编辑器< QuestionProxy>
QuestionEditor 有以下子编辑:

文本框问题标题

文本框帮助文本

ValueListBox questionType

下面每个问题类型的可选子编辑器。

每种问题类型的编辑器:

文本问题编辑器

段落文本问题编辑器

MultipleChoiceQuestionEditor

复选框问题编辑器

ListQuestionEditor

ScaleQuestionEditor

GridQuestionEditor

具体问题:

从表单中添加/删除问题的正确方法是什么。 (见 follow up question )

我应该如何为每种问题类型创建编辑器？我试图听 questionType 值的变化，我不知道之后该怎么做。 (由 BobV 回答)

每个问题类型特定的编辑器都应该用 optionalFieldEditor 包装吗？因为一次只能使用其中一个。 (由 BobV 回答)

如何最好地管理在对象层次结构深处创建/删除对象。例如)指定问题编号 3 的答案，该问题属于选择题类型。 (见 follow up question )

OptionalFieldEditor 编辑器可以用来包装 ListEditor 吗？ (由 BobV 回答)

基于Answer的实现

问题编辑器

public class QuestionDataEditor extends Composite implements
CompositeEditor<QuestionDataProxy, QuestionDataProxy, Editor<QuestionDataProxy>>,
LeafValueEditor<QuestionDataProxy>, HasRequestContext<QuestionDataProxy> {

interface Binder extends UiBinder<Widget, QuestionDataEditor> {}

private CompositeEditor.EditorChain<QuestionDataProxy, Editor<QuestionDataProxy>> chain;

private QuestionBaseDataEditor subEditor = null;
private QuestionDataProxy currentValue = null;
@UiField
SimplePanel container;

@UiField(provided = true)
@Path("dataType")
ValueListBox<QuestionType> dataType = new ValueListBox<QuestionType>(new Renderer<QuestionType>() {

    @Override
    public String render(final QuestionType object) {
        return object == null ? "" : object.toString();
    }

    @Override
    public void render(final QuestionType object, final Appendable appendable) throws IOException {
        if (object != null) {
            appendable.append(object.toString());
        }
    }
});

private RequestContext ctx;

public QuestionDataEditor() {
    initWidget(GWT.<Binder> create(Binder.class).createAndBindUi(this));
    dataType.setValue(QuestionType.BooleanQuestionType, true);
    dataType.setAcceptableValues(Arrays.asList(QuestionType.values()));

    /*
     * The type drop-down UI element is an implementation detail of the
     * CompositeEditor. When a question type is selected, the editor will
     * call EditorChain.attach() with an instance of a QuestionData subtype
     * and the type-specific sub-Editor.
     */
    dataType.addValueChangeHandler(new ValueChangeHandler<QuestionType>() {
        @Override
        public void onValueChange(final ValueChangeEvent<QuestionType> event) {
            QuestionDataProxy value;
            switch (event.getValue()) {

            case MultiChoiceQuestionData:
                value = ctx.create(QuestionMultiChoiceDataProxy.class);
                setValue(value);
                break;

            case BooleanQuestionData:
            default:
                final QuestionNumberDataProxy value2 = ctx.create(BooleanQuestionDataProxy.class);
                value2.setPrompt("this value doesn't show up");
                setValue(value2);
                break;

            }

        }
    });
}

/*
 * The only thing that calls createEditorForTraversal() is the PathCollector
 * which is used by RequestFactoryEditorDriver.getPaths().
 * 
 * My recommendation is to always return a trivial instance of your question
 * type editor and know that you may have to amend the value returned by
 * getPaths()
 */
@Override
public Editor<QuestionDataProxy> createEditorForTraversal() {
    return new QuestionNumberDataEditor();
}

@Override
public void flush() {
    //XXX this doesn't work, no data is returned
    currentValue = chain.getValue(subEditor);
}

/**
 * Returns an empty string because there is only ever one sub-editor used.
 */
@Override
public String getPathElement(final Editor<QuestionDataProxy> subEditor) {
    return "";
}

@Override
public QuestionDataProxy getValue() {
    return currentValue;
}

@Override
public void onPropertyChange(final String... paths) {
}

@Override
public void setDelegate(final EditorDelegate<QuestionDataProxy> delegate) {
}

@Override
public void setEditorChain(final EditorChain<QuestionDataProxy, Editor<QuestionDataProxy>> chain) {
    this.chain = chain;
}

@Override
public void setRequestContext(final RequestContext ctx) {
    this.ctx = ctx;
}

/*
 * The implementation of CompositeEditor.setValue() just creates the
 * type-specific sub-Editor and calls EditorChain.attach().
 */
@Override
public void setValue(final QuestionDataProxy value) {

    // if (currentValue != null && value == null) {
    chain.detach(subEditor);
    // }

    QuestionType type = null;
    if (value instanceof QuestionMultiChoiceDataProxy) {
        if (((QuestionMultiChoiceDataProxy) value).getCustomList() == null) {
            ((QuestionMultiChoiceDataProxy) value).setCustomList(new ArrayList<CustomListItemProxy>());
        }
        type = QuestionType.CustomList;
        subEditor = new QuestionMultipleChoiceDataEditor();

    } else {
        type = QuestionType.BooleanQuestionType;
        subEditor = new BooleanQuestionDataEditor();
    }

    subEditor.setRequestContext(ctx);
    currentValue = value;
    container.clear();
    if (value != null) {
        dataType.setValue(type, false);
        container.add(subEditor);
        chain.attach(value, subEditor);
    }
}

}

问题库数据编辑器

public interface QuestionBaseDataEditor extends HasRequestContext<QuestionDataProxy>,                         IsWidget {


}

示例子类型

public class BooleanQuestionDataEditor extends Composite implements QuestionBaseDataEditor {
interface Binder extends UiBinder<Widget, BooleanQuestionDataEditor> {}

@Path("prompt")
@UiField
TextBox prompt = new TextBox();

public QuestionNumberDataEditor() {
    initWidget(GWT.<Binder> create(Binder.class).createAndBindUi(this));
}

@Override
public void setRequestContext(final RequestContext ctx) {

}
}

剩下的唯一问题是没有显示或刷新 QuestionData 子类型特定数据。我认为这与我正在使用的编辑器设置有关。

例如， BooleanQuestionDataEditor 中的提示值既未设置也未刷新，并且在 rpc 有效负载中为空。

我的猜测是:由于 QuestionDataEditor 实现了 LeafValueEditor，驱动程序不会访问子编辑器，即使它已附加。

非常感谢 任何可以提供帮助的人!!!

Answer 1

从根本上说，你想要一个 CompositeEditor处理从编辑器层次结构中动态添加或删除对象的情况。 ListEditor和 OptionalFieldEditor适配器实现 CompositeEditor .

如果不同类型问题所需的信息基本上是正交的，那么多个 OptionalFieldEditor可以与不同的字段一起使用，每个问题类型一个。当您只有几个问题类型时，这将起作用，但将来不会很好地扩展。

另一种可以更好扩展的方法是使用 CompositeEditor + LeafValueEditor 的自定义实现。处理多态的 QuestionData类型层次结构。类型下拉 UI 元素将成为 CompositeEditor 的实现细节.选择问题类型后，编辑会调用 EditorChain.attach()带有 QuestionData 的实例子类型和特定类型的子编辑器。新创建的QuestionData应保留实例以实现 LeafValueEditor.getValue() . CompositeEditor.setValue()的执行只需创建特定类型的子编辑器并调用 EditorChain.attach() .

FWIW，OptionalFieldEditor可与 ListEditor 一起使用或任何其他编辑器类型。