将 gwt-bootstrap 模式与 gwt-platform 一起使用的正确方法是什么？

问题描述 投票：0回答：4

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

当使用 GWTP 的

com.google.gwt.user.client.ui.PopupPanel

 或演示者的
RevealRootPopupContentEvent.fire(source, content)
 方法时，
GWT-Platform 期望弹出窗口小部件本身是 
addToPopupSlot(child)
的实例。

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

我尝试将其制作为 PresenterWidget 并使用 

addToSlot(slot, content)
来显示它，但它看起来不太正确。并非所有样式都以这种方式应用，例如关闭图标 (×) 不起作用。

我想我不是第一个尝试做类似事情的人，所以也许有人已经找到了让它发挥作用的正确方法。

谢谢！

gwt twitter-bootstrap gwt-platform
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>
3
投票

您的 gwtp 弹出窗口演示器有一个扩展 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。

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 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()
。

基类假设模态是一次性模态，一旦隐藏就会被删除。可以在 ModalPopupViewImpl 的 

initModal()
中更改此行为。

0
投票

我相信您必须创建一个扩展 PopupPresenter 的新类，并制作使其工作所需的内容。

当 GWT-Platform 的第一个版本发布时，我将创建一个新项目来制作这些必要的粘合代码。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.