使用 GWT 编辑器框架创建包含 CellList 的模型？

Question

我有以下型号：

class Book {
  String title;
  // getter and setter
}

class Author {
  private name;
  private List<Book> books;
  // getter and setter  
}

我想创建一个 GWT 小部件，我可以在其中创建作者并创建尽可能多的书籍，同时在同一视图中创建作者。下面是它的样子：

您可以添加任意数量的书籍：

我想使用 GWT 编辑器框架来填充视图和模型之间的数据。以下是我只为没有列表的Author 模型执行此操作的方法。

我的 UiBinder：

<g:TextBox ui:field="nameInput"/>

我的 Widget.java：

public class MyWidgetView {

  @Path(value="name")
  @UiField
  TextBox nameInput;

public interface EditorDriver extends SimpleBeanEditorDriver<Author, MyWidgetView> { }

  @Override
  public SimpleBeanEditorDriver<Author, ?> createEditorDriver() {
    EditorDriver driver = GWT.create(EditorDriver.class);
    driver.initialize(this);
    return driver;
  }

}

在我创建的演示者中：

SimpleBeanEditorDriver<TriggerDto, ?> editorDriver = getView().createEditorDriver();

这适用于简单模型，但我想将它用于包含List<Book> 的上述作者模型。

我必须如何设置 UiBinder 以便我可以将 Books 添加到作者，以及我与编辑器有什么关系才能将创建的 Books 列表刷新到作者模型中？

Answer 1

这里是如何实现的。您需要创建一个 Editor、一个 ListEditor 和一个 EditorSource

public class BooksEditor implements IsWidget, IsEditor<ListEditor<Book, BookEditor>> {
    private final HTMLPanel main;
    private final ListEditor<Book, BookEditor>> editor;

    @Inject
    BooksEditor(
            Provider<BookEditor> bookEditorProvider) {
        main = new HTMLPanel("");
        editor = ListEditor.of(new BookEditorSource(bookEditorProvider, main));
    }

    @Override
    public ListEditor<Book, BookEditor> asEditor() {
        return editor;
    }

    @Override
    public Widget asWidget() {
        return main;
    }`
}

public class BookEditorSource extends EditorSource<BookEditor> {
    private final Provider<BookEditor> bookEditorProvider;
    private final HTMLPanel books;

    public BookEditorSource(
            Provider<BookEditor> bookEditorProvider,
            HTMLPanel books) {
        this.bookEditorProvider = bookEditorProvider;
        this.books = books;
    }

    @Override
    public BookEditor create(int index) {
        BookEditor bookEditor = bookEditorProvider.get();
        books.add(bookEditor);

        return bookEditor;
    }

    @Override
    public void dispose(BookEditor subEditor) {
        super.dispose(subEditor);

        books.remove(subEditor);
    }
}

要创建 BookEditor 类，只需创建一个实现 Editor<Book> 的新 Widget 并创建相应的 UiFields 即可编辑您的 Book 对象。这些值将由父 Author SimpleBeanDriver 处理。 然后在您的MyWidgetView 中，只需添加一个 UiField ：

@UiField(provided = true)
@Path("books")
BooksEditor booksInput;

如果您想动态添加/删除小部件并将其与 ListEditor 同步，只需使用 BooksEditor 类即可。 editor.getList().add(new Book()) 将自动在您的面板中添加一个新的 BookEditor。调用editor.getList().remove(bookToRemove) 会将其移除（参见BookEditorSource 中的dispose() 方法，在列表中调用remove 时会调用该方法）。