Google Technology User Group #3
Introduction 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 brows...
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...
UI In Java (old approach)
UI in HTML using UiBinder approach
<g:HTMLPanel>
<div class='{style.logo}'/>
<div class="{style.statusDiv}">
<div><b>Welco...
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);
@S...
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/DevGuide
UiBinder.html
• GWT'...
23
ood Bye!
Google Web toolkit GWT 2.0 UiBinder Talk @ South Florida Google Technology User Group (GTUG) Meetup #3
Google Web toolkit GWT 2.0 UiBinder Talk @ South Florida Google Technology User Group (GTUG) Meetup #3
Upcoming SlideShare
Loading in …5
×

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

2,956 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,956
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
54
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • helps productivity and maintainability — it&amp;apos;s easy to create UI from scratch or copy/paste across templates;
    makes it easier to collaborate with UI designers who are more comfortable with XML, HTML and CSS than Java source code;
    provides a gradual transition during development from HTML mocks to real, interactive UI;
    encourages a clean separation of the aesthetics of your UI (a declarative XML template) from its programmatic behavior (a Java class);
    performs thorough compile-time checking of cross-references from Java source to XML and vice-versa;
    offers direct support for internationalization that works well with GWT&amp;apos;s i18n facility;
    and encourages more efficient use of browser resources by making it convenient to use lightweight HTML elements rather than heavier-weight widgets and panels
  • Google Web toolkit GWT 2.0 UiBinder Talk @ South Florida Google Technology User Group (GTUG) Meetup #3

    1. 1. Google Technology User Group #3 Introduction to GWT UIBinder By Pradeep B Pillai
    2. 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. 3. Today’s Agenda A lot new in GWT 2.0 and beyond • UiBinder • ClientBundle • LayoutPanel
    4. 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. 5. UI In Java (old approach)
    6. 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. 7. Wiring up everything…
    8. 8. Wiring up everything… Owner Java Class
    9. 9. <ui:style> element : inline css style
    10. 10. <ui:style> element : external css style
    11. 11. Inline Images and CSS Image Sprites
    12. 12. Without Client Bundling Initial download Call to display images
    13. 13. 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
    14. 14. Accessing the external resource from UiBinder
    15. 15. After Bundling Initial download
    16. 16. Layout Panels
    17. 17. Dock Layout Panel Example from the GWT Mail Sample
    18. 18. What’s coming up in the “Future”… GWT Designer (acquired from Instantiations) support for UiBinder
    19. 19. 21 Questions ?
    20. 20. 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
    21. 21. 23 ood Bye!

    ×