Introducing Ext GWT 3.0

Ext GWT 3.0
Darrell Meyer, Sencha

darrell@sencha.com @darrellmeyer

Thursday, November 3, 2011

Overview
Release Goals
Feature Overview
Release 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 compiler
Use GWT API’s where applicable for better interoperability
Integrate and support best practices of GWT
Build 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


Features
Models
Stores & Loaders
Templates
Widget Changes
Cells & Cell Widgets
Layouts
UiBinder
Charts
Theming & Appearance


Models


Model Support

2.0
Forced users to work with GXT Models
Models kept internal map for data
Not strongly typed

3.0
Full support for any POJO
Supports RPC, RequestFactory, AutoBeans
Data Stores take any object type


Server Communications

Transport Data Type
RPC POJOs
RequestFactory EntityProxy / AutoBean
RequestBuilder (XML / JSON) Interface / AutoBean


ValueProvider
Allows access to an object’s property
Supports string based path
Supports nested properties
Can be created directly
Can 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


Stores
Stores are client-side collections of data
Filtering and sorting
Change events
Accept any object type
Data widgets are bound to stores

Store

ListStore TreeStore


Loaders
Loader: Builds requests, sends to DataProxy
DataProxy: Makes request to server
DataReader: Translates wire-format to objects
DataWriter: Translates objects to wire-format

Loader

DataProxy DataReader


Loader Interaction


Loader Interaction

Loader


Loader Interaction

Loader DataProxy


Loader Interaction

Loader DataProxy Server


Loader Interaction

Loader DataProxy Server
DataReader


DataProxy Example
HttpProxy works with GWT RequestBuilder
The type parameters deﬁnes the input and return type

String path = "data/data.xml";

RequestBuilder builder = new RequestBuilder(RequestBuilder.GET, path);

HttpProxy<ListLoadConfig> proxy = new HttpProxy<ListLoadConfig>(builder);

DataReader Example
Reader “transforms” data
Most String readers use AutoBeans

reader = new XmlReader<ListLoadResult<Email>, EmailCollection>(factory,
EmailCollection.class) {

protected ListLoadResult<Email> createReturnData(Object loadConfig,
EmailCollection records) {
return new BaseListLoadResult<Email>(records.getValues());
};

};

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 server
Reverse behavior of DataReaders
Example use with LoadConﬁg object sent to server

DataWriter

AutoBeanWriter

JsonWriter UrlEncodingWriter XmlWriter


Templates


XTemplates
Provides compile time templating
Retrieves data from any Java Bean
Produces SafeHtml


XTemplates Example Pt. 1

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>


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


Fields
Most ﬁelds are now cell based
Allows to be used standalone and in data widgets
Fields now work with the GWT Editing framework


State Management
Sate code moved out of Components themselves
Supports asynchronous retrieval of data
HTML Local Storage


Cells & Cell Widgets


Cells

New design and implementation from GWT
Renders views of data
Supports events

Work with both GWT and Ext GWT Cells


Cells GWT AbstractInputCell

AbstractEventInputCell

FieldCell

ValueBaseFieldCell SliderCell

CheckBoxCell TextInputCell TriggerFieldCell

TwinTriggerFieldCell

NumberCell

ComboCell DateCell
SpinnerFieldCell


Cell Widgets
Cell support in all data widgets
Tree, ListView, Grid,TreeGrid
Replaces Widget support in data widgets from 2.0
High 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 Xml
Separations of duties Java developers and designers
Supports both widgets and HTML markup
Supports 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


Layouts
New optimized layout engine
UiBinder support including layout data
Fully typed containers
Easier to use and understand API


Layouts
2.0 3.0
BorderLayout BorderLayoutContainer

Container CenterLayout CenterLayoutContainer

FlowLayout FlowLayoutContainer


Charts


Draw
Cross platform drawing API
SVG / VML / Canvas
Normalizes differences between engine API syntax
DrawComponent base component for drawing
DrawComponent works with GXT layouts


Charts
Integrated with GXT Models & Stores
Full event support for series and legends
Custom tooltip for series
All charts support animations via GXT Fx
Customize appearance of series, axis, legend


Appearance & Theming


2.0 Theming
Single monolithic gxt-all.css
Contains CSS for all browsers
Manual image spriting
Hard to determine what CSS is applied to a Widget
No compile time checks


Appearance Pattern
Renders the “view” via a SafeHtml string
Responsible for HTML structure and styles
Responds to state changes
Appearance pattern applied to both widgets and cells

ClientBundle

Widget Appearance CssResource

XTemplate


Release Timeline


Release Timeline
3.0 Beta 1 Q4 2011
3.0 GA early 2012


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


Post 3.0
ThemeBuilder
Mobile support


Questions?


Introducing Ext GWT 3.0

Recommandé

Recommandé

Contenu connexe

Similaire à Introducing Ext GWT 3.0

Similaire à Introducing Ext GWT 3.0 (20)

Plus de Sencha

Plus de Sencha (20)

Dernier

Dernier (20)

Introducing Ext GWT 3.0