Migrating from Ext GWT 2.x to 3.0

  • 16,090 views
Uploaded 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.

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.

More in: Technology
  • 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
16,090
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
287
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. Thursday, November 3, 2011
  • 2. 2.0 to 3.0 MIGRATION GUIDE Darrell Meyer Ext GWT Lead Sencha Inc. darrell@sencha.com #darrellmeyerThursday, November 3, 2011
  • 3. Overview General Changes Components Layouts Models Data Widgets Stores & Loaders ThemingThursday, November 3, 2011
  • 4. General ChangesThursday, November 3, 2011
  • 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. Legacy Module Bindings ModelData MVC Old XTemplateThursday, November 3, 2011
  • 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. ComponentsThursday, November 3, 2011
  • 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. XTemplate Replaced runtime JavaScript XTemplate Compile time using Deferred Binding Can retrieve data from any Java Bean Works with SafeHtmlThursday, November 3, 2011
  • 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. 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. Lazy RenderingThursday, November 3, 2011
  • 14. Lazy Rendering 2.0 Components create their DOM lazily Can’t work on DOM before Component renderedThursday, November 3, 2011
  • 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. 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. Events & HandlersThursday, November 3, 2011
  • 18. Events & Handlers 2.0 Custom GXT events & handlers Events have getters not applicable to all events Must read docsThursday, November 3, 2011
  • 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. Events & HandlersThursday, November 3, 2011
  • 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. 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. ContentPanel ChangesThursday, November 3, 2011
  • 24. ContentPanel Changes 2.0 ContentPanel supports “framed / unframed” Support top component and bottom componentThursday, November 3, 2011
  • 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. 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. 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. Fields & FormLayoutThursday, November 3, 2011
  • 29. Fields & FormLayout 2.0 Label set of fields directly Field labels can only be rendered into FormLayoutThursday, November 3, 2011
  • 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. Field ValidationThursday, November 3, 2011
  • 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. 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. 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. LayoutsThursday, November 3, 2011
  • 36. LayoutsThursday, November 3, 2011
  • 37. Layouts 2.0 Generic container supports all layouts Possible to use wrong layout data with layoutThursday, November 3, 2011
  • 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. Layouts 2.0 3.0 BorderLayout BorderLayoutContainer Container CenterLayout CenterLayoutContainer FlowLayout FlowLayoutContainerThursday, November 3, 2011
  • 40. Layout ExampleThursday, November 3, 2011
  • 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. 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. ModelsThursday, November 3, 2011
  • 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. 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. 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. 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. Data WidgetsThursday, November 3, 2011
  • 49. Renderers Vs CellsThursday, November 3, 2011
  • 50. Renderers Vs Cells 2.0 Customize data via renderers which return HTML or Widgets Renderers do not support eventsThursday, November 3, 2011
  • 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. 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. 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. 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. Stores & LoadersThursday, November 3, 2011
  • 56. StoresThursday, November 3, 2011
  • 57. Stores 2.0 Only works with ModelData instances Can have reference to LoadersThursday, November 3, 2011
  • 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. Loaders Refactored generic usage Better static code checking from IDE Stores no longer use loaders directlyThursday, November 3, 2011
  • 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. DataProxies HttpProxy & SciptTagProxy can generate Json & Xml Both proxies use writers to serialize data or else toStringThursday, November 3, 2011
  • 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. 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. 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. ThemingThursday, November 3, 2011
  • 66. Resource ChangesThursday, November 3, 2011
  • 67. Resource Changes 2.0 Must include gxt-all.css and all imagesThursday, November 3, 2011
  • 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. 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. Questions?Thursday, November 3, 2011