GWT Close button in title bar of DialogBox

Question

Is there a non JSNI way to add a close button to the title bar area of a DialogBox?

Answer 1

You can do it by adding a button to the center panel of the DialogBox:

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

closeButton.setStyleName("TopRight");

Then position it with CSS:

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

Answer 2

We used GWT-ext from the begining in our project. It was a bad idea. They have lots of cool widgets, but they are not GWT widgets AND they have no compatibility with GWT widgets. Once you choose GWT-Ext, everything, even the event mechanism, must be in the GWT-Ext way, not in the GWT way. This library will not be updated for the newest version of GWT, because the javascript library Ext is no more free. We are removing GWT-Ext from our project now.

It´s not possible to add a different widget int the GWT DialogBox caption, but you can extend "DecoratedPanel" (it is the DialogBox parent). Look at the DialogBox source to learn the techniques, specially how it adds the Caption object to the panel and how the window drag is implemented.

That´s what we have done here, and it works very well. We´ve made our own Caption class that extends FocusablePanel (a SimplePanel that captures all mouse events) and we added a HorizontalPanel to it, with buttons and text. We had to override onAttach() and onDetach() just by calling the super method (they are protected).

I believe I am not allowed to put our source code in here, so I just can give you these tips.