Introduction to GXT Colin Alworth / Sencha Inc. colin.alworth@sencha.com

• Native GWT solution with no external JavaScript or 3rd party libraries !

• High performance, customizable UI widgets !

• Well designed, consistent and fully documented source code !

• Built-in support for RPC, RequestFactory, and XML/JSON over AJAX !

• Full theming support with standard CSS !

• Commercial licenses and support available

Sencha GXT - OverviewA Java library for building rich applications with GWT

GXT UI WidgetsOut Of The Box

GXT ChartsArea, Bar, Column, Pie, Line, & More...

• Models & Server Communications !

• Stores & Loaders !

• Templates & Widgets !

• Cells & Cell Widgets !

• UIBinder !

• Layouts !

• Charts

GXT Features

Models &

Server Communications

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

Models & Server CommunicationsModels

Server Communications

Transport Data Type

RPC POJOs

RequestFactory EntityProxy / AutoBean

RequestBuilder (XML / JSON) Interface / AutoBean

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

Models & Server CommunicationsValue Provider

• Allows access to an object’s property • Supports string based path • Supports nested properties • Can be created directly • Can be created by generator

Models & Server CommunicationsValue Provider

Stores & Loaders

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

Stores & LoadersStores

ListStore TreeStore

Store

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

Stores & LoadersLoaders

DataProxy DataReader

Loader

Stores & LoadersLoader Interactions

Loader DataProxy Server

DataReader

• HttpProxy works with GWT RequestBuilder • The type parameters defines the input and return type

Stores & LoadersDataProxy

String path = "data/data.xml";!RequestBuilder builder = new RequestBuilder(RequestBuilder.GET, path);!HttpProxy<ListLoadConfig> proxy = new HttpProxy<ListLoadConfig>(builder);!

• Reader “transforms” data • Most String readers use AutoBeans

Stores & LoadersDataReader

reader = new XmlReader<ListLoadResult<Email>, EmailCollection>(factory, EmailCollection.class) {! protected ListLoadResult<Email> createReturnData(Object loadConfig, EmailCollection records) { return new BaseListLoadResult<Email>(records.getValues()); };!};

Stores & LoadersDataLoader

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

• Turns logical data into format to be sent back to server • Reverse behavior of DataReaders • Example use with LoadConfig object sent to server

Stores & LoadersDataWriter

DataWriter

AutoBeanWriter

JsonWriter UrlEncodingWriter XmlWriter

Templates & Widgets

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

Templates & WidgetsXTemplates

Templates & WidgetsXTemplates

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

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

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

• Fields are cell based and can be used standalone or in data widgets • Fields work with the GWT editing framework

Templates & WidgetsWidgets

Cells & Cell Widgets

Cells & Cell WidgetsCells GWT AbstractInputCell

AbstractEventInputCell

FieldCell

ValueBaseFieldCell

CheckBoxCell TextInputCell TriggerFieldCell

ComboCell DateCell

SliderCell

TwinTriggerFieldCell

NumberCell

SpinnerFieldCell

ButtonCellProgressBarCell

SplitButtonCell

• Cell support in all data widgets • Tree, ListView, Grid,TreeGrid • Replaces Widget support in data widgets from 2.0 • High performance, interactive behavior

Cells & Cell WidgetsCell Widgets

Cells & Cell WidgetsCell 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

• Declarative user interfaces via Xml • Separations of duties Java developers and designers • Supports both widgets and HTML markup • Supports CSS

UIBinderGWT Binder

<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

Charts

Appearance & Theming

Continue the discussion Getting Started with GXT 3.1 in Room 3

Sencha GXT 3.1 (What’s Coming - Q1 2014)

Theme BuilderIntroduction of Styling Configs

Before

After panel {

font { color = "#ffffff" family = "Tahoma, Arial" size = "14px" weight = "bold" } borderStyle = "solid" borderColor = "#157FCC" }

Sencha GXT 4.0 (In The Making - Summer End 2014)

✔ Gestures & Events Normalization ✔ Global Event Delegation ✔ Momentum Scrolling

GXT 4.0 - Tablet SupportTouch Events

tap

swipe

pinch

touchmove

touchstart/end

longpress

rotate doubletap

tapcancel

singletap

pinchstart/end

rotatestart/end

drag

GXT 4.0 - Charts Package Bringing Touch Gestures to GXT Charts

GXT ChartsDesigned for Desktop (Plenty of Memory & CPU) !Mouse Inputs

GXT Touch ChartsOptimized for Touch Devices !Touch Inputs

GXT 4.0 - ARIA SupportAccessibility & 508 Compliance

GXT 4.0 - RTL SupportLeft to Right (LTR)

Right to Left (RTL)

Thank You! Questions?