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

2.
Sencha GXT - Overview
A Java library for building rich applications with GWT
•
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

3.
GXT UI Widgets
Out Of The Box

4.
GXT Charts
Area, Bar, Column, Pie, Line, & More...

5.
GXT Features
•
Models & Server Communications
!
•
Stores & Loaders
!
•
Templates & Widgets
!
•
Cells & Cell Widgets
!
•
UIBinder
!
•
Layouts
!
•
Charts

6.
Models
&
Server Communications

7.
Models & Server Communications
Models
•
•
•
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

8.
Models & Server Communications
Value Provider
•
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");

9.
Models & Server Communications
Value Provider
•
•
•
•
•
Allows access to an object’s property
Supports string based path
Supports nested properties
Can be created directly
Can be created by generator

10.
Stores & Loaders

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

12.
Stores & Loaders
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

13.
Stores & Loaders
Loader Interactions
Loader
DataProxy
DataReader
Server

14.
Stores & Loaders
DataProxy
HttpProxy works with GWT RequestBuilder
The type parameters defines the input and return type
•
•
String path = "data/data.xml";
!
RequestBuilder builder = new RequestBuilder(RequestBuilder.GET, path);
!
HttpProxy<ListLoadConfig> proxy = new HttpProxy<ListLoadConfig>(builder);
!

15.
Stores & Loaders
DataReader
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());
};
!
};

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

17.
Stores & Loaders
DataWriter
•
•
•
Turns logical data into format to be sent back to server
Reverse behavior of DataReaders
Example use with LoadConfig object sent to server
DataWriter
AutoBeanWriter
JsonWriter
UrlEncodingWriter
XmlWriter

18.
Templates & Widgets

19.
Templates & Widgets
XTemplates
•
•
•
Provides compile time templating
Retrieves data from any Java Bean
Produces SafeHtml

20.
Templates & Widgets
XTemplates
<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>
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);
}

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

22.
Cells & Cell Widgets

23.
Cells & Cell Widgets
Cells
GWT AbstractInputCell
AbstractEventInputCell
FieldCell
ValueBaseFieldCell
ProgressBarCell
SliderCell
ButtonCell
SplitButtonCell
TwinTriggerFieldCell
CheckBoxCell
TextInputCell
TriggerFieldCell
NumberCell
ComboCell
DateCell
SpinnerFieldCell

24.
Cells & Cell Widgets
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

25.
Cells & Cell Widgets
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);

26.
UIBinder

27.
UIBinder
GWT Binder
•
•
•
•
Declarative user interfaces via Xml
Separations of duties Java developers and designers
Supports both widgets and HTML markup
Supports CSS
<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>

28.
Layouts

29.
Charts

30.
Appearance & Theming

31.
Continue the discussion
Getting Started with GXT 3.1 in Room 3

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

33.
Theme Builder
Introduction of Styling Configs
Before
Afte
r
panel {
font {
color = "#ffffff"
family = "Tahoma, Arial"
size = "14px"
weight = "bold"
}
borderStyle = "solid"
borderColor = "#157FCC"
}

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

35.
GXT 4.0 - Tablet Support
Touch Events
✔ Gestures & Events
Normalization
swipe
✔ Global Event Delegation
✔ Momentum Scrolling
rotate
drag
tapcancel
longpress
doubletap
tap
touchstart/end
touchmove
singletap
pinch
pinchstart/end
rotatestart/end

36.
GXT 4.0 - Charts Package
Bringing Touch Gestures to GXT Charts
GXT Charts
Designed for Desktop
(Plenty of Memory & CPU)
!
Mouse Inputs
GXT Touch Charts
Optimized for Touch
Devices
!
Touch Inputs

37.
GXT 4.0 - ARIA Support
Accessibility & 508 Compliance

38.
GXT 4.0 - RTL Support
Left to Right (LTR)
Right to Left (RTL)

39.
Thank You!
Questions?