ext gwt 3.0 layouts

Wednesday, November 2, 11

Sven BrunkenLAYOUTS

[email protected] @svenbrunken


mailto:[email protected]

mailto:[email protected]

OverviewWhy did we change it?

What changed?GXT 2 to GXT 3 Usage examples

Questions


Why Did We Change It?


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?


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

iswidget insert

contentpanel

contentpanel

borderlayoutdata

borderlayoutdata

container

contentpanel

gxt 2