Ext GWT provides a solid foundation to build rich internet applications. In this session, you will learn the best practices used to build these applications. Topics include how to use HTML templates and HtmlLayout, MVC / MVP, RPC, and managing data.
4. 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
Monday, November 29, 2010
5. 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/
Monday, November 29, 2010
6. XTemplate
&
HtmlContainer
Monday, November 29, 2010
7. 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
Monday, November 29, 2010
8. XTemplate
Advanced templating
Apply HTML fragments to your data
Features
Formatting
Auto filling 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
Monday, November 29, 2010
9. XTemplate Usage
Direct support in Components
ListView
ComboBox
RowExpander
ColorPalette
Generate content for any element
Monday, November 29, 2010
11. HtmlContainer
Inserts widgets into arbitrary HTML markup
Supports three modes for container content
Existing Element
From Code
RequestBuilder
Monday, November 29, 2010
14. Layouts
Use the fewest Layouts as possible
Good for laying large sections of an application
Not as good for showing detailed information
Monday, November 29, 2010
15. Layouts Hierarchy
Layout Append
Size
Size & Position
Anchor Border Box Column Fit Flow Row Table
Absolute Form VBox HBox Accordian Card Fill TableRow
Monday, November 29, 2010
16. 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
Monday, November 29, 2010
17. Monitoring Layouts
Inspect the DOM using tool such as Firebug
Resize browser or panels
Notice changes in DOM (width, height, top, left, etc)
Monday, November 29, 2010
20. RPC Best Practices
RPC will return entire object graph
Only return what you need for the given screen
Monday, November 29, 2010
21. RPC Serialization Policy
Always check GWT serialization file (*.gwt.rpc)
Do not expose Object in RPC service interface
Blacklist
Monday, November 29, 2010
23. Dependency Injection
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
Monday, November 29, 2010
24. Without DI
Avoid using “new”
Avoid Factories
Monday, November 29, 2010
25. GIN Example
Extend Ginjector and define DI interface
Monday, November 29, 2010
26. GIN Example
Extend Ginjector and define DI interface
Monday, November 29, 2010
27. 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);
}
}
}
Monday, November 29, 2010
28. 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;
}
Monday, November 29, 2010
29. GIN Example
Change implementation based on user agent / device
Monday, November 29, 2010
30. GIN Example
Change implementation based on user agent / device
Monday, November 29, 2010
32. MVP Example
Presenters / Activities
Views
Places
Place History Mappers
Activity Mappers
Monday, November 29, 2010
33. Thanks!
Twitter @darrellmeyer
Portions of this presentation from the GWT documentation licensed under the Creative Commons Attribution 3.0 License
Monday, November 29, 2010