Ext GWT 3.0 Layouts

transcript

Wednesday, November 2, 11

Sven BrunkenLAYOUTS

sven@sencha.com @svenbrunken

OverviewWhy did we change it?

What changed?GXT 2 to GXT 3 Usage examples

Questions

Why Did We Change It?

Steep learning curve of the layout system in GXT 2Hard to use and maintainUiBinder support not possibleNo clean separation of logic between container and layout

What’s New Or Different?

UiBinder support including layout dataTyped APIClearer inheritance structureDOM structure buildingGWT interface basedGWT Widget class supported natively without wrapping

UiBinder Support

<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>

GWT does not allow custom parsers to be registeredUses the @UiChild annotationRequires a typed API

Typed APIEasy to learnCode completion and code assist from your favorite IDEOnly 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);

Inheritance Chain

Layouts

Container

BorderLayoutContainerBorderLayout

CenterLayout

FlowLayout

CenterLayoutContainer

FlowLayoutContainer

3.02.0

FlowLayout

Container

AbstractHtmlLayout Insert Resize

Component

Simple

BoxLayout

HtmlLayout

CardLayout

CssFloatLayout

HorizontalLayout BorderLayout

ContentPanel

Viewport

HBoxLayout

InsertResize

VerticalLayoutVBoxLayout

DOM Structure Building

2.0Child widget’s DOM not connected to container when insertedOnly occurs after layout executed, element by element

3.0Element is inserted into its parent directly after insertion into containerInsert your Viewport with all child elements in one chunk

GWT Interface BasedSupports for HasWidgets, IndexPanel, InsertPanel, HasOneWidget, RequiresResize and ProvidesResizeBased 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);}

Native Widget Support

2.0Widgets wrapped in WidgetComponent

3.0Direct support of Widgets, no wrappingParent <-> Child relationship as expectedSupport for the GWT LayoutPanel classes

GWT / GXTInteroperability

Example

LayoutPanel IntegrationExample shows LayoutPanels and Containers used togetherVerticalLayoutContainer -> DockPanel -> ContentPanel

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));

Demonstration

Important LayoutContainers

Container

Holds the base container logicImplements the HasWidget interfaceDoes not do any resizing of its children

ResizeContainer

Extends ContainerImplements the ProvidesResize and RequiresResize interfacesSizes its childrenforceLayout bubbles to children of ResizeContainer at any level

InsertContainer

Extends ContainerImplements the InsertPanel interfaceAdds Widget and IsWidget insert support to Container

InsertResizeContainer

Extends ResizeContainerImplements the InsertPanel interfaceAdds Widget and IsWidget insert support to ResizeContainer

GXT 2 To GXT 3

BorderLayout in Explorer Demo

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);

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);

Usage Examples

Demonstration

Questions

Thank You!

Ext GWT 3.0 Layouts

Technology