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