This document provides an overview of the Google Web Toolkit (GWT) and GWT Ext (GXT) frameworks. It discusses how GWT compiles Java code to optimized JavaScript, supports RPC calls to servers, and enables debugging directly in Java. GXT is introduced as an extension of GWT that provides additional widgets like trees, grids, and charts. The document demonstrates integrating GXT into a GWT project using a four step process and shows an example MVC application structure using GXT and events. Best practices like command pattern RPC calls are also covered.

1. Ext GWT - Overview and
Implementation Case Study
By
Avi Perez
MindCite

2. Agenda
●UI Frameworks overview
●What is GWT?
●GXT as winner extension
●GXT deep dive
●GXT Design Patterns and advance topics
●Questions

3. What we will learn….
●What is GWT?
●Benefits from using the GWT
●What is GXT?
●How to integrate GXT to my project

4. background
●Senior Software Engineer
●Mindcite – Transforming data to intelligent
oSupply Intelligence Solutions:
 OSINT focus crawling by Ontology
 HUMINT data collected by people
 Link Analysis fraud detections, semantic
technologies, Semantic web
 CI Competitor intelligence

5. UI Frameworks
1996 Flash - Advertisements& video games
1999 JSP & Servlet
● “Easy” to interact with the
server but still . . Poor UI
capabilities
● I must buy design patterns
book!
2002 ASP.net
Asynchronous
2005 AJAX, JSON
DOJO,jQuery,Ext
-js
~300 lines of
code for single
static page
can some please
stop this
annoying
thingy!
Steep learning
curve, not type
safety, hard to
debug
2007 GWT

6. Google-Web-Toolkit (1)
●GWT 1.0 May 17, 2006
●Toolkit for architecting scalable complex web applications
●"GWT's mission is to radically improve the web experience for users
by enabling developers to use existing Java tools to build no-
compromise AJAX for any modern browser.“
●No plug-in required: like flash, Silverlight etc . . .

7. Google-Web-Toolkit (2)
●GWT Compiler
●RPC Paradigm
●Development mode

8. GWT Compiler java 2 javascript (1)
●highly optimized . . .
●Optimizing Strings : String transform to StringBuffer
●removing dead code not used code
●in-lining methods
●Generics support Grid<MyDomainPojo>

9. GWT Compiler Java 2 JavaScript
●Cross browsers: defer binding
●Compiler hints and Runtime replacing of DOM implementations

10. GWT Compiler Java 2 javascript (3)
●Supports code splitting: splitting up large
applications for faster startup time
oAny Fragments of code can be spitted

11. RPC Paradigm (1)
●server side method calls passing Java
objects over the wire.
oGWT & Spring MVC
●No need to deal with serialization and de-
serializations
●Support weakly types JSONXML

12. RPC Paradigm (2)
WAR directory structure
1
1
2
2
3
3

13. RPC Paradigm (3)
Full IDE SUpport

14. Development
●Easy to debug
oNo need to open firebug or IE developer tool
oRun, build, debug, and test all in Java
●Strongly typed
oCoding time typos
●Code compilation
oGenerics .
●Java tools
oStatic testing tools – find Bug
●i18n

15. Conclusions
●Scalable UI framework
●JAVA – reasonable learning curve, fits to agile Developments
environments
●Easy to debug – use Firebug only on specific missions
●Easy to Test
●If you think you can do this better 2 choices
oYou already a google worker
oYou probebly don’t know what you’re talking about

16. GXT – The Ext-js extension
http://www.sencha.com/examples/#overview
●GWT is great as UI infrastructure but…..GXT Widgets looks
much better

17. GWT Vs GXT - Source code
GWT GXT

18. Layouts

19. Demo

20. GWT Vs GXT - Tree
GWT GXT

21. Demo

22. GWT Vs GXT - Grid
GWT GXT

23. Demo

24. GWT Vs GXT - Charts
GWT GXT
?

25. Demo

26. GWT Vs GXT - Forms
GWT GXT

27. Best Practice

28. Web application folder
Java code that compiles to java
script
Module Entry Point
Async Service Interface

29. Integration GXT – 4 Steps(1)
●Step 1
oDownloading GXT jar
 http://www.sencha.com/products/extgwt/download/
●Step 2
oCopying GXT resources to the WAR
directory

30. Integration GXT – 4 Steps (2)
●Step 3
oAdding reference in the *.html file

31. Integration GXT – 4 Steps (3)
●Step 4
oAdding GXT reference in the *.gwt.xml file

32. MVC N-Tier- Class Diagram

33. MVC – Folder Structure

34. MVC – Application Events
●Lets define an application event
public class BoziaApplicationEvents {
…
/**
* Fired when the user press on the search button
*/
public static EventType SEARCH_EXECUTED = new EventType();
}
●Any Controller can register to any event and get notifications from the event bus

35. MVC – Controller

36. MVC – View
●The View – responsible placing widget in the Layout
●The glue between the server and the widget
public class DashboardUIView extends View {
private Widget myDashboardWidget = new Widget();
public DashboardUIView(Controller controller) {
super(controller);
// TODO Auto-generated constructor stub
}
@Override
protected void handleEvent(AppEvent event) {
EventType eventType = event.getType();
if (eventType.equals(BoziaApplicationEvents.SEARCH_EXECUTED)) {
// render a widget
myDashboardWidget.render();
}

37. MVC – The Trigger

38. MVC – last thing….
●Each controller should Register at the Entry point to
the Dispatcher
public class TestEntryPoint implements EntryPoint {
….
public void onModuleLoad() {
……
Dispatcher.get().addController(new
DashboardUIController());
}
Dispatcher – The event bus

39. MVC – Demo

40. Good to know…(1)
●Exception
oNo Need for try{} catch{} clause
oJust state the throws – automatically will be
navigated to the onFaliure(Throwable t){}

41. Good to know…(2)
●Speed Tracer - performance tuning your
web applications.
●MONITORING

42. Good to know…(3)
●Command Pattern RPC
oSingle server access point
oBetter handling exceptions
oRecommended by Google team

43. Full Web
Application Demo –
Demo

44. Web Application Demo