使用GWT Editor Framework创建包含CellList的模型？

Question

我有以下型号：

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

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

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

您可以根据需要添加任意数量的图书：

我想使用GWT Editor框架来填充视图和模型之间的数据。以下是我仅针对没有列表的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

在这里你如何实现这一目标。您需要创建一个Editor，一个ListEditor和一个EditorSource

.post(function(req, res){
    var sources = _.map(req.body.discoverySource, function (source) {
        return {
             discoverySource: source,
             organizationId: req.body.organizationId
        };
    });
    models.DiscoverySource.bulkCreate(sources)
    .then(function(){
        return models.DiscoverySource.findAll();
    }).then(function(discoverySource){
        console.log(discoverySource);
        res.redirect('/app');
    }).catch(function(error){
        res.send(error);
        console.log('Error during Post: ' + error);
    });
});

要创建BookEditor类，只需创建一个实现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); } } 的新Widget并创建相应的UiField即可编辑Book对象。这些值将由父作者SimpleBeanDriver处理。 然后在Editor<Book>中，只需添加一个UiField：

MyWidgetView

如果要动态添加/删除小部件并将其与ListEditor同步，只需使用BooksEditor类即可。 @UiField(provided = true) @Path("books") BooksEditor booksInput; 会自动在您的面板中添加新的BookEditor。调用editor.getList().add(new Book())将删除它（请参阅BookEditorSource中的dispose（）方法，在列表中调用remove时调用它。）