• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Ext GWT 3.0 Data Widgets

Ext GWT 3.0 Data Widgets



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 ...

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.



Total Views
Views on SlideShare
Embed Views



2 Embeds 271

http://www.sencha.com 269
http://sencha.site 2


Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Ext GWT 3.0 Data Widgets Ext GWT 3.0 Data Widgets Presentation Transcript

    • DATA WIDGETS Colin Alworth, Senchacolin.alworth@sencha.com @ambisinister
    • Data Widget Design
    • Data
    • Data Widgets Work WithBean-like POJOsAutoBeansRequestFactory Proxies
    • Reflection?2.0 uses Map<String,Object>3.0 generates accessors as needed
    • ValueProviders andPropertyAccesspublic interface Person { String getFirstName(); String getLastName(); String getEmail(); String getFavoriteColor(); void setFavoriteColor(String color); int getHeight(); void setHeight(int height);}
    • 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);
    • Cell: ‘Widget Lite’
    • CellsLightweight and ReusableEasy to CustomizeMost Components backed by Cells
    • Field Cells GWT AbstractInputCell AbstractEventInputCell FieldCell ValueBaseFieldCellCheckBoxCell 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
    • StoresRewritten from scratchAPI Changes, more consistent with Java CollectionsConstructors require a ModelKeyProvider
    • Loaders, Readers,Proxies (and Writers)
    • Loader DataProxy Server DataReader
    • PurposesLoader: 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 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>
    • 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?