Your SlideShare is downloading. ×
0
Thursday, November 3, 2011
2.0 to 3.0 MIGRATION GUIDE                              Darrell Meyer                              Ext GWT Lead           ...
Overview                             General Changes                               Components                             ...
General ChangesThursday, November 3, 2011
General Changes      Package namespace change com.extjs to com.sencha      Module breakup      com.sencha.gxt.core.Core   ...
Legacy Module       Bindings       ModelData       MVC       Old XTemplateThursday, November 3, 2011
Deprecated Code       All GXT 2.0 deprecated code removed from 3.0       com.extjs.gxt.ui.client.binder - move to legacy  ...
ComponentsThursday, November 3, 2011
El vs. XElement      XElement replaces El class      XElement extends JavaScriptObject is not wrapper      component.el() ...
XTemplate       Replaced runtime JavaScript XTemplate       Compile time using Deferred Binding       Can retrieve data fr...
2.0 XTemplate                       XTemplate.create(getDetailTemplate());                       public native String getD...
3.0 XTemplate        interface DetailRenderer extends XTemplates {          @XTemplate(source = "AdvancedListViewDetail.ht...
Lazy RenderingThursday, November 3, 2011
Lazy Rendering      2.0      Components create their DOM lazily      Can’t work on DOM before Component renderedThursday, ...
Lazy Rendering      2.0      Components create their DOM lazily      Can’t work on DOM before Component rendered      3.0 ...
Lazy Rendering      2.0      Components create their DOM lazily      Can’t work on DOM before Component rendered      3.0 ...
Events & HandlersThursday, November 3, 2011
Events & Handlers      2.0      Custom GXT events & handlers      Events have getters not applicable to all events      Mu...
Events & Handlers      2.0      Custom GXT events & handlers      Events have getters not applicable to all events      Mu...
Events & HandlersThursday, November 3, 2011
Events & Handlers          // 2.0 generic listeners, must match event with correct event type          ContentPanel panel ...
Events & Handlers          // 2.0 generic listeners, must match event with correct event type          ContentPanel panel ...
ContentPanel ChangesThursday, November 3, 2011
ContentPanel Changes      2.0      ContentPanel supports “framed / unframed”      Support top component and bottom compone...
ContentPanel Changes      2.0      ContentPanel supports “framed / unframed”      Support top component and bottom compone...
2.0 ContentPanel                             ContentPanel panel = new ContentPanel();                             panel.se...
3.0 ContentPanel                FramedPanel panel = new FramedPanel(); // panel extends SimpleContainer                Ver...
Fields & FormLayoutThursday, November 3, 2011
Fields & FormLayout      2.0      Label set of fields directly      Field labels can only be rendered into FormLayoutThursd...
Fields & FormLayout      2.0      Label set of fields directly      Field labels can only be rendered into FormLayout      ...
Field ValidationThursday, November 3, 2011
Field Validation       2.0       Validation built into fields themselves       Validator interface only supported with Text...
Field Validation       2.0       Validation built into fields themselves       Validator interface only supported with Text...
Field Validators            field = new TextField();            field.addValidator(new MinLengthValidator(4));            ...
LayoutsThursday, November 3, 2011
LayoutsThursday, November 3, 2011
Layouts       2.0       Generic container supports all layouts       Possible to use wrong layout data with layoutThursday...
Layouts       2.0       Generic container supports all layouts       Possible to use wrong layout data with layout       3...
Layouts                                 2.0                3.0                             BorderLayout   BorderLayoutCont...
Layout ExampleThursday, November 3, 2011
Layout Example                      // 2.0                      LayoutContainer con = new LayoutContainer();              ...
Layout Example                      // 2.0                      LayoutContainer con = new LayoutContainer();              ...
ModelsThursday, November 3, 2011
2.0 ModelData      GWT does not provide introspection      ModelData provides access to property and values      Stores da...
3.0 Models       Support any bean-like object       Not forced to implement GXT interfaces       Not forced to use GXT mod...
ValueProvider                    interface PostProperties extends PropertyAccess<Post> {                      ModelKeyProv...
Xml AutoBeans     interface XmlAutoBeanFactory extends AutoBeanFactory {       static XmlAutoBeanFactory instance = GWT.cr...
Data WidgetsThursday, November 3, 2011
Renderers Vs CellsThursday, November 3, 2011
Renderers Vs Cells      2.0      Customize data via renderers which return HTML or Widgets      Renderers do not support e...
Renderers Vs Cells      2.0      Customize data via renderers which return HTML or Widgets      Renderers do not support e...
Event Cell Example cell = new SimpleSafeHtmlCell<String>(SimpleSafeHtmlRenderer.getInstance(), "click") {              @Ov...
2.0 Renderer    renderer = new GridCellRenderer<ModelData>() {          public Object render(ModelData model, String prope...
3.0 Cells           ColumnConfig column = new ColumnConfig();           column.setRenderer(renderer);           cc1 = new ...
Stores & LoadersThursday, November 3, 2011
StoresThursday, November 3, 2011
Stores       2.0       Only works with ModelData instances       Can have reference to LoadersThursday, November 3, 2011
Stores       2.0       Only works with ModelData instances       Can have reference to Loaders      3.0      Work with any...
Loaders       Refactored generic usage       Better static code checking from IDE       Stores no longer use loaders direc...
Loader Example   final ExampleServiceAsync service = GWT.create(ExampleService.class);   proxy = new RpcProxy<PagingLoadCo...
DataProxies       HttpProxy & SciptTagProxy can generate Json & Xml       Both proxies use writers to serialize data or el...
Readers      Easily map Json to properties      Easily map Xml xpaths to bean properties      ModelType replaced with anno...
3.0 Readers Pt. 1      public interface EmailAutoBeanFactory extends AutoBeanFactory {        AutoBean<RecordResult> items...
3.0 Readers Pt. 2   class DataRecordJsonReader extends JsonReader<ListLoadResult<Email>, RecordResult> {     public DataRe...
ThemingThursday, November 3, 2011
Resource ChangesThursday, November 3, 2011
Resource Changes       2.0       Must include gxt-all.css and all imagesThursday, November 3, 2011
Resource Changes       2.0       Must include gxt-all.css and all images       3.0       Removed gxt-all.css and image res...
Appearance Example       // non framed       ContentPanel panel = new ContentPanel();       // framed using appearance    ...
Questions?Thursday, November 3, 2011
Upcoming SlideShare
Loading in...5
×

Migrating from Ext GWT 2.x to 3.0

16,907

Published on

Looking to move to Ext GWT 3.0 from 2.x? This session will walk through the important API changes to help make the migration as straightforward as possible.

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

No Downloads
Views
Total Views
16,907
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
300
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Migrating from Ext GWT 2.x to 3.0"

  1. 1. Thursday, November 3, 2011
  2. 2. 2.0 to 3.0 MIGRATION GUIDE Darrell Meyer Ext GWT Lead Sencha Inc. darrell@sencha.com #darrellmeyerThursday, November 3, 2011
  3. 3. Overview General Changes Components Layouts Models Data Widgets Stores & Loaders ThemingThursday, November 3, 2011
  4. 4. General ChangesThursday, November 3, 2011
  5. 5. General Changes Package namespace change com.extjs to com.sencha Module breakup com.sencha.gxt.core.Core com.sencha.gxt.cell.Core com.sencha.gxt.data.Data com.sencha.gxt.dnd.DND com.sencha.gxt.fx.Fx com.sencha.gxt.messages.Messages com.sencha.gxt.state.State com.sencha.gxt.theme.Base com.sencha.gxt.theme.Blue com.sencha.gxt.widget.Core com.sencha.gxt.ui.GXT - works like 2.0 GXT moduleThursday, November 3, 2011
  6. 6. Legacy Module Bindings ModelData MVC Old XTemplateThursday, November 3, 2011
  7. 7. Deprecated Code All GXT 2.0 deprecated code removed from 3.0 com.extjs.gxt.ui.client.binder - move to legacy com.extjs.gxt.ui.client.tree com.extjs.gxt.ui.client.treetableThursday, November 3, 2011
  8. 8. ComponentsThursday, November 3, 2011
  9. 9. El vs. XElement XElement replaces El class XElement extends JavaScriptObject is not wrapper component.el() now component.getElement() Any GWT Element can be cast to XElement // 2.0 ContentPanel panel = new ContentPanel(); panel.el().getFrameWidth("lr"); // 3.0 ContentPanel panel = new ContentPanel(); panel.getElement().getFrameWidth(Side.LEFT, Side.RIGHT); // casting Element to XElement HTML html = new HTML("I am a GWT Widget"); html.getElement().<XElement>cast().getFrameWidth(Side.LEFT, Side.RIGHT);Thursday, November 3, 2011
  10. 10. XTemplate Replaced runtime JavaScript XTemplate Compile time using Deferred Binding Can retrieve data from any Java Bean Works with SafeHtmlThursday, November 3, 2011
  11. 11. 2.0 XTemplate XTemplate.create(getDetailTemplate()); public native String getDetailTemplate() /*-{ return [<div class="details">, <tpl for=".">, <img src="{modPath}"><div class="details-info">, <b>Image Name:</b>, <span>{name}</span>, <b>Size:</b>, <span>{sizeString}</span>, <b>Last Modified:</b>, <span>{dateString}</span></div></tpl></div>].join(""); }-*/;Thursday, November 3, 2011
  12. 12. 3.0 XTemplate interface DetailRenderer extends XTemplates { @XTemplate(source = "AdvancedListViewDetail.html") public SafeHtml render(Photo photo); } DetailRenderer renderer = GWT.create(DetailRenderer.class); <div class="details"> <img src="{path}"><div class="details-info"> <b>Image Name:</b><span>{name}</span> <b>Size:</b><span>{size:number("#0")}k</span> <b>Last Modified:</b><span>{date:date("M/d/yyyy")}</span> </div>Thursday, November 3, 2011
  13. 13. Lazy RenderingThursday, November 3, 2011
  14. 14. Lazy Rendering 2.0 Components create their DOM lazily Can’t work on DOM before Component renderedThursday, November 3, 2011
  15. 15. Lazy Rendering 2.0 Components create their DOM lazily Can’t work on DOM before Component rendered 3.0 Component create their DOM at construction DOM available immediatelyThursday, November 3, 2011
  16. 16. Lazy Rendering 2.0 Components create their DOM lazily Can’t work on DOM before Component rendered 3.0 Component create their DOM at construction DOM available immediately // 2.0 ContentPanel panel = new ContentPanel(); panel.el().setLeft(10); // fails, DOM does not exist // 3.0 ContentPanel panel = new ContentPanel(); panel.getElement().setLeft(10); // worksThursday, November 3, 2011
  17. 17. Events & HandlersThursday, November 3, 2011
  18. 18. Events & Handlers 2.0 Custom GXT events & handlers Events have getters not applicable to all events Must read docsThursday, November 3, 2011
  19. 19. Events & Handlers 2.0 Custom GXT events & handlers Events have getters not applicable to all events Must read docs 3.0 GWT Handlers Strongly Typed Typed events vs. generic eventsThursday, November 3, 2011
  20. 20. Events & HandlersThursday, November 3, 2011
  21. 21. Events & Handlers // 2.0 generic listeners, must match event with correct event type ContentPanel panel = new ContentPanel(); panel.addListener(Events.Expand, new Listener<ComponentEvent>() { public void handleEvent(ComponentEvent be) { // generic event } });Thursday, November 3, 2011
  22. 22. Events & Handlers // 2.0 generic listeners, must match event with correct event type ContentPanel panel = new ContentPanel(); panel.addListener(Events.Expand, new Listener<ComponentEvent>() { public void handleEvent(ComponentEvent be) { // generic event } }); // 3.0 strongly typed, can’t misuse API ContentPanel panel = new ContentPanel(); panel.addExpandHandler(new ExpandHandler() { @Override public void onExpand(ExpandEvent event) { // typed event } });Thursday, November 3, 2011
  23. 23. ContentPanel ChangesThursday, November 3, 2011
  24. 24. ContentPanel Changes 2.0 ContentPanel supports “framed / unframed” Support top component and bottom componentThursday, November 3, 2011
  25. 25. ContentPanel Changes 2.0 ContentPanel supports “framed / unframed” Support top component and bottom component 3.0 ContentPanel & FramedPanel Removed support of top and bottom componentThursday, November 3, 2011
  26. 26. 2.0 ContentPanel ContentPanel panel = new ContentPanel(); panel.setFrame(true); panel.setLayout(new FitLayout()); ToolBar toolBar = new ToolBar(); toolBar.add(new LabelToolItem("ToolBar")); panel.setTopComponent(toolBar); panel.add(new Html("Fill panel"));Thursday, November 3, 2011
  27. 27. 3.0 ContentPanel FramedPanel panel = new FramedPanel(); // panel extends SimpleContainer VerticalLayoutContainer con = new VerticalLayoutContainer(); panel.setWidget(con); ToolBar toolBar = new ToolBar(); toolBar.add(new LabelToolItem("ToolBar")); con.add(toolBar, new VerticalLayoutData(1, -1)); con.add(new HTML("Fill panel"), new VerticalLayoutData(1, 1));Thursday, November 3, 2011
  28. 28. Fields & FormLayoutThursday, November 3, 2011
  29. 29. Fields & FormLayout 2.0 Label set of fields directly Field labels can only be rendered into FormLayoutThursday, November 3, 2011
  30. 30. Fields & FormLayout 2.0 Label set of fields directly Field labels can only be rendered into FormLayout 3.0 Labels provided via FieldLabel Fields and FieldLabel can render any any layout FormLayout no longer needed and removedThursday, November 3, 2011
  31. 31. Field ValidationThursday, November 3, 2011
  32. 32. Field Validation 2.0 Validation built into fields themselves Validator interface only supported with TextField Hard to add custom validationThursday, November 3, 2011
  33. 33. Field Validation 2.0 Validation built into fields themselves Validator interface only supported with TextField Hard to add custom validation 3.0 Validation removed from Fields All fields support adding zero to many ValidatorsThursday, November 3, 2011
  34. 34. Field Validators field = new TextField(); field.addValidator(new MinLengthValidator(4)); field.addValidator(new EmptyValidator<String>()); number = new NumberField<Integer>(new IntegerPropertyEditor()); number.addValidator(new MinNumberValidator<Integer>(3));Thursday, November 3, 2011
  35. 35. LayoutsThursday, November 3, 2011
  36. 36. LayoutsThursday, November 3, 2011
  37. 37. Layouts 2.0 Generic container supports all layouts Possible to use wrong layout data with layoutThursday, November 3, 2011
  38. 38. Layouts 2.0 Generic container supports all layouts Possible to use wrong layout data with layout 3.0 Layout collapsed into container Strongly typed layout containersThursday, November 3, 2011
  39. 39. Layouts 2.0 3.0 BorderLayout BorderLayoutContainer Container CenterLayout CenterLayoutContainer FlowLayout FlowLayoutContainerThursday, November 3, 2011
  40. 40. Layout ExampleThursday, November 3, 2011
  41. 41. Layout Example // 2.0 LayoutContainer con = new LayoutContainer(); con.setLayout(new FlowLayout()); con.add(new HTML("child 1")); // 2nd param takes any layout data instance con.add(new HTML("child 2"), new MarginData(5));Thursday, November 3, 2011
  42. 42. Layout Example // 2.0 LayoutContainer con = new LayoutContainer(); con.setLayout(new FlowLayout()); con.add(new HTML("child 1")); // 2nd param takes any layout data instance con.add(new HTML("child 2"), new MarginData(5)); // 3.0 FlowLayoutContainer con = new FlowLayoutContainer(); con.add(new HTML("child 1")); // 2nd param only takes margin data con.add(new HTML("child 2"), new MarginData(5));Thursday, November 3, 2011
  43. 43. ModelsThursday, November 3, 2011
  44. 44. 2.0 ModelData GWT does not provide introspection ModelData provides access to property and values Stores data in map public interface ModelData { public <X> X get(String property); public Map<String, Object> getProperties(); public Collection<String> getPropertyNames(); public <X> X remove(String property); public <X> X set(String property, X value); }Thursday, November 3, 2011
  45. 45. 3.0 Models Support any bean-like object Not forced to implement GXT interfaces Not forced to use GXT model classes Interoperability with RPC, RequestFactor, AutoBeanThursday, November 3, 2011
  46. 46. ValueProvider interface PostProperties extends PropertyAccess<Post> { ModelKeyProvider<Post> id(); ValueProvider<Post, String> username(); ValueProvider<Post, String> forum(); ValueProvider<Post, String> subject(); ValueProvider<Post, Date> date(); } // create properties instance via deferred binding PostProperties props = GWT.create(PostProperties.class); // use model key provider and value providers ListStore<Post> store = new ListStore<Post>(props.id()); new ColumnConfig<Post, String>(props.forum(), 150, "Forum");Thursday, November 3, 2011
  47. 47. Xml AutoBeans interface XmlAutoBeanFactory extends AutoBeanFactory { static XmlAutoBeanFactory instance = GWT.create(XmlAutoBeanFactory.class); AutoBean<EmailCollection> items(); } interface ContactCollection { @PropertyName("records/record") List<Email> getValues(); } interface Contact { @PropertyName("Name") String getName(); @PropertyName("Email") String getEmail(); @PropertyName("Phone") String getPhone(); }Thursday, November 3, 2011
  48. 48. Data WidgetsThursday, November 3, 2011
  49. 49. Renderers Vs CellsThursday, November 3, 2011
  50. 50. Renderers Vs Cells 2.0 Customize data via renderers which return HTML or Widgets Renderers do not support eventsThursday, November 3, 2011
  51. 51. Renderers Vs Cells 2.0 Customize data via renderers which return HTML or Widgets Renderers do not support events 3.0 All data widgets support cells Cells support events and can fire events High performance via flyweight patternThursday, November 3, 2011
  52. 52. Event Cell Example cell = new SimpleSafeHtmlCell<String>(SimpleSafeHtmlRenderer.getInstance(), "click") { @Override public void onBrowserEvent(Context context, Element parent, String value, NativeEvent event, ValueUpdater<String> valueUpdater) { super.onBrowserEvent(context, parent, value, event, valueUpdater); if ("click".equals(event.getType())) { Info.display("Click", "You clicked "" + value + ""!"); } } }; tree.setCell(cell);Thursday, November 3, 2011
  53. 53. 2.0 Renderer renderer = new GridCellRenderer<ModelData>() { public Object render(ModelData model, String property, ColumnData config, int rowIndex, int colIndex, ListStore<ModelData> store, Grid<ModelData> grid) { Button button = new Button("Click Me"); button.addSelectionListener(new SelectionListener<ButtonEvent>() { @Override public void componentSelected(ButtonEvent ce) { Info.display("Event", "Button Clicked"); } }); return button; } };Thursday, November 3, 2011
  54. 54. 3.0 Cells 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
  55. 55. Stores & LoadersThursday, November 3, 2011
  56. 56. StoresThursday, November 3, 2011
  57. 57. Stores 2.0 Only works with ModelData instances Can have reference to LoadersThursday, November 3, 2011
  58. 58. Stores 2.0 Only works with ModelData instances Can have reference to Loaders 3.0 Work with any object type Requires ModelKeyProvider Stores are not aware of Loaders Loaders bound to Stores via LoadListenersThursday, November 3, 2011
  59. 59. Loaders Refactored generic usage Better static code checking from IDE Stores no longer use loaders directlyThursday, November 3, 2011
  60. 60. Loader Example final ExampleServiceAsync service = GWT.create(ExampleService.class); proxy = new RpcProxy<PagingLoadConfig, PagingLoadResult<Post>>() { @Override public void load(PagingLoadConfig loadConfig, AsyncCallback<PagingLoadResult<Post>> callback) { service.getPosts(loadConfig, callback); } }; ListStore<Post> store = new ListStore<Post>(props.id()); loader = new PagingLoader<PagingLoadConfig, PagingLoadResult<Post>>(proxy); loader.setRemoteSort(true); loader.addLoadHandler(new LoadResultListStoreBinding<PagingLoadConfig, Post, PagingLoadResult<Post>>(store));Thursday, November 3, 2011
  61. 61. DataProxies HttpProxy & SciptTagProxy can generate Json & Xml Both proxies use writers to serialize data or else toStringThursday, November 3, 2011
  62. 62. Readers Easily map Json to properties Easily map Xml xpaths to bean properties ModelType replaced with annotations // 2.0 defines the JSON structure ModelType type = new ModelType(); type.setRoot("records"); type.addField("Sender", "name"); type.addField("Email", "email"); type.addField("Phone", "phone"); type.addField("State", "state"); type.addField("Zip", "zip");Thursday, November 3, 2011
  63. 63. 3.0 Readers Pt. 1 public interface EmailAutoBeanFactory extends AutoBeanFactory { AutoBean<RecordResult> items(); AutoBean<ListLoadConfig> loadConfig(); } public interface Email { String getName(); String getEmail(); String getPhone(); String getState(); String getZip(); } public interface RecordResult { List<Email> getRecords(); }Thursday, November 3, 2011
  64. 64. 3.0 Readers Pt. 2 class DataRecordJsonReader extends JsonReader<ListLoadResult<Email>, RecordResult> { public DataRecordJsonReader(AutoBeanFactory factory, Class<RecordResult> rootBeanType) { super(factory, rootBeanType); } protected ListLoadResult<Email> createReturnData(Object loadConfig, RecordResult incomingData) { return new BaseListLoadResult<Email>(incomingData.getRecords()); } } EmailAutoBeanFactory factory = GWT.create(EmailAutoBeanFactory.class); DataRecordJsonReader reader = new DataRecordJsonReader(factory, RecordResult.class);Thursday, November 3, 2011
  65. 65. ThemingThursday, November 3, 2011
  66. 66. Resource ChangesThursday, November 3, 2011
  67. 67. Resource Changes 2.0 Must include gxt-all.css and all imagesThursday, November 3, 2011
  68. 68. Resource Changes 2.0 Must include gxt-all.css and all images 3.0 Removed gxt-all.css and image resources Only required to add link to reset.css Implemented Appearance pattern CSS & images now ClientBundle basedThursday, November 3, 2011
  69. 69. Appearance Example // non framed ContentPanel panel = new ContentPanel(); // framed using appearance FramedPanelAppearance appearance = GWT.create(FramedPanelAppearance.class); ContentPanel framed = new ContentPanel(appearance); // convenience subclass FramedPanel framed2 = new FramedPanel();Thursday, November 3, 2011
  70. 70. 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.

×