close button in DialogBox titlebar

[hitesh]

I want add a "X" cross image to a DIalogBox title bar which when
clicked closes the dialogbox instead of explicitly adding a close
"Button" widget.
The close image can conveniently be added by using the setHtml() method
of dialog box where you can pass proper html which can display a cross
image.
THe issue I am facing is that I am not able to fire the onCLick method
attached to the img tag in the html passed to the title bar.
Any suggestions on how to achieve this?

[Richi]

You need to extend the DialogBox class first.
In this new class add the following new members:
1- your "X" cross loaded into an Image Widget.
2- a HTML Widget for the new caption
3- a HorizontalPanel to contain the for the caption and "X"

Then in the constructor, you add the HTML and "X" into the
HorizontalPanel. Implement ClickListener interface on the subclass and
add it as a ClickListener to the "X" Image Widget. This will allow your
new DialogBox subclass to respond to the "onClick" event when someone
click your "X" cross. You also need to override the following member
functions:
setText(String ),getText(),setHtml(String ),getHtml() to set and get
the Caption from the new HTML Widget instead of the original.

The reason that you need to work with widgets is that this is the
safest way to get GWT event handling wired in. If you just merely add
the images as DOM objects, they will not react to events.

Hope that help.

[hitesh]

If I extend the DialogBox in manner stated above, how do I set the new
horizontal panel in the title bar?
I implemented what I needed by extending PopupPanel. The steps were
mostly similar to the ones mentioned above, in addition I also had to
implement MouseListener to be able to drag the popup panel.

Thanks
hitesh

[Richi]

In the constructor of class DialogBox we see:
...
1 panel.add(caption, DockPanel.NORTH);
2 super.add(panel);
3
4 setStyleName("gwt-DialogBox");
5 caption.setStyleName("Caption");
6 caption.addMouseListener(this);
....

So what we want is to put the HorizontalPanel were caption is placed in
line 1. Since panel is private, we cant really access it from the
subclass. However from line 2, it calls the add function from
SimplePanel class which then calls "setWidget(panel)". Thus you can
access is by calling getWidget().

So in your subclass constructor you should have something like this:

....
super();
Widget origPanel = getWidget(0);
HorizontalPanel horizPanel = new HorizontalPanel();
origPanel.add(horizPanel, DockPanel.NORTH);
...

Good luck