migrating from ext gwt 2.x to 3.0
DESCRIPTION
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.TRANSCRIPT
Thursday, November 3, 2011
Darrell MeyerExt GWT Lead
Sencha Inc.
[email protected]#darrellmeyer
2.0 to 3.0 MIGRATION GUIDE
Thursday, November 3, 2011
OverviewGeneral Changes
ComponentsLayoutsModels
Data WidgetsStores & Loaders
Theming
Thursday, November 3, 2011
General Changes
Thursday, November 3, 2011
General ChangesPackage namespace change com.extjs to com.senchaModule breakupcom.sencha.gxt.core.Corecom.sencha.gxt.cell.Corecom.sencha.gxt.data.Datacom.sencha.gxt.dnd.DNDcom.sencha.gxt.fx.Fxcom.sencha.gxt.messages.Messagescom.sencha.gxt.state.Statecom.sencha.gxt.theme.Basecom.sencha.gxt.theme.Bluecom.sencha.gxt.widget.Corecom.sencha.gxt.ui.GXT - works like 2.0 GXT module
Thursday, November 3, 2011
Legacy ModuleBindingsModelDataMVCOld XTemplate
Thursday, November 3, 2011
Deprecated Code
All GXT 2.0 deprecated code removed from 3.0com.extjs.gxt.ui.client.binder - move to legacycom.extjs.gxt.ui.client.treecom.extjs.gxt.ui.client.treetable
Thursday, November 3, 2011
Components
Thursday, November 3, 2011
El vs. XElementXElement replaces El classXElement extends JavaScriptObject is not wrappercomponent.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
XTemplateReplaced runtime JavaScript XTemplateCompile time using Deferred BindingCan retrieve data from any Java BeanWorks with SafeHtml
Thursday, November 3, 2011
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(""); }-*/;
Thursday, November 3, 2011
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>
Thursday, November 3, 2011
Lazy Rendering
Thursday, November 3, 2011
Lazy Rendering2.0Components create their DOM lazilyCan’t work on DOM before Component rendered
Thursday, November 3, 2011
Lazy Rendering2.0Components create their DOM lazilyCan’t work on DOM before Component rendered
3.0Component create their DOM at constructionDOM available immediately
Thursday, November 3, 2011
Lazy Rendering2.0Components create their DOM lazilyCan’t work on DOM before Component rendered
// 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
3.0Component create their DOM at constructionDOM available immediately
Thursday, November 3, 2011
Events & Handlers
Thursday, November 3, 2011
Events & Handlers
2.0Custom GXT events & handlersEvents have getters not applicable to all eventsMust read docs
Thursday, November 3, 2011
Events & Handlers
2.0Custom GXT events & handlersEvents have getters not applicable to all eventsMust read docs
3.0GWT HandlersStrongly TypedTyped events vs. generic events
Thursday, November 3, 2011
Events & Handlers
Thursday, November 3, 2011
// 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 } });
Events & Handlers
Thursday, November 3, 2011
// 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 } });
Events & Handlers
// 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
ContentPanel Changes
Thursday, November 3, 2011
ContentPanel Changes
2.0ContentPanel supports “framed / unframed”Support top component and bottom component
Thursday, November 3, 2011
ContentPanel Changes
2.0ContentPanel supports “framed / unframed”Support top component and bottom component
3.0ContentPanel & FramedPanelRemoved support of top and bottom component
Thursday, November 3, 2011
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
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
Fields & FormLayout
Thursday, November 3, 2011
Fields & FormLayout
2.0Label set of fields directlyField labels can only be rendered into FormLayout
Thursday, November 3, 2011
Fields & FormLayout
2.0Label set of fields directlyField labels can only be rendered into FormLayout
3.0Labels provided via FieldLabelFields and FieldLabel can render any any layoutFormLayout no longer needed and removed
Thursday, November 3, 2011
Field Validation
Thursday, November 3, 2011
Field Validation2.0Validation built into fields themselvesValidator interface only supported with TextFieldHard to add custom validation
Thursday, November 3, 2011
Field Validation2.0Validation built into fields themselvesValidator interface only supported with TextFieldHard to add custom validation
3.0Validation removed from FieldsAll fields support adding zero to many Validators
Thursday, November 3, 2011
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
Layouts
Thursday, November 3, 2011
Layouts
Thursday, November 3, 2011
Layouts
2.0Generic container supports all layoutsPossible to use wrong layout data with layout
Thursday, November 3, 2011
Layouts
2.0Generic container supports all layoutsPossible to use wrong layout data with layout
3.0Layout collapsed into containerStrongly typed layout containers
Thursday, November 3, 2011
Layouts
Container
BorderLayoutContainerBorderLayout
CenterLayout
FlowLayout
CenterLayoutContainer
FlowLayoutContainer
3.02.0
Thursday, November 3, 2011
Layout Example
Thursday, November 3, 2011
// 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
Thursday, November 3, 2011
// 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
// 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
Models
Thursday, November 3, 2011
2.0 ModelDataGWT does not provide introspectionModelData provides access to property and valuesStores 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
3.0 ModelsSupport any bean-like objectNot forced to implement GXT interfacesNot forced to use GXT model classesInteroperability with RPC, RequestFactor, AutoBean
Thursday, November 3, 2011
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
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(); }
Xml AutoBeans
Thursday, November 3, 2011
Data Widgets
Thursday, November 3, 2011
Renderers Vs Cells
Thursday, November 3, 2011
Renderers Vs Cells
2.0Customize data via renderers which return HTML or WidgetsRenderers do not support events
Thursday, November 3, 2011
Renderers Vs Cells
2.0Customize data via renderers which return HTML or WidgetsRenderers do not support events
3.0All data widgets support cellsCells support events and can fire eventsHigh performance via flyweight pattern
Thursday, November 3, 2011
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
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
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
Stores & Loaders
Thursday, November 3, 2011
Stores
Thursday, November 3, 2011
Stores2.0Only works with ModelData instancesCan have reference to Loaders
Thursday, November 3, 2011
Stores2.0Only works with ModelData instancesCan have reference to Loaders
3.0Work with any object typeRequires ModelKeyProviderStores are not aware of LoadersLoaders bound to Stores via LoadListeners
Thursday, November 3, 2011
LoadersRefactored generic usageBetter static code checking from IDEStores no longer use loaders directly
Thursday, November 3, 2011
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
DataProxiesHttpProxy & SciptTagProxy can generate Json & XmlBoth proxies use writers to serialize data or else toString
Thursday, November 3, 2011
Readers
Easily map Json to propertiesEasily map Xml xpaths to bean propertiesModelType 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
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. 1
Thursday, November 3, 2011
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);
3.0 Readers Pt. 2
Thursday, November 3, 2011
Theming
Thursday, November 3, 2011
Resource Changes
Thursday, November 3, 2011
Resource Changes2.0Must include gxt-all.css and all images
Thursday, November 3, 2011
Resource Changes2.0Must include gxt-all.css and all images
3.0Removed gxt-all.css and image resourcesOnly required to add link to reset.cssImplemented Appearance patternCSS & images now ClientBundle based
Thursday, November 3, 2011
Appearance Example
// non framedContentPanel panel = new ContentPanel(); // framed using appearanceFramedPanelAppearance appearance = GWT.create(FramedPanelAppearance.class);ContentPanel framed = new ContentPanel(appearance); // convenience subclassFramedPanel framed2 = new FramedPanel();
Thursday, November 3, 2011
Questions?
Thursday, November 3, 2011