3

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

4

2 回答 2

5

事实证明，解决方案非常简单。在您的主 HTML 文件中包含以下 CSS，然后下载http://gwt.google.com/samples/Showcase/showcase/gwt/clean/images/hborder.png、http://gwt.google.com/samples/ Showcase/showcase/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;
}
于 2012-09-03T06:44:44.843 回答
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。

于 2012-09-03T10:44:11.027 回答