The data widgets in Ext GWT3 have been completely rewritten. Rather than using renderers in 2.x, the new data widgets are GWT Cell-based. In this session you will learn about the changes and how to use the new API. 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.

2. DATA WIDGETS
Colin Alworth, Sencha
colin.alworth@sencha.com @ambisinister

3. Data Widget Design

4. Data

5. Data Widgets Work With
Bean-like POJOs
AutoBeans
RequestFactory Proxies

6. Reflection?
2.0 uses Map<String,Object>
3.0 generates accessors as needed

7. ValueProviders and
PropertyAccess
public interface Person {
String getFirstName();
String getLastName();
String getEmail();
String getFavoriteColor();
void setFavoriteColor(String color);
int getHeight();
void setHeight(int height);
}

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

9. Cell: ‘Widget Lite’

10. Cells
Lightweight and Reusable
Easy to Customize
Most Components backed by Cells

11. Field Cells
GWT AbstractInputCell
AbstractEventInputCell
FieldCell
ValueBaseFieldCell
CheckBoxCell TextInputCell TriggerFieldCell
ComboCell DateCell

12. Using Cells

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

14. ListView<Person, String>
ListView<Person, String> email = new ListView<Person, String>(store,
properties.email());
names.setCell(new MyEmailLinkCell());

15. 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()));

17. Design questions?

18. From Server to Screen

19. Stores
Rewritten from scratch
API Changes, more consistent with Java Collections
Constructors require a ModelKeyProvider

20. Loaders, Readers,
Proxies (and Writers)

21. Loader DataProxy Server
DataReader

22. Purposes
Loader: Builds requests, sends to DataProxy
DataProxy: Makes request to server
DataReader: Translates wire-format to objects
DataWriter: Translates objects to wire-format

23. Readers and AutoBeans
All JSON and XML structures represented using AutoBeans
interface ContactCollection { <?xml version="1.0" encoding="ISO-8859-1"?>
<records>
@PropertyName("records/record")
<record>
List<Contact> getValues(); <Name>Middleton, Wendy V.</Name>
} <Email>morbi.tristique@iaculisquis.org</Email>
interface Contact { <Phone>5574291911</Phone>
@PropertyName("Name") </record>
<record>
String getName();
<Name>Stark, Olivia P.</Name>
<Email>urna.suscipit.nonummy@faucibusleo.edu</Email>
@PropertyName("Email") <Phone>1666312154</Phone>
String getEmail(); </record>
<record>
<Name>Shannon, Rhea D.</Name>
@PropertyName("Phone")
<Email>Integer@nibhPhasellusnulla.org</Email>
String getPhone(); <Phone>2413489010</Phone>
} </record>

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

25. Store contents can be
efficiently replaced
without Loader

26. Data Questions?

27. Customization

28. Rendering?
ValueProvider instance
With custom path
With LabelProvider
Configured Cell
Custom Cell

29. Extra Behavior?
Event Handlers
Subclass GridView/TreeView
Custom Cell

30. Questions?