Your SlideShare is downloading. ×
  • Like
GWT.create 2013: Introduction to GXT
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

GWT.create 2013: Introduction to GXT

  • 1,063 views
Published

 

Published in Technology , Art & Photos
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,063
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
24
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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