ext gwt 3.0 data binding and editors
DESCRIPTION
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.TRANSCRIPT
![Page 1: Ext GWT 3.0 Data Binding and Editors](https://reader031.vdocuments.net/reader031/viewer/2022020717/545c53d8b1af9f280a8b4713/html5/thumbnails/1.jpg)
Wednesday, November 2, 11
![Page 3: Ext GWT 3.0 Data Binding and Editors](https://reader031.vdocuments.net/reader031/viewer/2022020717/545c53d8b1af9f280a8b4713/html5/thumbnails/3.jpg)
Why Webapps?
Wednesday, November 2, 11
![Page 4: Ext GWT 3.0 Data Binding and Editors](https://reader031.vdocuments.net/reader031/viewer/2022020717/545c53d8b1af9f280a8b4713/html5/thumbnails/4.jpg)
Interaction with Data
Wednesday, November 2, 11
![Page 5: Ext GWT 3.0 Data Binding and Editors](https://reader031.vdocuments.net/reader031/viewer/2022020717/545c53d8b1af9f280a8b4713/html5/thumbnails/5.jpg)
OverviewData Binding
GWT Editor FrameworkEditors in Action
Wednesday, November 2, 11
![Page 6: Ext GWT 3.0 Data Binding and Editors](https://reader031.vdocuments.net/reader031/viewer/2022020717/545c53d8b1af9f280a8b4713/html5/thumbnails/6.jpg)
Data Binding
Wednesday, November 2, 11
![Page 7: Ext GWT 3.0 Data Binding and Editors](https://reader031.vdocuments.net/reader031/viewer/2022020717/545c53d8b1af9f280a8b4713/html5/thumbnails/7.jpg)
Users need access to datapublic 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
![Page 8: Ext GWT 3.0 Data Binding and Editors](https://reader031.vdocuments.net/reader031/viewer/2022020717/545c53d8b1af9f280a8b4713/html5/thumbnails/8.jpg)
Existing 2.0 Mechanisms
Templates, XTemplatesBindings/FormBindings and FieldBindings
Wednesday, November 2, 11
![Page 9: Ext GWT 3.0 Data Binding and Editors](https://reader031.vdocuments.net/reader031/viewer/2022020717/545c53d8b1af9f280a8b4713/html5/thumbnails/9.jpg)
General Data Binding ApproachesObserverUpdate model with each changePossibly inconsistent modelsFlow SynchronizationModel always consistentRequires explicit start and end
Wednesday, November 2, 11
![Page 10: Ext GWT 3.0 Data Binding and Editors](https://reader031.vdocuments.net/reader031/viewer/2022020717/545c53d8b1af9f280a8b4713/html5/thumbnails/10.jpg)
Other goalsInteroperability with UiBinderValidationLocal/RemoteFlexibility for customized problems/solutions
Wednesday, November 2, 11
![Page 11: Ext GWT 3.0 Data Binding and Editors](https://reader031.vdocuments.net/reader031/viewer/2022020717/545c53d8b1af9f280a8b4713/html5/thumbnails/11.jpg)
GWT Editor Framework
Wednesday, November 2, 11
![Page 12: Ext GWT 3.0 Data Binding and Editors](https://reader031.vdocuments.net/reader031/viewer/2022020717/545c53d8b1af9f280a8b4713/html5/thumbnails/12.jpg)
Reusable, Model-Specific Editors
Wednesday, November 2, 11
![Page 13: Ext GWT 3.0 Data Binding and Editors](https://reader031.vdocuments.net/reader031/viewer/2022020717/545c53d8b1af9f280a8b4713/html5/thumbnails/13.jpg)
Framework DetailsEverything implements Editor (or IsEditor)User-created editors just implement Editor<MyModel>Model properties edited with sub-Editors
Wednesday, November 2, 11
![Page 14: Ext GWT 3.0 Data Binding and Editors](https://reader031.vdocuments.net/reader031/viewer/2022020717/545c53d8b1af9f280a8b4713/html5/thumbnails/14.jpg)
ImplementationGenerates getter/setter calls as neededIf getter/setter missing, property is writeonly/readonlyIf editor missing/inaccessible, no code generatedDelegates provided based on EditorDriver type selectedAllows access to EditorDriver features
Wednesday, November 2, 11
![Page 15: Ext GWT 3.0 Data Binding and Editors](https://reader031.vdocuments.net/reader031/viewer/2022020717/545c53d8b1af9f280a8b4713/html5/thumbnails/15.jpg)
Editor<T>Marker interface‘This object edits T through its visible fields’Other subclasses provide additional behavior
Wednesday, November 2, 11
![Page 16: Ext GWT 3.0 Data Binding and Editors](https://reader031.vdocuments.net/reader031/viewer/2022020717/545c53d8b1af9f280a8b4713/html5/thumbnails/16.jpg)
FieldsFunction as in 2.0Handles validation errors from JSR-303Errors can be local or remoteSupports field-specific validation as in 2.0
Wednesday, November 2, 11
![Page 17: Ext GWT 3.0 Data Binding and Editors](https://reader031.vdocuments.net/reader031/viewer/2022020717/545c53d8b1af9f280a8b4713/html5/thumbnails/17.jpg)
Editor DriverBinds data to and from EditorsTwo providedSimpleBeanEditorDriverRequestFactoryEditorDriver
Wednesday, November 2, 11
![Page 18: Ext GWT 3.0 Data Binding and Editors](https://reader031.vdocuments.net/reader031/viewer/2022020717/545c53d8b1af9f280a8b4713/html5/thumbnails/18.jpg)
Familiar with UiBinder?
Drivers are declared like UiBindersSame protection for fields (not private)Check out the UiBinder talk later
Wednesday, November 2, 11
![Page 19: Ext GWT 3.0 Data Binding and Editors](https://reader031.vdocuments.net/reader031/viewer/2022020717/545c53d8b1af9f280a8b4713/html5/thumbnails/19.jpg)
Editors in Action
Wednesday, November 2, 11
![Page 20: Ext GWT 3.0 Data Binding and Editors](https://reader031.vdocuments.net/reader031/viewer/2022020717/545c53d8b1af9f280a8b4713/html5/thumbnails/20.jpg)
Simple Editor Examplepublic 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
![Page 21: Ext GWT 3.0 Data Binding and Editors](https://reader031.vdocuments.net/reader031/viewer/2022020717/545c53d8b1af9f280a8b4713/html5/thumbnails/21.jpg)
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
![Page 22: Ext GWT 3.0 Data Binding and Editors](https://reader031.vdocuments.net/reader031/viewer/2022020717/545c53d8b1af9f280a8b4713/html5/thumbnails/22.jpg)
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
![Page 23: Ext GWT 3.0 Data Binding and Editors](https://reader031.vdocuments.net/reader031/viewer/2022020717/545c53d8b1af9f280a8b4713/html5/thumbnails/23.jpg)
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; }}
Editors can be Read-only
Wednesday, November 2, 11
![Page 24: Ext GWT 3.0 Data Binding and Editors](https://reader031.vdocuments.net/reader031/viewer/2022020717/545c53d8b1af9f280a8b4713/html5/thumbnails/24.jpg)
ListStore and EditorsListStoreEditor binds to a List propertySome details can’t be automatically handledAdding new itemsValidating one at a time or togetherSaving one at a time or together
Wednesday, November 2, 11
![Page 25: Ext GWT 3.0 Data Binding and Editors](https://reader031.vdocuments.net/reader031/viewer/2022020717/545c53d8b1af9f280a8b4713/html5/thumbnails/25.jpg)
RequestFactory and EditorSimpleBeanEditorDriverMake sure to request.edit(model) before editingRequestFactoryEditorDriverProvides HasRequestContext to allow saving changes, creating new objectsDoes all editing within a single RequestContext for youAccess to update events from the server
Wednesday, November 2, 11
![Page 26: Ext GWT 3.0 Data Binding and Editors](https://reader031.vdocuments.net/reader031/viewer/2022020717/545c53d8b1af9f280a8b4713/html5/thumbnails/26.jpg)
Reusablility
Editor and Driver in MVP?Custom Editor interfaces?
Wednesday, November 2, 11
![Page 27: Ext GWT 3.0 Data Binding and Editors](https://reader031.vdocuments.net/reader031/viewer/2022020717/545c53d8b1af9f280a8b4713/html5/thumbnails/27.jpg)
Questions?
Wednesday, November 2, 11
![Page 28: Ext GWT 3.0 Data Binding and Editors](https://reader031.vdocuments.net/reader031/viewer/2022020717/545c53d8b1af9f280a8b4713/html5/thumbnails/28.jpg)
Thank you!
Wednesday, November 2, 11