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/

Comments

  1. Very cool tutorial. Unfortunately the GWT docs don’t have alot of info when dealing with HTML vs. widgets. Thanks!!

  2. guldmand says:

    Hey There.
    Nice Toturial

    I ran into some small problems when doing this tutorial, maby you will run into the same problems ( I use GWT 2.0, Eclipse Galileo):
    —————————————————–

    Source code used in this tutorial has some minor errorr. In the “MyHTMLBinder.java” file i found some code thats probrobly copy/pasted
    from a browser, containing JAVA Syntax braking elements like:

    >
    "
    <

    A translation of these can be found at: http://tntluoma.com/sidebars/codes/

    So the real code you wanna type into “MyHTMLBinder.java” is:

    —————————————————–

    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 {}
    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(” Hope you had a good time “);

    }

    }

    One other problem i encounterd was that when i create the project, through my ide (Eclipse Galileo) and calls the project “GWT_JERSEY_EXPERIMENT”
    Eclipse Auto generates some files:
    —————————————————–

    Folder: com.dclonline.binders
    - File: GWT_JERSEY_EXPERIMENT.gwt.xml

    Folder: com.dclonline.binders.client
    - File: GWT_JERSEY_EXPERIMENT.java
    - File: GreetingServiceAsync.java
    - File: GreetingService.java

    Folder: com.dclonline.binders.server
    - File: GreetingServiceImpl.java

    Folder: war
    - File: GWT_JERSEY_EXPERIMENT.html
    - File: GWT_JERSEY_EXPERIMENT.css

    You should delete all these files without any problems, since they are not used in the code since we create new files along the tutorial that
    replaces the original autogenrated files.

    Also the “GreetingService” is a part of the standart gwt application, thats autocreated and starts when you launch an new empty gwt project.

    —————————————————–

    Compileing problem:
    If you get compileing errors make sure that your files are placed in the exact same file structure as shown in the first image of the toturial.
    I got some compileing errors cuz i had mage a little mistage in the structure!

    Correct File Structure:

    GWT_JERSEY_EXPERIMENT:
    /src/
    com.dclonline/MyhtmlBinderModule.gwt.xml

    /com.dclonline.binders/MyHTMLBinder.java
    /com.dclonline.binders/MyHTMLBinderEntryPoint.java
    /com.dclonline.binders/MyHtmlBinder.ui.xml

    /com.dclonline.binders.client/”empty – no files here”

    /com.dclonline.binders.server/”empty – no files here”

    /com.dclonline.client/”empty – no files here”

    war/ myhtmlbinder.html

    —————————————————–

    Last and final you prolly have to go into the web.xml file and edit it as following:

    Folder: war/web-INF/
    - File: Web.xml

    Delete the code:

    greetServlet
    com.dclonline.binders.server.GreetingServiceImpl

    greetServlet
    /gwt_jersey_experiment/greet


    since it is used to run the greeting files.

    and edit the Default page to serve from “GWT_JERSEY_EXPERIMENT.html” to “myhtmlbinder.html”.

    —————————————————–

    //guruguldmand

    Peace

  3. iqbalyusuf says:

    @gurugulmand Thanks a ton for your correction and suggestions.

    I’m keeping all source code in bitbucket.org source repository. You can check out a zipped version of all source code from the following location. The following zip will contain source code for this tutorial and for “GWT UiBinder with JAX-RS Jersey” tutorial that I also wrote.

    http://bitbucket.org/iyusuf/gwtjerseyexperience/get/WordPressBlogReady.zip

    @gurugulmand good catch about auto generated GWT files, specially put under /client folder. I’ve intentionally put my binder client files in /binder just to learn how GWT works in terms of source code location. Maybe I should not have put binder files away from /client folder as clearly it is making users confused as it did to me too.

  4. bruno says:

    Nice tutorial.
    I like using HTML, to avoid DIV everywhere.
    But then I am stuck when it come to handle events with uiBinder and HTML.
    Do you know how to add a simple Button ???
    Thanks

  5. Gekkor McFadden says:

    Please post more of these fried chicken stories. If you don’t have any more then it is OK to post some fried turkey stories. Thank you!

  6. Bhushan says:

    Great article. Do you have anything on GWT MVP pattern? Would love to see if you can explain it here.

  7. snjy85 says:

    Really nice post,I just started with gwt UIBinder.

Leave a Reply