In this tutorial, we will look into the details of Google Web Toolkit (GWT) Dialog Box. In our previous tutorials GWT Tutorial for Beginners, we explained how to create a GWT Web Application project using eclipse and we have seen the basic steps to develop user interface using widgets.
GWT Panel Example and GWT HTMLPanel Example are related tutorial that covers GWT Panels in details. In this tutorial, we will focus on GWT DialogBox and it’s usage to develop user interface.
Here we are using GWT 2.7 integrated with Eclipse Mars 4.5.
1. Introduction
As per GWT Javadoc , “GWT Dialogbox is a form of popup that has a caption area at the top and can be dragged by the user. Unlike a PopupPanel, calls to PopupPanel.setWidth(String) and PopupPanel.setHeight(String) will set the width and height of the dialog box itself, even if a widget has not been added as yet.”
GWT Dialogbox provides a way to show more interactive pop-up through which the user can provide input to the application.
To learn how DialogBox can be used in application, we will create customised widgets using GWT Dialogbox.
2. Class Declaration
DialogBox.class
public class DialogBox extends DecoratedPopupPanel implements HasHTML,
HasSafeHtml, MouseListener {
...
}
DialogBox inherits the property of DecoratedPopupPanel and PopupPanel consecutively. The PopupPanel overlays the browser’s client area and pop-up over other widgets.
3. Constructors
3.1 DialogBox()
Creates an empty dialog box with auto-hide property set as false. This means the dialog should not be automatically hidden when the user clicks outside of it.
3.2 DialogBox(boolean autoHide)
Creates an empty dialog box specifying its auto-hide property.
3.3 DialogBox(Caption captionWidget)
Creates an empty dialog box specifying its caption. Caption is the widget that renders as the DialogBox’s header.
3.4 DialogBox(boolean autoHide, boolean modal)
Creates an empty dialog box specifying its auto-hide and modal properties. If modal property is defines as true, keyboard and mouse events for widgets will not be contained by the dialog and should be ignored.
3.5 DialogBox(boolean autoHide, boolean modal, Caption captionWidget)
Creates an empty dialog box specifying its auto-hide, modal properties and an custom Caption widget.
4. Method Summary
| Method Signature | Description |
|---|---|
| public void show() | Shows the popup and attach it to the page. It must has a child widget before this method is called. |
| public void hide(boolean autoClosed) | Hides the popup and detaches it from the page. This has no effect if it is not currently showing. |
| public void setWidget(Widget w) | Sets this panel’s widget. Any existing child widget will be removed. |
| public void setAnimationEnabled(boolean enable) | Enable or disable animations(instead of immediate). |
| public void setPopupPosition(int left, int top) | Sets the popup’s position relative to the browser’s client area. |
| public void setText(String text) | Sets the text inside the caption. |
| public void setHTML(String html) | Sets the html string inside the caption. |
| public Caption getCaption() | Provides access to the dialog’s caption.. |
5. Examples
5.1 Custom Dialogbox Example 1
Custom Dialogbox appears on click of button “Dialogbox”. Auto-hide property of the dialogbox is based on the first parameter passed while initializing the dialog box. The Close button on Dialogbox is visible only if the auto-hide property is disabled.
SampleWebApplication.java
/**
* This is the entry point method.
*/
public void onModuleLoad() {
VerticalPanel verticalPanel = new VerticalPanel();
verticalPanel.setSpacing(10);
verticalPanel.setBorderWidth(1);
verticalPanel.setSize("100%", "100%");
verticalPanel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
verticalPanel.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE);
// The log in button
Button submit = new Button("DialogBox");
verticalPanel.add(submit);
submit.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
// Add validation
showCustomDialog();
}
});
// Add our panel to the page
RootLayoutPanel.get().add(verticalPanel);
}
/**
* Draws Custom Dialog box.
* @return DialogBox
*/
private DialogBox showCustomDialog() {
final DialogBox dialog = new DialogBox(false, true);
// final DialogBox dialog = new DialogBox(true, true);
// Set caption
dialog.setText("DialogBox Caption");
// Setcontent
Label content = new Label("This is sample text message inside "
+ "Customized Dialogbox. In this example a Label is "
+ "added inside the Dialogbox, whereas any custom widget "
+ "can be added inside Dialogbox as per application'ser's need. ");
if (dialog.isAutoHideEnabled()) {
dialog.setWidget(content);
} else {
VerticalPanel vPanel = new VerticalPanel();vPanel.setSpacing(2);
vPanel.add(content);vPanel.add(new Label("\n"));
vPanel.add(new Button("Close", new ClickHandler() {
public void onClick(ClickEvent event) {
dialog.hide();
}
}));
dialog.setWidget(vPanel);
}
dialog.setPopupPosition(100, 150);
dialog.show();
return dialog;
}
Output:
After enabling auto-hide property for Dialogbox (Refer line no. 32 in Custom Dialogbox Example 1).
Output:
5.2 Custom Dialogbox Example 2
In this example, a Dialogbox is customised by adding DockPanel as its child widget.
SampleWebApplication.java
/**
* This is the entry point method.
*/
public void onModuleLoad() {
Button btn= new Button("Dialogbox", new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
DialogBox dlg = new CustomDialog();
dlg.center();
}
});
RootPanel.get().add(btn);
}
/**
* CustomDialog adds DockPanel as its child widget.
*/
class CustomDialog extends DialogBox implements ClickHandler {
public CustomDialog() {
super(true);
setText("Sample DialogBox");
Button closeButton = new Button("Close", this);
HTML msg = new HTML("A Custom dialog box.",true);
DockPanel dock = new DockPanel();
dock.setSpacing(6);
Image image = new Image();
image.setUrl("https://www.javacodegeeks.com/wp-content/uploads/2012/12/JavaCodeGeeks-logo.png");
dock.add(image, DockPanel.CENTER);
dock.add(closeButton, DockPanel.SOUTH);
dock.add(msg, DockPanel.NORTH);
dock.setCellHorizontalAlignment(closeButton, DockPanel.ALIGN_CENTER);
dock.setWidth("100%");
setWidget(dock);
}
@Override
public void onClick(ClickEvent event) {
hide();
}
}
Output:
6. References
• GWT UIPanels
• GWT API Reference
7. Download Eclipse Project
You can download the full source code of this example here: GWT DialogBox Examples
