在对话框的标题栏中获取关闭按钮

时间：2009-05-29 15:16:15

标签： gwt

是否有非JSNI方法将关闭按钮添加到DialogBox的标题栏区域？

14 个答案:

答案 0 :(得分：16)

我们在项目开始时使用了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（）。

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

答案 1 :(得分：10)

您可以通过在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);
}

答案 2 :(得分：9)

我创建了这个标题类：

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

答案 3 :(得分：5)

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

问候。

答案 4 :(得分：3)

您可以尝试使用fungus1487稍微改进的解决方案：

import com.google.gwt.dom.client.EventTarget;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.i18n.client.HasDirection;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.*;

/**
 * @author Andrey Talnikov
 */
public class ClosablePopup extends DialogBox {

    private Anchor closeAnchor;

    /**
     * Instantiates new closable popup.
     *
     * @param title        the title
     * @param defaultClose it {@code true}, hide popup on 'x' click
     */
    public ClosablePopup(String title, boolean defaultClose) {
        super(true);

        closeAnchor = new Anchor("x");

        FlexTable captionLayoutTable = new FlexTable();
        captionLayoutTable.setWidth("100%");
        captionLayoutTable.setText(0, 0, title);
        captionLayoutTable.setWidget(0, 1, closeAnchor);
        captionLayoutTable.getCellFormatter().setHorizontalAlignment(0, 1,
                HasHorizontalAlignment.HorizontalAlignmentConstant.endOf(HasDirection.Direction.LTR));

        HTML caption = (HTML) getCaption();
        caption.getElement().appendChild(captionLayoutTable.getElement());

        caption.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                EventTarget target = event.getNativeEvent().getEventTarget();
                Element targetElement = (Element) target.cast();

                if (targetElement == closeAnchor.getElement()) {
                    closeAnchor.fireEvent(event);
                }
            }
        });

        if (defaultClose) {
            addCloseHandler(new ClickHandler() {
                @Override
                public void onClick(ClickEvent event) {
                    hide();
                }
            });
        }
    }

    public void addCloseHandler(ClickHandler handler) {
        closeAnchor.addClickHandler(handler);
    }
}

答案 5 :(得分：2)

是的，有

没有 - 至少没有没有摆弄GWT的DialogBox类本身或者使用常见的小部件重新创建DialogBox。这是GWT中的一个已知问题，又名issue 1405（明星表示您的兴趣）。

然而; DialogBox没有给我们这样做的工具，所以我们需要扩展它 - 编辑： 这不起作用。

如果您想要替换DialogBox，可以将您的类命名为DialogBox并导入它而不是GWT中包含的类。 GWT论坛上的 This thread提供了有关如何做到这一点的更好细节（过时，使用了监听器）过时，自从这个线程以来，DialogBox的内部已经发生了很大变化 - 它没有工作

以下是我为了获得相同结果而攻击的一些代码（使用链接线程作为指导）。这不起作用：

<强> MyDialogBox： 

import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.MouseOutEvent;
import com.google.gwt.event.dom.client.MouseOutHandler;
import com.google.gwt.event.dom.client.MouseOverEvent;
import com.google.gwt.event.dom.client.MouseOverHandler;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.DialogBox;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.Widget;

public class MyDialogBox extends DialogBox {

    private class crossHandler implements ClickHandler, MouseOverHandler, MouseOutHandler
    {

        @Override
        public void onClick(ClickEvent event) {
            hide();
            Window.alert("Click!");
        }

        @Override
        public void onMouseOver(MouseOverEvent event) {
            DOM.setStyleAttribute(cross.getElement(), "font-weight", "bold");

        }

        @Override
        public void onMouseOut(MouseOutEvent event) {
            DOM.setStyleAttribute(cross.getElement(), "font-weight", "normal");

        }


    }

    Label cross = new Label("X"); // The close button
    crossHandler crosshandler = new crossHandler();
    HTML caption = new HTML(); // The caption aka title
    HorizontalPanel captionPanel = new HorizontalPanel(); // Contains caption and cross


      /**
       * Creates an empty dialog box. It should not be shown until its child widget
       * has been added using {@link #add(Widget)}.
       */
    public MyDialogBox()
    {
        this(false);
    }

  /**
   * Creates an empty dialog box specifying its "auto-hide" property. It should
   * not be shown until its child widget has been added using
   * {@link #add(Widget)}.
   * 
   * @param autoHide <code>true</code> if the dialog should be automatically
   *          hidden when the user clicks outside of it
   */
    public MyDialogBox(boolean autoHide) {
            this(autoHide, true);
          }

    /**
     * Creates an empty dialog box specifying its "auto-hide" property. It should
     * not be shown until its child widget has been added using
     * {@link #add(Widget)}.
     * 
     * @param autoHide <code>true</code> if the dialog should be automatically
     *          hidden when the user clicks outside of it
     * @param modal <code>true</code> if keyboard and mouse events for widgets not
     *          contained by the dialog should be ignored
     */
    public MyDialogBox(boolean autoHide, boolean modal)
    {
        super(autoHide, modal);

        cross.addClickHandler(crosshandler); 
        cross.addMouseOutHandler(crosshandler);
        cross.addMouseOverHandler(crosshandler);

        captionPanel.add(caption);
        captionPanel.add(cross);
        captionPanel.setStyleName("caption");

        Element td = getCellElement(0, 1);  // Get the cell element that holds the caption
        td.setInnerHTML(""); // Remove the old caption
        td.appendChild(captionPanel.getElement());



    }

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

    public String getText()
    {
        return caption.getText();
    } 

    public void setHtml(String html)
    {
        caption.setHTML(html);
    }

    public String getHtml()
    {
        return caption.getHTML();
    }

注意：此代码不起作用。 ClickEvent不是从cross发送的，而是从MyDialogBox发送的，无论您是否将ClickHandlers添加到cross，IOW MyDialogBox是发送者/来源，因此无法检查{{1 }}。单击cross时，由于某些原因，它不会触发ClickEvent。

修改 除非您从头开始编写自己的DialogBox（几乎）或修复问题1405，否则看起来这是不可能做到的。当然有许多现有的库已经解决了这个问题，即SmartGWT和{{3但是他们的实现主要是从头开始。

所以用一句话回答你的问题：是的，有一种方法，但你不会喜欢它：）

答案 6 :(得分：2)

我想这个简单的答案是实例化一个小部件来替换DialogBox中的标准Caption小部件。 我创建了一个右侧有一个按钮的标题，您可以选择它的引用。 然后，您可以添加所需的任何点击事件。

在GWT 2.4中，我使用了以下解决方案：

import com.google.gwt.event.dom.client.MouseDownHandler;
import com.google.gwt.event.dom.client.MouseMoveHandler;
import com.google.gwt.event.dom.client.MouseOutHandler;
import com.google.gwt.event.dom.client.MouseOverHandler;
import com.google.gwt.event.dom.client.MouseUpHandler;
import com.google.gwt.event.dom.client.MouseWheelHandler;
import com.google.gwt.event.shared.HandlerRegistration;
import com.google.gwt.safehtml.shared.SafeHtml;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.InlineLabel;
import com.google.gwt.user.client.ui.PushButton;
import com.google.gwt.user.client.ui.DialogBox.Caption;

/**
 * @author Cristiano Sumariva
 */
public class ButtonCaption extends HorizontalPanel implements Caption
{
  protected InlineLabel text;
  protected PushButton closeDialog;

  /**
   * @return the button at caption
   */
  public PushButton getCloseButton()
  {
    return closeDialog;
  }
  public ButtonCaption( String label )
  {
    super();
    setWidth( "100%" );
    setStyleName( "Caption" ); // so you have same styling as standard caption widget
    closeDialog = new PushButton();
    add( text = new InlineLabel( label ) );
    add( closeDialog );
    setCellWidth( closeDialog, "1px" ); // to make button cell minimal enough to it
  }
  /* (non-Javadoc)
   * @see com.google.gwt.event.dom.client.HasMouseDownHandlers#addMouseDownHandler(com.google.gwt.event.dom.client.MouseDownHandler)
   */
  @Override
  public HandlerRegistration addMouseDownHandler( MouseDownHandler handler )
  {
    return addMouseDownHandler( handler );
  }

  /* (non-Javadoc)
   * @see com.google.gwt.event.dom.client.HasMouseUpHandlers#addMouseUpHandler(com.google.gwt.event.dom.client.MouseUpHandler)
   */
  @Override
  public HandlerRegistration addMouseUpHandler( MouseUpHandler handler )
  {
    return addMouseUpHandler( handler );
  }

  /* (non-Javadoc)
   * @see com.google.gwt.event.dom.client.HasMouseOutHandlers#addMouseOutHandler(com.google.gwt.event.dom.client.MouseOutHandler)
   */
  @Override
  public HandlerRegistration addMouseOutHandler( MouseOutHandler handler )
  {
    return addMouseOutHandler( handler );
  }

  /* (non-Javadoc)
   * @see com.google.gwt.event.dom.client.HasMouseOverHandlers#addMouseOverHandler(com.google.gwt.event.dom.client.MouseOverHandler)
   */
  @Override
  public HandlerRegistration addMouseOverHandler( MouseOverHandler handler )
  {
    return addMouseOverHandler( handler );
  }

  /* (non-Javadoc)
   * @see com.google.gwt.event.dom.client.HasMouseMoveHandlers#addMouseMoveHandler(com.google.gwt.event.dom.client.MouseMoveHandler)
   */
  @Override
  public HandlerRegistration addMouseMoveHandler( MouseMoveHandler handler )
  {
    return addMouseMoveHandler( handler );
  }

  /* (non-Javadoc)
   * @see com.google.gwt.event.dom.client.HasMouseWheelHandlers#addMouseWheelHandler(com.google.gwt.event.dom.client.MouseWheelHandler)
   */
  @Override
  public HandlerRegistration addMouseWheelHandler( MouseWheelHandler handler )
  {
    return addMouseWheelHandler( handler );
  }

  /* (non-Javadoc)
   * @see com.google.gwt.user.client.ui.HasHTML#getHTML()
   */
  @Override
  public String getHTML()
  {
    return getElement().getInnerHTML();
  }

  /* (non-Javadoc)
   * @see com.google.gwt.user.client.ui.HasHTML#setHTML(java.lang.String)
   */
  @Override
  public void setHTML( String html )
  {
    remove( text );
    insert( text, 1 );
  }

  /* (non-Javadoc)
   * @see com.google.gwt.user.client.ui.HasText#getText()
   */
  @Override
  public String getText()
  {
    return text.getText();
  }

  /* (non-Javadoc)
   * @see com.google.gwt.user.client.ui.HasText#setText(java.lang.String)
   */
  @Override
  public void setText( String text )
  {
    this.text.setText( text );
  }

  /* (non-Javadoc)
   * @see com.google.gwt.safehtml.client.HasSafeHtml#setHTML(com.google.gwt.safehtml.shared.SafeHtml)
   */
  @Override
  public void setHTML( SafeHtml html )
  {
    setHTML( html.asString() );
  }
}

扩展DialogBox以使用新的ButtonCaption 

class CaptionCloseableDialogBox extends DialogBox
{
  public CaptionCloseableDialogBox()
  {
    super( new ButtonCaption( "dialog box title" ) );
    setAutoHideEnabled( false );

    ButtonCaption ref = (ButtonCaption) this.getCaption();
    PushButton closeButton = ref.getCloseButton();
    // apply button face here closeButton;
    closeButton.addClickHandler( /* attach any click handler here like close this dialog */ );
  }
}

希望它有所帮助。

答案 7 :(得分：1)

查看有效项目： http://code.google.com/p/gwt-mosaic/

他们的崇高目标正如他们的页面所述：

  

目标是通过使API尽可能接近GWT的标准窗口小部件API来提供完整的窗口小部件集。

被困在GXT漩涡中。根本不是他们如何要求用户为听众等使用完全不同的API的粉丝。对他们来说这是有道理的。毕竟，GXT只是他们现有的JavaScript库的一个端口。但是我一直在寻找这个MOSAIC项目太久了......

答案 8 :(得分：1)

只使用GWT而不使用外部库，您可以拦截标题元素上的单击事件并执行命中测试，以查看x，y鼠标坐标是否在锚元素的边界内（或者您使用的其他元素）函数clickhandler）。

// Create anchor we want to accept click events
final Anchor myAnchor = new Anchor("My Anchor");

// Add handler to anchor
myAnchor.addClickHandler(new ClickHandler() {
  @Override
  public void onClick(ClickEvent event) {
    Window.alert("Anchor was clicked");
  }
});

// Create dialog
final DialogBox myDialog = new DialogBox();
myDialog.setText("My Dialog");

// Get caption element
final HTML caption = ((HTML)myDialog.getCaption());

// Add anchor to caption
caption.getElement().appendChild(myAnchor.getElement());

// Add click handler to caption
caption.addClickHandler(new ClickHandler() {
  @Override
  public void onClick(ClickEvent event) {
    // Get x,y caption click relative to the anchor
    final int x = event.getRelativeX(myAnchor.getElement());
    final int y = event.getRelativeY(myAnchor.getElement());

    // Check click was within bounds of anchor
    if(x >= 0 && y >= 0 && 
      x <= myAnchor.getOffsetWidth() && 
      y <= myAnchor.getOffsetHeight()) {
        // Raise event on anchor
        myAnchor.fireEvent(event);
    }
  }
});

// Show the dialog
myDialog.show();

答案 9 :(得分：1)

我意识到这是荒谬的旧，但你可以使用0和0的绝对定位来获得右上方的小部件。该对话框本身绝对定位，因此您的小部件的定位将违背它。

答案 10 :(得分：1)

如果你不是一个简单的问题解决方案，那么这就有用了：

    Image button = new Image("images/cancel.png"); 

    button.addClickHandler(new ClickHandler(){ 
        public void onClick(ClickEvent event) { 
            hide();
        }
    }); 
    button.setStyleName("dialog-close");

    HorizontalPanel header = new HorizontalPanel();
    header.add(new HTML("Example Tool"));
    header.add(button);

    setHTML(header.getElement().getInnerHTML());

答案 11 :(得分：0)

您可以在项目synthfuljava下的Google代码中找到可关闭的对话框。 它实际上被称为可滚动对话框，在标题处有一个关闭的X按钮。

以下博客解释了为了让脚本X按钮能够收听点击事件以使其工作而必须克服的障碍：

http://h2g2java.blessedgeek.com/2009/07/gwt-useable-closeable-scrollable.html

答案 12 :(得分：0)

我认为cavila的ButtonCaption是最好的解决方案，但是标题的实现存在一个错误。调用其中一个重叠方法会导致一个不定式循环，因为该方法会递归调用自身。

为防止这种情况，您可以在InlineLabel 文本上调用该方法：

@Override
public HandlerRegistration addMouseDownHandler( MouseDownHandler handler ) {
    return text.addMouseDownHandler( handler );
}

答案 13 :(得分：0)

GWT对话框的顶级DIV具有绝对定位，因此您可以使用关闭按钮执行相同操作。就DOM而言，这允许您将它放在对话框的主体中，但是它会在物理上显示在标题中。

在下面的示例中，我将其放在对话框的正确右上方，并使用填充将其置于标题中。

<ui:style>
    .close {
        position: absolute;
        top: 0;
        right: 0;
        padding: 3px 3px 1px 3px !important;
        border-radius: 4px;
        margin: 5px;
    }
</ui:style>

<g:PushButton ui:field="closeButton" addStyleNames="{style.close}">
    <g:upFace image='{closeIcon}'/>
    <g:downFace image='{closeIcon}'/>
    <g:upHoveringFace image='{closeIcon}'/>
    <g:downHoveringFace image='{closeIcon}'/>
    <g:upDisabledFace image='{closeIcon}'/>
    <g:downDisabledFace image='{closeIcon}'/>
</g:PushButton>
相关问题
最新问题