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

Question

我有以下模型:

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

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

我想创建一个 GWT Widget，我可以在其中创建作者并创建尽可能多的书籍，同时在同一 View 中创建作者。它可能是这样的:

您可以添加任意数量的图书:

我想使用 GWT Editor 框架在 View 和模型之间填充数据。这是我仅针对 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 以便我可以向作者添加书籍，以及我需要如何使用编辑器来获取创建的 Book 列表冲入作者模型？

Answer 1

这里是如何实现这一目标的。您需要创建一个编辑器、一个列表编辑器和一个编辑器源

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() 方法，在列表上调用删除时会调用该方法)。