introducing ext gwt 3.0

Thursday, November 3, 2011

Darrell Meyer, Sencha

Ext GWT [email protected] @darrellmeyer


mailto:[email protected]

mailto:[email protected]

OverviewRelease Goals

Feature OverviewRelease Timeline


Name Games

Google Web Toolkit “G-W-T” “Gwit”

Ext GWT “E-X-T-G-W-T” “X-Gwit” “G-X-T”


Ext GWT 3.0 Goals


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


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


Feature Overview


FeaturesModels

Stores & LoadersTemplates

Widget ChangesCells & Cell Widgets

LayoutsUiBinderCharts

Theming & Appearance


Models


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


Server Communications

Transport Data TypeRPC POJOs

RequestFactory EntityProxy / AutoBeanRequestBuilder (XML / JSON) Interface / AutoBean


ValueProviderAllows access to an object’s propertySupports string based pathSupports nested propertiesCan be created directlyCan be created by generator


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

Stores & Loaders


StoresStores are client-side collections of dataFiltering and sortingChange eventsAccept any object typeData widgets are bound to stores

ListStore TreeStore

Store


LoadersLoader: Builds requests, sends to DataProxyDataProxy: Makes request to serverDataReader: Translates wire-format to objectsDataWriter: Translates objects to wire-format

DataProxy DataReader

Loader


Loader Interaction


Loader

Loader Interaction


Loader DataProxy

Loader Interaction


Loader DataProxy Server

Loader Interaction


Loader DataProxy Server

DataReader

Loader Interaction


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

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

DataLoader Example

loader = new ListLoader<ListLoadConfig, ListLoadResult<Email>>( proxy, reader);loader.addLoadHandler(new LoadResultListStoreBinding<ListLoadConfig, Email, ListLoadResult<Email>>(store));loader.load();

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


Templates


XTemplatesProvides compile time templatingRetrieves data from any Java BeanProduces SafeHtml


Name: {data.name}Salary: {data.income:currency}Kids:<tpl for="data.kids"><tpl if="age < 100">{#}. {parent.name}'s kid - {name} - {bday:date("M/d/yyyy")}</tpl></tpl>

XTemplates Example Pt. 1

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



interface ExampleStyle extends CssResource { String searchItem(); } interface ExampleTemplate extends XTemplates { @XTemplate("<div class='{style.searchItem}'>{post}</div>") SafeHtml render(Forum post, ExampleStyle style); }

Widget Changes


FieldsMost fields are now cell basedAllows to be used standalone and in data widgetsFields now work with the GWT Editing framework


State ManagementSate code moved out of Components themselvesSupports asynchronous retrieval of dataHTML Local Storage


Cells & Cell Widgets


Cells

New design and implementation from GWTRenders views of dataSupports events

Work with both GWT and Ext GWT Cells


Cells GWT AbstractInputCell

AbstractEventInputCell

FieldCell

ValueBaseFieldCell

CheckBoxCell TextInputCell TriggerFieldCell

ComboCell DateCell

SliderCell

TwinTriggerFieldCell

NumberCell

SpinnerFieldCell


Cell WidgetsCell support in all data widgetsTree, ListView, Grid,TreeGridReplaces Widget support in data widgets from 2.0High performance, interactive behavior


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

UiBinder


GWT UiBinder

Declarative user interfaces via XmlSeparations of duties Java developers and designersSupports both widgets and HTML markupSupports CSS


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>

Layouts


LayoutsNew optimized layout engineUiBinder support including layout dataFully typed containersEasier to use and understand API


Layouts

Container

BorderLayoutContainerBorderLayout

CenterLayout

FlowLayout

CenterLayoutContainer

FlowLayoutContainer

3.02.0


Charts


DrawCross platform drawing APISVG / VML / CanvasNormalizes differences between engine API syntaxDrawComponent base component for drawingDrawComponent works with GXT layouts


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


Appearance & Theming


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


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


Release Timeline


Release Timeline3.0 Beta 1 Q4 20113.0 GA early 2012


Road to 3.0Weekly snapshot builds to MavenActively helping with 3.0 issue and bugs in forums


Post 3.0ThemeBuilderMobile support


Questions?


introducing ext gwt 3.0

Technology

reader loader

loader interactionthursday

dataloader example loader

gwt requestbuilder

xtemplates example

power of gwt

gwt editing frameworkthursday

compiler use gwt apis