Advertisement

GWT.create 2013: Introduction to GXT

niloc132
Jan. 6, 2014
Advertisement

More Related Content

Advertisement

GWT.create 2013: Introduction to GXT

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