0
Thursday, November 3, 2011
Ext GWT 3.0                             Darrell Meyer, Sencha             darrell@sencha.com                 @darrellmeyer...
Overview                              Release Goals                             Feature Overview                          ...
Name Games                             Google Web Toolkit     “G-W-T”        “Gwit”                                 Ext GW...
Ext GWT 3.0 GoalsThursday, November 3, 2011
Primary Goals       Leverage the power of GWT and its compiler       Use GWT API’s where applicable for better interoperab...
Syncing with GWT                                          GXT 2.0     GXT 3.0                     Events & Listeners   Cus...
Feature OverviewThursday, November 3, 2011
Features                                     Models                               Stores & Loaders                        ...
ModelsThursday, November 3, 2011
Model Support      2.0      Forced users to work with GXT Models      Models kept internal map for data      Not strongly ...
Server Communications                 Transport                   Data Type                    RPC                       P...
ValueProvider       Allows access to an object’s property       Supports string based path       Supports nested propertie...
ValueProvider       Allows access to an object’s property       Supports string based path       Supports nested propertie...
ValueProvider              interface PostProperties extends PropertyAccess<Post> {                   ValueProvider<Post, S...
Stores & LoadersThursday, November 3, 2011
Stores      Stores are client-side collections of data      Filtering and sorting      Change events      Accept any objec...
Loaders      Loader: Builds requests, sends to DataProxy      DataProxy: Makes request to server      DataReader: Translat...
Loader InteractionThursday, November 3, 2011
Loader Interaction                 LoaderThursday, November 3, 2011
Loader Interaction                 Loader      DataProxyThursday, November 3, 2011
Loader Interaction                 Loader      DataProxy   ServerThursday, November 3, 2011
Loader Interaction                 Loader      DataProxy   ServerThursday, November 3, 2011
Loader Interaction                 Loader      DataProxy   ServerThursday, November 3, 2011
Loader Interaction                 Loader                   DataProxy   Server                             DataReaderThurs...
DataProxy Example   HttpProxy works with GWT RequestBuilder   The type parameters defines the input and return type   Strin...
DataReader Example  Reader “transforms” data  Most String readers use AutoBeans   reader = new XmlReader<ListLoadResult<Em...
DataLoader Example loader = new ListLoader<ListLoadConfig, ListLoadResult<Email>>(         proxy, reader); loader.addLoadH...
DataWriter   Turns logical data into format to be sent back to server   Reverse behavior of DataReaders   Example use with...
TemplatesThursday, November 3, 2011
XTemplates   Provides compile time templating   Retrieves data from any Java Bean   Produces SafeHtmlThursday, November 3,...
XTemplates Example Pt. 1               <p><b>Name:</b> {data.name}</p>               <p><b>Salary</b>: {data.income:curren...
XTemplates Example Pt. 2               public interface DataRenderer extends XTemplates {                    @XTemplate(so...
XTemplates Example Pt. 3           interface ExampleStyle extends CssResource {             String searchItem();          ...
Widget ChangesThursday, November 3, 2011
Fields       Most fields are now cell based       Allows to be used standalone and in data widgets       Fields now work wi...
State Management       Sate code moved out of Components themselves       Supports asynchronous retrieval of data       HT...
Cells & Cell WidgetsThursday, November 3, 2011
Cells      New design and implementation from GWT      Renders views of data      Supports events      Work with both GWT ...
Cells                                  GWT AbstractInputCell                                           AbstractEventInputC...
Cell Widgets      Cell support in all data widgets      Tree, ListView, Grid,TreeGrid      Replaces Widget support in data...
Thursday, November 3, 2011
Cell Example        ColumnConfig column = new ColumnConfig();        column.setRenderer(renderer);        cc1 = new Column...
UiBinderThursday, November 3, 2011
GWT UiBinder      Declarative user interfaces via Xml      Separations of duties Java developers and designers      Suppor...
UiBinder <ui:UiBinder xmlns:ui=urn:ui:com.google.gwt.uibinder ...>   <container:CenterLayoutContainer>     <gxt:ContentPan...
LayoutsThursday, November 3, 2011
Layouts       New optimized layout engine       UiBinder support including layout data       Fully typed containers       ...
Layouts                                 2.0                3.0                             BorderLayout   BorderLayoutCont...
ChartsThursday, November 3, 2011
Draw      Cross platform drawing API      SVG / VML / Canvas      Normalizes differences between engine API syntax      Dr...
Charts       Integrated with GXT Models & Stores       Full event support for series and legends       Custom tooltip for ...
Thursday, November 3, 2011
Appearance & ThemingThursday, November 3, 2011
2.0 Theming      Single monolithic gxt-all.css      Contains CSS for all browsers      Manual image spriting      Hard to ...
Appearance Pattern      Renders the “view” via a SafeHtml string      Responsible for HTML structure and styles      Respo...
Release TimelineThursday, November 3, 2011
Release Timeline      3.0 Beta 1 Q4 2011      3.0 GA early 2012Thursday, November 3, 2011
Road to 3.0       Weekly snapshot builds to Maven       Actively helping with 3.0 issue and bugs in forumsThursday, Novemb...
Post 3.0       ThemeBuilder       Mobile supportThursday, November 3, 2011
Questions?Thursday, November 3, 2011
Upcoming SlideShare
Loading in...5
×

Introducing Ext GWT 3.0

7,428

Published on

This session will provide an overview of Ext GWT 3.0. There are many new features and lots of new functionality in this major release including Cell-based data widgets, Cell-based fields, a new data API, new charts, and theming.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,428
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
297
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Introducing Ext GWT 3.0"

  1. 1. Thursday, November 3, 2011
  2. 2. Ext GWT 3.0 Darrell Meyer, Sencha darrell@sencha.com @darrellmeyerThursday, November 3, 2011
  3. 3. Overview Release Goals Feature Overview Release TimelineThursday, November 3, 2011
  4. 4. Name Games Google Web Toolkit “G-W-T” “Gwit” Ext GWT “E-X-T-G-W-T” “X-Gwit” “G-X-T”Thursday, November 3, 2011
  5. 5. Ext GWT 3.0 GoalsThursday, November 3, 2011
  6. 6. Primary Goals Leverage the power of GWT and its compiler Use GWT API’s where applicable for better interoperability Integrate and support best practices of GWT Build and release through MavenThursday, November 3, 2011
  7. 7. Syncing with GWT GXT 2.0 GXT 3.0 Events & Listeners Custom GWT Rendering Deferred Direct Interface Based No Yes Models Custom POJO UiBinder Support No Yes SafeHtml Support No Yes GWT Based Charts Flash Yes Theming Custom ClientBundleThursday, November 3, 2011
  8. 8. Feature OverviewThursday, November 3, 2011
  9. 9. Features Models Stores & Loaders Templates Widget Changes Cells & Cell Widgets Layouts UiBinder Charts Theming & AppearanceThursday, November 3, 2011
  10. 10. ModelsThursday, November 3, 2011
  11. 11. Model Support 2.0 Forced users to work with GXT Models Models kept internal map for data Not strongly typed 3.0 Full support for any POJO Supports RPC, RequestFactory, AutoBeans Data Stores take any object typeThursday, November 3, 2011
  12. 12. Server Communications Transport Data Type RPC POJOs RequestFactory EntityProxy / AutoBean RequestBuilder (XML / JSON) Interface / AutoBeanThursday, November 3, 2011
  13. 13. ValueProvider Allows access to an object’s property Supports string based path Supports nested properties Can be created directly Can be created by generatorThursday, November 3, 2011
  14. 14. ValueProvider Allows access to an object’s property Supports string based path Supports nested properties Can be created directly Can be created by generatorThursday, November 3, 2011
  15. 15. ValueProvider 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");Thursday, November 3, 2011
  16. 16. Stores & LoadersThursday, November 3, 2011
  17. 17. 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 TreeStoreThursday, November 3, 2011
  18. 18. 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 DataReaderThursday, November 3, 2011
  19. 19. Loader InteractionThursday, November 3, 2011
  20. 20. Loader Interaction LoaderThursday, November 3, 2011
  21. 21. Loader Interaction Loader DataProxyThursday, November 3, 2011
  22. 22. Loader Interaction Loader DataProxy ServerThursday, November 3, 2011
  23. 23. Loader Interaction Loader DataProxy ServerThursday, November 3, 2011
  24. 24. Loader Interaction Loader DataProxy ServerThursday, November 3, 2011
  25. 25. Loader Interaction Loader DataProxy Server DataReaderThursday, November 3, 2011
  26. 26. DataProxy Example 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);Thursday, November 3, 2011
  27. 27. DataReader Example 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()); }; };Thursday, November 3, 2011
  28. 28. DataLoader Example loader = new ListLoader<ListLoadConfig, ListLoadResult<Email>>( proxy, reader); loader.addLoadHandler(new LoadResultListStoreBinding<ListLoadConfig, Email, ListLoadResult<Email>>(store)); loader.load();Thursday, November 3, 2011
  29. 29. 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 XmlWriterThursday, November 3, 2011
  30. 30. TemplatesThursday, November 3, 2011
  31. 31. XTemplates Provides compile time templating Retrieves data from any Java Bean Produces SafeHtmlThursday, November 3, 2011
  32. 32. XTemplates Example Pt. 1 <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>Thursday, November 3, 2011
  33. 33. XTemplates Example Pt. 2 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));Thursday, November 3, 2011
  34. 34. XTemplates Example Pt. 3 interface ExampleStyle extends CssResource { String searchItem(); } interface ExampleTemplate extends XTemplates { @XTemplate("<div class={style.searchItem}>{post}</div>") SafeHtml render(Forum post, ExampleStyle style); }Thursday, November 3, 2011
  35. 35. Widget ChangesThursday, November 3, 2011
  36. 36. Fields Most fields are now cell based Allows to be used standalone and in data widgets Fields now work with the GWT Editing frameworkThursday, November 3, 2011
  37. 37. State Management Sate code moved out of Components themselves Supports asynchronous retrieval of data HTML Local StorageThursday, November 3, 2011
  38. 38. Cells & Cell WidgetsThursday, November 3, 2011
  39. 39. Cells New design and implementation from GWT Renders views of data Supports events Work with both GWT and Ext GWT CellsThursday, November 3, 2011
  40. 40. Cells GWT AbstractInputCell AbstractEventInputCell FieldCell ValueBaseFieldCell SliderCell CheckBoxCell TextInputCell TriggerFieldCell TwinTriggerFieldCell NumberCell ComboCell DateCell SpinnerFieldCellThursday, November 3, 2011
  41. 41. Cell Widgets Cell support in all data widgets Tree, ListView, Grid,TreeGrid Replaces Widget support in data widgets from 2.0 High performance, interactive behaviorThursday, November 3, 2011
  42. 42. Thursday, November 3, 2011
  43. 43. 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);Thursday, November 3, 2011
  44. 44. UiBinderThursday, November 3, 2011
  45. 45. GWT UiBinder Declarative user interfaces via Xml Separations of duties Java developers and designers Supports both widgets and HTML markup Supports CSSThursday, November 3, 2011
  46. 46. UiBinder <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>Thursday, November 3, 2011
  47. 47. LayoutsThursday, November 3, 2011
  48. 48. Layouts New optimized layout engine UiBinder support including layout data Fully typed containers Easier to use and understand APIThursday, November 3, 2011
  49. 49. Layouts 2.0 3.0 BorderLayout BorderLayoutContainer Container CenterLayout CenterLayoutContainer FlowLayout FlowLayoutContainerThursday, November 3, 2011
  50. 50. ChartsThursday, November 3, 2011
  51. 51. Draw Cross platform drawing API SVG / VML / Canvas Normalizes differences between engine API syntax DrawComponent base component for drawing DrawComponent works with GXT layoutsThursday, November 3, 2011
  52. 52. Charts Integrated with GXT Models & Stores Full event support for series and legends Custom tooltip for series All charts support animations via GXT Fx Customize appearance of series, axis, legendThursday, November 3, 2011
  53. 53. Thursday, November 3, 2011
  54. 54. Appearance & ThemingThursday, November 3, 2011
  55. 55. 2.0 Theming Single monolithic gxt-all.css Contains CSS for all browsers Manual image spriting Hard to determine what CSS is applied to a Widget No compile time checksThursday, November 3, 2011
  56. 56. Appearance Pattern Renders the “view” via a SafeHtml string Responsible for HTML structure and styles Responds to state changes Appearance pattern applied to both widgets and cells ClientBundle Widget Appearance CssResource XTemplateThursday, November 3, 2011
  57. 57. Release TimelineThursday, November 3, 2011
  58. 58. Release Timeline 3.0 Beta 1 Q4 2011 3.0 GA early 2012Thursday, November 3, 2011
  59. 59. Road to 3.0 Weekly snapshot builds to Maven Actively helping with 3.0 issue and bugs in forumsThursday, November 3, 2011
  60. 60. Post 3.0 ThemeBuilder Mobile supportThursday, November 3, 2011
  61. 61. Questions?Thursday, November 3, 2011
  1. A particular slide catching your eye?

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

×