9

I am constructiong an webapp with Google Web Toolkit using GWT-Platform and GWT-Bootstrap frameworks. Mostly it has been almost flawless until I tried to implement a popup. These frameworks' undestanding of popups seems to be quite different.

GWT-Platform expects a popup widget itself to be an instance of com.google.gwt.user.client.ui.PopupPanel when using the GWTP's RevealRootPopupContentEvent.fire(source, content) or a presenter's addToPopupSlot(child) method.

GWT-Bootstrap's Modal is used like any other widget that is added to the underlying panel but my goal is it to have a separate presenter and view and to possibly fetch it asynchrously with AsyncProvider.

I have tried to make it as a PresenterWidget and using addToSlot(slot, content) to reveal it but it doesn't look quite right. Not all of the styles are applied this way and the close icon (×), doesn't work for example.

I think I am not the first one trying to do something like that so maybe someone has figured out a proper way to make it work.

Thanks!

4

4 回答 4

8

您必须创建一个视图：

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>
于 2012-05-23T16:34:34.100 回答
3

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

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

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

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

于 2012-05-23T12:57:32.850 回答
3

根据@dominik 的回答，我做了一些改进，请参阅我的Gist。它包含一些可用于任何 Modal/PopupView 实现的抽象基类。它有点复杂但也更干净，因为我们不会将整体传递Presenter给View. 模态关闭时与View交互的接口是。PresenterHasModalUnbind

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

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 XML 只是为了记录：

<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>

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

基类假定模态是一次性模态，一旦它们被隐藏就会被删除。这种行为可以在initModal() of中改变ModalPopupViewImpl。

于 2013-07-05T06:46:33.373 回答
0

我相信您必须制作一些胶水代码才能使其正常工作。

我从未使用过 GWT-Platform 弹出窗口，所以我不知道具体如何，但我相信您将不得不创建一个扩展 PopupPresenter 的新类，并制作使其工作所需的东西。

另外，几天前我在考虑 GWT-Platform ......而且我很确定当 GWT-Platform 的第一个版本发布时，我将创建一个新项目来制作这些必要的胶水代码。

如果您在这方面需要任何帮助，请与我联系。

谢谢，抱歉 gwt 平台支持不佳。

于 2012-05-23T03:03:48.337 回答