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

もう 1 つの方法は、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 に答える