Ext GWT 3.0 Layouts

LAYOUTS
Sven Brunken

sven@sencha.com @svenbrunken

Wednesday, November 2, 11

Overview
Why 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 2
Hard to use and maintain
UiBinder support not possible
No clean separation of logic between container and layout


What’s New Or
Different?


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


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>


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


Inheritance Chain


Layouts
2.0 3.0
BorderLayout BorderLayoutContainer

Container CenterLayout CenterLayoutContainer

FlowLayout FlowLayoutContainer


Component

Container

AbstractHtmlLayout Insert Resize

HtmlLayout FlowLayout

InsertResize Simple

BoxLayout CardLayout Viewport

CssFloatLayout ContentPanel

HBoxLayout HorizontalLayout BorderLayout

VBoxLayout VerticalLayout


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


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


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


GWT / GXT
Interoperability
Example


LayoutPanel Integration
Example shows LayoutPanels and Containers used together
VerticalLayoutContainer -> 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");
cp2.setHeadingText("Center");
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 logic
Implements the HasWidget interface
Does not do any resizing of its children


ResizeContainer

Extends Container
Implements the ProvidesResize and RequiresResize interfaces
Sizes its children
forceLayout bubbles to children of ResizeContainer at any level


InsertContainer

Extends Container
Implements the InsertPanel interface
Adds Widget and IsWidget insert support to Container


InsertResizeContainer

Extends ResizeContainer
Implements the InsertPanel interface
Adds 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());

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


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


Questions


Thank You!


Ext GWT 3.0 Layouts

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Ext GWT 3.0 Layouts

Similaire à Ext GWT 3.0 Layouts (17)

Plus de Sencha

Plus de Sencha (20)

Dernier

Dernier (20)

Ext GWT 3.0 Layouts