GWT + mvp4g

GWT + mvp4g Lecture from ADDConf '2011

Transcript

1. GWT + mvp4g Anthony Kotenko, iPark ventures™ 2011 © web-development using
2. This presentation was specially prepared for Application Developer Days 2011 Saint-Petersburg, Russia
3. goo.gl/DKYzc Slides — there [ PDF, ~2MB ]
4. Anthony Kotenko 6 years in Java EE development 6 years in UI development Sex: male
5. Anthony Kotenko 6 years in Java EE development 6 years in UI development Sex: male http://shamansir.madfire.net http://zokotuhaFly.habrahabr.ru http://twitter.com/shaman_sir http://profiles.google.com/shaman.sir
7. Schedule
8. 1. Introduction. A brief history and examples of GWT usage 2. A brief introduction to concepts: - MVP / Reverse MVP - EventBus - Dependency Injection 3. Description of mvp4g framework - differences in RMVP implementation from GWT - difference in implementation of EventBus - multimoduleness - HistoryConverter conception - advantages / disadvantages
9. 6. Working with non-Java Server-Side-API (versus RPC-services) - making call chains - callback vs. GwtEvent - advantages / disadvantages 4. Components in GWT - UiBinder, standard components - custom widgets development 7. i18n in GWT 5. Our layouting system development 8. Conclusion. Links to the examples
10. Your questions may (and must be) asked during the lecture: to let reporter know about you having question regarding the theme or not, just raise your hand (any of them). Like so: Discussion is important I have a question!
12. 1. Briefly 'bout GWT
13. GWT code.google.com/webtoolkit/ Google Web Toolkit /ˈɡwɪt/
14. GWT /ˈɡwɪt/
15. /ˈɡwɪt/
16. Used in these projects: Google Wave wave.google.com Google Checkout checkout.google.com Google Moderator google.com/moderator Whirled whirled.com Lombardi Blueprint blueprint.lombardi.com ContactOffice beta.contactoffice.com
17. Used in these projects: GoGrid gogrid.com Curriki curriki.org OpenKM openkm.com Kdice kdice.com SeeMap seemap.ru Одноклассники odnoklassniki.ru
18. A box of useful tools
19. A box of useful tools The most complete for web-developer
20. widgets http://old.ongwt.com/public/WindowsLiveWriter_GWTMosaicnicewidgetlibrary_D777_image_2.png
21. widgets optimization http://radar.oreilly.com/200912081729.jpg
22. widgets cross-browserly! optimization http://2.bp.blogspot.com/_VzXmgKXrn6Y/TKB2a3eZTBI/AAAAAAAAAaQ/mn7NmabwO8U/s1600/browsers%5Btsksoft.blogspot.com%5D.jpg
23. widgets cross-browserly! on-the-fly development optimization http://lh4.ggpht.com/_a0imbbK4r5U/Sxwd1oVpXiI/AAAAAAAAAjc/gsRkQUn9kZI/gwt-dev-mode.png
24. widgets cross-browserly! on-the-fly development optimization OOP benefits
25. widgets cross-browserly! on-the-fly development optimization OOP benefits debug http://www.ibm.com/developerworks/library/j-ajax4/eclipse-debug.jpg
26. widgets cross-browserly! on-the-fly development optimization OOP benefits debug RPC API/DB
27. widgets cross-browserly! simple i18n on-the-fly development optimization OOP benefits debug RPC http://test.ical.ly/wp-content/uploads/2010/04/i18n.png
28. widgets cross-browserly! simple i18n on-the-fly development optimization OOP benefits Code Splitting debug RPC
29. widgets cross-browserly! simple i18n on-the-fly development optimization OOP benefits Code Splitting debug RPC
30. http://www.safetylca.org/images/toolbox.jpg
31. http://blog.ericlamb.net/wp-content/uploads/2009/08/toolbox.jpg http://www.safetylca.org/images/toolbox.jpg
32. GWT is a box of useful tools /ˈɡwɪt/
34. History
35. Version 1.0 was released in 2006
36. Version 1.0 was released in 2006 Version 1.6 Google Eclipse Plugin Project structure matches Web Application specification
37. Version 2.0 - Development Mode - Code Splitting - Declarative UI - Client Bundle
38. Version 2.1 MVP-conception RequestFactory / Editors
39. Version 2.1 MVP-conception RequestFactory / Editors Version 2.2 UI Designer HTML5 Canvas support only Java 1.6 was left
40. Quake 2 in browser https://y2mzuw.blu.livefilestore.com/y1m9Pc7Xi6qtMdKU_hGCv7VZrEKiIZTYqDIC5laL9A0LxracK6AN8EAet90MRtWlBJISphNp_Y8QCxpb0p9v1y lTCdwATCweUs9496DC14_ijBjhnpj2oRWme9B1SC2C0t9HJ1wX8RTsVQAhyDYCsqfeg/quake-html5-04-02-2010.jpg quake2-gwt-port.appspot.com
41. Quake 2 in browser quake2-gwt-port.appspot.com
42. Trendy Youth Modern
43. GWT is actively developing project, however it already contains everything you need /ˈɡwɪt/
45. 2. GWT Conceptions
46. almaer.com/blog/rotating-java-and-javascript-on-the-server
47. Any GWT-project starts from entry point EntryPoint
48. • Java → JavaScript, JSNI • Development Mode • Code Splitting • <Module>.gwt.xml • MVC, MVP, RMVP, EventBus • Deferred Binding • Dependency Injection • Remote Service • JUnit • Disadvantages and remarks
49. JavaScript Logo is from marakana.com
50. JSNI JavaScript Native Interface
51. JSNI public native static void <functionName>(<parameters>) /*-{ . . . @<path.to.the.package>.<ClassName>::<methodName>( /L<param-type>;/L<param-type>;...)(<arguments>); . . . }-*/;
52. JSNI public native static void getJson(int requestId, String url, StockWatcher handler) /*-{ var callback = "callback" + requestId; var script = document.createElement("script"); script.setAttribute("src", url+callback); script.setAttribute("type", "text/javascript"); window[callback] = function(jsonObj) { handler.@com.google.gwt.sample.stockwatcher .client.StockWatcher::handleJsonResponse( Lcom/google/gwt/core/client/JavaScriptObject;)(jsonObj); window[callback + "done"] = true; } setTimeout(function() { if (!window[callback + "done"]) { handler.@com.google.gwt.sample.stockwatcher .client.StockWatcher::handleJsonResponse( Lcom/google/gwt/core/client/JavaScriptObject;)(null); } document.body.removeChild(script); delete window[callback]; delete window[callback + "done"]; }, 1000); document.body.appendChild(script); }-*/;
53. JSNI You can wrap native JavaScript widgets with JSNI. For example, Google Maps or any WYSIWYG-editor
54. JSNI WYSIWYG-widget, written in Closure and integrated with the help of JSNI Google Maps widget, integrated with the help of JSNI Flash-object using JavaScript-callbacks, which are called through JSNI
55. You can use JSNI to make third-party components written in JavaScript become GWT-widgets
57. Development Mode ♥
58. Development Mode http://lc:8080/ui/?gwt.codesvr=lc:9997#!job/start ♥
59. Development Mode http://lc:8080/ui/?gwt.codesvr=lc:9997#!job/start (but not for Opera) the plugin for your lovely browser the plugin for your lovely IDE ♥
60. Development Mode http://lc:8080/ui/?gwt.codesvr=lc:9997#!job/start http://lh4.ggpht.com/_a0imbbK4r5U/Sxwd1oVpXiI/AAAAAAAAAjc/gsRkQUn9kZI/gwt-dev-mode.png
61. Development Mode http://lc:8080/ui/?gwt.codesvr=lc:9997#!job/start http://lh4.ggpht.com/_a0imbbK4r5U/Sxwd1oVpXiI/AAAAAAAAAjc/gsRkQUn9kZI/gwt-dev-mode.png
62. Development Mode helps in debugging your project: when you change your Java-code just press Ctrl+F5 in your browser — and your changes will come into force! Mrrwah!
64. Code Splitting when the neccessary code was loaded
65. Code Splitting Spell isoid createAsync(final MClient client) { GWT.runAsync(...) public void onFailure(Throwable err) { . . . } public void onSuccess() { if (instance == null) { . . . instance = new Module(); . . . client.onSuccess(instance); } }); } when the neccessary code was loaded
66. Code Splitting Spell isSp createAsync(final MClient client) { GWT.runAsync(new RunAsyncCallback() { public void onFailure(Throwable err) { . . . } public void onSuccess() { if (instance == null) { . . . instance = new Module(); . . . client.onSuccess(instance); } }); } when the neccessary code was loaded
67. Code Splitting public static void createAsync(final MClient client) { GWT.runAsync(new RunAsyncCallback() { public void onFailure(Throwable err) { client.onUnavailable(); } public void onSuccess() { if (instance == null) { instance = new Module(); } client.onSuccess(instance); } }); } when the neccessary code was loaded
68. Code Splitting lets you specify separate parts of your project to load: so you can split your project in large modules — and your users will feel themselves happy! Brrlyawrr!
70. <Module>.gwt.xml
71. <Module>.gwt.xml ⁕ Components a list of code components you use
72. <Module>.gwt.xml ⁕ Components a list of code components you use ⁕ Browsers a list of browsers to be a target of project compilation
73. <Module>.gwt.xml ⁕ Components a list of code components you use ⁕ Browsers a list of browsers to be a target of project compilation ⁕ Locales a list of locales supported in your project
74. <Module>.gwt.xml ⁕ Components a list of code components you use ⁕ Browsers a list of browsers to be a target of project compilation ⁕ Locales a list of locales supported in your project ⁕ Debug turning debug information output on/off
75. <Module>.gwt.xml ⁕ Components <inherits name="com.google.gwt.user.User"/> ⁕ Browsers ⁕ Locales ⁕ Debug
76. <Module>.gwt.xml ⁕ Components <inherits name="com.google.gwt.user.User"/> ⁕ Browsers <set-property name="user.agent" value="ie6,gecko1_8,safari" /> ⁕ Locales ⁕ Debug
77. <Module>.gwt.xml ⁕ Components <inherits name="com.google.gwt.user.User"/> ⁕ Browsers <set-property name="user.agent" value="ie6,gecko1_8,safari" /> ⁕ Locales <extend-property name="locale" values="fr_CA,de" /> <set-property-fallback name="locale" value="fr_CA" /> ⁕ Debug
78. <Module>.gwt.xml ⁕ Components <inherits name="com.google.gwt.user.User"/> ⁕ Browsers <set-property name="user.agent" value="ie6,gecko1_8,safari" /> ⁕ Locales <extend-property name="locale" values="fr_CA,de" /> <set-property-fallback name="locale" value="fr_CA" /> ⁕ Debug [<Module>Debug.gwt.xml]
79. <Module>.gwt.xml ⁕ Components <inherits name="com.google.gwt.user.User"/> ⁕ Browsers <set-property name="user.agent" value="ie6,gecko1_8,safari" /> ⁕ Locales <extend-property name="locale" values="fr_CA,de" /> <set-property-fallback name="locale" value="fr_CA" /> ⁕ Debug [<Module>Debug.gwt.xml] <inherits name="com.example.MainModule" /> <set-property name="log_level" value="DEBUG" />
80. <Module>.gwt.xml ⁕ Components <inherits name="com.google.gwt.user.User" /> ⁕ Browsers <set-property name="user.agent" value="ie6,gecko1_8,safari" /> ⁕ Locales <extend-property name="locale" values="fr_CA,de" /> <set-property-fallback name="locale" value="fr_CA" /> ⁕ Debug [<Module>Debug.gwt.xml] <inherits name="com.example.MainModule" /> <set-property name="log_level" value="DEBUG" />
81. .gwt.xml file — is almost the same thing as web.xml file for web application: here lies all of the project configuration
83. M V P R
84. Model View Controller
85. Model View Controller API/DB
86. Model View Controller calls
87. Model View Presenter
88. Model View Presenter events update
89. Model View Presenter Reverse
90. Model View Presenter Reverse
91. Presenter Event Bus
92. Presenter Event Bus Pre er
93. P EB P P P P P P
94. Hmmm... To be honest, seems I did not understand the difference between all those mah-fah-am-wee-pee...
95. geekswithblogs.net/kobush/archive/2006/01/09/65305.aspx Difference between MVC and MVP
96. geekswithblogs.net/kobush/archive/2006/01/09/65305.aspx The article about MVC/MVP difference
97. tv.jetbrains.net/videocontent/gwt-event-bus-basics The video with the example of EventBus in work
98. tv.jetbrains.net/videocontent/gwt-event-bus-basics The video with the example of EventBus in work
99. EventBus is the central communication channel
101. Deferred Binding
102. Deferred Binding In response to the lack of Reflection
103. Deferred Binding Dynamic implementation of any interface (and just in case if it is actually required) In response to the lack of Reflection
104. Deferred Binding GWT.create(....class) spell Dynamic implementation of any interface (and just in case if it is actually required) In response to the lack of Reflection
105. Deferred Binding GWT.create(....class) spell Dynamic implementation of any interface (and just in case if it is actually required) CompileTime-binding In response to the lack of Reflection
106. Deferred Binding GWT.create(....class) spell Dynamic implementation of any interface (and just in case if is actually required) CompileTime-binding In response to the lack of Reflection
107. Deferred Binding PopupImpl: public void setVisible(boolean visible) { // ... common code for all implementations of PopupPanel ... // If the PopupImpl creates an iframe shim, it's also // necessary to hide it as well. impl.setVisible(getElement(), visible); }
108. Deferred Binding PopupImpl: public void setVisible(boolean visible) { // ... common code for all implementations of PopupPanel ... // If the PopupImpl creates an iframe shim, it's also // necessary to hide it as well. impl.setVisible(getElement(), visible); } PopupImplIE6: public native void setVisible(Element popup, boolean visible) /*-{ if (popup.__frame) { popup.__frame.style.visibility = visible ? 'visible' : 'hidden'; } }-*/;
109. Deferred Binding <replace-with class="com.google.gwt...PopupImplIE6"> <when-type-is class="com.google.gwt...PopupImpl" /> <any> <when-property-is name="user.agent" value="ie6" /> <when-property-is name="user.agent" value="ie6_1" /> </any> </replace-with>
110. Deferred Binding <replace-with class="com.google.gwt...PopupImplIE6"> <when-type-is class="com.google.gwt...PopupImpl" /> <any> <when-property-is name="user.agent" value="ie6" /> <when-property-is name="user.agent" value="ie6_1" /> </any> </replace-with> private static final PopupImpl impl = GWT.create(PopupImpl.class);
111. www.docstoc.com/docs/53396874/Deferred-Binding-The-Magic-of-GWT Slides on Deferred Binding
112. www.docstoc.com/docs/53396874/Deferred-Binding-The-Magic-of-GWT Slides on Deferred Binding
113. Deferred Binding is a tool to create cross-browser and translingual implementations. Namely for techniques that will differ between contexts of project usage.
115. ★ Attention ★ Attention!
116. Dependency Injection
117. Dependency Injection Using GWT INjection / Guice frameworks
118. Dependency Injection Binding instances to interfaces at one point (thus we achieve separation of behavior from implementing solution) Using GWT INjection / Guice frameworks
119. Dependency Injection Lets you forget about XML-settings and factories Binding instances to interfaces at one point (thus we achieve separation of behavior from implementing solution) Using GWT INjection / Guice frameworks
120. Dependency Injection Lets you forget about XML-settings and factories Binding instances to interfaces at one point (thus we achieve separation of behavior from implementing solution) Runtime-binding Using GWT INjection / Guice frameworks
121. Dependency Injection Lets you forget about XML-settings and factories Binding instances to interfaces at one point (thus we achieve separation of behavior from implementing solution) Runtime-binding Using GWT INjection / Guice frameworks
122. Dependency Injection class MyModule extends AbstractGinModule { @Override protected void configure() { bind(Something.class).toProvider(SomethingProvider.class); bind(Any.class).in(Singleton.class); bind(Foo.class).to(SomeFooImpl.class); } } class Bar { @Inject private Any any; private final Something something; private final Foo foo; @Inject public Bar(Something something, Foo foo) { } }
123. Dependency Injection @GinModules(MyModule.class) interface class MyGinjector extends Ginjector { public Something getSomething(); public Foo getFoo(); }
124. code.google.com/p/google-guice/wiki/Motivation?tm=6 Guice wiki-pages
125. Dependency Injection lets you easily manage your logical implementations. Even when your project is running. For example, you can switch database drivers or service implementations. These are the things you've done using application-context.xml in Spring, but much better. Annotations are wonderrrful!
127. Remote Service
128. Remote Service public interface StringReverserService extends RemoteService { public String reverseString(String stringToReverse); }
129. Remote Service public interface StringReverserService extends RemoteService { public String reverseString(String stringToReverse); } public interface StringReverserServiceAsync { void reverseString(String stringToReverse, AsyncCallback async); }
130. Remote Service public interface StringReverserService extends RemoteService { public String reverseString(String stringToReverse); } public interface StringReverserServiceAsync { void reverseString(String stringToReverse, AsyncCallback async); } public class StringReverserServiceImpl extends RemoteServiceServlet implements StringReverserService { . . . }
131. Remote Service public interface StringReverserService extends RemoteService { public String reverseString(String stringToReverse); } public interface StringReverserServiceAsync { void reverseString(String stringToReverse, AsyncCallback async); } public class StringReverserServiceImpl extends RemoteServiceServlet implements StringReverserService { . . . } StringReverserServiceAsync reverserService = (StringReverserServiceAsync) GWT.create(StringReverserService.class);
132. developerlife.com/tutorials/?p=125 Tutorial on creating Remote Services
133. Remote Services is server-side API built using Java interfaces
135. JUnit
136. JUnit public class StockWatcherTest extends GWTTestCase { public String getModuleName() { return "com.google.gwt.sample.stockwatcher.StockWatcher"; } . . . }
137. GWT-code is easy to test because of JUnit support
139. Deficiencies and observations Anyway, you need good skills in JavaScript
140. Deficiencies and observations Anyway, you need good skills in JavaScript Especially when using external JS-libraries
141. Deficiencies and observations Anyway, you need good skills in JavaScript Especially when using external JS-libraries «Manual» makeup (HTMLPanel) becomes not sustainable and has no cross-browser compatibility
142. Deficiencies and observations Anyway, you need good skills in JavaScript Especially when using external JS-libraries «Manual» makeup (HTMLPanel) becomes not sustainable and has no cross-browser compatibility GWT is for web-applications, but not pretentious portals
143. Deficiencies and observations Anyway, you need good skills in JavaScript Especially when using external JS-libraries «Manual» makeup (HTMLPanel) becomes not sustainable and has no cross-browser compatibility GWT is for web-applications, but not pretentious portals You can write your own (or extend existing) components, but then thinking about cross-browser compatibility is your concern
144. Deficiencies and observations Anyway, you need good skills in JavaScript Especially when using external JS-libraries «Manual» makeup (HTMLPanel) becomes not sustainable and has no cross-browser compatibility GWT is for web-applications, but not pretentious portals You can write your own (or extend existing) components, but then thinking about cross-browser compatibility is your concern And you'll need to make a detailed lecture about GWT components system for your makeup men, by the way
145. Deficiencies and observations Anyway, you need good skills in JavaScript Especially when using external JS-libraries «Manual» makeup (HTMLPanel) becomes not sustainable and has no cross-browser compatibility GWT is for web-applications, but not pretentious portals You can write your own (or extend existing) components, but then thinking about cross-browser compatibility is your concern And you'll need to make a detailed lecture about GWT components system for your makeup men, by the way No guidance at non-Java Server-Side (Python & GAE, for example)
146. Deficiencies and observations Anyway, you need good skills in JavaScript Especially when using external JS-libraries «Manual» makeup (HTMLPanel) becomes not sustainable and has no cross-browser compatibility GWT is for web-applications, but not pretentious portals You can write your own (or extend existing) components, but then thinking about cross-browser compatibility is your concern And you'll need to make a detailed lecture about GWT components system for your makeup men, by the way No guidance at non-Java Server-Side (Python & GAE, for example) Well, let's buid it on top of RequestBuilder
147. Deficiencies and observations Anyway, you need good skills in JavaScript Especially when using external JS-libraries One JS-error crashes the whole application «Manual» makeup (HTMLPanel) becomes not sustainable and has no cross-browser compatibility GWT is for web-applications, but not pretentious portals You can write your own (or extend existing) components, but then thinking about cross-browser compatibility is your concern And you'll need to make a detailed lecture about GWT components system for your makeup men, by the way No guidance at non-Java Server-Side (Python & GAE, for example) Well, let's buid it on top of RequestBuilder
148. Deficiencies and observations Anyway, you need good skills in JavaScript Especially when using external JS-libraries One JS-error crashes the whole application However, we have GWT.setUncaughtExceptionHandler «Manual» makeup (HTMLPanel) becomes not sustainable and has no cross-browser compatibility GWT is for web-applications, but not pretentious portals You can write your own (or extend existing) components, but then thinking about cross-browser compatibility is your concern And you'll need to make a detailed lecture about GWT components system for your makeup men, by the way No guidance at non-Java Server-Side (Python & GAE, for example) Well, let's buid it on top of RequestBuilder
149. Deficiencies and observations Anyway, you need good skills in JavaScript Especially when using external JS-libraries One JS-error crashes the whole application However, we have GWT.setUncaughtExceptionHandler «Manual» makeup (HTMLPanel) becomes not sustainable and has no cross-browser compatibility GWT is for web-applications, but not pretentious portals You can write your own (or extend existing) components, but then thinking about cross-browser compatibility is your concern And you'll need to make a detailed lecture about GWT components system for your makeup men, by the way No guidance at non-Java Server-Side (Python & GAE, for example) Well, let's buid it on top of RequestBuilder JavaScript-errors provide little information
150. Deficiencies and observations Anyway, you need good skills in JavaScript Especially when using external JS-libraries One JS-error crashes the whole application However, we have GWT.setUncaughtExceptionHandler «Manual» makeup (HTMLPanel) becomes not sustainable and has no cross-browser compatibility GWT is for web-applications, but not pretentious portals You can write your own (or extend existing) components, but then thinking about cross-browser compatibility is your concern And you'll need to make a detailed lecture about GWT components system for your makeup men, by the way No guidance at non-Java Server-Side (Python & GAE, for example) Well, let's buid it on top of RequestBuilder JavaScript-errors provide little information Although, they are for sure much easier to understand when debug info is on
151. Deficiencies and observations Anyway, you need good skills in JavaScript Especially when using external JS-libraries One JS-error crashes the whole application However, we have GWT.setUncaughtExceptionHandler «Manual» makeup (HTMLPanel) becomes not sustainable and has no cross-browser compatibility GWT is for web-applications, but not pretentious portals You can write your own (or extend existing) components, but then thinking about cross-browser compatibility is your concern And you'll need to make a detailed lecture about GWT components system for your makeup men, by the way Development Mode works slower than real code: so you may encounter problems in events succession No guidance at non-Java Server-Side (Python & GAE, for example) Well, let's buid it on top of RequestBuilder JavaScript-errors provide little information Although, they are for sure much easier to understand when debug info is on
152. Deficiencies and observations Anyway, you need good skills in JavaScript Especially when using external JS-libraries One JS-error crashes the whole application However, we have GWT.setUncaughtExceptionHandler «Manual» makeup (HTMLPanel) becomes not sustainable and has no cross-browser compatibility GWT is for web-applications, but not pretentious portals You can write your own (or extend existing) components, but then thinking about cross-browser compatibility is your concern And you'll need to make a detailed lecture about GWT components system for your makeup men, by the way Development Mode works slower than real code: so you may encounter problems in events succession Нey, you say you've never debugged code using alerts?! No guidance at non-Java Server-Side (Python & GAE, for example) Well, let's buid it on top of RequestBuilder JavaScript-errors provide little information Although, they are for sure much easier to understand when debug info is on
153. Deficiencies and observations Anyway, you need good skills in JavaScript Especially when using external JS-libraries One JS-error crashes the whole application However, we have GWT.setUncaughtExceptionHandler «Manual» makeup (HTMLPanel) becomes not sustainable and has no cross-browser compatibility GWT is for web-applications, but not pretentious portals You can write your own (or extend existing) components, but then thinking about cross-browser compatibility is your concern And you'll need to make a detailed lecture about GWT components system for your makeup men, by the way Development Mode works slower than real code: so you may encounter problems in events succession Нey, you say you've never debugged code using alerts?! No guidance at non-Java Server-Side (Python & GAE, for example) Well, let's buid it on top of RequestBuilder JavaScript-errors provide little information Although, they are for sure much easier to understand when debug info is on Regular expressions are just a wrapper for JavaScript RegExp
154. Deficiencies and observations Anyway, you need good skills in JavaScript One JS-error crashes the whole application «Manual» makeup (HTMLPanel) becomes not sustainable and has no cross-browser compatibility Development Mode works slower than real code: so you may encounter problems in events succession No guidance at non-Java Server-Side (Python & GAE, for example) JavaScript-errors provide little information Regular expressions are just a wrapper for JavaScript RegExp
155. Deficiencies and observations Anyway, you need good skills in JavaScript Especially when using external JS-libraries One JS-error crashes the whole application However, we have GWT.setUncaughtExceptionHandler «Manual» makeup (HTMLPanel) becomes not sustainable and has no cross-browser compatibility GWT is for web-applications, but not pretentious portals You can write your own (or extend existing) components, but then thinking about cross-browser compatibility is your concern And you'll need to make a detailed lecture about GWT components system for your makeup men, by the way Development Mode works slower than real code: so you may encounter problems in events succession Нey, you say you've never debugged code using alerts?! No guidance at non-Java Server-Side (Python & GAE, for example) Well, let's buid it on top of RequestBuilder JavaScript-errors provide little information Although, they are for sure much easier to understand when debug info is on Regular expressions are just a wrapper for JavaScript RegExp
156. www.linux.org.ru/forum/talks/4497412 Here GWT drawbacks are discussed
157. Every reasoned weakness in GWT have a rational solution.
158. galak-sandbox.blogspot.com/2010/10/gwt.html Summary on GWT-code optimization
159. And I would ask for a beer now!
161. 3. mvp4g
163. code.google.com/p/mvp4g/ mvp4g framework web-page
164. • What helps? • Annotation system • RMVP realization • EventBus realization • URL, HistoryConverters, #! • Multimodularity • PlaceService • Remarks
165. mvp4g framework helps to
166. work with (R)MVP mvp4g framework helps to
167. work with (R)MVP organize multi-modular applications mvp4g framework helps to
168. work with (R)MVP organize multi-modular applications design and develop events buses mvp4g framework helps to
169. work with (R)MVP organize multi-modular applications design and develop events buses work with history (incl. hashbangs #!) mvp4g framework helps to
170. work with (R)MVP organize multi-modular applications design and develop events buses work with history (incl. hashbangs #!) ... also constantly being improved mvp4g framework helps to
171. work with (R)MVP organize multi-modular applications design and develop events buses work with history (incl. hashbangs #!) ... also constantly being improved mvp4g framework helps to
172. mvp4gshowcase.appspot.com mvp4g framework showcase
173. mvp4gshowcase.appspot.com mvp4g framework showcase
174. code.google.com/p/mvp4g/wiki/Mvp4g_vs_GWTP Comparison of code written with mvp4g or native GWT
175. code.google.com/p/mvp4g/wiki/Mvp4g_vs_GWTP Comparison of code written with mvp4g or native GWT
176. Pierre-Laurent Coirier plcoirier@gmail.com
177. Pierre-Laurent Coirier plcoirier@gmail.com (meet him at Google I/O '11)
178. The code you write using mvp4g framework is much simpler than GWT-code without its usage. It is achieved by Pierre correct use of annotations. Code is written by human. It is better to help him sometimes. Code is written by human. It is better to help him sometimes.
180. Annotations
181. Annotations @Debug @Event @EventHandler @Events @Filters @Forward @History @InitHistory @InjectService @NotFoundHistory @PlaceService @Presenter @Service @Start
182. Annotations There is Annotation Processor Factory (annotation validator that applies just when you edit the source code)
183. Annotations — the power of mvp4g! Annotations — the power of mvp4g!
185. RMVP
186. RMVP annotations @Debug @Event @EventHandler @Events @Filters @Forward @History @InitHistory @InjectService @NotFoundHistory @PlaceService @Presenter @Service @Start
187. RMVP presenter @Presenter(view=OneView.class) public class OnePresenter extends BasePresenter<IOneView, OneEventBus> { @Inject private ServiceAsync service; }
188. RMVP view @Presenter(view=OneView.class) public class OnePresenter extends BasePresenter<IOneView, OneEventBus> { @Inject private ServiceAsync service; } class OneView extends Composite implements IOneView { . . . }
189. RMVP reverse @Presenter(view=OneView.class) public class OnePresenter extends BasePresenter<IOneView, OneEventBus> { @Inject private ServiceAsync service; } class OneView extends Composite implements IOneView, ReverseViewInterface<OnePresenter> { . . . }
191. EventBus
192. EventBus annotations @Debug @Event @EventHandler @Events @Filters @Forward @History @InitHistory @InjectService @NotFoundHistory @PlaceService @Presenter @Service @Start
193. EventBus events @Events(startView = StartView.class) public interface OneEventBus extends EventBus { @Event public void fooEvent(...); @Event public void barEvent(...); }
194. EventBus handlers @Events(startView = StartView.class) public interface OneEventBus extends EventBus { @Event(handlers={FooPresenter.class, AcmePresenter.class}) public void fooEvent(...); @Event(handlers=BarPresenter.class) public void barEvent(...); } FooPresenter::onFooEvent(...) {...} FooPresenter::onFooEvent(...) {...} BarPresenter::onBarEvent(...) {...}
195. EventBus activation @Events(startView = StartView.class) public interface OneEventBus extends EventBus { @Event(handlers={FooPresenter.class, AcmePresenter.class}, activate={FooPresenter.class, AcmePresener.class}, deactivate={BarPresenter.class}) public void fooEvent(...); @Event(handlers=BarPresenter.class, activate={BarPresenter.class}, deactivate={FooPresenter.class, AcmePresener.class}) public void barEvent(...); }
196. EventBus broadcast @Events(startView = StartView.class) public interface OneEventBus extends EventBus { @Event(broadcastTo=IBroadcast.class, calledMethod="boo") public void broadcastEvent(...); } public class Foo implements IBroadcast { public void boo(...) {...}; }
197. EventBus filters and stuff @Filters(filterClasses={FilterOne.class, FilterTwo.class}) @Debug(logger=CustomLogger.class) @Events(startView = StartView.class) public interface OneEventBus extends EventBus { . . . } class FilterOne implements EventFilter<OneEventBus> { @Override public boolean filterEvent(...) { return ...; } }
199. History
200. History annotations @Debug @Event @EventHandler @Events @Filters @Forward @History @InitHistory @InjectService @NotFoundHistory @PlaceService @Presenter @Service @Start
201. History handling @Events(..., historyOnStart = true) public interface OneEventBus extends EventBus { @Start @InitHistory public void start(); @Event(handlers=..., navigationEvent=true, historyName="foo", historyConverter=OneHC.class) public void fooEvent(...); @NotFoundHistory public void show404(); }
202. @Events(..., historyOnStart = true) public interface OneEventBus extends EventBus { @Start @InitHistory public void start(); @Event(handlers=..., navigationEvent=true, historyName="foo", historyConverter=OneHC.class) public void fooEvent(...); @NotFoundHistory public void show404(); } /start /foo History passing
203. @Events(...) public interface OneEventBus ... { @Event(..., navigationEvent=true, historyName="foo", historyConverter=OneHC.class) public void fooEvent(int id, Filter filter); } @History public class OneHC implements HistoryConverter<OneEventBus> { @Inject private TokenGenerator tokens; public void convertFromToken(...) { if ("foo".equals(event)) eventBus.fooEvent( Integer.parseInt(params[0]), Filter.parse(params[1])); } public String fooEvent(...) { return tokens.fooEvent(id, filter); } } /foo?26;all History parameters
204. History hashbang @Events(...) public interface OneEventBus ... { @Event(...) public void fooEvent(int id, Filter filter); } @History public class OneHC implements HistoryConverter<OneEventBus> { ... public boolean isCrawable() { return true; } } /#!foo?26;all
205. History and event buses are the skeleton of your site navigation system History and event buses are the skeleton of your site navigation system
207. Multi- modularity
208. Multi- modularity annotations @AfterLoadChildModule @BeforeLoadChildModule @ChildModule @ChildModules @DisplayChildModuleView @HistoryName @LoadChildModuleErrors
209. Multi- modularity URLs company/list company/add company/edit?123 user/list user/add user/edit?39 object/action[?parameters] REST
210. Multi- modularity modules public interface CompanyModule extends Mvp4gModule {} @Events(..., module=CompanyModule.class) public interface CompanyEventBus extends EventBus {...} public interface UserModule extends Mvp4gModule {} @Events(..., module=UserModule.class) public interface UserEventBus extends EventBus {...}
211. @Events(..., module=UserModule.class) public interface UserEventBus extends EventBus { @Event(..., handlers=UserListPresenter.class, historyName="list") public void usersList(); . . . } @Events(...) @ChildModules( @ChildModule(moduleClass=UserModule.class) @ChildModule(moduleClass=CompanyModule.class) ) public interface ParentEventBus extends EventBus{ @Event(modulesToLoad=UserModule.class) public void usersList(); @Event(modulesToLoad=CompanyModule.class) public void companiesList(); } Multi- modularity event buses
212. @Events(...) @ChildModules( @ChildModule(moduleClass= UserModule.class, runAsync=true) @ChildModule(moduleClass= CompanyModule.class, runAsync=true)) public interface ParentEventBus extends EventBus { . . . } Multi- modularity asynchronous loading
213. History, event buses and modules are the skeleton of your site navigation system History, event buses and modules are the skeleton of your site navigation system You can load modules asynchronously! So user will not get the kilobytes he needs not, if he will not visit specified sections of your site. You can load modules asynchronously! So user will not get the kilobytes he needs not, if he will not visit specified sections of your site.
215. PlaceService
216. PlaceService annotations @Debug @Event @EventHandler @Events @Filters @Forward @History @InitHistory @InjectService @NotFoundHistory @PlaceService @Presenter @Service @Start
217. PlaceService overriding @PlaceService(CustomPlaceService.class) @Events(...) public interface MainEventBus extends EventBusWithLookup { . . . } public class CustomPlaceService extends PlaceService { protected void convertToken(String token) { ... } protected String[] parseToken(String token) { ... } public String tokenize(String eventName, String param) { ... } . . . }
219. Remarks
220. Remarks There is no layouting-system yet
221. Remarks There is no layouting-system yet Multimodularity is aimed at object → action principle
222. Remarks There is no layouting-system yet Multimodularity is aimed at object → action principle GIN/Guice are supported
223. Remarks There is no layouting-system yet Multimodularity is aimed at object → action principle When using custom GwtEvents, you should keep an eye on presenters activation. Callbacks — easier. GIN/Guice are supported
224. Remarks There is no layouting-system yet Multimodularity is aimed at object → action principle When using custom GwtEvents, you should keep an eye on presenters activation. Callbacks — easier. There are LazyView & LazyPresenter GIN/Guice are supported
225. mvp4g — is what Zoidberg has prescribed!
227. 4. UI components
228. Button PushButton RadioButton CheckBox DatePicker ToggleButton TextBox PasswordTextBox TextArea Hyperlink / Anchor ListBox CellList MenuBar Tree, CellTree SuggestBox RichTextArea FlexTable, Grid, CellTable CellBrowser TabBar DialogBox PopupPanel StackPanel, StackLayoutPanel HorizontalPanel VerticalPanel FlowPanel VerticalSplitPanel HorizontalSplitPanel SplitLayoutPanel DockPanel, DockLayoutPanel TabPanel, TabLayoutPanel DisclosurePanel
231. code.google.com/webtoolkit/doc/latest/RefWidgetGallery.html GWT components library
232. UiBinder: .ui.xml <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui"> <g:VerticalPanel styleName="my-css-style"> <g:HorizontalPanel> <g:Label>Name</g:Label> <g:TextBox ui:field="nameBox">Babylen</g:TextBox> </g:HorizontalPanel> <g:HorizontalPanel> <g:Label>Family name</g:Label> <g:TextBox ui:field="fnameBox">Tatarsky</g:TextBox> </g:HorizontalPanel> <g:ListBox ui:field="namesLst" visibleItemCount="1" /> <g:Button ui:field="submit">Submit</g:Button> </g:VerticalPanel> </ui:UiBinder>
233. UiBinder: .java public class SettingsForm extends Composite { interface SFormBinder extends UiBinder<Widget, SettingsForm> {} private static FormBinder uiBinder = GWT.create(SFormBinder.class); @UiField TextBox nameBox; @UiField TextBox fnameBox; @UiField ListBox namesLst; public HelloWorld(String... names) { initWidget(uiBinder.createAndBindUi(this)); for (String name : names) { namesLst.addItem(name); } } @UiHandler("submit") public onSubmit(ClickEvent e) { ... } }
234. HTMLPanel <g:HTMLPanel> <div>Some div</div> <div> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div> <p> <span>Some span</span> </p> </g:HTMLPanel>
235. Manual make-up vs. Cross-browser support .gwt-Button { font-size: 150%; } .b-popup { position: absolute; } Attention!
236. In GWT, there is an entire vast library of components and an armory of layouts. Though, the fact of developing a site with its own unique style is fraught with cross-browser compatibility problems.
238. Custom components
239. Custom components Do not inherit, but delegate
240. Custom components Do not inherit, but delegate @UiConstructor public MyCustomWidget(String defaultText) { . . . } public void setMaxLength(int maxLength) { ... }
241. Custom components Do not inherit, but delegate @UiConstructor public MyCustomWidget(String defaultText) { initWidget(uiBinder.createAndBindUi(this)); } public void setMaxLength(int maxLength) { ... }
242. Customization vs. Cross-browser support Attention!
243. So it is better either to keep your site design as simple as possible... ...either to allocate a significant amount of time for UI designers and programmers to work through your own component library. ...either to allocate a significant amount of time for UI designers and programmers to work through your own component library.
245. The lack of UI Designer was a drawback for someone
246. The lack of UI Designer was a drawback for someone
248. 5. Layouting
249. Reasons?
250. Reasons? If your site is built with logical blocks which are visually placed in different order, depending on context.
251. Reasons? If your site is built with logical blocks which are visually placed in different order, depending on context. For example, portlets or custom widgets
252. Reasons? If your site is built with logical blocks which are visually placed in different order, depending on context. For example, portlets or custom widgets Means, when it is a flexible site.
253. Reasons? If your site is built with logical blocks which are visually placed in different order, depending on context. For example, portlets or custom widgets Means, when it is a flexible site. These mechanics are not yet implemented in mvp4g
255. Layouts LIST ITEM EDIT B B B C A A C A C D
256. public class LayoutList implements Layout { } LayoutList.ui.xml: <FlowPanel ui:field="a"/> <FlowPanel ui:field="b"/> <FlowPanel ui:field="c"/> Layouts LIST ITEM EDIT public enum Place { A, B, C, D}; public interface Layout { public LayoutId id(); public HasWidgets place(Place place); Map<Place, HasWidgets> places(); } public class LayoutItem implements Layout { } LayoutItem.ui.xml: <FlowPanel ui:field="a"/> <FlowPanel ui:field="b"/> <FlowPanel ui:field="c"/> public class LayoutEdit implements Layout { } LayoutEdit.ui.xml: <FlowPanel ui:field="a"/> <FlowPanel ui:field="b"/> <FlowPanel ui:field="c"/> <FlowPanel ui:field="d"/>
257. Layouts LIST ITEM EDIT B B B C A A C A C D
258. Base page BasePage.ui.xml: <FlowPanel ui:field="toolbar"/> <FlowPanel ui:field="layout"/> <FlowPanel ui:field="footer"/> <FlowPanel ui:field="copy"/> toolbar layout footer copy
260. public enum Portal implements MakesLink { NEWS_LIST(LayoutId.LIST, <event-spec>, <options>), NEWS_EDIT(LayoutId.EDIT, <event-spec>, <options>), NEWS_VIEW(LayoutId.ITEM, <event-spec>, <options>), NEWS_DELETE(LayoutId.ITEM, <event-spec>, <options>) USER_LIST(LayoutId.LIST, <event-spec>, <options>), USER_EDIT(LayoutId.EDIT, <event-spec>, <options>), USER_VIEW(LayoutId.ITEM, <event-spec>, <options>), USER_DELETE(LayoutId.ITEM, <event-spec>, <options>), . . . @Override public String makeLink() { . . . } } Page / Portal
261. public enum Portal implements MakesLink { . . . public class PortalUrl implements MakesLink { PortalUrl(Portal portal[, <params>]) { ... } public PortalUrl addParam(...) { ... } public PortalUrl fromEvent(String module, String event, String params) { ... } @Override public String makeLink() { ... } } } Link
262. public enum Portal implements MakesLink { . . . public class PortalUrl implements MakesLink { PortalUrl(Portal portal[, <params>]) { ... } public PortalUrl addParam(...) { ... } public PortalUrl fromEvent(String module, String event, String params) { ... } @Override public String makeLink() { ... } } } Link History.newItem(Portal.USER_LIST.makeLink()); History.newItem(new PortalUrl(Portal.USER_EDIT, uid).makeLink()); History.newItem(userTokenGenerator.edit(uid));
263. public abstract class LayoutBuilder<E extends ChildEventBus> { public CanBuildLayout prepareFor(final Portal page) { return new CanBuildLayout { public Layout build(State state) { layout(page, state, LayoutFactory.get(page.layout).places()); } } } public abstract void layout(Portal page, State state, Map<Place, HasWidgets> places); } Layout builder
264. public class UserHistoryConverter implements HistoryConverter<UserEventBus> { public void convertFromToken(String evt, String param) { // можно использовать tokenGenerator PortalUrl curUrl = PortalUrl.fromToken("user",evt,param); Portal portal = curUrl.portal; eventBus.newPage(portal, layoutBuilder.prepareFor(portal)); eventBus.dispatch(curUrl); } } Switching layouts
265. public class UserLayoutBuilder implements LayoutBuilder<UserEventBus> { public void layout(Portal page, State state, Map<Place, HasWidgets> places) switch (page) { case USER_ITEM: { eventBus.projectItem(places.get(Place.A)); eventBus.projectCalendar(places.get(Place.B)); eventBus.projectPreview(places.get(Place.C)); } break; case USER_LIST: switch (state) { ... } break; case USER_EDIT: ... break; } } } Builder implementation
266. public interface ChildEventBus { @Event(forwardToParent=true) public void newPage(Portal page, CanBuildLayout builder); @Event(forwardToParent=true) public void project(Widget what, HasWidgets where); @Event(forwardToParent=true) public void updateState(State state) } Event buses [ forwarded to BaseEventBus ]
267. public interface UserEventBus extends ChildEventBus { // navigation @Event(navigationEvent=true, ...) public void list(); @Event(navigationEvent=true, handlers=UserShowPresenter.class, historyConverter=UserHistoryConverter.class) public void show(String uid); @Event(navigationEvent=true, ...) public void edit(String uid); . . . // projection @Event(handlers=UserShowPresenter.class,calledMethod="prjItem") public void projectItem(HasWidgets where); @Event(handlers=UserShowPresenter.class,calledMethod="prjPrvw") public void projectPreview(HasWidgets where); @Event(handlers=CalendarPresenter.class,calledMethod="project") public void projectCalendar(HasWidgets where) } Event buses
269. Layouting helps us to build and to live!
270. github.com/shamansir/gwt-mvp4g-layouting-demo I've wanted to make a demo for you, but had no time ;(
271. github.com/shamansir/gwt-mvp4g-layouting-demo I've wanted to make a demo for you, but had no time ;( Follow
272. github.com/shamansir/gwt-mvp4g-layouting-demo I've wanted to make a demo for you, but had no time ;(
273. Фото gwt-mvp4g-layouting-demo.appspot.com
274. QRCode gwt-mvp4g-layouting-demo.appspot.com
276. 6. Non-Java API
277. code.google.com/p/google-web-toolkit-doc-1-5/wiki/GettingStartedJSON Accidentally, here is the main point
278. Possibility — exists
279. RequestBuilder
280. General context
281. Call chains
282. Insering JS-object into HTML-markup (you can parse them using JSNI)
283. Advantage : Independence from serialization
284. Disadvantage : Unconventional approach with all the consequences
285. shamansir-ru.tumblr.com/post/1728720550/deferred-api-gwt-rpc And here is the source code
287. 7. i18n
288. Messages / Constants public interface LoginMessages extends Messages { public String enterName(); public String emailExists(String email); public String emailInvalid(String email); public String loginFailed(String username); public String youFailedNTimes(@PluralCount int times); } public interface MenuConstants extends Constants { public String login(); public String logout(); public String contacts(); public String settings(); }
289. LoginMessages_ru.properties enterName = Введите имя emailExists = E-mail {0} зарегистрирован в системе emailInvalid = Некорректный e-mail {0} loginFailed = Не удалось зайти пользователем {0} youFailedNTimes = Кол-во неудачных попыток: {0,number} youFailedNTimes[one] = {0,number} неудачная попытка youFailedNTimes[few] = {0,number} неудачных попыток MenuConstants_ru.properties login= Войти logout = Выйти contacts = Контакты settings = Настройки Messages / Constants
290. <e:MyTextBox ui:field="box" defaultText="{messages.enterText}" LoginMessages messages = GWT.create(LoginMessages.class); MenuConstants constants = GWT.create(MenuConstants.class); <ui:with type="....LoginMessages" field="messages" /> Messages / Constants
291. Messages / Constants <txt:msg key="messageKey">Message</txt:msg> <ui:UiBinder ... xmlns:txt="ui:with:...MyMessages" />
292. ErrorsConstants_ru.properties ERR_101 = Ошибка авторизации ERR_102 = Неизвестная ошибка ERR_103 = Ресурс не найден errors = ERR_101, ERR_102, ERR_103 public interface ErrorsConstants extends ConstantsWithLookup { Map<String, String> errors(); } Messages / Constants
293. Mae'n hawdd iawn i gyfieithu prosiectau GWT... Mae'n hawdd iawn i gyfieithu prosiectau GWT... ...if you'll teach your translators to manage .properties-files or give them PoEdit or Pootle ...if you'll teach your translators to manage .properties-files or give them PoEdit or Pootle
294. ResourceBundles Позволяют использовать локализованные ресурсы
296. 8. Conclusion
297. experika.com We applied those techniques for Experika
298. experika.com Welcome to Experika
299. Thanks to Vitaly Gashock, for intoducing mvp4g to me and partnership Mikhail Kashkin, for mentoring http://www.vurt.ru http://twitter.com/vgashock Alexey Kakunin, for 道 and 先生 http://www.emdev.ru
300. profiles.google.com/shaman.sir Anthony Kotenko
301. Thank you. Made with LibreOffice 3.3.1 Impress
302. More questions?
303. GWT FTW!
304. Philip J. Fry, Dr. Zoidber, Nibbler and Hypnotoad are all the Futurama series characters and all created by Matt Groening Homer Simpson is the character of The Simpsons series and also created by Matt Groening All the phrases they tell in this presentation have no relation nor for these characters, nor for series noticed above, nor for their creator