Close Button in the caption bar of a GWT DialogBox

3

The following code demonstrates how a 'close button' can be placed in the caption bar of a DialogBox . Note that the example uses a HTML object as the close button , it can be replaced by an Image to make it more eye-candy.

/** *PUBLIC SOFTWARE * *This source code has been placed in the public domain. You can use, modify, and distribute *the source code and executable programs based on the source code. * *However, note the following: * *DISCLAIMER OF WARRANTY * * This source code is provided "as is" and without warranties as to performance * or merchantability. The author and/or distributors of this source code may * have made statements about this source code. Any such statements do not constitute * warranties and shall not be relied on by the user in deciding whether to use * this source code.This source code is provided without any express or implied * warranties whatsoever. Because of the diversity of conditions and hardware * under which this source code may be used, no warranty of fitness for a * particular purpose is offered. The user is advised to test the source code * thoroughly before relying on it. The user must assume the entire risk of * using the source code. * */ import com.google.gwt.user.client.Element; import com.google.gwt.dom.client.NativeEvent; import com.google.gwt.user.client.DOM; import com.google.gwt.user.client.Event; import com.google.gwt.user.client.Event.NativePreviewEvent; import com.google.gwt.user.client.ui.DialogBox; import com.google.gwt.user.client.ui.HTML; import com.google.gwt.user.client.ui.HorizontalPanel; /** * @author amal * @version 1.0 */ public class MyDialog extends DialogBox { HTML close = new HTML("[X]"); HTML title =new HTML(""); HorizontalPanel captionPanel = new HorizontalPanel(); public MyDialog(boolean autoHide, boolean modal) { super(autoHide, modal); Element td = getCellElement(0, 1); DOM.removeChild(td, (Element) td.getFirstChildElement()); DOM.appendChild(td, captionPanel.getElement()); captionPanel.setStyleName("Caption");//width-100% captionPanel.add(title); close.addStyleName("CloseButton");//float:right captionPanel.add(close); super.setGlassEnabled(true); super.setAnimationEnabled(true); } public MyDialog(boolean autoHide) { this(autoHide, true); } public MyDialog() { this(false); } @Override public String getHTML() { return this.title.getHTML(); } @Override public String getText() { return this.title.getText(); } @Override public void setHTML(String html) { this.title.setHTML(html); } @Override public void setText(String text) { this.title.setText(text); } @Override protected void onPreviewNativeEvent(NativePreviewEvent event) { NativeEvent nativeEvent = event.getNativeEvent(); if (!event.isCanceled() && (event.getTypeInt() == Event.ONCLICK) && isCloseEvent(nativeEvent)) { this.hide(); } super.onPreviewNativeEvent(event); } private boolean isCloseEvent(NativeEvent event) { return event.getEventTarget().equals(close.getElement());//compares equality of the underlying DOM elements } }

Read more »

3 comments:

  1. Anonymous says:

    nice hack , thanks

  1. Anonymous says:

    Ty a lot!!!
    just wanted to mention that the style "Caption"
    is important, this stile is provided by google, which gives the header a color.

    additionally, i just want to mention that this example works with GWT 2.3, so if you have a problem with GWT 2.3 just don't give up!

  1. Anonymous says:

    thanks you...it was really helpful

Post a Comment

© Zone817. Powered by Blogger.