• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Introducing Ext GWT 3.0
 

Introducing Ext GWT 3.0

on

  • 7,378 views

This session will provide an overview of Ext GWT 3.0. There are many new features and lots of new functionality in this major release including Cell-based data widgets, Cell-based fields, a new data ...

This session will provide an overview of Ext GWT 3.0. There are many new features and lots of new functionality in this major release including Cell-based data widgets, Cell-based fields, a new data API, new charts, and theming.

Statistics

Views

Total Views
7,378
Views on SlideShare
7,046
Embed Views
332

Actions

Likes
2
Downloads
280
Comments
0

3 Embeds 332

http://www.sencha.com 329
http://sencha.site 2
https://twitter.com 1

Accessibility

Categories

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.

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

    Introducing Ext GWT 3.0 Introducing Ext GWT 3.0 Presentation Transcript

    • Thursday, November 3, 2011
    • Ext GWT 3.0 Darrell Meyer, Sencha darrell@sencha.com @darrellmeyerThursday, November 3, 2011
    • Overview Release Goals Feature Overview Release TimelineThursday, November 3, 2011
    • Name Games Google Web Toolkit “G-W-T” “Gwit” Ext GWT “E-X-T-G-W-T” “X-Gwit” “G-X-T”Thursday, November 3, 2011
    • Ext GWT 3.0 GoalsThursday, November 3, 2011
    • Primary Goals Leverage the power of GWT and its compiler Use GWT API’s where applicable for better interoperability Integrate and support best practices of GWT Build and release through MavenThursday, November 3, 2011
    • Syncing with GWT GXT 2.0 GXT 3.0 Events & Listeners Custom GWT Rendering Deferred Direct Interface Based No Yes Models Custom POJO UiBinder Support No Yes SafeHtml Support No Yes GWT Based Charts Flash Yes Theming Custom ClientBundleThursday, November 3, 2011
    • Feature OverviewThursday, November 3, 2011
    • Features Models Stores & Loaders Templates Widget Changes Cells & Cell Widgets Layouts UiBinder Charts Theming & AppearanceThursday, November 3, 2011
    • ModelsThursday, November 3, 2011
    • Model Support 2.0 Forced users to work with GXT Models Models kept internal map for data Not strongly typed 3.0 Full support for any POJO Supports RPC, RequestFactory, AutoBeans Data Stores take any object typeThursday, November 3, 2011
    • Server Communications Transport Data Type RPC POJOs RequestFactory EntityProxy / AutoBean RequestBuilder (XML / JSON) Interface / AutoBeanThursday, November 3, 2011
    • ValueProvider Allows access to an object’s property Supports string based path Supports nested properties Can be created directly Can be created by generatorThursday, November 3, 2011
    • ValueProvider Allows access to an object’s property Supports string based path Supports nested properties Can be created directly Can be created by generatorThursday, November 3, 2011
    • ValueProvider interface PostProperties extends PropertyAccess<Post> { ValueProvider<Post, String> username(); ValueProvider<Post, String> forum(); ValueProvider<Post, Date> date(); } // create properties instance via deferred binding PostProperties props = GWT.create(PostProperties.class); // use value providers new ColumnConfig<Post, String>(props.forum(), 150, "Forum");Thursday, November 3, 2011
    • Stores & LoadersThursday, November 3, 2011
    • Stores Stores are client-side collections of data Filtering and sorting Change events Accept any object type Data widgets are bound to stores Store ListStore TreeStoreThursday, November 3, 2011
    • Loaders Loader: Builds requests, sends to DataProxy DataProxy: Makes request to server DataReader: Translates wire-format to objects DataWriter: Translates objects to wire-format Loader DataProxy DataReaderThursday, November 3, 2011
    • Loader InteractionThursday, November 3, 2011
    • Loader Interaction LoaderThursday, November 3, 2011
    • Loader Interaction Loader DataProxyThursday, November 3, 2011
    • Loader Interaction Loader DataProxy ServerThursday, November 3, 2011
    • Loader Interaction Loader DataProxy ServerThursday, November 3, 2011
    • Loader Interaction Loader DataProxy ServerThursday, November 3, 2011
    • Loader Interaction Loader DataProxy Server DataReaderThursday, November 3, 2011
    • DataProxy Example HttpProxy works with GWT RequestBuilder The type parameters defines the input and return type String path = "data/data.xml"; RequestBuilder builder = new RequestBuilder(RequestBuilder.GET, path); HttpProxy<ListLoadConfig> proxy = new HttpProxy<ListLoadConfig>(builder);Thursday, November 3, 2011
    • DataReader Example Reader “transforms” data Most String readers use AutoBeans reader = new XmlReader<ListLoadResult<Email>, EmailCollection>(factory, EmailCollection.class) { protected ListLoadResult<Email> createReturnData(Object loadConfig, EmailCollection records) { return new BaseListLoadResult<Email>(records.getValues()); }; };Thursday, November 3, 2011
    • DataLoader Example loader = new ListLoader<ListLoadConfig, ListLoadResult<Email>>( proxy, reader); loader.addLoadHandler(new LoadResultListStoreBinding<ListLoadConfig, Email, ListLoadResult<Email>>(store)); loader.load();Thursday, November 3, 2011
    • DataWriter Turns logical data into format to be sent back to server Reverse behavior of DataReaders Example use with LoadConfig object sent to server DataWriter AutoBeanWriter JsonWriter UrlEncodingWriter XmlWriterThursday, November 3, 2011
    • TemplatesThursday, November 3, 2011
    • XTemplates Provides compile time templating Retrieves data from any Java Bean Produces SafeHtmlThursday, November 3, 2011
    • XTemplates Example Pt. 1 <p><b>Name:</b> {data.name}</p> <p><b>Salary</b>: {data.income:currency}</p> <p><b>Kids:</b></p> <tpl for="data.kids"> <tpl if="age < 100"><p>{#}. {parent.name}s kid - {name} - {bday:date("M/d/yyyy")}</p></tpl> </tpl>Thursday, November 3, 2011
    • XTemplates Example Pt. 2 public interface DataRenderer extends XTemplates { @XTemplate(source = "template.html") public SafeHtml renderTemplate(Person data); } DataRenderer renderer = GWT.create(DataRenderer.class); HTML text = new HTML(renderer.renderTemplate(person));Thursday, November 3, 2011
    • XTemplates Example Pt. 3 interface ExampleStyle extends CssResource { String searchItem(); } interface ExampleTemplate extends XTemplates { @XTemplate("<div class={style.searchItem}>{post}</div>") SafeHtml render(Forum post, ExampleStyle style); }Thursday, November 3, 2011
    • Widget ChangesThursday, November 3, 2011
    • Fields Most fields are now cell based Allows to be used standalone and in data widgets Fields now work with the GWT Editing frameworkThursday, November 3, 2011
    • State Management Sate code moved out of Components themselves Supports asynchronous retrieval of data HTML Local StorageThursday, November 3, 2011
    • Cells & Cell WidgetsThursday, November 3, 2011
    • Cells New design and implementation from GWT Renders views of data Supports events Work with both GWT and Ext GWT CellsThursday, November 3, 2011
    • Cells GWT AbstractInputCell AbstractEventInputCell FieldCell ValueBaseFieldCell SliderCell CheckBoxCell TextInputCell TriggerFieldCell TwinTriggerFieldCell NumberCell ComboCell DateCell SpinnerFieldCellThursday, November 3, 2011
    • Cell Widgets Cell support in all data widgets Tree, ListView, Grid,TreeGrid Replaces Widget support in data widgets from 2.0 High performance, interactive behaviorThursday, November 3, 2011
    • Thursday, November 3, 2011
    • Cell Example ColumnConfig column = new ColumnConfig(); column.setRenderer(renderer); cc1 = new ColumnConfig<Plant, String>(properties.name(), 100, "Name"); TextButtonCell button = new TextButtonCell(); button.addSelectHandler(new SelectHandler() { @Override public void onSelect(SelectEvent event) { Context c = event.getContext(); int row = c.getIndex(); Plant p = store.get(row); Info.display("Event", "The " + p.getName() + " was clicked."); } }); cc1.setCell(button);Thursday, November 3, 2011
    • UiBinderThursday, November 3, 2011
    • GWT UiBinder Declarative user interfaces via Xml Separations of duties Java developers and designers Supports both widgets and HTML markup Supports CSSThursday, November 3, 2011
    • UiBinder <ui:UiBinder xmlns:ui=urn:ui:com.google.gwt.uibinder ...> <container:CenterLayoutContainer> <gxt:ContentPanel bodyStyle="padding: 6px" headingText="CenterLayout" width="200"> <g:Label text="I should be centered" /> </gxt:ContentPanel> </container:CenterLayoutContainer> </ui:UiBinder>Thursday, November 3, 2011
    • LayoutsThursday, November 3, 2011
    • Layouts New optimized layout engine UiBinder support including layout data Fully typed containers Easier to use and understand APIThursday, November 3, 2011
    • Layouts 2.0 3.0 BorderLayout BorderLayoutContainer Container CenterLayout CenterLayoutContainer FlowLayout FlowLayoutContainerThursday, November 3, 2011
    • ChartsThursday, November 3, 2011
    • Draw Cross platform drawing API SVG / VML / Canvas Normalizes differences between engine API syntax DrawComponent base component for drawing DrawComponent works with GXT layoutsThursday, November 3, 2011
    • Charts Integrated with GXT Models & Stores Full event support for series and legends Custom tooltip for series All charts support animations via GXT Fx Customize appearance of series, axis, legendThursday, November 3, 2011
    • Thursday, November 3, 2011
    • Appearance & ThemingThursday, November 3, 2011
    • 2.0 Theming Single monolithic gxt-all.css Contains CSS for all browsers Manual image spriting Hard to determine what CSS is applied to a Widget No compile time checksThursday, November 3, 2011
    • Appearance Pattern Renders the “view” via a SafeHtml string Responsible for HTML structure and styles Responds to state changes Appearance pattern applied to both widgets and cells ClientBundle Widget Appearance CssResource XTemplateThursday, November 3, 2011
    • Release TimelineThursday, November 3, 2011
    • Release Timeline 3.0 Beta 1 Q4 2011 3.0 GA early 2012Thursday, November 3, 2011
    • Road to 3.0 Weekly snapshot builds to Maven Actively helping with 3.0 issue and bugs in forumsThursday, November 3, 2011
    • Post 3.0 ThemeBuilder Mobile supportThursday, November 3, 2011
    • Questions?Thursday, November 3, 2011