Best Practices in Ext GWT

Ext GWT
Best Practices in Ext GWT

DARRELL MEYER, SENCHA

Monday, November 29, 2010

Overview
XTemplate & HtmlContainer
Layouts
RPC
Dependency Injection
MVP


Conference App


Technology Stack
Ext GWT 2.2.1
GWT 2.1

Java Persistence API (JPA)
Google App Engine (GAE)

RequestFactory
GWT MVP
Dependency Injection with Gin

Download at http://dev.sencha.com/playpen/gxt/conference-app.zip


IDE & Plugins
Eclipse IDE for Java EE Developers (Helios 3.6.1)
http://www.eclipse.org/downloads/

Plugins
Maven Integration for Eclipse
http://m2eclipse.sonatype.org/sites/m2e

Maven Integration for Eclipse WTP Integration
http://m2eclipse.sonatype.org/sites/m2e-extras

Google Eclipse
http://code.google.com/eclipse/


XTemplate
&
HtmlContainer


Templating in General
Avoid using Widgets for layout
Panels and Containers are slow
Rendering HTML fragments is fast
A small amount of HTML and CSS can go a long long way


XTemplate
Advanced templating
Apply HTML fragments to your data
Features
Formatting
Auto ﬁlling lists using templates and sub-templates
Conditional processing with basic comparator operators
Basic math function support
Execute arbitrary inline code with special built-in template variables


XTemplate Usage
Direct support in Components
ListView
ComboBox
RowExpander
ColorPalette
Generate content for any element


XTemplate Example


HtmlContainer
Inserts widgets into arbitrary HTML markup
Supports three modes for container content
Existing Element
From Code
RequestBuilder


HtmlContainer Example


Layouts


Layouts
Use the fewest Layouts as possible
Good for laying large sections of an application
Not as good for showing detailed information


Layouts Hierarchy

Layout Append

Size

Size & Position

Anchor Border Box Column Fit Flow Row Table

Absolute Form VBox HBox Accordian Card Fill TableRow


Cascading Layouts
Layouts are powerful as layout execution can cascade
When containers are resized they execute their layout
If a child of a container is resized by layout, it will execute its layout
Viewport
BorderLayout

ContentPanel ContentPanel ContentPanel
FitLayout RowLayout FlowLayout

ToolBar TabPanel Grid Grid

TabItem
NOT RESIZED

Monitoring Layouts
Inspect the DOM using tool such as Firebug
Resize browser or panels
Notice changes in DOM (width, height, top, left, etc)


Monitoring Layouts


RPC


RPC Best Practices
RPC will return entire object graph
Only return what you need for the given screen


RPC Serialization Policy
Always check GWT serialization ﬁle (*.gwt.rpc)
Do not expose Object in RPC service interface
Blacklist


Automatic dependency injection
Avoid Factories
Avoid use of new in your code

GIN (client) and Guice (server)
http://code.google.com/p/google-guice/
http://code.google.com/p/google-gin


Without DI
Avoid using “new”
Avoid Factories


GIN Example
Extend Ginjector and deﬁne DI interface


GIN Example
public class ConferenceModule extends AbstractGinModule {

@Override
protected void configure() {
bind(EventBus.class).to(SimpleEventBus.class).in(Singleton.class);
bind(ConferenceRequestFactory.class).toProvider(RequestFactoryProvider.class).in(Singleton.class);
bind(PlaceController.class).toProvider(PlaceControllerProvider.class).in(Singleton.class);
bind(DataLoaderAsync.class).toProvider(DataLoadControllerProvider.class).in(Singleton.class);
bind(SessionListView.class).to(SessionListViewImpl.class).in(Singleton.class);
bind(SessionDetailView.class).to(SessionDetailViewImpl.class).in(Singleton.class);
}

static class PlaceControllerProvider implements Provider<PlaceController> {

private final EventBus eventBus;

@Inject
public PlaceControllerProvider(EventBus eventBus) {
this.eventBus = eventBus;
}

public PlaceController get() {
return new PlaceController(eventBus);
}
}

}


GIN Example
public class ConferenceApp {

private static final Logger log = Logger.getLogger(ConferenceApp.class.getName());

private ConferenceRequestFactory requestFactory;
private EventBus eventBus;
private PlaceController placeController;
private ConferenceDesktopShell shell;
private Place defaultPlace = new SessionListPlace();
private SessionListView sessionListView;
private SessionDetailView sessionDetailView;
private DataLoaderAsync service;

@Inject
public ConferenceApp(ConferenceDesktopShell shell, DataLoaderAsync service,
ConferenceRequestFactory requestFactory, EventBus eventBus,
PlaceController placeController) {
this.shell = shell;
this.service = service;
this.requestFactory = requestFactory;
this.eventBus = eventBus;
this.placeController = placeController;
}


GIN Example
Change implementation based on user agent / device


MVP


MVP Example
Presenters / Activities
Views
Places
Place History Mappers
Activity Mappers


Thanks!
Twitter @darrellmeyer

Portions of this presentation from the GWT documentation licensed under the Creative Commons Attribution 3.0 License


Best Practices in Ext GWT

Recommended

Recommended

More Related Content

Similar to Best Practices in Ext GWT

Similar to Best Practices in Ext GWT (20)

More from Sencha

More from Sencha (20)

Recently uploaded

Recently uploaded (20)

Best Practices in Ext GWT