Simple GWT Deferred Binding Example

1,168 views
Skip to first unread message

neonleon

unread,
Mar 28, 2008, 12:41:50 PM3/28/08
to Google Web Toolkit
Hello,

I wanted to post a very simple example of GWT deferred binding as I
had trouble initially grasping it.

What this example will do is alert a message to the screen based on a
meta property set in the html page.


Here are the steps:

1. I am going to create java classes that will alert a message to the
screen. Each one of these classes will implement an Alerter
interface:

package com.zedak.alerter.gwt.client.impl;
...

public interface Alerter {
public void alert();
}

2. Here are my implementations of the above Alerter interface:

package com.zedak.alerter.gwt.client.impl;
...

public class HelloAlerterImpl implements Alerter{
public void alert() {
Window.alert("Hello!");
}
}

public class GoodbyeAlerterImpl implements Alerter{
public void alert() {
Window.alert("Goodbye!");
}
}

public class DefaultAlerterImpl implements Alerter{
public void alert() {
Window.alert("Default!");
}
}

3. I am going to create a property which will be utilized by GWT to
determine which implementation my Alerter will use. I am going to
define my properties in a seperate XML file than my main module to
reduce clutter...

Contents of Alerter-properties.gwt.xml:

<module>
<define-property name="alerter" values="hello,goodbye,default" /
>

<property-provider name="alerter">
<![CDATA[
var alerter = __gwt_getMetaProperty("alerter");
if (alerter == null){
alerter = "default";
}
return alerter;
]]>
</property-provider>
</module>

The HTML will contain a meta property that will define which alerter
to use. If no meta property exists, it will use the default.

4. I now will inherit the above module in my main module and define
which Alerter implementation to use for each possible property.

Contents of Alerter.gwt.xml:

<module>
....

<!-- Inherit the above module -->
<inherits name="com.zedak.alerter.gwt.Alerter-properties" />

<replace-with
class="com.zedak.alerter.gwt.client.impl.HelloAlerterImpl">
<when-type-is
class="com.zedak.alerter.gwt.client.impl.AlerterImpl"/>
<when-property-is name="alerter" value="hello"/>
</replace-with>

<replace-with
class="com.zedak.alerter.gwt.client.impl.GoodbyeAlerterImpl">
<when-type-is
class="com.zedak.alerter.gwt.client.impl.AlerterImpl"/>
<when-property-is name="alerter" value="goodbye"/>
</replace-with>

<replace-with
class="com.zedak.alerter.gwt.client.impl.DefaultAlerterImpl">
<when-type-is
class="com.zedak.alerter.gwt.client.impl.AlerterImpl"/>
<when-property-is name="alerter" value="default"/>
</replace-with>

<entry-point class='com.zedak.alerter.gwt.client.AlerterEntryPoint'/
>
...
</module>

5. Now lets create the EntryPoint class defined in the above XML,
which will call the Alerter implementation based on the property
value...

package com.zedak.alerter.gwt.client;
...

public class AlerterEntryPoint implements EntryPoint {
public void onModuleLoad() {
Alerter alerter = (Alerter) GWT.create(Alerter.class);
alerter.alert();
}
}

All this module will do is instantiate the appropriate Alerter and
alert the message to the screen. You must use the GWT.create method
to instatiate the Alerter class.

6. Finally, lets add the appropriate code to our Alerter.html page...

<html>
<head>
<meta name='gwt:module' content='js/
gwt=com.zedak.alerter.gwt.Alerter'/>
<meta name='gwt:property' content='alerter=hello'/>
</head>
<body>
<script language="javascript" src="/js/gwt/
com.zedak.alerter.gwt.Alerter.nocache.js"/>
</body>
</html>



When you load the Alerter.html file, you should see an alert dialog
that states 'hello'.

If you switch the property to this...

<meta name='gwt:property' content='alerter=goodbye'/>

You should see an alert dialog that states 'goodbye'.

Removing the property entirely should display an alert dialog that
states 'default'.



I thought a super-simple example might be helpful for some people out
there, and I hope that it is.


-Leon

Chii

unread,
Mar 29, 2008, 5:28:18 AM3/29/08
to Google Web Toolkit
thanks! that was quite informative =)

jiawei

unread,
Mar 31, 2008, 7:55:19 AM3/31/08
to Google Web Toolkit
I am a GWT beginner.
What's the benefit with deferred binding compared to normal
techniques?
I don't see it.

pohl

unread,
Mar 31, 2008, 11:29:15 AM3/31/08
to Google Web Toolkit
On Mar 31, 6:55 am, jiawei <microfl...@gmail.com> wrote:
> I am a GWT beginner.
> What's the benefit with deferred binding compared to normal
> techniques?
> I don't see it.

I'm a beginner too, and I haven't used deferred binding yet, but
I think I can answer your question.

The Deferred Binding mechanism is what allows GWT to have
different code for different browsers (while only requiring each
browser to download exactly the code that it needs and no more.)

For example, I think you should be able to have the same GWT module
serve one interface to regular desktop browsers, and an iPhone-
optimized
interface to an iPhone -- and mobile safari wouldn't have to download
more code than it actually needed.

If you read the source code to GWT itself, you'll see that it uses
deferred binding all over the place to work around quirks in one
browser
while leveraging unique strengths in another.


Message has been deleted

seriouslynonamesleft

unread,
Apr 21, 2008, 10:57:56 PM4/21/08
to Google Web Toolkit
I'd like to add to this something I just discovered about deferred
binding and "precedence" when multiple bindings are defined. Building
on the example above, say you have an alerter, LibAlerter, defined in
a JAR whose gwt.xml file looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<module>
<inherits name="com.google.gwt.user.User"/>
<source path='dbtl/'/>
<replace-with class="org.dbtl.LibAlerter">
<when-type-is class="org.dbtl.Alerter"/>
</replace-with>
</module>

Now say you include this JAR in some web project with an entry point,
plus its own implementation of the Alerter interface called
WebAlerter. Its gwt.xml file looks like this (note the comments):

<?xml version="1.0" encoding="UTF-8"?>
<module>
<inherits name="com.google.gwt.user.User"/>
<!--inherits name="org.Dbtl"/--> <!-- placing the inherits
directive here results in WebAlerter being bound -->
<entry-point class="org.dbt.client.MainEntryPoint"/>
<!-- Do not define servlets here, use web.xml -->
<replace-with class="org.dbt.client.WebAlerter">
<when-type-is class="org.dbtl.Alerter"/>
</replace-with>
<inherits name="org.Dbtl"/> <!-- placing the inherits directive
here results in LibAlerter being bound -->
</module>

So in the case that multiple bindings are defined for the same
interface, GWT seems to simply replace an existing binding with any
new one it encounters while parsing directives from top to bottom.

On Mar 28, 9:41 am, neonleon <nypaler...@gmail.com> wrote:
> Hello,
>
> I wanted to post a very simple example of GWTdeferredbindingas I

neonleon

unread,
May 5, 2008, 12:24:22 PM5/5/08
to Google Web Toolkit
Interesting.

Thanks for sharing.

On Apr 21, 10:57 pm, seriouslynonamesleft
> > -Leon- Hide quoted text -
>
> - Show quoted text -
Reply all
Reply to author
Forward
Message has been deleted
0 new messages