SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
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
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
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());
};
!
};
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
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);
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>