Colin Alworth, Sencha

DATA WIDGETS

colin.alworth@sencha.com @ambisinister

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>morbi.tristique@iaculisquis.org</Email> <Phone>5574291911</Phone> </record> <record> <Name>Stark, Olivia P.</Name> <Email>urna.suscipit.nonummy@faucibusleo.edu</Email> <Phone>1666312154</Phone> </record> <record> <Name>Shannon, Rhea D.</Name> <Email>Integer@nibhPhasellusnulla.org</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?