GWT Custom Button using UIBinder

Here’s an example on how to create a custom button using UIBinder on GWT.

public class GwtUIBinderButton implements EntryPoint {

	public void onModuleLoad() {
		Button button = new Button();
		button.setText("Button");
		button.addClickHandler(new ClickHandler(){
			@Override
			public 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));
	}

	@Override
	public HandlerRegistration addClickHandler(ClickHandler handler) {
		return addHandler(handler, ClickEvent.getType());
	}

	@Override
	public void onClick(ClickEvent event) {
		 this.fireEvent(event);
	}

	@Override
	public String getText() {
		return label.getText();
	}

	@Override
	public 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> 

Adding an Image:

	<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>

About these ads