Introducing Ext GWT 3.0
-
Upload
sencha -
Category
Technology
-
view
119 -
download
4
description
Transcript of Introducing Ext GWT 3.0
![Page 1: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/1.jpg)
Thursday, November 3, 2011
![Page 3: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/3.jpg)
OverviewRelease Goals
Feature OverviewRelease Timeline
Thursday, November 3, 2011
![Page 4: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/4.jpg)
Name Games
Google Web Toolkit “G-W-T” “Gwit”
Ext GWT “E-X-T-G-W-T” “X-Gwit” “G-X-T”
Thursday, November 3, 2011
![Page 5: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/5.jpg)
Ext GWT 3.0 Goals
Thursday, November 3, 2011
![Page 6: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/6.jpg)
Primary Goals
Leverage the power of GWT and its compilerUse GWT API’s where applicable for better interoperabilityIntegrate and support best practices of GWTBuild and release through Maven
Thursday, November 3, 2011
![Page 7: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/7.jpg)
Syncing with GWT
GXT 2.0 GXT 3.0
Events & Listeners Custom GWT
Rendering Deferred Direct
Interface Based No Yes
Models Custom POJO
UiBinder Support No Yes
SafeHtml Support No Yes
GWT Based Charts Flash Yes
Theming Custom ClientBundle
Thursday, November 3, 2011
![Page 8: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/8.jpg)
Feature Overview
Thursday, November 3, 2011
![Page 9: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/9.jpg)
FeaturesModels
Stores & LoadersTemplates
Widget ChangesCells & Cell Widgets
LayoutsUiBinderCharts
Theming & Appearance
Thursday, November 3, 2011
![Page 10: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/10.jpg)
Models
Thursday, November 3, 2011
![Page 11: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/11.jpg)
Model Support
2.0Forced users to work with GXT ModelsModels kept internal map for dataNot strongly typed
3.0Full support for any POJOSupports RPC, RequestFactory, AutoBeansData Stores take any object type
Thursday, November 3, 2011
![Page 12: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/12.jpg)
Server Communications
Transport Data TypeRPC POJOs
RequestFactory EntityProxy / AutoBeanRequestBuilder (XML / JSON) Interface / AutoBean
Thursday, November 3, 2011
![Page 13: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/13.jpg)
ValueProviderAllows access to an object’s propertySupports string based pathSupports nested propertiesCan be created directlyCan be created by generator
Thursday, November 3, 2011
![Page 14: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/14.jpg)
ValueProviderAllows access to an object’s propertySupports string based pathSupports nested propertiesCan be created directlyCan be created by generator
Thursday, November 3, 2011
![Page 15: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/15.jpg)
ValueProvider
interface PostProperties extends PropertyAccess<Post> {
ValueProvider<Post, String> username();
ValueProvider<Post, String> forum();
ValueProvider<Post, Date> date(); }
// create properties instance via deferred binding PostProperties props = GWT.create(PostProperties.class);
// use value providers new ColumnConfig<Post, String>(props.forum(), 150, "Forum");
Thursday, November 3, 2011
![Page 16: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/16.jpg)
Stores & Loaders
Thursday, November 3, 2011
![Page 17: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/17.jpg)
StoresStores are client-side collections of dataFiltering and sortingChange eventsAccept any object typeData widgets are bound to stores
ListStore TreeStore
Store
Thursday, November 3, 2011
![Page 18: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/18.jpg)
LoadersLoader: Builds requests, sends to DataProxyDataProxy: Makes request to serverDataReader: Translates wire-format to objectsDataWriter: Translates objects to wire-format
DataProxy DataReader
Loader
Thursday, November 3, 2011
![Page 19: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/19.jpg)
Loader Interaction
Thursday, November 3, 2011
![Page 20: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/20.jpg)
Loader
Loader Interaction
Thursday, November 3, 2011
![Page 21: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/21.jpg)
Loader DataProxy
Loader Interaction
Thursday, November 3, 2011
![Page 22: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/22.jpg)
Loader DataProxy Server
Loader Interaction
Thursday, November 3, 2011
![Page 23: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/23.jpg)
Loader DataProxy Server
Loader Interaction
Thursday, November 3, 2011
![Page 24: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/24.jpg)
Loader DataProxy Server
Loader Interaction
Thursday, November 3, 2011
![Page 25: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/25.jpg)
Loader DataProxy Server
DataReader
Loader Interaction
Thursday, November 3, 2011
![Page 26: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/26.jpg)
DataProxy Example
String path = "data/data.xml";
RequestBuilder builder = new RequestBuilder(RequestBuilder.GET, path);
HttpProxy<ListLoadConfig> proxy = new HttpProxy<ListLoadConfig>(builder);
HttpProxy works with GWT RequestBuilderThe type parameters defines the input and return type
Thursday, November 3, 2011
![Page 27: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/27.jpg)
DataReader Example
reader = new XmlReader<ListLoadResult<Email>, EmailCollection>(factory, EmailCollection.class) {
protected ListLoadResult<Email> createReturnData(Object loadConfig, EmailCollection records) { return new BaseListLoadResult<Email>(records.getValues()); };
};
Reader “transforms” dataMost String readers use AutoBeans
Thursday, November 3, 2011
![Page 28: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/28.jpg)
DataLoader Example
loader = new ListLoader<ListLoadConfig, ListLoadResult<Email>>( proxy, reader);loader.addLoadHandler(new LoadResultListStoreBinding<ListLoadConfig, Email, ListLoadResult<Email>>(store));loader.load();
Thursday, November 3, 2011
![Page 29: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/29.jpg)
DataWriter
Turns logical data into format to be sent back to serverReverse behavior of DataReadersExample use with LoadConfig object sent to server
DataWriter
AutoBeanWriter
JsonWriter UrlEncodingWriter XmlWriter
Thursday, November 3, 2011
![Page 30: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/30.jpg)
Templates
Thursday, November 3, 2011
![Page 31: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/31.jpg)
XTemplatesProvides compile time templatingRetrieves data from any Java BeanProduces SafeHtml
Thursday, November 3, 2011
![Page 32: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/32.jpg)
<p><b>Name:</b> {data.name}</p><p><b>Salary</b>: {data.income:currency}</p><p><b>Kids:</b></p><tpl for="data.kids"><tpl if="age < 100"><p>{#}. {parent.name}'s kid - {name} - {bday:date("M/d/yyyy")}</p></tpl></tpl>
XTemplates Example Pt. 1
Thursday, November 3, 2011
![Page 33: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/33.jpg)
public interface DataRenderer extends XTemplates {
@XTemplate(source = "template.html") public SafeHtml renderTemplate(Person data);
}
DataRenderer renderer = GWT.create(DataRenderer.class); HTML text = new HTML(renderer.renderTemplate(person));
XTemplates Example Pt. 2
Thursday, November 3, 2011
![Page 34: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/34.jpg)
interface ExampleStyle extends CssResource { String searchItem(); } interface ExampleTemplate extends XTemplates { @XTemplate("<div class='{style.searchItem}'>{post}</div>") SafeHtml render(Forum post, ExampleStyle style); }
XTemplates Example Pt. 3
Thursday, November 3, 2011
![Page 35: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/35.jpg)
Widget Changes
Thursday, November 3, 2011
![Page 36: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/36.jpg)
FieldsMost fields are now cell basedAllows to be used standalone and in data widgetsFields now work with the GWT Editing framework
Thursday, November 3, 2011
![Page 37: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/37.jpg)
State ManagementSate code moved out of Components themselvesSupports asynchronous retrieval of dataHTML Local Storage
Thursday, November 3, 2011
![Page 38: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/38.jpg)
Cells & Cell Widgets
Thursday, November 3, 2011
![Page 39: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/39.jpg)
Cells
New design and implementation from GWTRenders views of dataSupports events
Work with both GWT and Ext GWT Cells
Thursday, November 3, 2011
![Page 40: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/40.jpg)
Cells GWT AbstractInputCell
AbstractEventInputCell
FieldCell
ValueBaseFieldCell
CheckBoxCell TextInputCell TriggerFieldCell
ComboCell DateCell
SliderCell
TwinTriggerFieldCell
NumberCell
SpinnerFieldCell
Thursday, November 3, 2011
![Page 41: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/41.jpg)
Cell WidgetsCell support in all data widgetsTree, ListView, Grid,TreeGridReplaces Widget support in data widgets from 2.0High performance, interactive behavior
Thursday, November 3, 2011
![Page 42: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/42.jpg)
Thursday, November 3, 2011
![Page 43: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/43.jpg)
Cell Example
ColumnConfig column = new ColumnConfig();column.setRenderer(renderer);
cc1 = new ColumnConfig<Plant, String>(properties.name(), 100, "Name"); TextButtonCell button = new TextButtonCell();button.addSelectHandler(new SelectHandler() { @Override public void onSelect(SelectEvent event) { Context c = event.getContext(); int row = c.getIndex(); Plant p = store.get(row); Info.display("Event", "The " + p.getName() + " was clicked."); }});cc1.setCell(button);
Thursday, November 3, 2011
![Page 44: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/44.jpg)
UiBinder
Thursday, November 3, 2011
![Page 45: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/45.jpg)
GWT UiBinder
Declarative user interfaces via XmlSeparations of duties Java developers and designersSupports both widgets and HTML markupSupports CSS
Thursday, November 3, 2011
![Page 46: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/46.jpg)
UiBinder
<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>
Thursday, November 3, 2011
![Page 47: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/47.jpg)
Layouts
Thursday, November 3, 2011
![Page 48: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/48.jpg)
LayoutsNew optimized layout engineUiBinder support including layout dataFully typed containersEasier to use and understand API
Thursday, November 3, 2011
![Page 49: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/49.jpg)
Layouts
Container
BorderLayoutContainerBorderLayout
CenterLayout
FlowLayout
CenterLayoutContainer
FlowLayoutContainer
3.02.0
Thursday, November 3, 2011
![Page 50: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/50.jpg)
Charts
Thursday, November 3, 2011
![Page 51: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/51.jpg)
DrawCross platform drawing APISVG / VML / CanvasNormalizes differences between engine API syntaxDrawComponent base component for drawingDrawComponent works with GXT layouts
Thursday, November 3, 2011
![Page 52: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/52.jpg)
ChartsIntegrated with GXT Models & StoresFull event support for series and legendsCustom tooltip for seriesAll charts support animations via GXT FxCustomize appearance of series, axis, legend
Thursday, November 3, 2011
![Page 53: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/53.jpg)
Thursday, November 3, 2011
![Page 54: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/54.jpg)
Appearance & Theming
Thursday, November 3, 2011
![Page 55: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/55.jpg)
2.0 ThemingSingle monolithic gxt-all.cssContains CSS for all browsersManual image spritingHard to determine what CSS is applied to a WidgetNo compile time checks
Thursday, November 3, 2011
![Page 56: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/56.jpg)
Appearance PatternRenders the “view” via a SafeHtml stringResponsible for HTML structure and stylesResponds to state changesAppearance pattern applied to both widgets and cells
AppearanceWidget
ClientBundle
CssResource
XTemplate
Thursday, November 3, 2011
![Page 57: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/57.jpg)
Release Timeline
Thursday, November 3, 2011
![Page 58: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/58.jpg)
Release Timeline3.0 Beta 1 Q4 20113.0 GA early 2012
Thursday, November 3, 2011
![Page 59: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/59.jpg)
Road to 3.0Weekly snapshot builds to MavenActively helping with 3.0 issue and bugs in forums
Thursday, November 3, 2011
![Page 60: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/60.jpg)
Post 3.0ThemeBuilderMobile support
Thursday, November 3, 2011
![Page 61: Introducing Ext GWT 3.0](https://reader038.fdocuments.net/reader038/viewer/2022102922/54c7bf964a7959395c8b4571/html5/thumbnails/61.jpg)
Questions?
Thursday, November 3, 2011