我如何設計一個GWT對話框？

Question

GWT不帶有任何樣式的DialogBox，並且它看起來很糟糕，沒有任何樣式。是否有一些簡單的方法來獲得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

另一種方法是在UiBinder中擴展DialogBox類和樣式。它避免了改變甚至是具有全球風格。

您可以使用@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像任何其他部件。