Presentation is loading. Please wait.

Presentation is loading. Please wait.

Cute and Cuddly UIs with GWT. What is the Google Web Toolkit? Official Definition: o “Google Web Toolkit (GWT) is a development toolkit for building and.

Similar presentations

Presentation on theme: "Cute and Cuddly UIs with GWT. What is the Google Web Toolkit? Official Definition: o “Google Web Toolkit (GWT) is a development toolkit for building and."— Presentation transcript:

1 Cute and Cuddly UIs with GWT

2 What is the Google Web Toolkit? Official Definition: o “Google Web Toolkit (GWT) is a development toolkit for building and optimizing complex browser-based applications." o boring definition! Real Definition: o GWT is a compiler, plus a few frameworks  It compiles java into optimized javascript  does quite a bit more too

3 The Basic GWT app Consists of: o An entry HTML page  This is what the browser loads when it first hits the website o A gwt.xml file, named.gwt.xml  Contains:  what browsers to compile for  java class containing the entry point  what other modules are inherited (e.g. third- party toolkits like Gin, or gwttime) o Some java source files written using the GWT toolkit

4 Sample Module.gwt.xml

5 Major parts of GWT UI Framework Remote Procedure Call(RPC) structure the GWT compiler

6 UI Frameworks GWT's UI toolkit includes: o Widgets o Event system o Resource management

7 GWT Widgets Includes widgets for pretty much all the common HTML/Javascript widgets o Button/PushButton o TextBox, TextArea o Password box o etc.

8 Layout Widgets Also includes widgets for doing layouts o Lay out vertically/horizontally in a row  FlowPanel, HorizonalPanel o Lay out in the center, with Borders  DockLayoutPanel, DockPanel o With a splitter between two widgets  SplitLayoutPanel, SplitPanel o With HTML  HTMLPanel

9 Laying out content DockLayoutPanel p = new DockLayoutPanel(Unit.EM); p.addNorth(new HTML("north"), 2); p.addSouth(new Button("Hello", 2); p.addEast(new TextArea("Some text!"), 2); p.addWest(new HTML("west"), 2); p.add(buildMyBigWidgetList()); //add it to the HTML document RootLayoutPanel rp = RootLayoutPanel.get(); rp.add(p);

10 Diversion about Standards Mode Standards Mode o put on top of your html page to be in standards mode Some layout widgets in GWT only work in Standards Mode o FlowLayout o DockLayoutPanel o SplitLayoutPanel

11 GWT Events Events handle most all user-level interactions in GWT o Mouse clicks o Key presses Events also can be used to send information from one widget to another o much like PropertyChangeListener in Swing o Instead of a PropertyChangeListener, use subclass of ValueChangedEvent

12 Add an event listener Button myButton = new Button("Do stuff"); myButton.addClickHandler(new public void onClick(ClickEvent ce){ //react to button } });, new MyValueChangeEvent());

13 UiBinder In GWT, you can layout your pages programatically o new FlowLayout().add(MyWidget), etc. Can also lay out pages using html, css, and xml The UiBinder is a way of doing layouts with xml, html, and css, instead of java. o This is actually doing layouts with html/css, instead of javascript

14 Sample UiBinder .important { font-weight: bold;} Here's an interesting element!

15 UiBinder(Continued) Why use UiBinder instead of programmatic layouts? o Separates layout and aesthetic logic from functional logic  easier to change layout without affecting functionality  easier to apply CSS styles (especially with ClientBundle) o Faster  programmatic logic is compiled to more javascript than html  UiBinder is compiled to more html than javascript

16 ClientBundle ClientBundle is a way of optimizing how the browser gets static resources o Images (ImageResource) o CSS (CssResource) o Text (TextResource) Groups together resources to make better use of the browser cache o moves resources from "never cache" category to the "cache forever" category

17 Without a ClientBundle... Make a change to an image, or css do your users see it right away? o maybe o depends on their browser cache

18 With a Client Bundle... You add an ImageResource GWT compiler gives the image a unique hash you change the image later.. o GWT compiler assigns new image a new hash o browsers now looking for a different image o changes show up right away

19 More ClientBundle Not just for Images o also for Css, static Text TextResource o compiles in static text as a cached resource o compiler can also easily internationalize the text from properties files o can be configured to download large text resources from the server as needed  allows rapid updates without a recompile/redeploy of the website

20 Question: How do you make server calls in javascript land? Server Stuff

21 Don't Don't ever, ever, ever use the internet. It's just a fad, it'll pass.

22 Refresh the entire page It seems awfully lonely in here, without any users...

23 Use AJAX!

24 GWT RPC GWT defines an AJAX-based Remote Procedure Call mechanism o Define your Service interface o Define your Service's Asynchronous companion interface o Implement your Service interface server side o call your Asynchronous interface client side

25 GWT RPC(Continued) The GWT compiler will automatically generate implementations of your Asynchronous interface that uses AJAX to make the calls. No Such Thing as a synchronous server call o GWT team decided that synchronous server calls are A Bad Idea(TM), and so they aren't available  They were right

26 public interface BeanServiceAsync{ void countBeans(String beanCounter, AsyncCallback beanCallback); public interface BeanService{ int countBeans(String beanCounter); public static class App { private static final BeanServiceAsync ourInstance; //some static initialization stuff here public static BillingDataServiceAsync getInstance() { return ourInstance; }

27 Using BeanServiceAsync void countMyBeans(){ AsyncCallback callback = newAsyncCallback (){ void onFailure(Throwable t){ handleFailure(t); } void onSuccess(Integer beanCount){ dealWithBeanCount(beanCount) } BeanService.App.getInstance().countBeans("myName",callback); }

28 GWT RPC(continued) It is very easy to make an asynchronous server call in GWT o Good:  your UIs are more responsive than with synchronous calls  less effort necessary o Bad:  It's easy to just make a server call whenever you want  Sometimes you may bring back more data than you expect

29 Make too many RPC calls... o Browser limits how many run concurrently o the rest wait o the page becomes unresponsive o Users hate you

30 Ask for too much data... Browser locks your page while processing the javascript page becomes unresponsive Users hate you

31 GWT Compiler GWT is a compiler, plus frameworks(Already mentioned this, right?) o......and?? o....So what does the compiler do for me?

32 GWT Compiler(Continued) Does all kinds of things o optimizes your java source code o converts java source to javascript o optimizes javascript  including ClientBundles, UiBinder, embedded css, etc.  optimizes javascript for different browsers

33 Permutations Compiler compiles for each browser independently o called Permutations of the compile If IE does a certain task in one way, and Chrome does it another... o IE permutation is compiled to use IE way, and never use Chrome's way o Chrome permutation always uses Chrome's way, and never IE's Can even replace entire implementations specific to each Browser

34 Steps in the GWT compile Steps in the GWT compile: o optimize java source o translate to javascript specific for each browser o optimize resulting javascript o perform code splitting(we'll get there)

35 Java optimization stage Optimizes Java source o Dead code elimination  removed unused code blocks  replaces if(somethingTrue()&&anotherTrue()) with if(true) o staticifies non-overridden methods  If method A is never overridden, then method A becomes static o inlines method calls  not as aggressive here as the HotSpot compiler  get too aggressive, it makes javascript bigger

36 Javascript stage Javascript optimizations o Basically the same to the interpreted javascript as what happens to the java o static evaluation (same as Dead code elimination, but cooler sounding) o method inlining  much more aggressive here since it only makes code smaller o global namespace mangling  turns "" into "f.b()"--if you're lucky o global css namespace mangling o code splitting

37 Codesplitting If you have a very big application... o downloading app to webpage takes a long time o javascript evaluation takes a long time o your users get bored and leave before your site loads a solution.. o don't bring every piece of javascript down initially o bring down only what you need, as you need it

38 Codesplitting(Continued) The compiler will separate out the javascript for you o IF you tell it to Surround blocks of code which don't need to be downloaded initially with GWT.runAsync() Compiler will recognize this o moves everything which is connected to that point into a different.js file which is downloaded later only stuff which is directly connected to the entry point (no GWT.runAsync()) will be downloaded initially o sometimes this can be surprising

39 Codesplit public void runSomeCodeAsync(){ GWT.runAsync(new RunAsyncCallback(){ void onFailure(Throwable t){ //your javascript failed to load! } void onSuccess(){ runMyAppCode(); }

40 Story of your Compile It's often confusing to determine what pieces of code are brought down in what split o GWT compiler can generate a summary  called the Story of Your Compile(SOYC)  Tells you where code has been split  what code is included in that split  what code is in the initial download  what code is "left over"  code is left over if it fits in no split entirely  this is downloaded initially.

41 Caveats about GWT Compiler GWT compiler is slooooow o Each permutation takes time  the compiler does a lot, and it does it repetitively o permutations are easy to add  add a new browser  add a new language to compile for o Codesplitting is nontrivial  tends to add quite a bit of build time Not unusual to see full builds take 30 minutes, 1 hour, or more

42 Caveats(Continued) You can speed up the compile o Compile fewer permutations o use the -draftCompile command line argument o Distributed Compiler  not really all the way there--you have to write some glue code

43 Development mode Obviously can't develop very effectively like that GWT team introduced Development Mode to make up for this Development Mode skips the compile stage and goes straight to the browser

44 Development mode(Continued) Includes an embedded jetty server to run server code puts wrappers into javascript instead of actual code o when you interact with the page...  each action you take is sent to the embedded server  that server compiles enough javascript to perform that action, and sends it back Can use debuggers with development mode for client- side javascript debugging to make a UI change take effect, only need to refresh, not rebuild.

45 Development Mode(Continued) However... o Development mode is not exactly the same as production mode  some bugs exist only in development  some bugs exist only in production  development mode is much slower than production

46 Best practices Use UiBinder Use ClientBundle Use codesplitting o you would be amazed how much faster your app feels avoid excessive javascript o javascript is usually slower than HTML Don't make too many server calls Remember your Java Best practices Be kind to your users

47 Third party tools Gin( o like guice, but for GWT  no interceptors though gwttime( o port of joda-time to GWT  not perfect (kinda big)  better than nothing  needs to be revamped gwt-log( o log4j-style client side logging o can be sent to the server!

48 Questions?

49 Contact LinkedIn

Download ppt "Cute and Cuddly UIs with GWT. What is the Google Web Toolkit? Official Definition: o “Google Web Toolkit (GWT) is a development toolkit for building and."

Similar presentations

Ads by Google