CODEWITHSUNDEEP
javagwt
Phyxx
Phyxx

Reputation: 16085

How do I style a GWT DialogBox?

GWT doesn't come with any styles for the DialogBox, and it looks terrible without any styles. Is there some easy way to get something like what is shown on the GWT showcase page?

Upvotes: 3

Views: 9371

Answers (2)

Felix Lechner
Felix Lechner

Reputation: 468

Another way is to extend the DialogBox class and style it in UiBinder. It avoids changing, or even having, a global style.

You can use the @external keyword to import a pre-defined style (otherwise hidden due to obfuscation).

The DialogBox Javadoc explains which style element corresponds to each part of the DialogBox.

<ui:style>
  @external .gwt-DialogBox .Caption;
  .gwt-DialogBox .Caption {
    font-weight: bold;
    text-align: center;
  }
</ui:style>

<g:HTMLPanel>
  <g:SimplePanel ui:field="mainPanel"></g:SimplePanel>
  <g:Button ui:field="okButton">OK</g:Button>
</g:HTMLPanel>

As an example, a corresponding class would be:

public class MyDialogBox extends DialogBox {

  @UiField SimplePanel mainPanel;
  @UiField Button okButton;

  interface Binder extends UiBinder<Widget, MyDialogBox> {}

  public MyDialogBox() {
    super.setWidget(GWT.<Binder> create(Binder.class).createAndBindUi(this));
  }

  @UiHandler("okButton")
  void onDismiss(ClickEvent e) {
    hide();
  }

  @Override
  public void setWidget(Widget widget) {
    mainPanel.setWidget(widget);
  }

  @Override
  public void center() {
    super.center();
    okButton.setFocus(true);
  }
}

Then you can instantiate and use MyDialogBox like any other widget.

Upvotes: 2

Phyxx
Phyxx

Reputation: 16085

It turns out the solution is quite simple. Include the following CSS in your main HTML file, and download http://gwt.google.com/samples/Showcase/showcase/gwt/clean/images/hborder.png, http://gwt.google.com/samples/Showcase/showcase/gwt/clean/images/vborder.png and http://gwt.google.com/samples/Showcase/showcase/gwt/clean/images/circles.png into your project.

.gwt-PopupPanelGlass {
  background-color: #000;
  opacity: 0.3;
  filter: alpha(opacity=30);
}

.gwt-DialogBox .Caption {
  background: #F1F1F1;
  padding: 4px 8px 4px 4px;
  cursor: default;
  font-family: Arial Unicode MS, Arial, sans-serif;
  font-weight: bold;
  border-bottom: 1px solid #bbbbbb;
  border-top: 1px solid #D2D2D2;
}
.gwt-DialogBox .dialogContent {
}
.gwt-DialogBox .dialogMiddleCenter {
  padding: 3px;
  background: white;
}
.gwt-DialogBox .dialogBottomCenter {
  background: url(images/hborder.png) repeat-x 0px -2945px;
  -background: url(images/hborder_ie6.png) repeat-x 0px -2144px;
}
.gwt-DialogBox .dialogMiddleLeft {
  background: url(images/vborder.png) repeat-y -31px 0px;
}
.gwt-DialogBox .dialogMiddleRight {
  background: url(images/vborder.png) repeat-y -32px 0px;
  -background: url(images/vborder_ie6.png) repeat-y -32px 0px;
}
.gwt-DialogBox .dialogTopLeftInner {
  width: 10px;
  height: 8px;
  zoom: 1;
}
.gwt-DialogBox .dialogTopRightInner {
  width: 12px;
  zoom: 1;
}
.gwt-DialogBox .dialogBottomLeftInner {
  width: 10px;
  height: 12px;
  zoom: 1;
}
.gwt-DialogBox .dialogBottomRightInner {
  width: 12px;
  height: 12px;
  zoom: 1;
}
.gwt-DialogBox .dialogTopLeft {
  background: url(images/circles.png) no-repeat -20px 0px;
  -background: url(images/circles_ie6.png) no-repeat -20px 0px;
}
.gwt-DialogBox .dialogTopRight {
  background: url(images/circles.png) no-repeat -28px 0px;
  -background: url(images/circles_ie6.png) no-repeat -28px 0px;
}
.gwt-DialogBox .dialogBottomLeft {
  background: url(images/circles.png) no-repeat 0px -36px;
  -background: url(images/circles_ie6.png) no-repeat 0px -36px;
}
.gwt-DialogBox .dialogBottomRight {
  background: url(images/circles.png) no-repeat -8px -36px;
  -background: url(images/circles_ie6.png) no-repeat -8px -36px;
}
* html .gwt-DialogBox .dialogTopLeftInner {
  width: 10px;
  overflow: hidden;
}
* html .gwt-DialogBox .dialogTopRightInner {
  width: 12px;
  overflow: hidden;
}
* html .gwt-DialogBox .dialogBottomLeftInner {
  width: 10px;
  height: 12px;
  overflow: hidden;
}
* html .gwt-DialogBox .dialogBottomRightInner {
  width: 12px;
  height: 12px;
  overflow: hidden;
}

Upvotes: 5

Related Questions