The PopupPanel 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 popup 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.
To 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.
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 PopUpPanel with a button to close it
popup = new PopUpPanel(false);
popup.setStyleName("demo-PopUpPanel");
PopUpPanelContents = new VerticalPanel();
popup.setText("PopUpPanel");
message = new HTML("Click 'Close' to close");
message.setStyleName("demo-PopUpPanel-message");
listener = new ClickListener()
{
public void onClick(Widget sender)
{
popup.hide();
}
};
button = new Button("Close", listener);
holder = new SimplePanel();
holder.add(button);
holder.setStyleName("demo-PopUpPanel-footer");
PopUpPanelContents.add(message);
PopUpPanelContents.add(holder);
popup.setWidget(PopUpPanelContents);
//
// Add a button to the demo to show the above PopUpPanel
listener = new ClickListener()
{
public void onClick(Widget sender)
{
popup.center();
}
};
button = new Button("Show PopUpPanel", listener);
panel.add(button);
}
/**********************************
* Popup Demo
***********************************/
.table-center
{
margin-left : auto;
margin-right : auto;
}
.demo-popup
{
background-color : #ffc;
border : 3px solid #009;
}
.demo-Composite
{
margin : 0 auto;
}
.demo-popup-header
{
background-color : #ff0;
font-size : 90%;
font-weight : bold;
border-bottom : 3px solid #009;
padding : 5px;
text-align : center;
}
.demo-popup-message
{
font-size : 80%;
padding : 15px;
}
.demo-popup-footer
{
padding : 5px;
text-align : center;
width : 100%;
}