Ext GWT - Overview and
Implementation Case Study
By
Avi Perez
MindCite
Agenda
• UI Frameworks overview
• What is GWT?
• GXT as winner extension
• GXT deep dive
• GXT Design Patterns and advance topics
• Questions
What we will learn….
• What is GWT?
• Benefits from using the GWT
• What is GXT?
• How to integrate GXT to my project
background
• Software developer
• Mindcite – Transforming data to intelligent
– Supply Intelligence Solutions:
• OSINT focus crawling by Ontology
• HUMINT data collected by people
• Link Analysis fraud detections, semantic technologies,
Semantic web
• CI Competitor intelligence
UI Frameworks
can some please
stop this • “Easy” to interact with the
annoying thingy! server but still . . Poor UI
capabilities
• I must buy design patterns
book!
2007 GWT
r y,E xt-js
OJO,jQue
D
2005 AJAX, JSON
Steep learning curve,
not type safety, hard
to debug
2002 ASP.net
Asynchronous
1999 JSP & Servlet
~300 lines of
code for single
1996 Flash - Advertisements& video games
static page
1995 Javascript - dynamic pages, dom manipulation.
90’s HTML-static pages
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 . . .
Google-Web-Toolkit (2)
• GWT Compiler
• RPC Paradigm
• Development mode
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>
GWT Compiler Java 2 JavaScript (2)
• Cross browsers: defer binding
– Compiler hints and Runtime replacing of DOM implementations
GWT Compiler Java 2 javascript (3)
• Supports code splitting: splitting up large
applications for faster startup time
– Any Fragments of code can be spitted
RPC Paradigm (1)
• server side method calls passing Java objects
over the wire.
– GWT & Spring MVC
• No need to deal with serialization and de-
serializations
• Support weakly types JSON\XML
RPC Paradigm (2)
WAR directory structure
2 1 3
1
2
3
RPC Paradigm (3)
Full IDE SUpport
Development
• Easy to debug
– No need to open firebug or IE developer tool
– Run, build, debug, and test all in Java
• Strongly typed
– Coding time typos
• Code compilation
– Generics .
• Java tools
– Static testing tools – find Bug
• i18n
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
– You already a google worker
– You probebly don’t know what you’re talking about
GXT – The Ext-js extension
http://www.sencha.com/examples/#overview
• GWT is great as UI infrastructure but…..GXT Widgets looks much better
GWT Vs GXT - Source code
GWT GXT
Layouts
Demo
GWT Vs GXT - Tree
GWT GXT
Demo
GWT Vs GXT - Grid
GWT GXT
Demo
GWT Vs GXT - Charts
GWT GXT
?
Demo
GWT Vs GXT - Forms
GWT GXT
Best Practice
Web application folder
Java code that compiles to java script
Async Service Interface
Module Entry Point
Integration GXT – 4 Steps(1)
• Step 1
Downloading GXT jar
• http://www.sencha.com/products/extgwt/download/
• Step 2
– Copying GXT resources to the WAR
directory
Integration GXT – 4 Steps (2)
• Step 3
– Adding reference in the *.html file
Integration GXT – 4 Steps (3)
• Step 4
– Adding GXT reference in the *.gwt.xml file
MVC N-Tier- Class Diagram
MVC – Folder Structure
VIEW
MODEL
CONTROLLER
MVC
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
VIEW
MODEL
CONTROLLER
CONTROLLER
MVC – Controller
MVC
• Responsible for the communication with the server
• Any Controller that is interested in an event, can register it
public class DashboardUIController extends Controller {
• private RetrievalServiceAsync serviceAsync = GWT.create(RetrievalServiceAsync.class);
@Override
protected void registerEventTypes(EventType... types) {
// TODO Auto-generated method stub
registerEventTypes(BoziaApplicationEvents.SEARCH_EXECUTED);
}
@Override
public void handleEvent(AppEvent event) {
EventType eventType = event.getType();
if (eventType.equals(BoziaApplicationEvents.SEARCH_EXECUTED)) {
//go to the sever
//on success - notify the view
}
VIEW
MODEL
CONTROLLER
MVC – View
• The View – responsible placing widget in the Layout
MVC
• 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();
}
}
MVC – The Trigger
• Any Controller that is interested in this event, can register it
public class MyDemoWidget extends ContentPanel {
public MyDemoWidget() {
Button searchBtn = new Button("Search");
searchBtn.addSelectionListener(new SelectionListener<ButtonEvent>() {
@Override
public void componentSelected(ButtonEvent ce) {
EventType SEARCH_EXECUTED = new EventType();
AppEvent mySearchEvent = new AppEvent(BoziaApplicationEvents.SEARCH_EXECUTED);
mySearchEvent.setData("user_info", "Avi Perez click this btn");
Dispatcher.get().dispatch(mySearchEvent);}
});
}
MVC – last thing….
Dispatcher – The event bus
• Each controller should Register at the Entry point to the Dispatcher
public class TestEntryPoint implements EntryPoint {
….
public void onModuleLoad() {
……
Dispatcher.get().addController(new
DashboardUIController());
}
}
MVC – Demo
Good to know…(1)
• Exception
– No Need for try{} catch{} clause
– Just state the throws – automatically will be
navigated to the onFaliure(Throwable t){}
Good to know…(2)
• Speed Tracer - performance tuning your web
applications.
• MONITORING
Good to know…(3)
• Command Pattern RPC
– Single server access point
– Better handling exceptions
– Recommended by Google team
Web Application Demo
