Question

GET并没有为对话框提供任何样式，并且没有任何样式它看起来很糟糕。是否有一些简单的方法来获得GWT showcase page上显示的内容？

Answer 1

事实证明解决方案非常简单。在主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;
}

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。

如何设置GWT DialogBox的样式？

2 个答案: