Ext GWT 3.0 Layouts

9,164 views

Published on

The Ext GWT 3.0 layout system was redesigned to support UiBinder and to provide an easy to use typed API. Learn about the new changes and see several examples of the new layout system.

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

No Downloads
Views
Total views
9,164
On SlideShare
0
From Embeds
0
Number of Embeds
359
Actions
Shares
0
Downloads
181
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Ext GWT 3.0 Layouts

  1. 1. Wednesday, November 2, 11
  2. 2. LAYOUTS Sven Brunken sven@sencha.com @svenbrunkenWednesday, November 2, 11
  3. 3. Overview Why did we change it? What changed? GXT 2 to GXT 3 Usage examples QuestionsWednesday, November 2, 11
  4. 4. Why Did We Change It?Wednesday, November 2, 11
  5. 5. Why Did We Change It? Steep learning curve of the layout system in GXT 2 Hard to use and maintain UiBinder support not possible No clean separation of logic between container and layoutWednesday, November 2, 11
  6. 6. What’s New Or Different?Wednesday, November 2, 11
  7. 7. What’s New Or Different? UiBinder support including layout data Typed API Clearer inheritance structure DOM structure building GWT interface based GWT Widget class supported natively without wrappingWednesday, November 2, 11
  8. 8. UiBinder Support GWT does not allow custom parsers to be registered Uses the @UiChild annotation Requires a typed API <ui:UiBinder xmlns:ui=urn:ui:com.google.gwt.uibinder...> <container:CenterLayoutContainer> <gxt:ContentPanel bodyStyle="padding: 6px" headingText="CenterLayout" width="200"> <g:Label text="I should be centered" /> </gxt:ContentPanel> </container:CenterLayoutContainer> </ui:UiBinder>Wednesday, November 2, 11
  9. 9. Typed API Easy to learn Code completion and code assist from your favorite IDE Only correct LayoutData can be used, IDE code checks BorderLayoutContainer con = new BorderLayoutContainer(); con.setBorders(true); con.setNorthWidget(north, northData); con.setWestWidget(west, westData); con.setCenterWidget(center, centerData); con.setEastWidget(east, eastData); con.setSouthWidget(south, southData);Wednesday, November 2, 11
  10. 10. Inheritance ChainWednesday, November 2, 11
  11. 11. Layouts 2.0 3.0 BorderLayout BorderLayoutContainer Container CenterLayout CenterLayoutContainer FlowLayout FlowLayoutContainerWednesday, November 2, 11
  12. 12. Component Container AbstractHtmlLayout Insert Resize HtmlLayout FlowLayout InsertResize Simple BoxLayout CardLayout Viewport CssFloatLayout ContentPanel HBoxLayout HorizontalLayout BorderLayout VBoxLayout VerticalLayoutWednesday, November 2, 11
  13. 13. DOM Structure Building 2.0 Child widget’s DOM not connected to container when inserted Only occurs after layout executed, element by element 3.0 Element is inserted into its parent directly after insertion into container Insert your Viewport with all child elements in one chunkWednesday, November 2, 11
  14. 14. GWT Interface Based Supports for HasWidgets, IndexPanel, InsertPanel, HasOneWidget, RequiresResize and ProvidesResize Based on the IsWidget interface public abstract class Container extends Component implements HasWidgets.ForIsWidget, IndexedPanel.ForIsWidget public abstract class ResizeContainer extends Container implements ProvidesResize public class SimpleContainer extends ResizeContainer implements HasOneWidget public void add(IsWidget child) { this.add(asWidgetOrNull(child)); } public void insert(IsWidget w, int beforeIndex) { insert(asWidgetOrNull(w), beforeIndex); }Wednesday, November 2, 11
  15. 15. Native Widget Support 2.0 Widgets wrapped in WidgetComponent 3.0 Direct support of Widgets, no wrapping Parent <-> Child relationship as expected Support for the GWT LayoutPanel classesWednesday, November 2, 11
  16. 16. GWT / GXT Interoperability ExampleWednesday, November 2, 11
  17. 17. LayoutPanel Integration Example shows LayoutPanels and Containers used together VerticalLayoutContainer -> DockPanel -> ContentPanelWednesday, November 2, 11
  18. 18. LayoutPanel Integration VerticalLayoutContainer con = new VerticalLayoutContainer(); con.setPixelSize(400, 300); ToolBar t = new ToolBar(); ... con.add(t, new VerticalLayoutData(1, -1)); ContentPanel cp1 = new ContentPanel(); cp1.setHeadingText("North"); ContentPanel cp2 = new ContentPanel(); cp2.setHeadingText("Center"); ContentPanel cp3 = new ContentPanel(); cp3.setHeadingText("East"); DockLayoutPanel dock = new DockLayoutPanel(Unit.PCT); dock.addNorth(cp1, 20); dock.addEast(cp3, 10); dock.add(cp2); con.add(dock, new VerticalLayoutData(1, 1));Wednesday, November 2, 11
  19. 19. DemonstrationWednesday, November 2, 11
  20. 20. Important LayoutContainersWednesday, November 2, 11
  21. 21. Container Holds the base container logic Implements the HasWidget interface Does not do any resizing of its childrenWednesday, November 2, 11
  22. 22. ResizeContainer Extends Container Implements the ProvidesResize and RequiresResize interfaces Sizes its children forceLayout bubbles to children of ResizeContainer at any levelWednesday, November 2, 11
  23. 23. InsertContainer Extends Container Implements the InsertPanel interface Adds Widget and IsWidget insert support to ContainerWednesday, November 2, 11
  24. 24. InsertResizeContainer Extends ResizeContainer Implements the InsertPanel interface Adds Widget and IsWidget insert support to ResizeContainerWednesday, November 2, 11
  25. 25. GXT 2 To GXT 3Wednesday, November 2, 11
  26. 26. BorderLayout in Explorer DemoWednesday, November 2, 11
  27. 27. GXT 2 BorderLayout LayoutContainer con = new LayoutContainer(); con.setLayout(new BorderLayout()); con.setBorders(true); ContentPanel west = new ContentPanel(); ContentPanel center = new ContentPanel(); center.setHeading("BorderLayout Example"); BorderLayoutData westData = new BorderLayoutData(LayoutRegion.WEST, 150); westData.setCollapsible(true); westData.setSplit(true); westData.setMargins(new Margins(0, 5, 0, 5)); BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER); con.add(west, westData); con.add(center, centerData);Wednesday, November 2, 11
  28. 28. GXT 3 BorderLayout BorderLayoutContainer con = new BorderLayoutContainer(); con.setBorders(true); ContentPanel west = new ContentPanel(); ContentPanel center = new ContentPanel(); center.setHeadingText("BorderLayout Example"); BorderLayoutData westData = new BorderLayoutData(150); westData.setCollapsible(true); westData.setSplit(true); westData.setMargins(new Margins(0, 5, 0, 5)); MarginData centerData = new MarginData(); con.setWestWidget(west, westData); con.setCenterWidget(center, centerData);Wednesday, November 2, 11
  29. 29. Usage ExamplesWednesday, November 2, 11
  30. 30. DemonstrationWednesday, November 2, 11
  31. 31. QuestionsWednesday, November 2, 11
  32. 32. Thank You!Wednesday, November 2, 11

×