best practices in ext gwt

Ext GWTBest Practices in Ext GWT

DARRELL MEYER, SENCHA

Monday, November 29, 2010

OverviewXTemplate & HtmlContainer

LayoutsRPC

Dependency InjectionMVP


Conference App


Ext GWT 2.2.1GWT 2.1

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

RequestFactoryGWT MVPDependency Injection with Gin

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

Technology Stack


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

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

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

PluginsMaven Integration for Eclipsehttp://m2eclipse.sonatype.org/sites/m2e

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

Google Eclipsehttp://code.google.com/eclipse/

IDE & Plugins


http://www.eclipse.org/downloads/

http://www.eclipse.org/downloads/

http://m2eclipse.sonatype.org/sites/m2e

http://m2eclipse.sonatype.org/sites/m2e

http://m2eclipse.sonatype.org/sites/m2e-extras

http://m2eclipse.sonatype.org/sites/m2e-extras

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

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

XTemplate &

HtmlContainer


Avoid using Widgets for layoutPanels and Containers are slowRendering HTML fragments is fastA small amount of HTML and CSS can go a long long way

Templating in General


Advanced templatingApply HTML fragments to your dataFeaturesFormattingAuto filling lists using templates and sub-templatesConditional processing with basic comparator operatorsBasic math function supportExecute arbitrary inline code with special built-in template variables

XTemplate


Direct support in ComponentsListViewComboBoxRowExpanderColorPaletteGenerate content for any element

XTemplate Usage


XTemplate Example


HtmlContainerInserts widgets into arbitrary HTML markupSupports three modes for container contentExisting ElementFrom CodeRequestBuilder


HtmlContainer Example


Layouts


Use the fewest Layouts as possibleGood for laying large sections of an applicationNot as good for showing detailed information

Layouts


Layouts Hierarchy

Layout

Column Fit Row

Absolute Form VBox HBox Accordian Card Fill

Anchor

Size

Size & Position

Append

Flow Table

TableRow

Border Box


Layouts are powerful as layout execution can cascadeWhen containers are resized they execute their layoutIf a child of a container is resized by layout, it will execute its layout

Cascading Layouts

ViewportBorderLayout

ContentPanelFitLayout

ContentPanelRowLayout

ToolBar GridTabPanel

TabItem

ContentPanelFlowLayout

Grid

NOT RESIZED


Inspect the DOM using tool such as FirebugResize browser or panelsNotice changes in DOM (width, height, top, left, etc)

Monitoring Layouts


Monitoring Layouts


RPC


RPC will return entire object graphOnly return what you need for the given screen

RPC Best Practices


Always check GWT serialization file (*.gwt.rpc)Do not expose Object in RPC service interfaceBlacklist

RPC Serialization Policy


Dependency Injection


Automatic dependency injectionAvoid FactoriesAvoid 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

Dependency Injection


http://code.google.com/p/google-guice/

http://code.google.com/p/google-guice/

Avoid using “new”Avoid Factories

Without DI


Extend Ginjector and define 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

GIN Example


MVP


Presenters / ActivitiesViewsPlacesPlace History MappersActivity Mappers

MVP Example


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

Technology

guice http

code gin client

cascading layouts layouts

eclipse wtp integration

gin download

code requestbuildermonday

fewest layouts

guice server http