Best Practices in Ext GWT

4,824 views

Published on

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.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,824
On SlideShare
0
From Embeds
0
Number of Embeds
439
Actions
Shares
0
Downloads
107
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Best Practices in Ext GWT

  1. 1. Ext GWT Best Practices in Ext GWT DARRELL MEYER, SENCHAMonday, November 29, 2010
  2. 2. Overview XTemplate & HtmlContainer Layouts RPC Dependency Injection MVPMonday, November 29, 2010
  3. 3. Conference AppMonday, November 29, 2010
  4. 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.zipMonday, November 29, 2010
  5. 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. 6. XTemplate & HtmlContainerMonday, November 29, 2010
  7. 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 wayMonday, November 29, 2010
  8. 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 variablesMonday, November 29, 2010
  9. 9. XTemplate Usage Direct support in Components ListView ComboBox RowExpander ColorPalette Generate content for any elementMonday, November 29, 2010
  10. 10. XTemplate ExampleMonday, November 29, 2010
  11. 11. HtmlContainer Inserts widgets into arbitrary HTML markup Supports three modes for container content Existing Element From Code RequestBuilderMonday, November 29, 2010
  12. 12. HtmlContainer ExampleMonday, November 29, 2010
  13. 13. LayoutsMonday, November 29, 2010
  14. 14. Layouts Use the fewest Layouts as possible Good for laying large sections of an application Not as good for showing detailed informationMonday, November 29, 2010
  15. 15. Layouts Hierarchy Layout Append Size Size & Position Anchor Border Box Column Fit Flow Row Table Absolute Form VBox HBox Accordian Card Fill TableRowMonday, November 29, 2010
  16. 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 RESIZEDMonday, November 29, 2010
  17. 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
  18. 18. Monitoring LayoutsMonday, November 29, 2010
  19. 19. RPCMonday, November 29, 2010
  20. 20. RPC Best Practices RPC will return entire object graph Only return what you need for the given screenMonday, November 29, 2010
  21. 21. RPC Serialization Policy Always check GWT serialization file (*.gwt.rpc) Do not expose Object in RPC service interface BlacklistMonday, November 29, 2010
  22. 22. Dependency InjectionMonday, November 29, 2010
  23. 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-ginMonday, November 29, 2010
  24. 24. Without DI Avoid using “new” Avoid FactoriesMonday, November 29, 2010
  25. 25. GIN Example Extend Ginjector and define DI interfaceMonday, November 29, 2010
  26. 26. GIN Example Extend Ginjector and define DI interfaceMonday, November 29, 2010
  27. 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. 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. 29. GIN Example Change implementation based on user agent / deviceMonday, November 29, 2010
  30. 30. GIN Example Change implementation based on user agent / deviceMonday, November 29, 2010
  31. 31. MVPMonday, November 29, 2010
  32. 32. MVP Example Presenters / Activities Views Places Place History Mappers Activity MappersMonday, November 29, 2010
  33. 33. Thanks! Twitter @darrellmeyer Portions of this presentation from the GWT documentation licensed under the Creative Commons Attribution 3.0 LicenseMonday, November 29, 2010

×