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.

1. Wednesday, November 2, 11

2. LAYOUTS
Sven Brunken
sven@sencha.com @svenbrunken
Wednesday, November 2, 11

3. Overview
Why did we change it?
What changed?
GXT 2 to GXT 3
Usage examples
Questions
Wednesday, November 2, 11

4. Why Did We Change It?
Wednesday, November 2, 11

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 layout
Wednesday, November 2, 11

6. What’s New Or
Different?
Wednesday, November 2, 11

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 wrapping
Wednesday, November 2, 11

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. 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. Inheritance Chain
Wednesday, November 2, 11

11. Layouts
2.0 3.0
BorderLayout BorderLayoutContainer
Container CenterLayout CenterLayoutContainer
FlowLayout FlowLayoutContainer
Wednesday, November 2, 11

12. Component
Container
AbstractHtmlLayout Insert Resize
HtmlLayout FlowLayout
InsertResize Simple
BoxLayout CardLayout Viewport
CssFloatLayout ContentPanel
HBoxLayout HorizontalLayout BorderLayout
VBoxLayout VerticalLayout
Wednesday, November 2, 11

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 chunk
Wednesday, November 2, 11

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. 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 classes
Wednesday, November 2, 11

16. GWT / GXT
Interoperability
Example
Wednesday, November 2, 11

17. LayoutPanel Integration
Example shows LayoutPanels and Containers used together
VerticalLayoutContainer -> DockPanel -> ContentPanel
Wednesday, November 2, 11

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. Demonstration
Wednesday, November 2, 11

20. Important
LayoutContainers
Wednesday, November 2, 11

21. Container
Holds the base container logic
Implements the HasWidget interface
Does not do any resizing of its children
Wednesday, November 2, 11

22. ResizeContainer
Extends Container
Implements the ProvidesResize and RequiresResize interfaces
Sizes its children
forceLayout bubbles to children of ResizeContainer at any level
Wednesday, November 2, 11

23. InsertContainer
Extends Container
Implements the InsertPanel interface
Adds Widget and IsWidget insert support to Container
Wednesday, November 2, 11

24. InsertResizeContainer
Extends ResizeContainer
Implements the InsertPanel interface
Adds Widget and IsWidget insert support to ResizeContainer
Wednesday, November 2, 11

25. GXT 2 To GXT 3
Wednesday, November 2, 11

26. BorderLayout in Explorer Demo
Wednesday, November 2, 11

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. 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. Usage Examples
Wednesday, November 2, 11

30. Demonstration
Wednesday, November 2, 11

31. Questions
Wednesday, November 2, 11

32. Thank You!
Wednesday, November 2, 11