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.
Step 2: Select UiBinder and click Next. In the next screen give the name of UiBinder class. Leave the other values as default.
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.
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).
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:
