如何设置GWT DialogBox的样式？

Question

GWT没有为DialogBox提供任何样式，没有任何样式它看起来很糟糕。 是否有一些简单的方法可以获得GWT展示页面上显示的内容 ？

Answer 1

事实证明解决方案非常简单。 包括在你的主HTML文件下面的CSS，并下载http://gwt.google.com/samples/Showcase/showcase/gwt/clean/images/hborder.png ， http://gwt.google.com/samples/在您的项目中展示/展示/ gwt / clean / images / vborder.png和http://gwt.google.com/samples/Showcase/showcase/gwt/clean/images/circles.png 。

.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;
}

Answer 2

另一种方法是扩展DialogBox类并在UiBinder中设置它的样式。 它避免改变甚至拥有全球风格。

您可以使用@external关键字导入预定义的样式（否则由于混淆而隐藏）。

DialogBox Javadoc解释哪个样式元素对应于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>

例如，相应的类将是：

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);
  }
}

然后，您可以像任何其他小部件一样实例化和使用MyDialogBox。