About Mark Anro Silva

Software Engineer | UI/UX Engineer, Java, JavaFX, GWT and Scala.

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>

Click to view Demo

Reference: GWT Custom Button using UIBinder from our JCG partner Mark Andro Silva at the GlyphSoft blog.

Related Whitepaper:

Functional Programming in Java: Harnessing the Power of Java 8 Lambda Expressions

Get ready to program in a whole new way!

Functional Programming in Java will help you quickly get on top of the new, essential Java 8 language features and the functional style that will change and improve your code. This short, targeted book will help you make the paradigm shift from the old imperative way to a less error-prone, more elegant, and concise coding style that’s also a breeze to parallelize. You’ll explore the syntax and semantics of lambda expressions, method and constructor references, and functional interfaces. You’ll design and write applications better using the new standards in Java 8 and the JDK.

Get it Now!  

Leave a Reply


five + 2 =



Java Code Geeks and all content copyright © 2010-2014, Exelixis Media Ltd | Terms of Use | Privacy Policy
All trademarks and registered trademarks appearing on Java Code Geeks are the property of their respective owners.
Java is a trademark or registered trademark of Oracle Corporation in the United States and other countries.
Java Code Geeks is not connected to Oracle Corporation and is not sponsored by Oracle Corporation.

Sign up for our Newsletter

20,709 insiders are already enjoying weekly updates and complimentary whitepapers! Join them now to gain exclusive access to the latest news in the Java world, as well as insights about Android, Scala, Groovy and other related technologies.

As an extra bonus, by joining you will get our brand new e-books, published by Java Code Geeks and their JCG partners for your reading pleasure! Enter your info and stay on top of things,

  • Fresh trends
  • Cases and examples
  • Research and insights
  • Two complimentary e-books