Google Web toolkit GWT 2.0 UiBinder Talk @ South Florida Google Technology User Group (GTUG) Meetup #3 by Pradeep B Pillai

1. Google Technology User Group #3
Introduction to GWT UIBinder
By Pradeep B Pillai

2. 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

3. Today’s Agenda
A lot new in GWT 2.0 and beyond
• UiBinder
• ClientBundle
• LayoutPanel

4. 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

5. UI In Java (old approach)

6. 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>

7. Wiring up everything…

8. Wiring up everything…
Owner Java Class

9. <ui:style> element : inline css style

10. <ui:style> element : external css style

11. Inline Images and CSS Image Sprites

13. Without Client Bundling
Initial download
Call to display images

14. 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

15. Accessing the external resource from UiBinder

16. After Bundling
Initial download

17. Layout Panels

18. Dock Layout Panel Example from the GWT Mail Sample

20. What’s coming up in the “Future”…
GWT Designer (acquired from Instantiations)
support for UiBinder

21. 21
Questions ?

22. 22
Resources
Declarative Layout with UiBinder
•
http://code.google.com/webtoolkit/doc/latest/DevGuide
UiBinder.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. 23
ood Bye!