在 gwtBootstrap3 中创建模态

Question

我的目标是创建一个模式，其中包含几个输入字段和按下提交按钮时的简单功能。我想使用这个 gwtbootstrap3 模态： http://gwtbootstrap3.github.io/gwtbootstrap3-demo/snapshot/#modals。是否有任何示例如何使用 UiBinder 创建简单的模式，它会在单击按钮时弹出？

Answer 1

好吧，这正是您在问题中提到的演示中发生的事情。查看 it's source code（查看 Modal* 文件）以了解如何完成：

// createModal is a Button
createModal.addClickHandler(new ClickHandler() {
    @Override
    public void onClick(final ClickEvent event) {
        final Modal modal = new Modal();
        modal.setTitle("Java Created Modal");
        modal.setClosable(true);

        // Removed modal's event handlers for brevity
        // ...

        final ModalBody modalBody = new ModalBody();
        modalBody.add(new Span("Create in Java Code!"));

        final ModalFooter modalFooter = new ModalFooter();
        modalFooter.add(new Button("Click ME!", new ClickHandler() {
            @Override
            public void onClick(final ClickEvent event) {
                final Paragraph logEntry = new Paragraph();
                logEntry.setText("Click Event from Modal! (Java Created Modal)");
                logRow.add(logEntry);
            }
        }));

        modal.add(modalBody);
        modal.add(modalFooter);

        modal.show();
    }
});

Answer 2

这是我的解决方案，如何用 UiBinder 创建 Modal，以防初学者寻找简单的答案：

Modal.ui.xml :

<b:Modal closable="true" dataKeyboard="true" ui:field="myModal">
    <b:ModalHeader>
        ..
    </b:ModalHeader>
    <b:ModalBody>
        ...
    </b:ModalBody>
</b:Modal>

Modal.java

import org.gwtbootstrap3.client.ui.Modal;


public class MyModal{

    @UiField
    Modal myModal;

    interface ModalViewUiBinder extends UiBinder<Widget,MyModal> {
    }

    private static ModalViewUiBinder uiBinder = GWT
            .create(ModalViewUiBinder.class);

    public MyModal() {
        uiBinder.createAndBindUi(MyModal.this);
    }

    public void show() {
        myModal.show();
    }
}

点击按钮：

MyModal modal = new MyModal();
modal.show();

在 gwtBootstrap3 中创建模态

Create Modal in gwtBootstrap3

bootstrap-modal

gwtbootstrap3