how to add style to gwt popup

Question

I have made aa div with html and css and it looks like this: http://jsfiddle.net/wvTaC/

Now i want to make a gwt popup witch looks like the previous div.

At the moment i have this:

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

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

How should i continue?

Answer 1

I'm guessing you need assistance implementing a Title bar in your DialogBox ?

You need to make a custom title bar class that implements com.google.gwt.user.client.ui.DialogBox.Caption and then call super(new CustomTitleBar()); in your constructor. Here's a sample title bar I wrote for a GWT project:

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);
    }
}

And then in your constructor for the MyPopup class:

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");
}

Feel free to clean it up and use it to your liking. My implementation has the X button on the right edge, so you will have to change that.