1 / 23

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

Google Technology User Group #3 Introduction to GWT UIBinder By Pradeep B Pillai. 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

duy
Télécharger la présentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  12. Without Client Bundling Initial download Call to display images

  13. All at once using ClientBundle publicinterface Resources extends ClientBundle { publicstaticfinal Resources INSTANCE = GWT.create(Resources.class); @Source(”common.css") public CommonCss style(); @Source(“logo.gif") public ImageResource logo (); @Source("images1.gif") public ImageResource image1(); ... }

  14. Accessing the external resource from UiBinder

  15. After Bundling Initial download

  16. Layout Panels

  17. Dock Layout Panel Example from the GWT Mail Sample

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

  19. Questions ?

  20. 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 ToolkitBest 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. ood Bye!

More Related