Google Technology User Group #3Introduction to GWT UIBinder

By Pradeep B Pillai

2

Quick Overview on GWT

• Development toolkit, not a framework

• Code in Java, run as JavaScript

• One codebase, any browser

• Makes Ajax a piece of cake...and faster

Today’s Agenda

A lot new in GWT 2.0 and beyond

• UiBinder

• ClientBundle

• LayoutPanel

What is UiBinder ?

• Declarative User Interfaces

• Write your HTML in HTML

• Clean separation of the aesthetics of your UI from its programmatic behavior

• No more Boilerplate code

• Fewer widgets, smaller footprint

• Easier for UI designers who are more comfortable with XML, HTML and CSS than Java source code

UI In Java (old approach)

UI in HTML using UiBinder approach

<g:HTMLPanel>

<div class='{style.logo}'/>

<div class="{style.statusDiv}">

<div><b>Welcome back, foo@example.com</b> </div>

<div class='{style.linksDiv}'>

<g:Anchor ui:field='signOutLink'>Sign Out</g:Anchor>

<g:Anchor ui:field='aboutLink'>About</g:Anchor>

</div> </div>

</g:HTMLPanel>

Wiring up everything…

Wiring up everything…

Owner Java Class

<ui:style> element : inline css style

<ui:style> element : external css style

Inline Images and CSS Image Sprites

Without Client Bundling

Initial download

Call to display images

public interface Resources extends ClientBundle { public static final Resources INSTANCE = GWT.create(Resources.class); @Source(”common.css") public CommonCss style(); @Source(“logo.gif") public ImageResource logo ();

@Source("images1.gif") public ImageResource image1();

...

}

All at once using ClientBundle

Accessing the external resource from UiBinder

After Bundling

Initial download

Layout Panels

Dock Layout Panel Example from the GWT Mail Sample

What’s coming up in the “Future”…

GWT Designer (acquired from Instantiations) support for UiBinder

21

Questions ?

22

Resources

Declarative Layout with UiBinder• http://code.google.com/webtoolkit/doc/latest/DevGuideUiBinder.html

• GWT's UI overhaul: UiBinder, ClientBundle, and Layout Panels - Joel Webber, Ray Ryan

• http://www.youtube.com/watch?v=g2XclEOJdIc&feature=player_embedded

• Google Web Toolkit Best Practices Talk at Dev Nexus By Chris Ramdale of the Google Developer Relations Team

• http://www.slideshare.net/cramsdale/gwt-best-practices-devnexus-2010

23

ood Bye!