在gwt-platform中使用gwt-bootstrap模式的正确方式是什么？

Question

我正在构建一个使用GWT-Platform和GWT-Bootstrap框架的Google Web Toolkit Web应用程序。在我尝试实现弹出窗口之前，大多数情况下它几乎是完美无缺的。这些框架对弹出窗口的理解似乎有很大不同。

GWT-Platform在使用GWTP的RevealRootPopupContentEvent.fire(source, content)或演示者的addToPopupSlot(child)方法时，期望弹出窗口小部件本身是com.google.gwt.user.client.ui.PopupPanel的实例。

Bootstrap的Modal的用法与添加到底层面板的任何其他小部件一样，但我的目标是拥有一个单独的展示器和视图，并尽可能使用AsyncProvider异步获取它。

我试着把它做成一个PresenterWidget，并用addToSlot(slot, content)显示它，但看起来不太对劲。并不是所有的样式都是这样应用的，例如关闭图标(×)就不起作用。

我想我不是第一个尝试这样做的人，所以也许有人已经想出了一个合适的方法来让它工作。

谢谢!

Answer 1

你必须创建一个视图：

public class MyPopupView extends PopupViewImpl implements MyView {

    protected Widget widget;

    public interface MyPopupViewUiBinder extends
            UiBinder<Widget, MyPopupView> {
    }

    @UiField(provided = true)
    Modal dialogBox;

    private MyPresenter presenter;

    @Inject
    public MyPopupView(final MyPopupViewUiBinder uiBinder,
            final EventBus eventBus) {
        super(eventBus);
        setUpDialog(); // Provides UiField => Before initWidgets
        initWidget(uiBinder.createAndBindUi(this));
    }

    // DialogBox must be overridden to let the presenter handle changes onUnload
    private void setUpDialog() {
        dialogBox = new Modal() {

            @Override
            protected void onUnload() {
                MyPopupView.this.hide();
            }
        };

        dialogBox.setTitle("Some title");
    }

    @Override
    public void setPresenter(final MyPresenter presenter) {
        this.presenter = presenter;
    }

    @Override
    public final void hide() {
        dialogBox.hide();
        presenter.hide();
    }

    @Override
    public void setAutoHideOnNavigationEventEnabled(final boolean autoHide) {
        // TODO Auto-generated method stub
    }

    @Override
    public void setCloseHandler(
            final PopupViewCloseHandler popupViewCloseHandler) {
        // TODO Auto-generated method stub
    }

    @Override
    public void setPosition(final int left, final int top) {
        // TODO Auto-generated method stub
    }

    @Override
    public void show() {
        dialogBox.show();
    }

    @Override
    public void center() {
        dialogBox.show();
    }

    @Override
    public Widget asWidget() {
        return widget;
    }

    protected final void initWidget(final Widget widget) {
        this.widget = widget;
    }

}

和一个UIBinder文件：

<!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:b='urn:import:com.github.gwtbootstrap.client.ui'>

    <b:Modal title="Some Title" ui:field="dialogBox">
        <!-- Your content -->
    </b:Modal>
</ui:UiBinder>

Answer 2

gwtp popup presenter有一个视图，它扩展了实现PopupView的PopUpViewImpl，并使用了该接口的许多方法来显示弹出窗口(asPopupPanel()、show()、center()等)。

我刚刚开始了解gwt-bootstrap (看起来很棒+caalos0)，但是似乎Modal没有实现PopupView，因此不能以gwtp自动显示的方式传递给addToPopupSlot。

至于addToSlot()问题，您使用的是RootLayoutPanel还是RootPanel？这可能是addToSlot不能正常工作的原因，因为gwt-bootstrap Modal小部件在初始化时附加到RootPanel，这可能会导致奇怪的布局行为以及使用RootLayoutPanel作为基础的应用程序。

我将尝试扩展Modal组件，让它实现PopUpView，将其作为附加到popup presenter的PopUpViewImpl上的字段添加，并覆盖PopUpViewImpl asPopupPanel()函数以返回新的扩展Modal。

Answer 3

基于@dominik的回答，我做了一些改进，见我的Gist。它包含一些可用于任何Modal/PopupView实现的抽象基类。它有点复杂，但也更简洁，因为我们不会将整个Presenter传递给View。当模式关闭时，View与Presenter交互的接口是HasModalUnbind。

您将按如下方式使用这些类。示例演示者：

public class ErrorModalPresenter extends ModalPopupPresenter<ErrorModalPresenter.MyView> {

    public interface MyView extends ModalPopupView {
        DivElement getErrorMessage();
    }

    private final ErrorEvent error;

    @Inject
    public ErrorModalPresenter(final EventBus eventBus,
                               final MyView view,
                               @Assisted final ErrorEvent error) {

        super(eventBus, view);
        this.error = error;
    }

    @Override
    public void unbindModal() {
        ErrorDismissEvent.fire(this, this);
    }

    @Override
    protected void onBind() {
        super.onBind();

        //noinspection ThrowableResultOfMethodCallIgnored
        getView().getErrorMessage().setInnerText(error.getCause().getMessage());
    }
}

示例视图：

public class ErrorModalView extends ModalPopupViewImpl implements ErrorModalPresenter.MyView {

    @UiField(provided = true)
    Modal errorModal;

    @UiField
    DivElement errorMessage;

    interface Binder extends UiBinder<Widget, ErrorModalView> {}

    @Inject
    public ErrorModalView(final EventBus eventBus,
                          final Binder uiBinder) {

        super(eventBus);

        errorModal = initModal();
        initWidget(uiBinder.createAndBindUi(this));
    }

    @Override
    public DivElement getErrorMessage() {
        return errorMessage;
    }
}

和UiBinder可扩展标记语言：

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
             xmlns:g='urn:import:com.google.gwt.user.client.ui'
             xmlns:b='urn:import:com.github.gwtbootstrap.client.ui'>

    <b:Modal ui:field='errorModal' title='Error'>
        <g:HTML>
            <div ui:field='errorMessage'/>
        </g:HTML>

        <b:ModalFooter>
            <b:Button text='Close' dismiss='MODAL'/>
        </b:ModalFooter>
    </b:Modal>

</ui:UiBinder>

在ErrorModalPresenter的unbindModal()中，我触发了一个事件，该事件被ErrorModalPresenter的父呈现器捕获。在那里，模态呈现器被从容器中移除，然后在呈现器上调用unbind()。当然，在unbindModal()中任何其他解决方案都是可能的。

基类假设模态是单次模态，一旦它们被隐藏，就会被移除。此行为可以在ModalPopupViewImpl的initModal()中更改。