Ext GWT 3.0 Layouts
-
Upload
sencha -
Category
Technology
-
view
9.225 -
download
1
description
Transcript of Ext GWT 3.0 Layouts
![Page 1: Ext GWT 3.0 Layouts](https://reader036.fdocuments.net/reader036/viewer/2022081802/545c5315af7959cd098b4749/html5/thumbnails/1.jpg)
Wednesday, November 2, 11
![Page 3: Ext GWT 3.0 Layouts](https://reader036.fdocuments.net/reader036/viewer/2022081802/545c5315af7959cd098b4749/html5/thumbnails/3.jpg)
OverviewWhy did we change it?
What changed?GXT 2 to GXT 3 Usage examples
Questions
Wednesday, November 2, 11
![Page 4: Ext GWT 3.0 Layouts](https://reader036.fdocuments.net/reader036/viewer/2022081802/545c5315af7959cd098b4749/html5/thumbnails/4.jpg)
Why Did We Change It?
Wednesday, November 2, 11
![Page 5: Ext GWT 3.0 Layouts](https://reader036.fdocuments.net/reader036/viewer/2022081802/545c5315af7959cd098b4749/html5/thumbnails/5.jpg)
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
Wednesday, November 2, 11
![Page 6: Ext GWT 3.0 Layouts](https://reader036.fdocuments.net/reader036/viewer/2022081802/545c5315af7959cd098b4749/html5/thumbnails/6.jpg)
What’s New Or Different?
Wednesday, November 2, 11
![Page 7: Ext GWT 3.0 Layouts](https://reader036.fdocuments.net/reader036/viewer/2022081802/545c5315af7959cd098b4749/html5/thumbnails/7.jpg)
What’s New Or Different?
UiBinder support including layout dataTyped APIClearer inheritance structureDOM structure buildingGWT interface basedGWT Widget class supported natively without wrapping
Wednesday, November 2, 11
![Page 8: Ext GWT 3.0 Layouts](https://reader036.fdocuments.net/reader036/viewer/2022081802/545c5315af7959cd098b4749/html5/thumbnails/8.jpg)
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
Wednesday, November 2, 11
![Page 9: Ext GWT 3.0 Layouts](https://reader036.fdocuments.net/reader036/viewer/2022081802/545c5315af7959cd098b4749/html5/thumbnails/9.jpg)
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);
Wednesday, November 2, 11
![Page 10: Ext GWT 3.0 Layouts](https://reader036.fdocuments.net/reader036/viewer/2022081802/545c5315af7959cd098b4749/html5/thumbnails/10.jpg)
Inheritance Chain
Wednesday, November 2, 11
![Page 11: Ext GWT 3.0 Layouts](https://reader036.fdocuments.net/reader036/viewer/2022081802/545c5315af7959cd098b4749/html5/thumbnails/11.jpg)
Layouts
Container
BorderLayoutContainerBorderLayout
CenterLayout
FlowLayout
CenterLayoutContainer
FlowLayoutContainer
3.02.0
Wednesday, November 2, 11
![Page 12: Ext GWT 3.0 Layouts](https://reader036.fdocuments.net/reader036/viewer/2022081802/545c5315af7959cd098b4749/html5/thumbnails/12.jpg)
FlowLayout
Container
AbstractHtmlLayout Insert Resize
Component
Simple
BoxLayout
HtmlLayout
CardLayout
CssFloatLayout
HorizontalLayout BorderLayout
ContentPanel
Viewport
HBoxLayout
InsertResize
VerticalLayoutVBoxLayout
Wednesday, November 2, 11
![Page 13: Ext GWT 3.0 Layouts](https://reader036.fdocuments.net/reader036/viewer/2022081802/545c5315af7959cd098b4749/html5/thumbnails/13.jpg)
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
Wednesday, November 2, 11
![Page 14: Ext GWT 3.0 Layouts](https://reader036.fdocuments.net/reader036/viewer/2022081802/545c5315af7959cd098b4749/html5/thumbnails/14.jpg)
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);}
Wednesday, November 2, 11
![Page 15: Ext GWT 3.0 Layouts](https://reader036.fdocuments.net/reader036/viewer/2022081802/545c5315af7959cd098b4749/html5/thumbnails/15.jpg)
Native Widget Support
2.0Widgets wrapped in WidgetComponent
3.0Direct support of Widgets, no wrappingParent <-> Child relationship as expectedSupport for the GWT LayoutPanel classes
Wednesday, November 2, 11
![Page 16: Ext GWT 3.0 Layouts](https://reader036.fdocuments.net/reader036/viewer/2022081802/545c5315af7959cd098b4749/html5/thumbnails/16.jpg)
GWT / GXTInteroperability
Example
Wednesday, November 2, 11
![Page 17: Ext GWT 3.0 Layouts](https://reader036.fdocuments.net/reader036/viewer/2022081802/545c5315af7959cd098b4749/html5/thumbnails/17.jpg)
LayoutPanel IntegrationExample shows LayoutPanels and Containers used togetherVerticalLayoutContainer -> DockPanel -> ContentPanel
Wednesday, November 2, 11
![Page 18: Ext GWT 3.0 Layouts](https://reader036.fdocuments.net/reader036/viewer/2022081802/545c5315af7959cd098b4749/html5/thumbnails/18.jpg)
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
![Page 19: Ext GWT 3.0 Layouts](https://reader036.fdocuments.net/reader036/viewer/2022081802/545c5315af7959cd098b4749/html5/thumbnails/19.jpg)
Demonstration
Wednesday, November 2, 11
![Page 20: Ext GWT 3.0 Layouts](https://reader036.fdocuments.net/reader036/viewer/2022081802/545c5315af7959cd098b4749/html5/thumbnails/20.jpg)
Important LayoutContainers
Wednesday, November 2, 11
![Page 21: Ext GWT 3.0 Layouts](https://reader036.fdocuments.net/reader036/viewer/2022081802/545c5315af7959cd098b4749/html5/thumbnails/21.jpg)
Container
Holds the base container logicImplements the HasWidget interfaceDoes not do any resizing of its children
Wednesday, November 2, 11
![Page 22: Ext GWT 3.0 Layouts](https://reader036.fdocuments.net/reader036/viewer/2022081802/545c5315af7959cd098b4749/html5/thumbnails/22.jpg)
ResizeContainer
Extends ContainerImplements the ProvidesResize and RequiresResize interfacesSizes its childrenforceLayout bubbles to children of ResizeContainer at any level
Wednesday, November 2, 11
![Page 23: Ext GWT 3.0 Layouts](https://reader036.fdocuments.net/reader036/viewer/2022081802/545c5315af7959cd098b4749/html5/thumbnails/23.jpg)
InsertContainer
Extends ContainerImplements the InsertPanel interfaceAdds Widget and IsWidget insert support to Container
Wednesday, November 2, 11
![Page 24: Ext GWT 3.0 Layouts](https://reader036.fdocuments.net/reader036/viewer/2022081802/545c5315af7959cd098b4749/html5/thumbnails/24.jpg)
InsertResizeContainer
Extends ResizeContainerImplements the InsertPanel interfaceAdds Widget and IsWidget insert support to ResizeContainer
Wednesday, November 2, 11
![Page 25: Ext GWT 3.0 Layouts](https://reader036.fdocuments.net/reader036/viewer/2022081802/545c5315af7959cd098b4749/html5/thumbnails/25.jpg)
GXT 2 To GXT 3
Wednesday, November 2, 11
![Page 26: Ext GWT 3.0 Layouts](https://reader036.fdocuments.net/reader036/viewer/2022081802/545c5315af7959cd098b4749/html5/thumbnails/26.jpg)
BorderLayout in Explorer Demo
Wednesday, November 2, 11
![Page 27: Ext GWT 3.0 Layouts](https://reader036.fdocuments.net/reader036/viewer/2022081802/545c5315af7959cd098b4749/html5/thumbnails/27.jpg)
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
![Page 28: Ext GWT 3.0 Layouts](https://reader036.fdocuments.net/reader036/viewer/2022081802/545c5315af7959cd098b4749/html5/thumbnails/28.jpg)
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
![Page 29: Ext GWT 3.0 Layouts](https://reader036.fdocuments.net/reader036/viewer/2022081802/545c5315af7959cd098b4749/html5/thumbnails/29.jpg)
Usage Examples
Wednesday, November 2, 11
![Page 30: Ext GWT 3.0 Layouts](https://reader036.fdocuments.net/reader036/viewer/2022081802/545c5315af7959cd098b4749/html5/thumbnails/30.jpg)
Demonstration
Wednesday, November 2, 11
![Page 31: Ext GWT 3.0 Layouts](https://reader036.fdocuments.net/reader036/viewer/2022081802/545c5315af7959cd098b4749/html5/thumbnails/31.jpg)
Questions
Wednesday, November 2, 11
![Page 32: Ext GWT 3.0 Layouts](https://reader036.fdocuments.net/reader036/viewer/2022081802/545c5315af7959cd098b4749/html5/thumbnails/32.jpg)
Thank You!
Wednesday, November 2, 11