Ext GWT 3.0 Data Binding and Editors

EXT GWT EDITORS
Colin Alworth, Sencha

colin.alworth@sencha.com @ambisinister

Wednesday, November 2, 11

Why Webapps?


Interaction with Data


Overview
Data Binding
GWT Editor Framework
Editors in Action


Data Binding


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


Existing 2.0 Mechanisms

Templates, XTemplates
Bindings/FormBindings and FieldBindings


General Data Binding
Approaches
Observer
Update model with each change
Possibly inconsistent models
Flow Synchronization
Model always consistent
Requires explicit start and end


Other goals
Interoperability with UiBinder
Validation
Local/Remote
Flexibility for customized problems/solutions


GWT Editor
Framework


Reusable, Model-
Specific Editors


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


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 features


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


Fields
Function as in 2.0
Handles validation errors from JSR-303
Errors can be local or remote
Supports ﬁeld-speciﬁc validation as in 2.0


Editor Driver
Binds data to and from Editors
Two provided
SimpleBeanEditorDriver
RequestFactoryEditorDriver


Familiar with UiBinder?

Drivers are declared like UiBinders
Same protection for ﬁelds (not private)
Check out the UiBinder talk later


Editors in Action


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

}


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

}


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


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 together


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 server


Reusablility
Editor and Driver in MVP?
Custom Editor interfaces?


Questions?


Thank you!


Ext GWT 3.0 Data Binding and Editors

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Ext GWT 3.0 Data Binding and Editors

Similar to Ext GWT 3.0 Data Binding and Editors (20)

More from Sencha

More from Sencha (20)

Recently uploaded

Recently uploaded (20)

Ext GWT 3.0 Data Binding and Editors