• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Gwt 2,3 Deep dive
 

Gwt 2,3 Deep dive

on

  • 1,420 views

P

P

Statistics

Views

Total Views
1,420
Views on SlideShare
1,417
Embed Views
3

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 3

http://www.docshut.com 2
http://www.slashdocs.com 1

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Gwt 2,3 Deep dive Gwt 2,3 Deep dive Presentation Transcript

    • GWT Deep DivePart 1: UiBinder, CellWidgets, Activities&Places Andrey Mormysh Java Developer a.mormysh@gmail.comNovember 02, 2011 www.ExigenServices.com
    • 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 5 www.ExigenServices.com
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • FeaturesCross-browserObject-oriented programmingDev-modeGUI debuggingWigets and declarative UIClient BundleSimple localizationCode optimizationCode splittingRPC, JSON/XMLUI DesignerHTML5… 12 www.ExigenServices.com
    • FeaturesCross-browserObject-oriented programmingDev-modeGUI debuggingWigets and declarative UIClient BundleSimple localizationCode optimizationCode splittingRPC, JSON/XMLUI DesignerHTML5… 13 www.ExigenServices.com
    • FeaturesCross-browserObject-oriented programmingDev-modeGUI debuggingWigets and declarative UIClient BundleSimple localizationCode optimizationCode splittingRPC, JSON/XMLUI DesignerHTML5… 14 www.ExigenServices.com
    • FeaturesCross-browserObject-oriented programmingDev-modeGUI debuggingWigets and declarative UIClient BundleSimple localizationCode optimizationCode splittingRPC, JSON/XMLUI DesignerHTML5… 15 www.ExigenServices.com
    • FeaturesCross-browserObject-oriented programmingDev-modeGUI debuggingWigets and declarative UIClient BundleSimple localizationCode optimizationCode splittingRPC, JSON/XMLUI DesignerHTML5… 16 www.ExigenServices.com
    • FeaturesCross-browserObject-oriented programmingDev-modeGUI debuggingWigets and declarative UIClient BundleSimple localizationCode optimizationCode splittingRPC, JSON/XMLUI DesignerHTML5… 17 www.ExigenServices.com
    • FeaturesCross-browserObject-oriented programmingDev-modeGUI debuggingWigets and declarative UIClient BundleSimple localizationCode optimizationCode splittingRPC, JSON/XMLUI DesignerHTML5… 18 www.ExigenServices.com
    • FeaturesCross-browserObject-oriented programmingDev-modeGUI debuggingWigets and declarative UIClient BundleSimple localizationCode optimizationCode splittingRPC, JSON/XMLUI DesignerHTML5… 19 www.ExigenServices.com
    • FeaturesCross-browserObject-oriented programmingDev-modeGUI debuggingWigets and declarative UIClient BundleSimple localizationCode optimizationCode splittingRPC, JSON/XMLUI DesignerHTML5… 20 www.ExigenServices.com
    • FeaturesCross-browserObject-oriented programmingDev-modeGUI debuggingWigets and declarative UIClient BundleSimple localizationCode optimizationCode splittingRPC, JSON/XMLUI DesignerHTML5… 21 www.ExigenServices.com
    • FeaturesCross-browserObject-oriented programmingDev-modeGUI debuggingWigets and declarative UIClient BundleSimple localizationCode optimizationCode splittingRPC, JSON/XMLUI DesignerHTML5… 22 www.ExigenServices.com
    • FeaturesCross-browserObject-oriented programmingDev-modeGUI debuggingWigets and declarative UIClient BundleSimple localizationCode optimizationCode splittingRPC, JSON/XMLUI DesignerHTML5… 23 www.ExigenServices.com
    • ? 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 www.ExigenServices.com
    • 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
    • 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
    • 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
    • Deferred bindingIt is a pluggable compile-time type substitution and code generationmechanism. 31 www.ExigenServices.com
    • 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
    • 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
    • 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
    • Permutations 35 www.ExigenServices.com
    • PermutationsExample: Input: DOMImpl dom = GWT.create(DOMImpl.class); 36 www.ExigenServices.com
    • PermutationsExample: Input: DOMImpl dom = GWT.create(DOMImpl.class); Implementations: DOMImplInternetExplorer DOMImplMozilla DOMImplOpera Property: user_agent = “IE” 37 www.ExigenServices.com
    • 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
    • PermutationsExample: 39 www.ExigenServices.com
    • Perfect Caching 40 www.ExigenServices.com
    • 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
    • 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
    • Monilithic Compilation 43 www.ExigenServices.com
    • Monilithic Compilation“The fastest code that which does not run”, --Joel Webber, GWT co-creator 44 www.ExigenServices.com
    • 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
    • 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
    • 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
    • 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
    • Client Bundle 49 www.ExigenServices.com
    • Client BundleProblem:1) HTTP 1.1 limit: 2 outgoing connections per domain/port 50 www.ExigenServices.com
    • 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
    • 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
    • Client BundleSolution: interface Resources extends ClientBundle { @Source("logo.png") ImageResource logo(); @Source("arrow.png") @ImageOptions(flipRtl = true) ImageResource pointer(); } 53 www.ExigenServices.com
    • 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
    • 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
    • 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
    • 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
    • GWT – it is a set of tools…N+1) UiBinderN+2) CellWidgetsN+3) Activities & Places… 58 www.ExigenServices.com
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • CellWidgetsObjective: In general, all widgets are slow (too much JavaScript) Old layout widgets are too static 71 www.ExigenServices.com
    • 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
    • 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
    • Activities&PlacesBrowser‟s history management approachNatural place for using code-splitting for UI optimization 74 www.ExigenServices.com
    • 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
    • Activities&Places - PlaceHistoryMapperDeclares all the Places available in applicationGWT compiler will link PlaceHistoryHandler with PlaceTokenizer-sExample: SamplePlaceHistoryMapper 76 www.ExigenServices.com
    • Activities&Places – Use case 1: goTo()Program calls to change place -> new place created andremembers it‟s token 77 www.ExigenServices.com
    • Activities&Places – Use case 2: history eventUser navigates to some URL -> Controller changes the place 78 www.ExigenServices.com
    • 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
    • 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
    • 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
    • Activities&Places - Design 82 www.ExigenServices.com
    • 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
    • To be continued… http://www.exigenservices.by/webinars 84 www.ExigenServices.com