Looking to move to Ext GWT 3.0 from 2.x? This session will walk through the important API changes to help make the migration as straightforward as possible.
9. 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
ContentPanel panel = new ContentPanel();
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);
Thursday, November 3, 2011
10. XTemplate
Replaced runtime JavaScript XTemplate
Compile time using Deferred Binding
Can retrieve data from any Java Bean
Works with SafeHtml
Thursday, November 3, 2011
14. Lazy Rendering
2.0
Components create their DOM lazily
Can’t work on DOM before Component rendered
Thursday, November 3, 2011
15. Lazy Rendering
2.0
Components create their DOM lazily
Can’t work on DOM before Component rendered
3.0
Component create their DOM at construction
DOM available immediately
Thursday, November 3, 2011
16. Lazy Rendering
2.0
Components create their DOM lazily
Can’t work on DOM before Component rendered
3.0
Component create their DOM at construction
DOM available immediately
// 2.0
ContentPanel panel = new ContentPanel();
panel.el().setLeft(10); // fails, DOM does not exist
// 3.0
ContentPanel panel = new ContentPanel();
panel.getElement().setLeft(10); // works
Thursday, November 3, 2011
18. Events & Handlers
2.0
Custom GXT events & handlers
Events have getters not applicable to all events
Must read docs
Thursday, November 3, 2011
19. 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
Thursday, November 3, 2011
21. Events & Handlers
// 2.0 generic listeners, must match event with correct event type
ContentPanel panel = new ContentPanel();
panel.addListener(Events.Expand, new Listener<ComponentEvent>() {
public void handleEvent(ComponentEvent be) {
// generic event
}
});
Thursday, November 3, 2011
22. Events & Handlers
// 2.0 generic listeners, must match event with correct event type
ContentPanel panel = new ContentPanel();
panel.addListener(Events.Expand, new Listener<ComponentEvent>() {
public void handleEvent(ComponentEvent be) {
// generic event
}
});
// 3.0 strongly typed, can’t misuse API
ContentPanel panel = new ContentPanel();
panel.addExpandHandler(new ExpandHandler() {
@Override
public void onExpand(ExpandEvent event) {
// typed event
}
});
Thursday, November 3, 2011
24. ContentPanel Changes
2.0
ContentPanel supports “framed / unframed”
Support top component and bottom component
Thursday, November 3, 2011
25. ContentPanel Changes
2.0
ContentPanel supports “framed / unframed”
Support top component and bottom component
3.0
ContentPanel & FramedPanel
Removed support of top and bottom component
Thursday, November 3, 2011
26. 2.0 ContentPanel
ContentPanel panel = new 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"));
Thursday, November 3, 2011
27. 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));
Thursday, November 3, 2011
29. Fields & FormLayout
2.0
Label set of fields directly
Field labels can only be rendered into FormLayout
Thursday, November 3, 2011
30. Fields & FormLayout
2.0
Label set of fields 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
Thursday, November 3, 2011
32. Field Validation
2.0
Validation built into fields themselves
Validator interface only supported with TextField
Hard to add custom validation
Thursday, November 3, 2011
33. Field Validation
2.0
Validation built into fields themselves
Validator interface only supported with TextField
Hard to add custom validation
3.0
Validation removed from Fields
All fields support adding zero to many Validators
Thursday, November 3, 2011
34. 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));
Thursday, November 3, 2011
37. Layouts
2.0
Generic container supports all layouts
Possible to use wrong layout data with layout
Thursday, November 3, 2011
38. 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
Thursday, November 3, 2011
41. 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));
Thursday, November 3, 2011
42. 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));
// 3.0
FlowLayoutContainer con = new FlowLayoutContainer();
con.add(new HTML("child 1"));
// 2nd param only takes margin data
con.add(new HTML("child 2"), new MarginData(5));
Thursday, November 3, 2011
44. 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);
}
Thursday, November 3, 2011
45. 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
Thursday, November 3, 2011
46. 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");
Thursday, November 3, 2011
50. Renderers Vs Cells
2.0
Customize data via renderers which return HTML or Widgets
Renderers do not support events
Thursday, November 3, 2011
51. 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 fire events
High performance via flyweight pattern
Thursday, November 3, 2011
52. 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);
Thursday, November 3, 2011
53. 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;
}
};
Thursday, November 3, 2011
54. 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);
Thursday, November 3, 2011
57. Stores
2.0
Only works with ModelData instances
Can have reference to Loaders
Thursday, November 3, 2011
58. 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
Thursday, November 3, 2011
59. Loaders
Refactored generic usage
Better static code checking from IDE
Stores no longer use loaders directly
Thursday, November 3, 2011
60. 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));
Thursday, November 3, 2011
61. DataProxies
HttpProxy & SciptTagProxy can generate Json & Xml
Both proxies use writers to serialize data or else toString
Thursday, November 3, 2011
62. 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");
Thursday, November 3, 2011
63. 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();
}
Thursday, November 3, 2011
64. 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);
Thursday, November 3, 2011
67. Resource Changes
2.0
Must include gxt-all.css and all images
Thursday, November 3, 2011
68. 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
Thursday, November 3, 2011
69. Appearance Example
// non framed
ContentPanel panel = new ContentPanel();
// framed using appearance
FramedPanelAppearance appearance = GWT.create(FramedPanelAppearance.class);
ContentPanel framed = new ContentPanel(appearance);
// convenience subclass
FramedPanel framed2 = new FramedPanel();
Thursday, November 3, 2011