Data Widget Design
Data
Data Widgets Work With
Bean-like POJOsAutoBeansRequestFactory Proxies
Reflection?
2.0 uses Map<String,Object>3.0 generates accessors as needed
ValueProviders and PropertyAccesspublic interface Person { String getFirstName(); String getLastName(); String getEmail(); String getFavoriteColor(); void setFavoriteColor(String color); int getHeight(); void setHeight(int height);}
ValueProvider and PropertyAccess
public interface PersonProperties extends PropertyAccess<Person> { @Path("email") ModelKeyProvider<Person> key(); ValueProvider<Person, String> firstName(); ValueProvider<Person, String> lastName(); ValueProvider<Person, String> email(); ValueProvider<Person, String> favoriteColor(); ValueProvider<Person, Integer> height(); }
...PersonProperties properties = GWT.create(PersonProperties.class);
Cell: ‘Widget Lite’
CellsLightweight and ReusableEasy to CustomizeMost Components backed by Cells
Field CellsGWT AbstractInputCell
AbstractEventInputCell
FieldCell
ValueBaseFieldCell
CheckBoxCell TextInputCell TriggerFieldCell
ComboCell DateCell
Using Cells
Custom Cell<String>public class MyEmailLinkCell extends AbstractCell<String> { interface Template extends XTemplates { @XTemplate("<a href='mailto:{email}'>{email}</a>") SafeHtml emailTemplate(String email); }
private Template t = GWT.create(Template.class);
@Override public void render(Context context, String value, SafeHtmlBuilder sb) { sb.append(t.emailTemplate(value)); }}
ListView<Person, String>
ListView<Person, String> email = new ListView<Person, String>(store, properties.email());
names.setCell(new MyEmailLinkCell());
Grid<Person>ColumnConfig<Person, String> firstName = new ColumnConfig<Person,
String>(properties.firstName(), 80, "First Name");
ColumnConfig<Person, String> lastName = new ColumnConfig<Person, String>(properties.lastName(), 80, "Last Name");
lastName.setCell(new TextInputCell());
ColumnConfig<Person, Integer> height = new ColumnConfig<Person, Integer>(properties.height(), 80, "Height");
height.setCell(new NumberCell<Integer>(new IntegerPropertyEditor()));
Design questions?
From Server to Screen
Stores
Rewritten from scratchAPI Changes, more consistent with Java CollectionsConstructors require a ModelKeyProvider
Loaders, Readers, Proxies (and Writers)
Loader DataProxy Server
DataReader
Purposes
Loader: Builds requests, sends to DataProxyDataProxy: Makes request to serverDataReader: Translates wire-format to objectsDataWriter: Translates objects to wire-format
Readers and AutoBeansAll JSON and XML structures represented using AutoBeans
interface ContactCollection { @PropertyName("records/record") List<Contact> getValues();} interface Contact { @PropertyName("Name") String getName();
@PropertyName("Email") String getEmail();
@PropertyName("Phone") String getPhone();}
<?xml version="1.0" encoding="ISO-8859-1"?><records> <record> <Name>Middleton, Wendy V.</Name> <Email>[email protected]</Email> <Phone>5574291911</Phone> </record> <record> <Name>Stark, Olivia P.</Name> <Email>[email protected]</Email> <Phone>1666312154</Phone> </record> <record> <Name>Shannon, Rhea D.</Name> <Email>[email protected]</Email> <Phone>2413489010</Phone> </record>
Genericsprivate Loader<String, List<Person>> getPersonLoader() {
JsonReader<List<Person>, JsonResults> reader = new JsonReader<List<Person>, JsonResults>(abf, JsonResults.class) { @Override protected List<Person> createReturnData(Object loadConfig, JsonResults records){ return records.getPeople(); } };
RequestBuilder rb = new RequestBuilder(RequestBuilder.GET, "/people.json"); HttpProxy<String> proxy = new HttpProxy<String>(rb); return new Loader<String, List<Person>>(proxy, reader);}
Store contents can be efficiently replaced
without Loader
Data Questions?
Customization
Rendering?
ValueProvider instanceWith custom pathWith LabelProviderConfigured CellCustom Cell
Extra Behavior?
Event HandlersSubclass GridView/TreeViewCustom Cell
Questions?