Google Web toolkit GWT 2.0 UiBinder Talk @ South Florida Google Technology User Group (GTUG) Meetup...
-
Upload
pradeep-pillai -
Category
Technology
-
view
2.527 -
download
2
description
Transcript of Google Web toolkit GWT 2.0 UiBinder Talk @ South Florida Google Technology User Group (GTUG) Meetup...
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, [email protected]</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!