ext gwt 3.0 data binding and editors

Wednesday, November 2, 11

Colin Alworth, SenchaEXT GWT EDITORS

[email protected] @ambisinister


Why Webapps?


Interaction with Data


OverviewData Binding

GWT Editor FrameworkEditors in Action


Data Binding


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);}


Existing 2.0 Mechanisms

Templates, XTemplatesBindings/FormBindings and FieldBindings


General Data Binding ApproachesObserverUpdate model with each changePossibly inconsistent modelsFlow SynchronizationModel always consistentRequires explicit start and end


Other goalsInteroperability with UiBinderValidationLocal/RemoteFlexibility for customized problems/solutions


GWT Editor Framework


Reusable, Model-Specific Editors


Framework DetailsEverything implements Editor (or IsEditor)User-created editors just implement Editor<MyModel>Model properties edited with sub-Editors


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


Editor<T>Marker interface‘This object edits T through its visible fields’Other subclasses provide additional behavior


FieldsFunction as in 2.0Handles validation errors from JSR-303Errors can be local or remoteSupports field-specific validation as in 2.0


Editor DriverBinds data to and from EditorsTwo providedSimpleBeanEditorDriverRequestFactoryEditorDriver


Familiar with UiBinder?

Drivers are declared like UiBindersSame protection for fields (not private)Check out the UiBinder talk later


Editors in Action


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; }

}


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); ...}


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; }

}


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


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


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


Reusablility

Editor and Driver in MVP?Custom Editor interfaces?


Questions?


Thank you!


ext gwt 3.0 data binding and editors

Technology

horizontallayoutcontainer columns

return panel

editors

recipeeditor

label

readonlyrecipeeditor

description

horizontallayoutcontainer