Ext GWT 3.0 Data Binding and Editors

Preview:

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.

Citation preview

Wednesday, November 2, 11

Colin Alworth, SenchaEXT GWT EDITORS

colin.alworth@sencha.com @ambisinister

Wednesday, November 2, 11

Why Webapps?

Wednesday, November 2, 11

Interaction with Data

Wednesday, November 2, 11

OverviewData Binding

GWT Editor FrameworkEditors in Action

Wednesday, November 2, 11

Data Binding

Wednesday, November 2, 11

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

Existing 2.0 Mechanisms

Templates, XTemplatesBindings/FormBindings and FieldBindings

Wednesday, November 2, 11

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

Wednesday, November 2, 11

Other goalsInteroperability with UiBinderValidationLocal/RemoteFlexibility for customized problems/solutions

Wednesday, November 2, 11

GWT Editor Framework

Wednesday, November 2, 11

Reusable, Model-Specific Editors

Wednesday, November 2, 11

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

Wednesday, November 2, 11

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

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

Wednesday, November 2, 11

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

Editor DriverBinds data to and from EditorsTwo providedSimpleBeanEditorDriverRequestFactoryEditorDriver

Wednesday, November 2, 11

Familiar with UiBinder?

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

Wednesday, November 2, 11

Editors in Action

Wednesday, November 2, 11

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

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

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

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

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

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

Reusablility

Editor and Driver in MVP?Custom Editor interfaces?

Wednesday, November 2, 11

Questions?

Wednesday, November 2, 11

Thank you!

Wednesday, November 2, 11