Introduction to GXT
Colin Alworth / Sencha Inc.	

colin.alworth@sencha.com
Sencha GXT - Overview
A Java library for building rich applications with GWT
•

Native GWT solution with no external JavaS...
GXT UI Widgets
Out Of The Box
GXT Charts
Area, Bar, Column, Pie, Line, & More...
GXT Features
•

Models & Server Communications
!

•

Stores & Loaders
!

•

Templates & Widgets
!

•

Cells & Cell Widgets...
Models
&
Server Communications
Models & Server Communications
Models
•
•
•

Full support for any POJO
Supports RPC, RequestFactory, AutoBeans
Data Stores...
Models & Server Communications
Value Provider
•

interface PostProperties extends PropertyAccess<Post> {	

!
ValueProvider...
Models & Server Communications
Value Provider
•
•
•
•
•

Allows access to an object’s property
Supports string based path
...
Stores & Loaders
Stores & Loaders
Stores
•
•
•
•
•

Stores are client-side collections of data
Filtering and sorting
Change events
Accept a...
Stores & Loaders
Loaders
•
•
•
•

Loader: Builds requests, sends to DataProxy
DataProxy: Makes request to server
DataReade...
Stores & Loaders
Loader Interactions

Loader

DataProxy
DataReader

Server
Stores & Loaders
DataProxy
HttpProxy works with GWT RequestBuilder
The type parameters defines the input and return type

•...
Stores & Loaders
DataReader
Reader “transforms” data
Most String readers use AutoBeans

•
•

reader = new XmlReader<ListLo...
Stores & Loaders
DataLoader
loader = new ListLoader<ListLoadConfig, ListLoadResult<Email>>(	
proxy, reader);	

!
!
loader....
Stores & Loaders
DataWriter
•
•
•

Turns logical data into format to be sent back to server
Reverse behavior of DataReader...
Templates & Widgets
Templates & Widgets
XTemplates
•
•
•

Provides compile time templating
Retrieves data from any Java Bean
Produces SafeHtml
Templates & Widgets
XTemplates
<p><b>Name:</b> {data.name}</p>	
<p><b>Salary</b>: {data.income:currency}</p>	
<p><b>Kids:<...
Templates & Widgets
Widgets
•
•

Fields are cell based and can be used standalone or in data widgets
Fields work with the ...
Cells & Cell Widgets
Cells & Cell Widgets
Cells

GWT AbstractInputCell

AbstractEventInputCell

FieldCell

ValueBaseFieldCell

ProgressBarCell
...
Cells & Cell Widgets
Cell Widgets
•
•
•
•

Cell support in all data widgets
Tree, ListView, Grid,TreeGrid
Replaces Widget ...
Cells & Cell Widgets
Cell Example
ColumnConfig column = new ColumnConfig();	
column.setRenderer(renderer);	

!
cc1 = new C...
UIBinder
UIBinder
GWT Binder
•
•
•
•

Declarative user interfaces via Xml
Separations of duties Java developers and designers
Suppo...
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 Builder
Introduction of Styling Configs

Before
Afte
r

panel {

 font {

 
 color = "#ffffff"

 
 family = "Tahoma, ...
Sencha GXT 4.0
(In The Making - Summer End 2014)
GXT 4.0 - Tablet Support
Touch Events

✔ Gestures & Events
Normalization
swipe
✔ Global Event Delegation
✔ Momentum Scroll...
GXT 4.0 - Charts Package
Bringing Touch Gestures to GXT Charts

GXT Charts
Designed for Desktop 
(Plenty of Memory & CPU)
...
GXT 4.0 - ARIA Support
Accessibility & 508 Compliance
GXT 4.0 - RTL Support
Left to Right (LTR)

Right to Left (RTL)
Thank You!
Questions?
Upcoming SlideShare
Loading in...5
×

GWT.create 2013: Introduction to GXT

1,403

Published on

Published in: Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,403
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
32
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

GWT.create 2013: Introduction to GXT

  1. 1. Introduction to GXT Colin Alworth / Sencha Inc. colin.alworth@sencha.com
  2. 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. 3. GXT UI Widgets Out Of The Box
  4. 4. GXT Charts Area, Bar, Column, Pie, Line, & More...
  5. 5. GXT Features • Models & Server Communications ! • Stores & Loaders ! • Templates & Widgets ! • Cells & Cell Widgets ! • UIBinder ! • Layouts ! • Charts
  6. 6. Models & Server Communications
  7. 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. 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. 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. 10. Stores & Loaders
  11. 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. 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. 13. Stores & Loaders Loader Interactions Loader DataProxy DataReader Server
  14. 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. 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. 16. Stores & Loaders DataLoader loader = new ListLoader<ListLoadConfig, ListLoadResult<Email>>( proxy, reader); ! ! loader.addLoadHandler(new LoadResultListStoreBinding<ListLoadConfig, Email, ListLoadResult<Email>>(store)); ! ! loader.load();
  17. 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. 18. Templates & Widgets
  19. 19. Templates & Widgets XTemplates • • • Provides compile time templating Retrieves data from any Java Bean Produces SafeHtml
  20. 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. 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. 22. Cells & Cell Widgets
  23. 23. Cells & Cell Widgets Cells GWT AbstractInputCell AbstractEventInputCell FieldCell ValueBaseFieldCell ProgressBarCell SliderCell ButtonCell SplitButtonCell TwinTriggerFieldCell CheckBoxCell TextInputCell TriggerFieldCell NumberCell ComboCell DateCell SpinnerFieldCell
  24. 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. 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. 26. UIBinder
  27. 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. 28. Layouts
  29. 29. Charts
  30. 30. Appearance & Theming
  31. 31. Continue the discussion Getting Started with GXT 3.1 in Room 3
  32. 32. Sencha GXT 3.1 (What’s Coming - Q1 2014)
  33. 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. 34. Sencha GXT 4.0 (In The Making - Summer End 2014)
  35. 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. 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. 37. GXT 4.0 - ARIA Support Accessibility & 508 Compliance
  38. 38. GXT 4.0 - RTL Support Left to Right (LTR) Right to Left (RTL)
  39. 39. Thank You! Questions?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×