Migrating from Ext GWT 2.x to 3.0

2.0 to 3.0 MIGRATION GUIDE
Darrell Meyer
Ext GWT Lead
Sencha Inc.

darrell@sencha.com
#darrellmeyer

Thursday, November 3, 2011

Overview
General Changes
Components
Layouts
Models
Data Widgets
Stores & Loaders
Theming


General Changes


General Changes
Package namespace change com.extjs to com.sencha
Module breakup
com.sencha.gxt.core.Core
com.sencha.gxt.cell.Core
com.sencha.gxt.data.Data
com.sencha.gxt.dnd.DND
com.sencha.gxt.fx.Fx
com.sencha.gxt.messages.Messages
com.sencha.gxt.state.State
com.sencha.gxt.theme.Base
com.sencha.gxt.theme.Blue
com.sencha.gxt.widget.Core
com.sencha.gxt.ui.GXT - works like 2.0 GXT module


Legacy Module
Bindings
ModelData
MVC
Old XTemplate


Deprecated Code

All GXT 2.0 deprecated code removed from 3.0
com.extjs.gxt.ui.client.binder - move to legacy
com.extjs.gxt.ui.client.tree
com.extjs.gxt.ui.client.treetable


Components


El vs. XElement
XElement replaces El class
XElement extends JavaScriptObject is not wrapper
component.el() now component.getElement()
Any GWT Element can be cast to XElement

// 2.0
ContentPanel panel = new ContentPanel();
panel.el().getFrameWidth("lr");

// 3.0
panel.getElement().getFrameWidth(Side.LEFT, Side.RIGHT);

// casting Element to XElement
HTML html = new HTML("I am a GWT Widget");
html.getElement().<XElement>cast().getFrameWidth(Side.LEFT, Side.RIGHT);


XTemplate
Replaced runtime JavaScript XTemplate
Compile time using Deferred Binding
Can retrieve data from any Java Bean
Works with SafeHtml


2.0 XTemplate

XTemplate.create(getDetailTemplate());

public native String getDetailTemplate() /*-{
return ['<div class="details">',
'<tpl for=".">',
'<img src="{modPath}"><div class="details-info">',
'<b>Image Name:</b>',
'<span>{name}</span>',
'<b>Size:</b>',
'<span>{sizeString}</span>',
'<b>Last Modified:</b>',
'<span>{dateString}</span></div></tpl></div>'].join("");
}-*/;


3.0 XTemplate
interface DetailRenderer extends XTemplates {
@XTemplate(source = "AdvancedListViewDetail.html")
public SafeHtml render(Photo photo);
}

DetailRenderer renderer = GWT.create(DetailRenderer.class);

<div class="details">
<img src="{path}"><div class="details-info">
<b>Image Name:</b><span>{name}</span>
<b>Size:</b><span>{size:number("#0")}k</span>
<b>Last Modified:</b><span>{date:date("M/d/yyyy")}</span>
</div>


Lazy Rendering


Lazy Rendering
2.0
Components create their DOM lazily
Can’t work on DOM before Component rendered


Lazy Rendering
2.0

3.0
Component create their DOM at construction
DOM available immediately


Lazy Rendering
2.0

3.0
Component create their DOM at construction
DOM available immediately
// 2.0
panel.el().setLeft(10); // fails, DOM does not exist

// 3.0
panel.getElement().setLeft(10); // works


Events & Handlers


Events & Handlers

2.0
Custom GXT events & handlers
Events have getters not applicable to all events
Must read docs


Events & Handlers

2.0
Custom GXT events & handlers
Events have getters not applicable to all events
Must read docs

3.0
GWT Handlers
Strongly Typed
Typed events vs. generic events


Events & Handlers
// 2.0 generic listeners, must match event with correct event type
panel.addListener(Events.Expand, new Listener<ComponentEvent>() {
public void handleEvent(ComponentEvent be) {
// generic event
}
});


Events & Handlers
// 2.0 generic listeners, must match event with correct event type
panel.addListener(Events.Expand, new Listener<ComponentEvent>() {
public void handleEvent(ComponentEvent be) {
// generic event
}
});

// 3.0 strongly typed, can’t misuse API
panel.addExpandHandler(new ExpandHandler() {
@Override
public void onExpand(ExpandEvent event) {
// typed event
}
});


ContentPanel Changes



2.0
ContentPanel supports “framed / unframed”
Support top component and bottom component



2.0
ContentPanel supports “framed / unframed”
Support top component and bottom component

3.0
ContentPanel & FramedPanel
Removed support of top and bottom component


2.0 ContentPanel

panel.setFrame(true);
panel.setLayout(new FitLayout());

ToolBar toolBar = new ToolBar();
toolBar.add(new LabelToolItem("ToolBar"));

panel.setTopComponent(toolBar);

panel.add(new Html("Fill panel"));


3.0 ContentPanel
FramedPanel panel = new FramedPanel(); // panel extends SimpleContainer

VerticalLayoutContainer con = new VerticalLayoutContainer();
panel.setWidget(con);

ToolBar toolBar = new ToolBar();
toolBar.add(new LabelToolItem("ToolBar"));

con.add(toolBar, new VerticalLayoutData(1, -1));
con.add(new HTML("Fill panel"), new VerticalLayoutData(1, 1));


Fields & FormLayout


Fields & FormLayout

2.0
Label set of ﬁelds directly
Field labels can only be rendered into FormLayout


Fields & FormLayout

2.0
Label set of ﬁelds directly
Field labels can only be rendered into FormLayout

3.0
Labels provided via FieldLabel
Fields and FieldLabel can render any any layout
FormLayout no longer needed and removed


Field Validation


Field Validation
2.0
Validation built into ﬁelds themselves
Validator interface only supported with TextField
Hard to add custom validation


Field Validation
2.0
Validation built into ﬁelds themselves
Validator interface only supported with TextField
Hard to add custom validation

3.0
Validation removed from Fields
All ﬁelds support adding zero to many Validators


Field Validators

field = new TextField();
field.addValidator(new MinLengthValidator(4));
field.addValidator(new EmptyValidator<String>());

number = new NumberField<Integer>(new IntegerPropertyEditor());
number.addValidator(new MinNumberValidator<Integer>(3));


Layouts


Layouts
2.0
Generic container supports all layouts
Possible to use wrong layout data with layout


Layouts
2.0
Generic container supports all layouts
Possible to use wrong layout data with layout

3.0
Layout collapsed into container
Strongly typed layout containers


Layouts
2.0 3.0
BorderLayout BorderLayoutContainer

Container CenterLayout CenterLayoutContainer

FlowLayout FlowLayoutContainer


Layout Example


Layout Example
// 2.0
LayoutContainer con = new LayoutContainer();
con.setLayout(new FlowLayout());
con.add(new HTML("child 1"));
// 2nd param takes any layout data instance
con.add(new HTML("child 2"), new MarginData(5));


Layout Example
// 2.0
LayoutContainer con = new LayoutContainer();
con.setLayout(new FlowLayout());
// 2nd param takes any layout data instance

// 3.0
FlowLayoutContainer con = new FlowLayoutContainer();
// 2nd param only takes margin data


Models


2.0 ModelData
GWT does not provide introspection
ModelData provides access to property and values
Stores data in map

public interface ModelData {
public <X> X get(String property);
public Map<String, Object> getProperties();
public Collection<String> getPropertyNames();
public <X> X remove(String property);
public <X> X set(String property, X value);
}


3.0 Models
Support any bean-like object
Not forced to implement GXT interfaces
Not forced to use GXT model classes
Interoperability with RPC, RequestFactor, AutoBean


ValueProvider
interface PostProperties extends PropertyAccess<Post> {
ModelKeyProvider<Post> id();

ValueProvider<Post, String> username();

ValueProvider<Post, String> forum();

ValueProvider<Post, String> subject();

ValueProvider<Post, Date> date();
}

// create properties instance via deferred binding
PostProperties props = GWT.create(PostProperties.class);

// use model key provider and value providers
ListStore<Post> store = new ListStore<Post>(props.id());
new ColumnConfig<Post, String>(props.forum(), 150, "Forum");


Xml AutoBeans
interface XmlAutoBeanFactory extends AutoBeanFactory {
static XmlAutoBeanFactory instance = GWT.create(XmlAutoBeanFactory.class);

AutoBean<EmailCollection> items();
}

interface ContactCollection {
@PropertyName("records/record")
List<Email> getValues();
}

interface Contact {
@PropertyName("Name")
String getName();

@PropertyName("Email")
String getEmail();

@PropertyName("Phone")
String getPhone();
}


Data Widgets


Renderers Vs Cells


Renderers Vs Cells

2.0
Customize data via renderers which return HTML or Widgets
Renderers do not support events


Renderers Vs Cells

2.0
Customize data via renderers which return HTML or Widgets
Renderers do not support events

3.0
All data widgets support cells
Cells support events and can ﬁre events
High performance via ﬂyweight pattern


Event Cell Example

cell = new SimpleSafeHtmlCell<String>(SimpleSafeHtmlRenderer.getInstance(),
"click") {

@Override
public void onBrowserEvent(Context context, Element parent, String value,
NativeEvent event, ValueUpdater<String> valueUpdater) {
super.onBrowserEvent(context, parent, value, event, valueUpdater);
if ("click".equals(event.getType())) {
Info.display("Click", "You clicked "" + value + ""!");
}
}
};

tree.setCell(cell);


2.0 Renderer
renderer = new GridCellRenderer<ModelData>() {

public Object render(ModelData model, String property, ColumnData config,
int rowIndex, int colIndex, ListStore<ModelData> store, Grid<ModelData> grid) {

Button button = new Button("Click Me");
button.addSelectionListener(new SelectionListener<ButtonEvent>() {

@Override
public void componentSelected(ButtonEvent ce) {
Info.display("Event", "Button Clicked");
}
});
return button;
}
};


3.0 Cells
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);


Stores & Loaders


Stores


Stores
2.0
Only works with ModelData instances
Can have reference to Loaders


Stores
2.0
Only works with ModelData instances
Can have reference to Loaders

3.0
Work with any object type
Requires ModelKeyProvider
Stores are not aware of Loaders
Loaders bound to Stores via LoadListeners


Loaders
Refactored generic usage
Better static code checking from IDE
Stores no longer use loaders directly


Loader Example

final ExampleServiceAsync service = GWT.create(ExampleService.class);

proxy = new RpcProxy<PagingLoadConfig, PagingLoadResult<Post>>() {
@Override
public void load(PagingLoadConfig loadConfig, AsyncCallback<PagingLoadResult<Post>>
callback) {
service.getPosts(loadConfig, callback);
}
};

ListStore<Post> store = new ListStore<Post>(props.id());

loader = new PagingLoader<PagingLoadConfig, PagingLoadResult<Post>>(proxy);
loader.setRemoteSort(true);
loader.addLoadHandler(new LoadResultListStoreBinding<PagingLoadConfig, Post,
PagingLoadResult<Post>>(store));


DataProxies
HttpProxy & SciptTagProxy can generate Json & Xml
Both proxies use writers to serialize data or else toString


Readers

Easily map Json to properties
Easily map Xml xpaths to bean properties
ModelType replaced with annotations

// 2.0 defines the JSON structure
ModelType type = new ModelType();
type.setRoot("records");
type.addField("Sender", "name");
type.addField("Email", "email");
type.addField("Phone", "phone");
type.addField("State", "state");
type.addField("Zip", "zip");


3.0 Readers Pt. 1
public interface EmailAutoBeanFactory extends AutoBeanFactory {
AutoBean<RecordResult> items();
AutoBean<ListLoadConfig> loadConfig();
}

public interface Email {
String getName();
String getEmail();
String getPhone();
String getState();
String getZip();
}

public interface RecordResult {
List<Email> getRecords();
}


3.0 Readers Pt. 2
class DataRecordJsonReader extends JsonReader<ListLoadResult<Email>,
RecordResult> {

public DataRecordJsonReader(AutoBeanFactory factory, Class<RecordResult>
rootBeanType) {
super(factory, rootBeanType);
}

protected ListLoadResult<Email> createReturnData(Object loadConfig,
RecordResult incomingData) {
return new BaseListLoadResult<Email>(incomingData.getRecords());
}
}

EmailAutoBeanFactory factory = GWT.create(EmailAutoBeanFactory.class);
DataRecordJsonReader reader = new DataRecordJsonReader(factory,
RecordResult.class);


Theming


Resource Changes


Resource Changes
2.0
Must include gxt-all.css and all images


Resource Changes
2.0
Must include gxt-all.css and all images

3.0
Removed gxt-all.css and image resources
Only required to add link to reset.css
Implemented Appearance pattern
CSS & images now ClientBundle based


Appearance Example

// non framed

// framed using appearance
FramedPanelAppearance appearance = GWT.create(FramedPanelAppearance.class);
ContentPanel framed = new ContentPanel(appearance);

// convenience subclass
FramedPanel framed2 = new FramedPanel();


Questions?


Migrating from Ext GWT 2.x to 3.0

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to Migrating from Ext GWT 2.x to 3.0

Similar to Migrating from Ext GWT 2.x to 3.0 (20)

More from Sencha

More from Sencha (20)

Recently uploaded

Recently uploaded (20)

Migrating from Ext GWT 2.x to 3.0