Ext GWT 3.0 Data Widgets

3,929 views

Published on

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.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,929
On SlideShare
0
From Embeds
0
Number of Embeds
272
Actions
Shares
0
Downloads
64
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ext GWT 3.0 Data Widgets

  1. 1. DATA WIDGETS Colin Alworth, Senchacolin.alworth@sencha.com @ambisinister
  2. 2. Data Widget Design
  3. 3. Data
  4. 4. Data Widgets Work WithBean-like POJOsAutoBeansRequestFactory Proxies
  5. 5. Reflection?2.0 uses Map<String,Object>3.0 generates accessors as needed
  6. 6. ValueProviders andPropertyAccesspublic interface Person { String getFirstName(); String getLastName(); String getEmail(); String getFavoriteColor(); void setFavoriteColor(String color); int getHeight(); void setHeight(int height);}
  7. 7. ValueProvider andPropertyAccesspublic 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);
  8. 8. Cell: ‘Widget Lite’
  9. 9. CellsLightweight and ReusableEasy to CustomizeMost Components backed by Cells
  10. 10. Field Cells GWT AbstractInputCell AbstractEventInputCell FieldCell ValueBaseFieldCellCheckBoxCell TextInputCell TriggerFieldCell ComboCell DateCell
  11. 11. Using Cells
  12. 12. 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)); }}
  13. 13. ListView<Person, String>ListView<Person, String> email = new ListView<Person, String>(store, properties.email());names.setCell(new MyEmailLinkCell());
  14. 14. 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()));
  15. 15. Design questions?
  16. 16. From Server to Screen
  17. 17. StoresRewritten from scratchAPI Changes, more consistent with Java CollectionsConstructors require a ModelKeyProvider
  18. 18. Loaders, Readers,Proxies (and Writers)
  19. 19. Loader DataProxy Server DataReader
  20. 20. PurposesLoader: Builds requests, sends to DataProxyDataProxy: Makes request to serverDataReader: Translates wire-format to objectsDataWriter: Translates objects to wire-format
  21. 21. Readers and AutoBeansAll JSON and XML structures represented using AutoBeansinterface 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>
  22. 22. 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);}
  23. 23. Store contents can be efficiently replaced without Loader
  24. 24. Data Questions?
  25. 25. Customization
  26. 26. Rendering?ValueProvider instanceWith custom pathWith LabelProviderConfigured CellCustom Cell
  27. 27. Extra Behavior?Event HandlersSubclass GridView/TreeViewCustom Cell
  28. 28. Questions?

×