Wednesday, November 2, 11
EXT GWT EDITORS                              Colin Alworth, Sencha             colin.alworth@sencha.com             @ambis...
Why Webapps?Wednesday, November 2, 11
Interaction with DataWednesday, November 2, 11
Overview                               Data Binding                            GWT Editor Framework                       ...
Data BindingWednesday, November 2, 11
Users need access to data     public interface Recipe {       String getTitle();       void setTitle(String title);     	 ...
Existing 2.0 Mechanisms      Templates, XTemplates      Bindings/FormBindings and FieldBindingsWednesday, November 2, 11
General Data Binding       Approaches       Observer       Update model with each change       Possibly inconsistent model...
Other goals       Interoperability with UiBinder       Validation       Local/Remote       Flexibility for customized prob...
GWT Editor                            FrameworkWednesday, November 2, 11
Reusable, Model-                            Specific EditorsWednesday, November 2, 11
Framework Details       Everything implements Editor (or IsEditor)       User-created editors just implement       Editor<...
Implementation       Generates getter/setter calls as needed       If getter/setter missing, property is writeonly/readonl...
Editor<T>       Marker interface       ‘This object edits T through its visible fields’       Other subclasses provide addi...
Fields       Function as in 2.0       Handles validation errors from JSR-303       Errors can be local or remote       Sup...
Editor Driver       Binds data to and from Editors       Two provided       SimpleBeanEditorDriver       RequestFactoryEdi...
Familiar with UiBinder?      Drivers are declared like UiBinders      Same protection for fields (not private)      Check o...
Editors in ActionWednesday, November 2, 11
Simple Editor Example       public class RecipeEditor implements IsWidget, Editor<Recipe> {       	 FlowLayoutContainer pa...
More complex                            public interface Meal {                            	 String getOccasion();        ...
public class MealEditor implements Editor<Meal>, IsWidget {       	 VerticalLayoutContainer panel = new VerticalLayoutCont...
Editors can be Read-only         public class ReadOnlyMenuEditor implements Editor<Meal>, IsWidget {       	 VerticalLayou...
ListStore and Editors       ListStoreEditor binds to a List property       Some details can’t be automatically handled    ...
RequestFactory and       Editor      SimpleBeanEditorDriver      Make sure to request.edit(model) before editing      Requ...
Reusablility      Editor and Driver in MVP?      Custom Editor interfaces?Wednesday, November 2, 11
Questions?Wednesday, November 2, 11
Thank you!Wednesday, November 2, 11
Upcoming SlideShare
Loading in …5
×

Ext GWT 3.0 Data Binding and Editors

7,653 views

Published on

With the GWT Editor framework, any Java bean can have its data bound to a view. Data can be any bean-like object, POJO, AutoBean, or RF EntityProxy, as well as BaseModelData subclass, to facilitate migrating legacy code. We’ll discuss creating Editor subclasses and reusing them, as well as look at possible patterns for using the Drivers.

Colin Alworth has been a member of the Ext GWT community for a number of years, and has joined the team to contribute to 3.0’s successful release. With several years of Javascript, GWT, and Ext GWT experience, he brings real-world knowledge and use cases to Sencha’s next generation of GWT tools and components.

Published in: Technology, Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,653
On SlideShare
0
From Embeds
0
Number of Embeds
925
Actions
Shares
0
Downloads
93
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Ext GWT 3.0 Data Binding and Editors

  1. 1. Wednesday, November 2, 11
  2. 2. EXT GWT EDITORS Colin Alworth, Sencha colin.alworth@sencha.com @ambisinisterWednesday, November 2, 11
  3. 3. Why Webapps?Wednesday, November 2, 11
  4. 4. Interaction with DataWednesday, November 2, 11
  5. 5. Overview Data Binding GWT Editor Framework Editors in ActionWednesday, November 2, 11
  6. 6. Data BindingWednesday, November 2, 11
  7. 7. Users need access to data public interface Recipe { String getTitle(); void setTitle(String title); String getDescription(); void setDescription(String description); List<String> getInstructions(); void setInstructions(List<String> instructions); }Wednesday, November 2, 11
  8. 8. Existing 2.0 Mechanisms Templates, XTemplates Bindings/FormBindings and FieldBindingsWednesday, November 2, 11
  9. 9. General Data Binding Approaches Observer Update model with each change Possibly inconsistent models Flow Synchronization Model always consistent Requires explicit start and endWednesday, November 2, 11
  10. 10. Other goals Interoperability with UiBinder Validation Local/Remote Flexibility for customized problems/solutionsWednesday, November 2, 11
  11. 11. GWT Editor FrameworkWednesday, November 2, 11
  12. 12. Reusable, Model- Specific EditorsWednesday, November 2, 11
  13. 13. Framework Details Everything implements Editor (or IsEditor) User-created editors just implement Editor<MyModel> Model properties edited with sub-EditorsWednesday, November 2, 11
  14. 14. Implementation Generates getter/setter calls as needed If getter/setter missing, property is writeonly/readonly If editor missing/inaccessible, no code generated Delegates provided based on EditorDriver type selected Allows access to EditorDriver featuresWednesday, November 2, 11
  15. 15. Editor<T> Marker interface ‘This object edits T through its visible fields’ Other subclasses provide additional behaviorWednesday, November 2, 11
  16. 16. Fields Function as in 2.0 Handles validation errors from JSR-303 Errors can be local or remote Supports field-specific validation as in 2.0Wednesday, November 2, 11
  17. 17. Editor Driver Binds data to and from Editors Two provided SimpleBeanEditorDriver RequestFactoryEditorDriverWednesday, November 2, 11
  18. 18. Familiar with UiBinder? Drivers are declared like UiBinders Same protection for fields (not private) Check out the UiBinder talk laterWednesday, November 2, 11
  19. 19. Editors in ActionWednesday, November 2, 11
  20. 20. Simple Editor Example public class RecipeEditor implements IsWidget, Editor<Recipe> { FlowLayoutContainer panel; TextField name = new TextField(); TextField description = new TextField(); public RecipeEditor() { panel = new FlowLayoutContainer(); panel.add(new FieldLabel(name, "Name")); panel.add(new FieldLabel(description, "Description")); } @Override public Widget asWidget() { return panel; } }Wednesday, November 2, 11
  21. 21. More complex public interface Meal { String getOccasion(); void setOccasion(String occasion); Date getDate(); void setDate(Date date); String getChef(); void setChef(String chef); List<String> getGuests(); void setGuests(List<String> guests); ... }Wednesday, November 2, 11
  22. 22. public class MealEditor implements Editor<Meal>, IsWidget { VerticalLayoutContainer panel = new VerticalLayoutContainer(); TextField occasionEditor = new TextField(); DateField dateEditor = new DateField(); SimpleComboBox<String> chef = new SimpleComboBox<String>( new StringLabelProvider<String>()); HorizontalLayoutContainer columns = new HorizontalLayoutContainer(); RecipeEditor appetizer = new RecipeEditor(); RecipeEditor mainCourse = new RecipeEditor(); RecipeEditor dessert = new RecipeEditor(); public MealEditor() { //... } @Override public Widget asWidget() { return panel; } }Wednesday, November 2, 11
  23. 23. Editors can be Read-only public class ReadOnlyMenuEditor implements Editor<Meal>, IsWidget { VerticalLayoutContainer panel = new VerticalLayoutContainer(); Label occasion = new Label(); Label chef = new Label(); HorizontalLayoutContainer columns = new HorizontalLayoutContainer(); ReadOnlyRecipeEditor appetizer = new ReadOnlyRecipeEditor(); ReadOnlyRecipeEditor mainCourse = new ReadOnlyRecipeEditor(); ReadOnlyRecipeEditor dessert = new ReadOnlyRecipeEditor(); public ReadOnlyMenuEditor() { //... } @Override public Widget asWidget() { return panel; } }Wednesday, November 2, 11
  24. 24. ListStore and Editors ListStoreEditor binds to a List property Some details can’t be automatically handled Adding new items Validating one at a time or together Saving one at a time or togetherWednesday, November 2, 11
  25. 25. RequestFactory and Editor SimpleBeanEditorDriver Make sure to request.edit(model) before editing RequestFactoryEditorDriver Provides HasRequestContext to allow saving changes, creating new objects Does all editing within a single RequestContext for you Access to update events from the serverWednesday, November 2, 11
  26. 26. Reusablility Editor and Driver in MVP? Custom Editor interfaces?Wednesday, November 2, 11
  27. 27. Questions?Wednesday, November 2, 11
  28. 28. Thank you!Wednesday, November 2, 11

×