I took the PopupPanel page and added "And Can Be Moved", did a global change of
'PopupPanel' to 'DialogBox' and added this paragraph. It's a popup you can move.
It has a header (setText() or setHTML()) and you have to
setWidget() instead of add() the contents. These are the
only differences apart from the CSS class names.
The DialogBox can be used in a number of ways. It can a) auto-hide (i.e. hide itself if the user clicks outside of it) or you can b) make the user click a button or perform some action before it goes away.
a) is useful for showing information which expands what is visible on the screen, for example in a list of some kind. It is useful for one-off actions requiring limited information - just the one panel, like a file rename. If the user cancels implicitly by clicking outside the box by mistake, it's not too much trouble to redo it.
b.1) is useful for requesting information as in a wizard where a mistaken click outside the DialogBox would lose loads of input.
b.2) is indispensable if you need to lock up the application and get some response before the application (or any part of it) can proceed.
You don't need to add the popup to the RootPanel or anywhere else. If you do, "Results May Be Unpredictable" (wich was IBM's way of saying that they didn't know what the **** would happen).
Please consider what you are doing with these and use them only where necessary. Used unnecessarily, they annoy the hell out of me. I know that I am only 0.00000001666 percent of the world population, but I like to feel my opinion counts.
Too keep the code simple and on-topic, the greying out of the background is not explained. It will be available elsewhere on the site asap.
VerticalPanel panel;
DialogBox dialogbox;
PopupPanel glass;
VerticalPanel DialogBoxContents;
ClickListener listener;
HTML message;
Button button;
SimplePanel holder;
public void demo()
{
// Create a panel and add it to the screen
panel = new VerticalPanel();
RootPanel.get("demo").add(panel);
panel.setStyleName("table-center");
//
// Create a DialogBox with a button to close it
dialogbox = new DialogBox(false);
dialogbox.setStyleName("demo-DialogBox");
DialogBoxContents = new VerticalPanel();
dialogbox.setText("DialogBox");
message = new HTML("Click 'Close' to close");
message.setStyleName("demo-DialogBox-message");
listener = new ClickListener()
{
public void onClick(Widget sender)
{
dialogbox.hide();
}
};
button = new Button("Close", listener);
holder = new SimplePanel();
holder.add(button);
holder.setStyleName("demo-DialogBox-footer");
DialogBoxContents.add(message);
DialogBoxContents.add(holder);
dialogbox.setWidget(DialogBoxContents);
//
// Add a button to the demo to show the above DialogBox
listener = new ClickListener()
{
public void onClick(Widget sender)
{
dialogbox.center();
}
};
button = new Button("Show DialogBox", listener);
panel.add(button);
}