GWT UI Binder

Workflow of GWT UI Binder

Follow the below-given steps sequentially to create a GWT application with a separation of programming logic and user interface(UI).

Step 1: Create an XML file with UI declaration.

We have created a Ninjas.ui.xml file in our example.

<ui:UiBinder xmlns:ui = 'urn:ui:com.google.gwt.uibinder'
  xmlns:gwt = 'urn:import:com.google.gwt.user.client.ui' 
  xmlns:res = 'urn:with:com.codingninjas.client.NinjasResources'>
  <ui:with type = "com.codingninjas.client.NinjasResources" field = "res">
  </ui:with>
  <gwt:HTMLPanel>
  ...  
  </gwt:HTMLPanel>
</ui:UiBinder> 

Step 2: Use ui:field for Later Binding

To connect UI fields in XML and JAVA files for subsequent binding, we will use the ui:field attribute in the XML/HTML element.

<gwt:Label ui:field = "completionLabel1" />
<gwt:Label ui:field = "completionLabel2" /> 

Step 3: Create a Java counterpart of UI XML.

By extending the Composite widget, you can create the Java-based counterpart of an XML-based layout.

In our example, we've created a Ninjas.java file.

package com.codingninjas.client;
  ...
public class Ninjas extends Composite {
  ...
}

You can also try this code with Online Java Compiler

Run Code

Step 4:  Bind Java UI fields with UiField annotation.

To identify counterpart class members to bind to XML-based fields in Ninjas.ui.xml, use the @UiField annotation in Ninjas.java.

public class Ninjas extends Composite {
  ...
  @UiField
  Label completionLabel1;

  @UiField
  Label completionLabel2;  
  ...
}

You can also try this code with Online Java Compiler

Run Code

Step 5: Bind Java UI with UI XML with UiTemplate annotation.

Tell GWT to use the @UiTemplate annotation to link the XML-based layout Ninjas.ui.xml to the Ninjas.java java component.

public class Ninjas extends Composite {

  private static NinjasUiBinder uiBinder = GWT.create(NinjasUiBinder.class);
  
  @UiTemplate("Ninjas.ui.xml")
  interface NinjasUiBinder extends UiBinder<Widget, Login> {
  }
  ...
}

You can also try this code with Online Java Compiler

Run Code

Step 6: Create a CSS File.

We have created a CSS file Ninjas.css and a Java based resource NinjasResource.java file equivalent to CSS style.

.blackText {
  font-family: Arial, Sans-serif;
  color: black;
  font-size: 15px;
  text-align: center;
}

.redText {
  font-family: Arial, Sans-serif;
  color: red;
  font-size: 15px;
  text-align: right;
}
...

Step 7: Create Java-based Resource File for CSS File.

We have created NinjasResource.java file equivalent to CSS style.

package com.codingninjas.client;
...
public interface NinjasResources extends ClientBundle {
  public interface MyCSS extends CSSResource {
      String blackText();

      ...
  }

  @Source("Ninjas.css")
  MyCSS style();
}

You can also try this code with Online Java Compiler

Run Code

Step 8:  Attach CSS resource in Java UI Code file.

Attach an external CSS Ninjas.css using Contructor of Java based widget class Ninjas.java.

public Ninjas() {
  this.res = GWT.create(NinjasResources.class);
  res.style().ensureInjected();
  initWidget(uiBinder.createAndBindUi(this));
}

You can also try this code with Online Java Compiler

Run Code

After completing all the 8 steps, you have finally created a UI binded GWT application.

Frequently Asked Questions

What is GWT?

The Google Web Toolkit (GWT) is a development toolkit for creating and improving sophisticated browser-based applications. For typical web-app activities like bookmarking, UI abstraction, cross-browser compatibility, etc., GWT focuses on reusable techniques.

What is GWT UI Binder?

GWT UI Binder is a framework that enables users to create GWT applications as HTML pages. The GWT UI Binder is used to declarative design the user interface of a web application built with GWT, i.e., to isolate the programming logic from the UI.

What is Smart GWT?

Smart GWT is a GWT-based framework that combines its rich UI components with a Java Server Framework for developing high-quality online applications. Smart GWT has the most extensive and diverse set of UI components.

What is the GWT Maven plugin?

By providing particular objectives, lifecycles, and artifact handlers, the Maven Plugin for GWT attempts to make it simpler to develop GWT applications with Maven. Java code in GWT is divided into two categories: Shared code and fully client-side code.

What is GWT Servlet?

GWT supports several methods for communicating with a server through HTTP. You may use the GWT RPC framework to perform transparent calls to Java servlets while GWT handles low-level complexities like object serialization.

Conclusion

In this article, we have extensively discussed Google Web Toolkits(GWT) UI Binder and learned how to create a GWT web application using UI Binder. If you want to learn more, check out our articles on GWT DeckPanel Widget, GWT TabPanel Widget, and GWT Composite Widget.

Do upvote our blog to help other ninjas grow.

Happy Coding!