GWT MVP Case Study

GWT with MVP: A Case Study David Chandler [email_address] http://blog.TurboManage.com

OR… How I learned to love ( C S S && anonymous() { inner() {} classes() {} });

Who is this guy? Wrote first book on running a Web site (1995) Written Web apps in perl, ksh, C with lex/yacc, ColdFusion, JSF, GWT Most recently, Web architect with Intuit on Internet banking products Patent on non-recursive SQL trees Working in a startup last 6 mos

Anatomy of a GWT app What’s GWT+MVP? “ Good” practices & patterns gwt-presenter gwt-dispatch Caching, batching, queuing GWT Tools Resources

GWT+MVP Model View Presenter Way of organizing code analogous to MVC Services  Presenter  View View implements interface defined in presenter fires no events of its own Presenter listens for DOM events (ClickHandlers, etc.) listens on event bus calls services

GWT+MVP Where to put the model? Singleton accessible everywhere? (user info) Hide it behind services? Bits & pieces in each presenter? None at all?

Good practice #1 Define the Display interface Return interfaces, not Widgets Supports testing, decoupling from view Button getSaveButton(); HasClickHandlers getSaveButton(); Caveat: sometimes you have to write your own

How to untangle How can presenters communicate with services and each other? Example: new friend added Does main presenter hold ref to all others? Use an event bus Define your own application events extending GwtEvent Presenters add handlers to listen for events

Good practice #2 Let presenter handle all events (even DOM) Sometimes hard If put click handler in the view, then view would have to call service layer Instead, handle in presenter display.getSaveButton().addClickHandler…

How to handle Widget collections? Say, every row in a table has clickable widgets Ans #1: catch event in parent Widget only a) each table cell is a DIV. Handle event in containing Widget Note: parent must be a Widget to receive events (and all of its ancestors) b) along with this, expose handler reg mechanism through interface

How to handle Widget collections? What if every row has multiple TextBoxes? Ans #2: write Display interface with arrays interface Display { HasValue<String> getFirstName(int i); HasValue<String> getLastName(int i); int getNumRows(); void addRows(int n); }

Guice Google’s dependency injection framework Small, light, almost plain English ServerModule DispatchServletModule DispatchTestModule ROAUserServiceImpl Used by gwt-dispatch, useful for unit tests

Google GIN Dependency injection for GWT Quite useful for MVP implementations Provides access to EventBus, Dispatch, anything “global” your app may need Auto-creates Images and Constants Instead of GWT.create(RoaImages.class); Can use bind(RoaImages. class ).in(Singleton. class ); @Inject RoaImages images;

gwt-presenter Open source framework by David Peterson http://code.google.com/p/gwt-presenter/ Very clean MVP implementation Uses GIN to bind presenters as singletons “ Place” management Automatically syncs GWT History object when fire PlaceRequestEvent in code When browser URL changes, fires PRE

gwt-presenter Look at wiring (RoaModule, RoaGinjector, RoaMvp, AppPresenter) WidgetDisplay asWidget() WidgetPresenter onPlaceRequest() Don’t forget to call bind() in constructor! WidgetContainerPresenter, DeckPresenter Create new presenter & view

gwt-presenter gotchas Don’t forget to call bind() in constructor! Loads all presenters at startup … and all views … with many Widgets in the views Alternatives Temp solution: LazyPresenter replaces onBind() with onFirstRequest() Real solution: GWT.runAsync(), working on it…

Command pattern GWT-RPC basics: every service = 3 classes Service interface (LoginService) Async version (LoginServiceAsync) Server impl (LoginServiceImpl) @RemoteServiceRelativePath("gwtlogin") public interface LoginService extends RemoteService { public LoginInfo login(String requestUri) throws UserNotRegisteredException; }

Command pattern Eclipse tooling auto-creates the asyncs What if you wanted to add a standard arg to every service call? Like a security token to prevent CSRF Would have to add to every interface, async, and impl UGH Or what if you wanted to cache data from service calls?

Command pattern Turn verbs (methods) into nouns (classes) loginService.login(p1,p2…,callback); dispatchService.execute(new LoginAction(), new AsyncCallback<LoginResult>() { handleSuccess(LoginResult result)… handleFailure(Throwable caught)… }

Command pattern Command pattern benefits Send security token in DispatchService and Actions don’t even have to know about it Actions and ActionHandlers can extend base classes Constructor params are saved with the cmd Caching! Batching! Queuing! Rollback!

gwt-dispatch Companion framework by David Peterson http://code.google.com/p/gwt-dispatch/ Base classes for Action, Result DisplayCallback automatically calls start/stop view on service call init/return HiveMind MVP tutorial highly recommended!

gwt-dispatch Wiring it up (GuiceConfig, ServerModule, DispatchServletModule) Create new Result, Action, ActionHandler Call it from presenter

Good practice #3 Stop thinking synchronously! Pass Callbacks everywhere a trip to the server may be needed ArrayList<User> service.getUsers() service.getUsers(new AsyncCallback() {…}); Extend AsyncCallback with your own Provide standard handleFailure(); Other standard handling on call or return

Tools In case I forgot… Web Developer Toolbar (Ctrl+Shift+E) Firebug (F12) YSlow Chrome Developer Tools! Speed Tracer (runs in Chrome)

Other GWT goodies DeferredCommand Often necessary for setFocus() Timer Good for animation http://code.google.com/p/gwt-fx/ Fade, blinds, etc.

Resources Book The CSS Anthology (Rachel Andrew, 3 rd Ed.) Blogs HiveMind MVP tutorial http://blog.turbomanage.com (lots of gwt-dispatch, gwt-presenter example code) Google I/O videos AppEngine + GWT Training Apr 12-13

GWT MVP Case Study

More Related Content

What's hot (20)

Similar to GWT MVP Case Study (20)

More from David Chandler (13)

Recently uploaded (20)

GWT MVP Case Study

Editor's Notes