這是一個有關如何在GWT上使用UIBinder創建自定義按鈕的示例。

public class GwtUIBinderButton implements EntryPoint {public void onModuleLoad() {Button button = new Button();button.setText("Button");button.addClickHandler(new ClickHandler(){@Overridepublic void onClick(ClickEvent event) {Window.alert("Button clicked");}});RootPanel.get("container").add(button);}
}

public class Button extends Composite implements HasText, HasClickHandlers, ClickHandler{private static ButtonUiBinder uiBinder = GWT.create(ButtonUiBinder.class);interface ButtonUiBinder extends UiBinder<Widget, Button> {}@UiField(provided=true)FocusPanel pane = new FocusPanel();@UiField(provided=true)Label label = new Label();public Button() {pane.addClickHandler(this);initWidget(uiBinder.createAndBindUi(this));}@Overridepublic HandlerRegistration addClickHandler(ClickHandler handler) {return addHandler(handler, ClickEvent.getType());}@Overridepublic void onClick(ClickEvent event) {this.fireEvent(event);}@Overridepublic String getText() {return label.getText();}@Overridepublic void setText(String text) {label.setText(text);}}

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"xmlns:g="urn:import:com.google.gwt.user.client.ui"><ui:style>.button{background-color: #eeeeee;background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #cccccc));background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);background-image: -o-linear-gradient(top, #eeeeee, #cccccc);background-image: linear-gradient(top, #eeeeee, #cccccc);border: 1px solid #ccc;border-bottom: 1px solid #bbb;-webkit-border-radius: 3px;-moz-border-radius: 3px;-ms-border-radius: 3px;-o-border-radius: 3px;border-radius: 3px;color: #333;font: bold 11px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;line-height: 1;padding: 0px 0;text-align: center;text-shadow: 0 1px 0 #eee;width: 120px; }.button:hover{background-color: #dddddd;background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dddddd), color-stop(100%, #bbbbbb));background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);background-image: linear-gradient(top, #dddddd, #bbbbbb);border: 1px solid #bbb;border-bottom: 1px solid #999;cursor: pointer;text-shadow: 0 1px 0 #ddd;}.button:active{border: 1px solid #aaa;border-bottom: 1px solid #888;-webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;-moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; }.pane{text-align: center;}</ui:style><g:SimplePanel ui:field="pane" styleName="{style.button}"><g:Label ui:field="label"></g:Label></g:SimplePanel>
</ui:UiBinder>

添加圖像：

<g:SimplePanel ui:field="pane" styleName="{style.button}"><g:HTMLPanel><table align="center"><tr><td><g:Image styleName="{style.pane}" url="gwt-logo-42x42.png"></g:Image></td><td><g:Label ui:field="label"></g:Label></td></tr></table></g:HTMLPanel></g:SimplePanel>

參考：來自GlyphSoft博客的JCG合作伙伴 Mark Andro Silva 使用UIBinder的GWT自定義按鈕 。