Javatpoint Logo
Javatpoint Logo

GWT UI Binder

GWT UI Binder is used to define the user interface in a declarative way i.e. it separates the programming logic from the UI of the web application build using GWT (Google Web Toolkit).

GWT UI Binder is a framework that allows user to build GWT application as HTML pages. HTML is the best way to design a UI.

Since GWT is based on Java, if the developer has the familiarity with XHTML, HTML, XML and CSS then UI can be easily designed in GWT. It is similar to what is JSP to Servlets.

Roadmap of UI Binder

Step1: Create UI Declaration in XML File

Step 2: Use ui:field for Later Binding

Step 3: Create Java counterpart of UI XML

Step 4: Bind Java UI fields with UiField annotation

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

Step 6: Create CSS File

Step 7: Create Java based Resource file for CSS File

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

All the above steps in sequential order allows developer to create a GWT application with separation of programming logic and front-end or UI.


UI Binder Example

Step 1: To create a UiBinder select the client package and click File → New → Other. In the Wizard type UiBinder.

GWT Ui Binder 1

Step 2: Select UiBinder and click Next. In the next screen give the name of UiBinder class. Leave the other values as default.

GWT Ui Binder 2

Step 3: This is the GWT configuration file. The entry-point and the source. The source specify the paths for translatable code.

GWTUiBinder.gwt.xml

Step 4: Compile i.e. to compile the application right click on the project, Google → GWT Compile.

GWT Ui Binder 3

This will create the java script code from the client class. Below is the output which will display on the Eclipse.

Step 5: Running the Application

To run the application right click on the project, select Run As → Web Application (GWT Classic Dev Mode).

GWT Ui Binder 4

The application will output some logs as shown below:

Then the application will display a URL in the 'Development Mode' window as:

http://127.0.0.1:8888/GWTUiBinder.html copy url and run on browser.

Output:

GWT Ui Binder 5



Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA