GWT Deep DivePart 1: UiBinder, CellWidgets, Activities&Places                                           Andrey Mormysh    ...
GWTGoogle Web Toolkit                2    www.ExigenServices.com
GWT /ˈɡwɪt /Google Web Toolkit                3    www.ExigenServices.com
GWT-based projects                     4   www.ExigenServices.com
GWT-based projects Google Wave (http://wave.google.com/) - an online tool for real-time communicationand collaboration   ...
GWT-based projects Google Wave (http://wave.google.com/) - an online tool for real-time communicationand collaboration O...
GWT-based projects Google Wave (http://wave.google.com/) - an online tool for real-time communicationand collaboration O...
GWT-based projects Google Wave (http://wave.google.com/) - an online tool for real-time communicationand collaboration O...
GWT-based projects Google Wave (http://wave.google.com/) - an online tool for real-time communicationand collaboration O...
GWT-based projects Google Wave (http://wave.google.com/) - an online tool for real-time communicationand collaboration O...
GWT-based projects Google Wave (http://wave.google.com/) - an online tool for real-time communicationand collaboration O...
FeaturesCross-browserObject-oriented programmingDev-modeGUI debuggingWigets and declarative UIClient BundleSimple localiza...
FeaturesCross-browserObject-oriented programmingDev-modeGUI debuggingWigets and declarative UIClient BundleSimple localiza...
FeaturesCross-browserObject-oriented programmingDev-modeGUI debuggingWigets and declarative UIClient BundleSimple localiza...
FeaturesCross-browserObject-oriented programmingDev-modeGUI debuggingWigets and declarative UIClient BundleSimple localiza...
FeaturesCross-browserObject-oriented programmingDev-modeGUI debuggingWigets and declarative UIClient BundleSimple localiza...
FeaturesCross-browserObject-oriented programmingDev-modeGUI debuggingWigets and declarative UIClient BundleSimple localiza...
FeaturesCross-browserObject-oriented programmingDev-modeGUI debuggingWigets and declarative UIClient BundleSimple localiza...
FeaturesCross-browserObject-oriented programmingDev-modeGUI debuggingWigets and declarative UIClient BundleSimple localiza...
FeaturesCross-browserObject-oriented programmingDev-modeGUI debuggingWigets and declarative UIClient BundleSimple localiza...
FeaturesCross-browserObject-oriented programmingDev-modeGUI debuggingWigets and declarative UIClient BundleSimple localiza...
FeaturesCross-browserObject-oriented programmingDev-modeGUI debuggingWigets and declarative UIClient BundleSimple localiza...
FeaturesCross-browserObject-oriented programmingDev-modeGUI debuggingWigets and declarative UIClient BundleSimple localiza...
?    24   www.ExigenServices.com
25   www.ExigenServices.com
26   www.ExigenServices.com
JSNIJava Script Native InterfaceAccess JS code from Java code and vice versa                                           27 ...
JSNIJava Script Native InterfaceAccess JS code from Java code and vice versaWrap your own or third-party JS-widgets with J...
JSNIJava Script Native InterfaceAccess JS code from Java code and vice versaWrap your own or third-party JS-widgets with J...
JSNIExample 2:    package mypackage;    public MyClass{        public static int foo()        { ... }        public static...
Deferred bindingIt is a pluggable compile-time type substitution and code generationmechanism.                            ...
Deferred bindingIt is a pluggable compile-time type substitution and code generationmechanism.Example:   Static binding   ...
Deferred bindingGoal - send exactly the right code to client, depending on    •   User‟s browser    •   Locale    •   Mode...
Deferred bindingGoal - send exactly the right code to client, depending on    •   User‟s browser    •   Locale    •   Mode...
Permutations               35   www.ExigenServices.com
PermutationsExample:   Input:      DOMImpl dom = GWT.create(DOMImpl.class);                                               ...
PermutationsExample:   Input:      DOMImpl dom = GWT.create(DOMImpl.class);      Implementations:        DOMImplInternetEx...
PermutationsExample:   Input:      DOMImpl dom = GWT.create(DOMImpl.class);      Implementations:        DOMImplInternetEx...
PermutationsExample:               39   www.ExigenServices.com
Perfect Caching                  40   www.ExigenServices.com
Perfect CachingBootstrap selection script loads Javascript „executable‟ containing correct set of bindingsfor given reques...
Perfect CachingBootstrap selection script loads Javascript „executable‟ containing correct set of bindingsfor given reques...
Monilithic Compilation                         43   www.ExigenServices.com
Monilithic Compilation“The fastest code that which does not run”,           --Joel Webber, GWT co-creator                 ...
Monilithic Compilation“The fastest code that which does not run”,           --Joel Webber, GWT co-creatorExample:   Shape ...
Monilithic Compilation“The fastest code that which does not run”,           --Joel Webber, GWT co-creatorExample:   Shape ...
Monilithic Compilation“The fastest code that which does not run”,           --Joel Webber, GWT co-creatorExample:   Shape ...
Monilithic Compilation“The fastest code that which does not run”,           --Joel Webber, GWT co-creatorExample:   Shape ...
Client Bundle                49   www.ExigenServices.com
Client BundleProblem:1) HTTP 1.1 limit: 2 outgoing connections per domain/port                                            ...
Client BundleProblem:1) HTTP 1.1 limit: 2 outgoing connections per domain/port2) HTTP request has to be sent to the server...
Client BundleProblem:1) HTTP 1.1 limit: 2 outgoing connections per domain/port2) HTTP request has to be sent to the server...
Client BundleSolution:    interface Resources extends ClientBundle {       @Source("logo.png")       ImageResource logo();...
Client BundleSolution:    interface Resources extends ClientBundle {       @Source("logo.png")       ImageResource logo();...
Code Splitting   public class Hello implements EntryPoint {    public void onModuleLoad() {     Button b = new Button("Cli...
Code Splitting   public class Hello implements EntryPoint {    public void onModuleLoad() {     Button b = new Button("Cli...
Code Splitting   public class Hello implements EntryPoint {     public void onModuleLoad() {       Button b = new Button("...
GWT – it is a set of tools…N+1) UiBinderN+2) CellWidgetsN+3) Activities & Places…                             58   www.Exi...
UiBinderIntroduced in 2.0 (2010)GWT app is a Web PageWeb page is HTML+CSSThe best way to do is the easy one:1) build your ...
UiBinder1) Widgets have overhead2) Use UiBinder to replace Widgets with HTML   2.1) when don‟t need to respond to events  ...
UiBinder – “IS”1) helps productivity and maintainability2) collaboration with UI designers on theis language3) mocking;4) ...
UiBinder – “IS NOT”1) it is not a renderer2) there are no loops, no conditionals, no if statements in itsmarkup, and only ...
UiBinder – “Hello” example1) Template (Hello.ui.xml)    1.1) For this example – it is pure HTML    1.2) Associate fields: ...
UiBinder – “Hello” exampleNamespacesxmlns:s=“urn:import:com.nimbleteam.gwt.client.mvp.view.uibinder”<s:HelloWidget/>Method...
UiBinder – PanelsNew LayoutPanels more efficient1) Layout mostly delegated to browser2) Less use of tables (except TabLayo...
UiBinder – Panels<g:DockLayoutPanel unit=EM> <g:north size=5>  <g:Label>Top</g:Label> </g:north> <g:center>  <g:Label>Body...
UiBinder – Event HandlingOld style:    titleListBox.addChangeHandler( new ChangeHandler()        {           public void o...
UiBinder – ClientBundleIt is a way to minimize trips for images, CSSTakes all other stuff that makes up your app and injec...
UiBinder – ResourcesCssResource (see example)• ImageResource    Options:       1) separate cacheable files       2) inline...
UiBinder – I18nBefore:   <div>Hello, world.</div>After:   <div><ui:msg description="Greeting">Hello</ui:msg></div>Properti...
CellWidgetsObjective:   In general, all widgets are slow (too much JavaScript)   Old layout widgets are too static        ...
CellWidgets - FeaturesHigh-performance and lightweight (flyweight pattern)Renders interface as an HTML string (uses innerH...
CellWidgets - ShowcaseCellList, CellTable, DataGrid, CellTree, CellBrowser, …CellTable Features:   Can render large amount...
Activities&PlacesBrowser‟s history management approachNatural place for using code-splitting for UI optimization          ...
Activities&Places - PlaceRepresents particular state that can be bookmarkedProvides a way for bidirectional serialization ...
Activities&Places - PlaceHistoryMapperDeclares all the Places available in applicationGWT compiler will link PlaceHistoryH...
Activities&Places – Use case 1: goTo()Program calls to change place -> new place created andremembers it‟s token          ...
Activities&Places – Use case 2: history eventUser navigates to some URL -> Controller changes the place                   ...
Activities&Places - Activity• Represents something the user is doing• Contains no Widgets or UI code• As some level it can...
Activities&Places - ActivityMapperMaps each Place to its corresponding Activity"if (place instanceof SomePlace) return new...
Activities&Places - View   •   Part of the UI associated with an Activity   •   Is a Widget (e.g. implements IsWidget inte...
Activities&Places - Design                             82   www.ExigenServices.com
SourcesGoogleIO videos:http://www.youtube.com/watch?v=g2XclEOJdIc&feature=player_embeddedhttp://www.youtube.com/watch?v=0F...
To be continued…          http://www.exigenservices.by/webinars                                        84   www.ExigenServ...
Upcoming SlideShare
Loading in...5
×

Gwt 2,3 Deep dive

1,488

Published on

P

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,488
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Gwt 2,3 Deep dive

  1. 1. GWT Deep DivePart 1: UiBinder, CellWidgets, Activities&Places Andrey Mormysh Java Developer a.mormysh@gmail.comNovember 02, 2011 www.ExigenServices.com
  2. 2. GWTGoogle Web Toolkit 2 www.ExigenServices.com
  3. 3. GWT /ˈɡwɪt /Google Web Toolkit 3 www.ExigenServices.com
  4. 4. GWT-based projects 4 www.ExigenServices.com
  5. 5. GWT-based projects Google Wave (http://wave.google.com/) - an online tool for real-time communicationand collaboration 5 www.ExigenServices.com
  6. 6. GWT-based projects Google Wave (http://wave.google.com/) - an online tool for real-time communicationand collaboration Odnoklassniki (http://www.odnoklassniki.ru) - social network 6 www.ExigenServices.com
  7. 7. GWT-based projects Google Wave (http://wave.google.com/) - an online tool for real-time communicationand collaboration Odnoklassniki (http://www.odnoklassniki.ru) - social network Google Moderator (http://www.google.com/moderator) - a tool that allowsdistributed communities to submit and vote on questions for talks, presentations andevents 7 www.ExigenServices.com
  8. 8. GWT-based projects Google Wave (http://wave.google.com/) - an online tool for real-time communicationand collaboration Odnoklassniki (http://www.odnoklassniki.ru) - social network Google Moderator (http://www.google.com/moderator) - a tool that allowsdistributed communities to submit and vote on questions for talks, presentations andevents Go Grid (http://www.gogrid.com/) - cloud computing infrastructure service providerwhich enables you to deploy and scale load-balanced cloud server networks via aunique multi-server control panel. 8 www.ExigenServices.com
  9. 9. GWT-based projects Google Wave (http://wave.google.com/) - an online tool for real-time communicationand collaboration Odnoklassniki (http://www.odnoklassniki.ru) - social network Google Moderator (http://www.google.com/moderator) - a tool that allowsdistributed communities to submit and vote on questions for talks, presentations andevents Go Grid (http://www.gogrid.com/) - cloud computing infrastructure service providerwhich enables you to deploy and scale load-balanced cloud server networks via aunique multi-server control panel. Blueprint (https://blueprint.lombardi.com/index.html) - business process mappingtool 9 www.ExigenServices.com
  10. 10. GWT-based projects Google Wave (http://wave.google.com/) - an online tool for real-time communicationand collaboration Odnoklassniki (http://www.odnoklassniki.ru) - social network Google Moderator (http://www.google.com/moderator) - a tool that allowsdistributed communities to submit and vote on questions for talks, presentations andevents Go Grid (http://www.gogrid.com/) - cloud computing infrastructure service providerwhich enables you to deploy and scale load-balanced cloud server networks via aunique multi-server control panel. Blueprint (https://blueprint.lombardi.com/index.html) - business process mappingtool Scenechronize (https://www.scenechronize.com/) - a production management webapplication for film, television and commercials 10 www.ExigenServices.com
  11. 11. GWT-based projects Google Wave (http://wave.google.com/) - an online tool for real-time communicationand collaboration Odnoklassniki (http://www.odnoklassniki.ru) - social network Google Moderator (http://www.google.com/moderator) - a tool that allowsdistributed communities to submit and vote on questions for talks, presentations andevents Go Grid (http://www.gogrid.com/) - cloud computing infrastructure service providerwhich enables you to deploy and scale load-balanced cloud server networks via aunique multi-server control panel. Blueprint (https://blueprint.lombardi.com/index.html) - business process mappingtool Scenechronize (https://www.scenechronize.com/) - a production management webapplication for film, television and commercials Whirled (http://www.whirled.com/) - social virtual world website which includesmulti-player gamesetc… 11 www.ExigenServices.com
  12. 12. FeaturesCross-browserObject-oriented programmingDev-modeGUI debuggingWigets and declarative UIClient BundleSimple localizationCode optimizationCode splittingRPC, JSON/XMLUI DesignerHTML5… 12 www.ExigenServices.com
  13. 13. FeaturesCross-browserObject-oriented programmingDev-modeGUI debuggingWigets and declarative UIClient BundleSimple localizationCode optimizationCode splittingRPC, JSON/XMLUI DesignerHTML5… 13 www.ExigenServices.com
  14. 14. FeaturesCross-browserObject-oriented programmingDev-modeGUI debuggingWigets and declarative UIClient BundleSimple localizationCode optimizationCode splittingRPC, JSON/XMLUI DesignerHTML5… 14 www.ExigenServices.com
  15. 15. FeaturesCross-browserObject-oriented programmingDev-modeGUI debuggingWigets and declarative UIClient BundleSimple localizationCode optimizationCode splittingRPC, JSON/XMLUI DesignerHTML5… 15 www.ExigenServices.com
  16. 16. FeaturesCross-browserObject-oriented programmingDev-modeGUI debuggingWigets and declarative UIClient BundleSimple localizationCode optimizationCode splittingRPC, JSON/XMLUI DesignerHTML5… 16 www.ExigenServices.com
  17. 17. FeaturesCross-browserObject-oriented programmingDev-modeGUI debuggingWigets and declarative UIClient BundleSimple localizationCode optimizationCode splittingRPC, JSON/XMLUI DesignerHTML5… 17 www.ExigenServices.com
  18. 18. FeaturesCross-browserObject-oriented programmingDev-modeGUI debuggingWigets and declarative UIClient BundleSimple localizationCode optimizationCode splittingRPC, JSON/XMLUI DesignerHTML5… 18 www.ExigenServices.com
  19. 19. FeaturesCross-browserObject-oriented programmingDev-modeGUI debuggingWigets and declarative UIClient BundleSimple localizationCode optimizationCode splittingRPC, JSON/XMLUI DesignerHTML5… 19 www.ExigenServices.com
  20. 20. FeaturesCross-browserObject-oriented programmingDev-modeGUI debuggingWigets and declarative UIClient BundleSimple localizationCode optimizationCode splittingRPC, JSON/XMLUI DesignerHTML5… 20 www.ExigenServices.com
  21. 21. FeaturesCross-browserObject-oriented programmingDev-modeGUI debuggingWigets and declarative UIClient BundleSimple localizationCode optimizationCode splittingRPC, JSON/XMLUI DesignerHTML5… 21 www.ExigenServices.com
  22. 22. FeaturesCross-browserObject-oriented programmingDev-modeGUI debuggingWigets and declarative UIClient BundleSimple localizationCode optimizationCode splittingRPC, JSON/XMLUI DesignerHTML5… 22 www.ExigenServices.com
  23. 23. FeaturesCross-browserObject-oriented programmingDev-modeGUI debuggingWigets and declarative UIClient BundleSimple localizationCode optimizationCode splittingRPC, JSON/XMLUI DesignerHTML5… 23 www.ExigenServices.com
  24. 24. ? 24 www.ExigenServices.com
  25. 25. 25 www.ExigenServices.com
  26. 26. 26 www.ExigenServices.com
  27. 27. JSNIJava Script Native InterfaceAccess JS code from Java code and vice versa 27 www.ExigenServices.com
  28. 28. JSNIJava Script Native InterfaceAccess JS code from Java code and vice versaWrap your own or third-party JS-widgets with JSNI:• Google Maps• Flash objects• etc. 28 www.ExigenServices.com
  29. 29. JSNIJava Script Native InterfaceAccess JS code from Java code and vice versaWrap your own or third-party JS-widgets with JSNI:• Google Maps• Flash objects• etc.Example 1: public static native void alert(String msg) /*-{ $wnd.alert(msg); }-*/; 29 www.ExigenServices.com
  30. 30. JSNIExample 2: package mypackage; public MyClass{ public static int foo() { ... } public static native void exportStaticMethod() /*-{ $wnd.foo = $entry(@mypackage.MyClass::foo()); }-*/; } 30 www.ExigenServices.com
  31. 31. Deferred bindingIt is a pluggable compile-time type substitution and code generationmechanism. 31 www.ExigenServices.com
  32. 32. Deferred bindingIt is a pluggable compile-time type substitution and code generationmechanism.Example: Static binding Foo f = new Foo(); Dynamic Binding Class c = Class.forName(fooImplName); Foo f = (Foo) c.newInstance(); Deferred Binding Foo f = (Foo) GWT.create(Foo.class); 32 www.ExigenServices.com
  33. 33. Deferred bindingGoal - send exactly the right code to client, depending on • User‟s browser • Locale • Mode (debug / production) • Network characteristics • etc. 33 www.ExigenServices.com
  34. 34. Deferred bindingGoal - send exactly the right code to client, depending on • User‟s browser • Locale • Mode (debug / production) • Network characteristics • etc.Facilities • Make fewer Http Requests • Eliminate dead code • Avoid polymorphic dispatch • Avoid synchronous XHR • Avoid spaghetti code (if-s in JS-code) • Try to use only inline code “elem.innerText = str” • etc. 34 www.ExigenServices.com
  35. 35. Permutations 35 www.ExigenServices.com
  36. 36. PermutationsExample: Input: DOMImpl dom = GWT.create(DOMImpl.class); 36 www.ExigenServices.com
  37. 37. PermutationsExample: Input: DOMImpl dom = GWT.create(DOMImpl.class); Implementations: DOMImplInternetExplorer DOMImplMozilla DOMImplOpera Property: user_agent = “IE” 37 www.ExigenServices.com
  38. 38. PermutationsExample: Input: DOMImpl dom = GWT.create(DOMImpl.class); Implementations: DOMImplInternetExplorer DOMImplMozilla DOMImplOpera Property: user_agent = “IE” Output: DOM dom = new DOMImplInternetExplorer(); 38 www.ExigenServices.com
  39. 39. PermutationsExample: 39 www.ExigenServices.com
  40. 40. Perfect Caching 40 www.ExigenServices.com
  41. 41. Perfect CachingBootstrap selection script loads Javascript „executable‟ containing correct set of bindingsfor given request. <module>.nocache.js - small <md5>.cache.js – big 41 www.ExigenServices.com
  42. 42. Perfect CachingBootstrap selection script loads Javascript „executable‟ containing correct set of bindingsfor given request. <module>.nocache.js - small <md5>.cache.js – bigApache HTTP server .htaccess configuration: <Files *.nocache.*> ExpiresActive on ExpiresDefault "now" Header merge Cache-Control "public, max-age=0, must-revalidate" </Files> <Files *.cache.*> ExpiresActive on ExpiresDefault "now plus 1 year" </Files> 42 www.ExigenServices.com
  43. 43. Monilithic Compilation 43 www.ExigenServices.com
  44. 44. Monilithic Compilation“The fastest code that which does not run”, --Joel Webber, GWT co-creator 44 www.ExigenServices.com
  45. 45. Monilithic Compilation“The fastest code that which does not run”, --Joel Webber, GWT co-creatorExample: Shape shape = new Square(4); 1) int area = shape.getArea(); 45 www.ExigenServices.com
  46. 46. Monilithic Compilation“The fastest code that which does not run”, --Joel Webber, GWT co-creatorExample: Shape shape = new Square(4); 1) int area = shape.getArea(); 2) int area = Shape_getArea(shape); 46 www.ExigenServices.com
  47. 47. Monilithic Compilation“The fastest code that which does not run”, --Joel Webber, GWT co-creatorExample: Shape shape = new Square(4); 1) int area = shape.getArea(); 2) int area = Shape_getArea(shape); 3) int area = shape.len * shape.len; 47 www.ExigenServices.com
  48. 48. Monilithic Compilation“The fastest code that which does not run”, --Joel Webber, GWT co-creatorExample: Shape shape = new Square(4); 1) int area = shape.getArea(); 2) int area = Shape_getArea(shape); 3) int area = shape.len * shape.len; 4) int area = 16; 48 www.ExigenServices.com
  49. 49. Client Bundle 49 www.ExigenServices.com
  50. 50. Client BundleProblem:1) HTTP 1.1 limit: 2 outgoing connections per domain/port 50 www.ExigenServices.com
  51. 51. Client BundleProblem:1) HTTP 1.1 limit: 2 outgoing connections per domain/port2) HTTP request has to be sent to the server for each resource (e.g. image) 51 www.ExigenServices.com
  52. 52. Client BundleProblem:1) HTTP 1.1 limit: 2 outgoing connections per domain/port2) HTTP request has to be sent to the server for each resource (e.g. image)3) Request for status 304 ("Not Modified") 52 www.ExigenServices.com
  53. 53. Client BundleSolution: interface Resources extends ClientBundle { @Source("logo.png") ImageResource logo(); @Source("arrow.png") @ImageOptions(flipRtl = true) ImageResource pointer(); } 53 www.ExigenServices.com
  54. 54. Client BundleSolution: interface Resources extends ClientBundle { @Source("logo.png") ImageResource logo(); @Source("arrow.png") @ImageOptions(flipRtl = true) ImageResource pointer(); } Resources resources = GWT.create(Resources.class); Image img = new Image(resources.logo()); 54 www.ExigenServices.com
  55. 55. Code Splitting public class Hello implements EntryPoint { public void onModuleLoad() { Button b = new Button("Click me", new ClickHandler() { public void onClick(ClickEvent event) { Window.alert("Hello, AJAX"); } }); RootPanel.get().add(b); } } 55 www.ExigenServices.com
  56. 56. Code Splitting public class Hello implements EntryPoint { public void onModuleLoad() { Button b = new Button("Click me", new ClickHandler() { public void onClick(ClickEvent event) { Window.alert("Hello, AJAX"); } }); RootPanel.get().add(b); } } 56 www.ExigenServices.com
  57. 57. Code Splitting public class Hello implements EntryPoint { public void onModuleLoad() { Button b = new Button("Click me", new ClickHandler() { public void onClick(ClickEvent event) { GWT.runAsync(new RunAsyncCallback() { public void onFailure(Throwable caught) { Window.alert("Code download failed"); } public void onSuccess() { Window.alert("Hello, AJAX"); } }); } }); RootPanel.get().add(b); } } 57 www.ExigenServices.com
  58. 58. GWT – it is a set of tools…N+1) UiBinderN+2) CellWidgetsN+3) Activities & Places… 58 www.ExigenServices.com
  59. 59. UiBinderIntroduced in 2.0 (2010)GWT app is a Web PageWeb page is HTML+CSSThe best way to do is the easy one:1) build your apps as HTML pages with GWT widgets sprinkledthroughout them2) do it more efficient (uses innerHTML, not DOM API calls) 59 www.ExigenServices.com
  60. 60. UiBinder1) Widgets have overhead2) Use UiBinder to replace Widgets with HTML 2.1) when don‟t need to respond to events 2.2) or when events can be caught by a parent Widget 2.3) caution: can‟t add Widgets to HTML elements, so leaf Widgets require a parent Widget hierarchy to the top 60 www.ExigenServices.com
  61. 61. UiBinder – “IS”1) helps productivity and maintainability2) collaboration with UI designers on theis language3) mocking;4) separation UI from its behavior5) compile-time checking6) direct support for internationalization7) encourages more efficient use of browser‟s power 61 www.ExigenServices.com
  62. 62. UiBinder – “IS NOT”1) it is not a renderer2) there are no loops, no conditionals, no if statements in itsmarkup, and only a very limited expression language3) UiBinder allows you to lay out your user interface. Its still up tothe widgets or other controllers themselves to convert rows of datainto rows of HTML 62 www.ExigenServices.com
  63. 63. UiBinder – “Hello” example1) Template (Hello.ui.xml) 1.1) For this example – it is pure HTML 1.2) Associate fields: ui:field=name2) Owner class (Hello.java) 2.1) Declare root (DivElement) and owner (Hello)interface MyUiBinder extends UiBinder<DivElement, Hello> 2.2) Use deffered binding to instanciate it:MyUiBinder uiBinder = GWT.create(MyUiBinder.class) 2.3) Create Element: uiBinder.createAndBindUi(this);(todo: show generated code) 63 www.ExigenServices.com
  64. 64. UiBinder – “Hello” exampleNamespacesxmlns:s=“urn:import:com.nimbleteam.gwt.client.mvp.view.uibinder”<s:HelloWidget/>Method accessEvery one of the widgets methods that follow JavaBean-styleconventions for setting a property can be used this way.1) public void setName(String name) public void setValues(String values)2) <s:HelloWidget name="default text" values="Andrew,Nikita,Yura"/> 64 www.ExigenServices.com
  65. 65. UiBinder – PanelsNew LayoutPanels more efficient1) Layout mostly delegated to browser2) Less use of tables (except TabLayoutPanel)3) Any panel (or anything that implements HasWidgets) can be used in a template file, and can have other panels inside of it.4) Can contain only widgets (the restriction may be removed at 2.4+, workaround: enclose in HTML or HTMLPanel widgets) 65 www.ExigenServices.com
  66. 66. UiBinder – Panels<g:DockLayoutPanel unit=EM> <g:north size=5> <g:Label>Top</g:Label> </g:north> <g:center> <g:Label>Body</g:Label> </g:center> <g:west size=10> <g:HTML> <ul> <li>Sidebar</li> <li>Sidebar</li> </ul> </g:HTML> </g:west></g:DockLayoutPanel> 66 www.ExigenServices.com
  67. 67. UiBinder – Event HandlingOld style: titleListBox.addChangeHandler( new ChangeHandler() { public void onChange( ChangeEvent event ) { Window.alert( "Old style" ); } } );New style: @UiHandler( "titleListBox" ) void titleListBoxValueChanged(ChangeEvent e) { Window.alert( "New style" ); }(you can only use @UiHandler with events thrown by widget objects, not DOM elements) 67 www.ExigenServices.com
  68. 68. UiBinder – ClientBundleIt is a way to minimize trips for images, CSSTakes all other stuff that makes up your app and inject it into thecode: Images CSS Text or anyhing you needFewer roundtripsBuilt in image spritingName spaces (no global name issues)Utilize CSS as engineering tool 68 www.ExigenServices.com
  69. 69. UiBinder – ResourcesCssResource (see example)• ImageResource Options: 1) separate cacheable files 2) inline base64-encoded data 3) monolith image (will be sprited)• TextResource/ExternalTextResource• DataResource (non-text, with provided MIME type) 69 www.ExigenServices.com
  70. 70. UiBinder – I18nBefore: <div>Hello, world.</div>After: <div><ui:msg description="Greeting">Hello</ui:msg></div>Properties: ui:generateFormat, ui:generateKeys, ui:generateLocalesResult: # Description: Greeting 8B1A9953C4611296A827ABF8C47804D7=Bonjour*Some widgets are i18n-ed out of the box (DatePicker) 70 www.ExigenServices.com
  71. 71. CellWidgetsObjective: In general, all widgets are slow (too much JavaScript) Old layout widgets are too static 71 www.ExigenServices.com
  72. 72. CellWidgets - FeaturesHigh-performance and lightweight (flyweight pattern)Renders interface as an HTML string (uses innerHTML, not DOM)Can handle events (fewer events == faster)Editable (Text, Number, Date-picker, etc.)Dataproviders support (sync and async) 72 www.ExigenServices.com
  73. 73. CellWidgets - ShowcaseCellList, CellTable, DataGrid, CellTree, CellBrowser, …CellTable Features: Can render large amounts of data efficiently Pagination Multiple selection Sorting Keyboard navigation Editable cells 73 www.ExigenServices.com
  74. 74. Activities&PlacesBrowser‟s history management approachNatural place for using code-splitting for UI optimization 74 www.ExigenServices.com
  75. 75. Activities&Places - PlaceRepresents particular state that can be bookmarkedProvides a way for bidirectional serialization of URL(PlaceTokenizer)Managed by PlaceController (listens eventBus) 75 www.ExigenServices.com
  76. 76. Activities&Places - PlaceHistoryMapperDeclares all the Places available in applicationGWT compiler will link PlaceHistoryHandler with PlaceTokenizer-sExample: SamplePlaceHistoryMapper 76 www.ExigenServices.com
  77. 77. Activities&Places – Use case 1: goTo()Program calls to change place -> new place created andremembers it‟s token 77 www.ExigenServices.com
  78. 78. Activities&Places – Use case 2: history eventUser navigates to some URL -> Controller changes the place 78 www.ExigenServices.com
  79. 79. Activities&Places - Activity• Represents something the user is doing• Contains no Widgets or UI code• As some level it can be a “Presenter” in MVP pattern• Typical responsibility: • restore state ("wake up") • perform initialization ("set up") • load a corresponding UI ("show up")• Started and stopped by an ActivityManager (each per container)• May warn user before leaving 79 www.ExigenServices.com
  80. 80. Activities&Places - ActivityMapperMaps each Place to its corresponding Activity"if (place instanceof SomePlace) return new SomeActivity(place)"Use case 1 – Provides brand new Activity for each callUse case 2 – Refreshes previous (singleton) activity 80 www.ExigenServices.com
  81. 81. Activities&Places - View • Part of the UI associated with an Activity • Is a Widget (e.g. implements IsWidget interface) • Is a View in MVP pattern • Has 1 interface and >=1 implementations • Support for different views (e.g. desktop/mobile) • Easy JUnit testing (mocking) • Can be reused (recommended) 81 www.ExigenServices.com
  82. 82. Activities&Places - Design 82 www.ExigenServices.com
  83. 83. SourcesGoogleIO videos:http://www.youtube.com/watch?v=g2XclEOJdIc&feature=player_embeddedhttp://www.youtube.com/watch?v=0F5zc1UAt2Y&cc=1#t=554shttp://www.youtube.com/watch?v=qT6ZsQBM7kY&cc=1#t=2084shttp://www.youtube.com/watch?v=oiNfPjV72lg&feature=relatedDocuments:http://code.google.com/webtoolkit/doc/latest/DevGuideUi.htmlhttp://code.google.com/webtoolkit/doc/latest/DevGuideUiBinder.htmlhttp://code.google.com/webtoolkit/doc/latest/DevGuideUiCellWidgets.htmlhttp://code.google.com/webtoolkit/doc/latest/DevGuideMvpActivitiesAndPlaces.html 83 www.ExigenServices.com
  84. 84. To be continued… http://www.exigenservices.by/webinars 84 www.ExigenServices.com

×