如何为gwt弹出窗口添加样式

Question

我用html和css制作了一个div，看起来像这样： http : //jsfiddle.net/wvTaC/

现在我想让一个gwt弹出女巫看起来像上一个div。

目前，我有这个：

public class MyPopup extends DialogBox {
public static void showMyPopup(){
        MyPopup popup = new MyPopup();
        popup.show();
}

public MyPopup() {
    setText("My Dialog");
}
}

我应该如何继续？

Answer 1

我猜您需要在DialogBox实现标题栏的帮助吗？

您需要制作一个实现com.google.gwt.user.client.ui.DialogBox.Caption的自定义标题栏类，然后调用super(new CustomTitleBar()); 在您的构造函数中。 这是我为GWT项目编写的示例标题栏：

public static class CustomTitleBar extends HorizontalPanel implements Caption {
    HTML closeBtn, titleArea;
    public CustomTitleBar() {
        super();
        setStyleName("customTitleBar");
        setWidth("100%");
        closeBtn = new HTML(" × ");
        closeBtn.setStyleName("myPopupCloseBtn");
        titleArea = new HTML();
        titleArea.setWidth("300px");
        titleArea.addStyleName("myPopupTitleArea");
        add(titleArea);
        setHorizontalAlignment(HasHorizontalAlignment.ALIGN_RIGHT);
        add(closeBtn);
    }
    public HandlerRegistration addCloseClickHandler(ClickHandler handler) {
        return closeBtn.addClickHandler(handler);
    }
    public HandlerRegistration addMouseDownHandler(MouseDownHandler handler) {
        return addDomHandler(handler, MouseDownEvent.getType());
    }
    public HandlerRegistration addMouseUpHandler(MouseUpHandler handler) {
        return addDomHandler(handler, MouseUpEvent.getType());
    }
    public HandlerRegistration addMouseOutHandler(MouseOutHandler handler) {
        return addDomHandler(handler, MouseOutEvent.getType());
    }
    public HandlerRegistration addMouseOverHandler(MouseOverHandler handler) {
        return addDomHandler(handler, MouseOverEvent.getType());
    }
    public HandlerRegistration addMouseMoveHandler(MouseMoveHandler handler) {
        return addDomHandler(handler, MouseMoveEvent.getType());
    }
    public HandlerRegistration addMouseWheelHandler(MouseWheelHandler handler) {
        return addDomHandler(handler, MouseWheelEvent.getType());
    }
    @Override public String getHTML() {
        return titleArea.getHTML();
    }
    @Override public void setHTML(String html) {
        titleArea.setHTML(html);
    }
    @Override public String getText() {
        return titleArea.getText();
    }
    @Override public void setText(String text) {
        titleArea.setText(text);
    }
    @Override public void setHTML(SafeHtml html) {
        titleArea.setHTML(html);
    }
}

然后在MyPopup类的构造函数中：

public MyPopup() {
    super(new CustomTitleBar());
    setGlassEnabled(true);
    center();
    popupTitleBar = (CustomTitleBar) getCaption();
    popupTitleBar.addCloseClickHandler(new ClickHandler() {
        @Override public void onClick(ClickEvent event) { 
            hide();
        }
    });
    popupTitleBar.setText("This is my title");
}

随意清理并按自己的喜好使用。 我的实现在右边有X按钮，因此您必须更改它。