对话框标题栏中的GWT关闭按钮
有没有一种非JSNI方式可以将关闭按钮添加到对话框的标题栏区域？有 不，没有-至少在不摆弄GWT的DialogBox类本身或使用公共小部件重新创建DialogBox的情况下是这样。这是GWT（又名GWT）中的一个已知问题 但是,；DialogBox没有提供执行此操作的工具，因此我们需要扩展它-编辑：这不起作用 若您想替换DialogBox，可以将类命名为DialogBox并导入它，而不是GWT中包含的类。在GWT论坛上提供了关于如何实现这一点的更好的细节（过时，使用侦听器）过时了，DialogBox的内部自从这个线程以来已经改变了很多-它不工作 下面是我破解的一些代码，以获得相同的结果（使用链接线程作为指导）。这不起作用： MyDialogBox:对话框标题栏中的GWT关闭按钮,gwt,Gwt,有没有一种非JSNI方式可以将关闭按钮添加到对话框的标题栏区域？有 不，没有-至少在不摆弄GWT的DialogBox类本身或使用公共小部件重新创建DialogBox的情况下是这样。这是GWT（又名GWT）中的一个已知问题 但是,；DialogBox没有提供执行此操作的工具，因此我们需要扩展它-编辑：这不起作用 若您想替换DialogBox，可以将类命名为DialogBox并导入它，而不是GWT中包含的类。在GWT论坛上提供了关于如何实现这一点的更好的细节（过时，使用侦听器）过时了，DialogB
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();
}
crosscrosscross所以用一句话来回答你的问题：是的，有一种方法，但你不会喜欢的：）更简单的解决方案是使用gwt ext（）。它是免费的，易于使用和集成。 你可以看到他们的展示。 我认为您需要的是MessageBox或布局窗口（它们位于showcase的Windows类别中）
问候。您可以在synthfuljava项目下的google代码中找到可关闭的对话框。 它实际上被称为滚动对话框，标题处有一个关闭X按钮 下面的博客解释了必须克服的障碍，以便Caption X按钮能够收听点击事件，使其正常工作：
我们从一开始就在项目中使用GWT ext。这是个坏主意。它们有很多很酷的小部件，但它们不是GWT小部件，并且与GWT小部件不兼容。一旦您选择了GWT Ext，一切，甚至事件机制，都必须以GWT Ext的方式，而不是GWT的方式。此库不会更新为最新版本的GWT，因为javascript库Ext不再免费。我们正在从项目中删除GWT Ext 不可能在GWT对话框标题中添加不同的小部件，但可以扩展“装饰面板”（它是对话框的父项）。查看DialogBox源代码以了解相关技术，特别是它如何将标题对象添加到面板以及如何实现窗口拖动 这就是我们在这里所做的，而且效果非常好。我们制作了自己的标题类，扩展了FocusablePanel（一个捕获所有鼠标事件的SimplePanel），并在其中添加了一个带有按钮和文本的水平面板。我们必须通过调用super方法来重写onAttach（）和onDetach（）（它们是受保护的）
我相信我不允许将我们的源代码放在这里，所以我可以给你以下提示。你可以通过在对话框的中央面板上添加一个按钮来实现：
Image closeButton = new Image("");
closeButton.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
registerBox.hide();
}
});
closeButton.setStyleName("TopRight");
.TopRight {
float:right;
margin-top:-22px;
width:16px;
height:16px;
display:block;
background-image: url(images/cancel_16.png);
}
查看活动项目： 他们的崇高目标是，正如他们在网页上提到的： 目标是通过使API尽可能接近GWT的标准widgets API来提供一个完整的小部件集
被困在GXT漩涡中。一点也不喜欢他们如何要求用户为监听器使用完全不同的API等。这对他们来说是有意义的。毕竟，GXT只是它们现有javascript库的一个端口。但是我已经寻找这个马赛克项目太久了…仅使用GWT，没有外部库，您可以截获标题元素上的单击事件，并执行命中测试，以查看x，y鼠标坐标是否在锚元素（或用作ClickHandler的其他元素）的范围内
//创建要接受单击事件的锚点
最终锚myAnchor=新锚（“我的锚”）；
//将处理程序添加到锚点
addClickHandler（新的ClickHandler（）{
@凌驾
公共作废一次点击（点击事件）{
警告（“锚被点击”）；
}
});
//创建对话框
最终对话框myDialog=新建对话框（）；
myDialog.setText（“我的对话框”）；
//获取标题元素
最终HTML标题=（（HTML）myDialog.getCaption（））；
//添加锚到标题
caption.getElement（）.appendChild（myAnchor.getElement（））；
//将单击处理程序添加到标题
caption.addClickHandler（新的ClickHandler（）{
@凌驾
公共作废一次点击（点击事件）{
//获取x，y标题相对于定位点单击
final int x=event.getRelativeX（myAnchor.getElement（））；
final int y=event.getRelativeY（myAnchor.getElement（））；
//检查单击是否在锚定范围内
如果（x>=0&&y>=0&&
x我意识到这太旧了，但您只需使用绝对定位（顶部和右侧为0）即可在右上角获得一个小部件。对话框本身是绝对定位的，因此小部件的定位将与之相反。您可以尝试这一点，由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);
}
}
我创建了这个标题类：
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);
}
}
如果您不想为所问的问题找到简单的解决方案，则此方法有效：
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());
我想一个简单的答案是实例化一个小部件来替换DialogBox中的标准标题小部件。
我创建了一个标题，右边有一个按钮，你可以选择
<!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>
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();
}
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());
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() );
}
}
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 */ );
}
}
@Override
public HandlerRegistration addMouseDownHandler( MouseDownHandler handler ) {
return text.addMouseDownHandler( handler );
}
<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>