GWT UiBinder “helloworld” with HTML

This is an easy tiny tutorial to show how to use GWT UIBinder on Google App Engine environment step by step. Actually I was thinking of writing up a tutorial for using GWT with JAX-RS Jersey. Then I started playing with GWT’s new UiBinder with HTML (no GWT Widgets) and could not locate a simple step by step “helloworld” tutorial for dummies like me. After investigating Google document and another tutorial (a how to using GWT UiBinder with UI based on widgets), I thought why not write a tutorial to help others who are looking for the same. So here it is. I’m still planning to publish another tutorial how-to for GWT + Jersey soon…

Sandbox Environment

OS: Windows XP

App Engine SDK: 1.3.0

GWT : 2.0

IDE : Eclipse Galileo

Setting up:

Make sure that your Eclipse IDE configured with GWT 2.0 and App Engine SDK 1.3.0.

Steps:

Srouce Code Folder Structure

Create UiBinder

(File — > New — > UiBinder)

We start our process by first creating a new UiBinder template and owner class. Use Eclipse GWT plug-in to create as shown. Choose com.dclonline.binders as package name and “MyHTMLBinder” as UiBinder template name. GWT Plgu-in will create a template file named MyHTMLBinder.ui.xml and owner class file named MyHTMLBinder.java . Note that I’ve selected “Create UI based on: “ option as “HTML”. You can create template based on “GWT widgets” too.

Open up MyHTMLBinder.ui.xml file in editor and add code as shown bellow. I’ve added three ui fields. These are the fields which you can programmatically access and update from your template’s owner class.


<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder">
	<ui:style>
		.important {
			font-weight: bold;
		}
	</ui:style>

	<div>
		<div >
			<span class="{style.important}" ui:field="greetingSpan" />
			<span class="{style.important}" ui:field="nameSpan" />
			<div ui:field="divElement" />
		</div>
	</div>
</ui:UiBinder>

Open up MyHTMLBinder.java owner class and add codes as shown bellow.

package com.dclonline.binders;

import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.DivElement;
import com.google.gwt.dom.client.Element;
import com.google.gwt.dom.client.SpanElement;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.UIObject;

public class MyHTMLBinder extends UIObject {

	interface MyHTMLBinderUiBinder extends UiBinder<Element, MyHTMLBinder> {}
	private static MyHTMLBinderUiBinder uiBinder = GWT.create(MyHTMLBinderUiBinder.class);

	@UiField SpanElement nameSpan;
	@UiField SpanElement greetingSpan;
	@UiField DivElement divElement;

	public MyHTMLBinder(String firstName) {
		setElement(uiBinder.createAndBindUi(this));

		greetingSpan.setInnerText("Hello there ");
		nameSpan.setInnerText(firstName);
		divElement.setInnerHTML("<p> Hope you had a good time </p>");

	}

}

Create GWT Module

(File — > New — > Module)

GWT module makes your html pages talk to GWT client code. Module bridges gap between GWT HTML page and GWT Entry Point Class. Create a GWT Module and create a module named “MyHTMLBinderModule” and use “com.dclonline” as Package value.  Open up MyHTMLBinderModule.get.xml module file and edit as shown bellow. We haven’t created MyHTMLBinderEntryPoint class yet which will be created next.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.0.0//EN" "http://google-web-toolkit.googlecode.com/svn/tags/2.0.0/distro-source/core/src/gwt-module.dtd">
<module>
	<inherits name="com.google.gwt.user.User" />
    <inherits name='com.google.gwt.user.theme.standard.Standard'/>
    <entry-point class='com.dclonline.binders.MyHTMLBinderEntryPoint'/>
	<source path="binders"/>
</module>

Create Entry Point Class

(File — > New — > Entry Point Class)

Consider “Entry Point Class” as java “main” for GWT client. Create as shown bellow. For Module use “Browse” button to locate your module file “MyHTMLBinderModule” created in previous step. Enter “com.dclonline.binders” as your package and give this class a name as “MyHTMLBinderEntryPoint”.

Open up MyHTMLBinderEntryPoint.java class and add following code in it. I’m basically referencing my binder owner class and adding my binder to my html document. That’s all you need to do to render your binder template. Next step is to create HTML host file to host my entry point java class.

package com.dclonline.binders;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.dom.client.Document;

public class MyHTMLBinderEntryPoint implements EntryPoint {

	@Override
	public void onModuleLoad() {
		MyHTMLBinder myHTMLBinder = new MyHTMLBinder("dipu");
		Document.get().getBody().appendChild(myHTMLBinder.getElement());

	}

}

Create HTML Page Host

(File — > New — > HTML Page)

GWT “HTML Page” can be considered as host page for GWT widgets and elements. Make sure Modules box contains “MyHTMLBinderModule” module file. Your path location should be “war”.

Open up myhtmlbinder.html file and make sure your content looks something like shown bellow. For  this experiment the most important element to watch is <script> tag and make sure it contains the code as shown bellow.


&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;
    &lt;title&gt;myhtmlbinder&lt;/title&gt;
    &lt;script type=&quot;text/javascript&quot; language=&quot;javascript&quot; src=&quot;com.dclonline.MyHTMLBinderModule/com.dclonline.MyHTMLBinderModule.nocache.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;

  &lt;body&gt;
    &lt;iframe src=&quot;javascript:''&quot; id=&quot;__gwt_historyFrame&quot; tabIndex='-1' style=&quot;position:absolute;width:0;height:0;border:0&quot;&gt;&lt;/iframe&gt;

	&lt;h1&gt;My HTML Binder Test Page&lt;/h1&gt;
  &lt;/body&gt;
&lt;/html&gt;

Test

Run the application and test using your favorite browser by copying the provided url in dev mode.

Resources

  • Declarative Layout with UiBinder:

http://code.google.com/webtoolkit/doc/latest/DevGuideUiBinder.html

  • GWT UiBinder Hello World Tutorial using GWT Widgets:

http://blog.jeffdouglas.com/2010/01/19/gwt-uibinder-hello-world-tutorial/

10 Comments

  1. jeffdonthemic January 22, 2010 Reply
  2. guldmand February 18, 2010 Reply
  3. iqbalyusuf February 18, 2010 Reply
  4. bruno December 22, 2010 Reply
  5. Gekkor McFadden January 13, 2011 Reply
  6. Bhushan July 6, 2011 Reply
  7. snjy85 August 5, 2011 Reply

Add a Comment

Your email address will not be published. Required fields are marked *