DialogBox标题栏中的GWT关闭按钮

Question

是否有一种非JSNI方法可以在DialogBox的标题栏区域添加关闭按钮？

Answer 1

我们在项目开始时使用了GWT-ext.这是个坏主意.它们有很多很酷的小部件,但它们不是GWT小部件,它们与GWT小部件没有兼容性.一旦选择了GWT-Ext,一切,甚至是事件机制,都必须采用GWT-Ext方式,而不是GWT方式.这个库不会针对最新版本的GWT进行更新,因为javascript库Ext不再是免费的.我们现在从我们的项目中删除GWT-Ext.

无法在GWT DialogBox标题中添加不同的小部件,但您可以扩展"DecoratedPanel"(它是DialogBox父级).查看DialogBox源以了解这些技术,特别是它如何将Caption对象添加到面板以及如何实现窗口拖动.

这就是我们在这里所做的,而且效果非常好.我们制作了自己的Caption类,扩展了FocusablePanel(一个捕获所有鼠标事件的SimplePanel),我们为它添加了一个Horizo​​ntalPanel,带有按钮和文本.我们必须通过调用super方法(它们受到保护)来覆盖onAttach()和onDetach().

我相信我不允许将源代码放在这里,所以我可以给你这些提示.

Answer 2

你可以通过在DialogBox的中心面板上添加一个按钮来实现:

Image closeButton = new Image("");
closeButton.addClickHandler(new ClickHandler() {
   public void onClick(ClickEvent event) {
      registerBox.hide();               
   }
});

closeButton.setStyleName("TopRight");

然后用CSS定位它:

.TopRight {
   float:right;
   margin-top:-22px;
   width:16px;
   height:16px;
   display:block;
   background-image: url(images/cancel_16.png);
}

Answer 3

我创建了这个标题类:

public class DialogBoxCaptionWithCancel extends Composite 
    implements Caption, HasClickHandlers {

@UiField
HTMLPanel mainPanel;
@UiField
HTML captionLabel;
@UiField
PushButton cancelButton;

private HandlerManager handlerManager = null;

private static final Binder binder = GWT.create(Binder.class);

interface Binder extends UiBinder<Widget, DialogBoxCaptionWithCancel> {
}

public DialogBoxCaptionWithCancel() {
    initWidget(binder.createAndBindUi(this));

    mainPanel.setStyleName("Caption");
    Image upImage = new Image("images/closeWindow.png");
    Image hoverImage = new Image("images/closeWindowFocus.png");
    cancelButton.getUpFace().setImage(upImage);
    cancelButton.getUpHoveringFace().setImage(hoverImage);
    cancelButton.setStylePrimaryName("none");
}

/*
 * (non-Javadoc)
 * 
 * @see com.google.gwt.user.client.ui.Widget#onLoad()
 */
@Override
protected void onLoad() {
    super.onLoad();

    handlerManager = new HandlerManager(this);
}

@UiHandler("cancelButton")
public void cancelButtonOnClick(ClickEvent event) {
    handlerManager.fireEvent(event);
}

@Override
public HandlerRegistration addMouseDownHandler(MouseDownHandler handler) {
    return handlerManager.addHandler(MouseDownEvent.getType(), handler);
}

@Override
public HandlerRegistration addMouseUpHandler(MouseUpHandler handler) {
    return handlerManager.addHandler(MouseUpEvent.getType(), handler);
}

@Override
public HandlerRegistration addMouseOutHandler(MouseOutHandler handler) {
    return handlerManager.addHandler(MouseOutEvent.getType(), handler);
}

@Override
public HandlerRegistration addMouseOverHandler(MouseOverHandler handler) {
    return handlerManager.addHandler(MouseOverEvent.getType(), handler);
}

@Override
public HandlerRegistration addMouseMoveHandler(MouseMoveHandler handler) {
    return handlerManager.addHandler(MouseMoveEvent.getType(), handler);
}

@Override
public HandlerRegistration addMouseWheelHandler(MouseWheelHandler handler) {
    return handlerManager.addHandler(MouseWheelEvent.getType(), handler);
}

@Override
public String getHTML() {
    return "";
}

@Override
public void setHTML(String html) {
}

@Override
public String getText() {
    return this.captionLabel.getText();
}

@Override
public void setText(String text) {
    this.captionLabel.setText(text);
}

@Override
public void setHTML(SafeHtml html) {
}

@Override
public HandlerRegistration addClickHandler(ClickHandler handler) {
    return handlerManager.addHandler(ClickEvent.getType(), handler);
}

}

将鼠标悬停在取消按钮上时,只会从IE8的行为中捕获图像.

这是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'>

<ui:style>
    .htmlField {
        width: 100%;
    }

    .pushButton {
        border: none;
        padding: 0px;
        width: 49px;
        height: 21px;
    }
</ui:style>

<g:HTMLPanel ui:field="mainPanel">
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
            <td width="100%">
                <g:HTML ui:field="captionLabel" addStyleNames="{style.htmlField}"></g:HTML>
            </td>
            <td>
                <g:PushButton ui:field="cancelButton" addStyleNames="{style.pushButton}"></g:PushButton>
            </td>
        </tr>
    </table>
</g:HTMLPanel>
</ui:UiBinder>

然后我的扩展DialogBox的类具有以下内容:

public class MyDialogBox extends DialogBox implements ClickHandler {
...
// instantiate the caption with the cancel button
private static DialogBoxCaptionWithCancel caption = new DialogBoxCaptionWithCancel();
...
 public MyDialogBox() {
    // construct the dialog box with the custom caption
    super(false, false, caption);

    setWidget(binder.createAndBindUi(this));

    // set the caption's text
    caption.setText("My Caption");
}
....
protected void onLoad() {
    super.onLoad();

    // let us react to the captions cancel button
    caption.addClickHandler(this);
}
...
@Override
public void onClick(ClickEvent event) {
    // the caption's cancel button was clicked
    this.hide();
}

Answer 4

更简单的解决方案是使用gwt-ext(http://code.google.com/p/gwt-ext/).它免费且易于使用和集成.你可以看到他们的展示http://www.gwt-ext.com/demo/.我认为你想要的是MessageBox或布局窗口(它们在展示的Windows类别中).

问候.