Published Nov 29, 2011 | Darrell Meyer | Guide | Easy
Last Updated Dec 15, 2011

Over the past weeks, we introduced you to some of the new features and improvements in Ext GWT 3. To allow a smooth transition from Ext GWT 2 to 3, Ext GWT lets you include both v2 and v3 components in the same application. This article explains the steps you need to take to run components from both versions at the same time.

Project Setup

First, you’ll need to set up your project to build against both Ext GWT 2 and 3.

1. Add Libraries

Ext GWT 2 requires you to add the appropriate JAR to your project’s classpath. In the same way, add the Ext GWT 3 JAR.

2. Add Static Resources

Ext GWT 2 further requires that you copy the resources to your project war directory. In Ext GWT 3, all resources are included in the library JAR, so no additional resources directory is necessary.

3. Inherit Modules

Finally, Ext GWT 2 has a module you must inherit in your own project’s module configuration. Add the Ext GWT 3 module in the same way.

<module rename-to='mixed'>
  <inherits name='com.extjs.gxt.ui.GXT' />
  <inherits name='com.sencha.gxt.ui.GXT' />
 
  <entry-point class='com.sencha.mixed.client.SimpleExample' />
</module>

Test Project

The example code in this article is part of a test project that you can download. The project demonstrates how to set up and configure a project to use v2 and v3. Please note that the included Ext GWT 3 JARs represent a development snapshot and are not from Developer Preview 5.

Download Example

Examples

Simple Example

Any components that do not need to be sized by their container can be simply used as-is. In this example, a v2 and a v3 button are both used.

@Override
public void onModuleLoad() {
  HorizontalPanel bar = new HorizontalPanel();
  bar.setSpacing(5);
 
  Button button = new Button("2.0 Button");
  button.addSelectionListener(new SelectionListener<ButtonEvent>() {
    @Override
    public void componentSelected(ButtonEvent ce) {
      Info.display("Action", "The " + ce.getButton().getText() + " button clicked");
    }
  });
 
  TextButton button2 = new TextButton("3.0 Button");
  button2.addSelectHandler(new SelectHandler() {
    @Override
    public void onSelect(SelectEvent event) {
      TextButton b = (TextButton) event.getSource();
      Info.display("Action", "The " + b.getText() + " button clicked");
    }
  });
 
  bar.add(button);
  bar.add(button2);
 
  RootPanel.get().add(bar);
}

Same Name Example

@Override
public void onModuleLoad() {
  HorizontalPanel bar = new HorizontalPanel();
  bar.setSpacing(5);
 
  ContentPanel panel = new ContentPanel();
  panel.setHeading("2.0 Panel");
  panel.setSize(200, 100);
 
  com.sencha.gxt.widget.core.client.ContentPanel panel2 = new com.sencha.gxt.widget.core.client.ContentPanel();
  panel2.setHeadingText("3.0 Panel");
  panel2.setPixelSize(200, 100);
 
  bar.add(panel);
  bar.add(panel2);
 
  RootPanel.get().add(bar);
}

Container Examples

For components that do not need to be sized by their container’s layout, you can simply add the v3 component to the v2 container or v2 component to the v3 container.

@Override
public void onModuleLoad() {
  LayoutContainer con = new LayoutContainer(); // 2.0 container
  con.setLayout(new CenterLayout());
  con.setSize(300, 300);
  con.setBorders(true);
 
  TextButton button = new TextButton("3.0 Button");
  con.add(button);
 
  CenterLayoutContainer con2 = new CenterLayoutContainer(); // 3.0 container
  con2.setPixelSize(300, 300);
  con2.setBorders(true);
 
  con2.add(new Button("2.0 Button"));
 
  RootPanel.get().add(con);
  RootPanel.get().add(con2);
}

In cases where a v3 component needs to be sized by a v2 layout, you can wrap the v3 component in a v2 WidgetComponent. We have made changes to WidgetComponent that have not yet been released. They will be included in Ext GWT 2.3, the next release in our v2 series. As a workaround, you can use the ComponentWrapper class included in the test project.

In cases where a v2 component needs to be sized by a v3 container, you can wrap the v2 component in a v3 WidgetComponent. As with the v2 WidgetComponent, the changes for the v3 WidgetComponent are not in the DP5 release. As a workaround, you can use the ThreeComponentWrapper class included in the test project.

This example shows both using v3 components in a v2 container and using v2 components in a v3 container. In both cases, a TabPanel is added to a Window. TabPanel needs to be resized when the window is resized.

@Override
public void onModuleLoad() {
  final Window window = new Window();
  window.setHeading("2.0 Window - Resize Me");
  window.setSize(300, 200);
  window.setBodyBorder(false);
  window.setLayout(new FitLayout());
 
  com.sencha.gxt.widget.core.client.TabPanel tabs = new com.sencha.gxt.widget.core.client.TabPanel();
  tabs.add(new HTML(""), new TabItemConfig("3.0 Tab 1"));
  tabs.add(new HTML(""), new TabItemConfig("3.0 Tab 2"));
  window.add(new ComponentWrapper(tabs));
 
  final com.sencha.gxt.widget.core.client.Window window2 = new com.sencha.gxt.widget.core.client.Window();
  window2.setHeadingText("3.0 Window - Resize Me");
  window2.setPixelSize(300, 200);
 
  TabPanel tabs2 = new TabPanel();
  tabs2.add(new TabItem("2.0 Tab 1"));
  tabs2.add(new TabItem("2.0 Tab 2"));
  window2.setWidget(new ThreeComponentWrapper(tabs2));
 
  ButtonBar bar = new ButtonBar();
  bar.add(new Button("2.0 Window", new SelectionListener<ButtonEvent>() {
 
    @Override
    public void componentSelected(ButtonEvent ce) {
      window.show();
    }
  }));
 
  bar.add(new Button("3.0 Window", new SelectionListener<ButtonEvent>() {
 
    @Override
    public void componentSelected(ButtonEvent ce) {
      window2.show();
    }
  }));
 
  RootPanel.get().add(bar);
}

Charting Example

Take a look at the ComplexContainerExample class in the test project to see the code that uses an Ext GWT 3 Chart in an Ext GWT 2 Window. To use charts, you need to add the Ext GWT 3 chart JAR to the classpath and inherit the chart module.

Summary

As a migration strategy, both Ext GWT 2 and 3 can be used at the same time. This allows an application to be upgraded to v3 over time, rather than all at once. Keep in mind that running both versions is not optimal as it increases the size of code and resources the application needs and uses.

Download the test project to see and run these examples. Then, visit the new Ext GWT 3 forums and join the discussion.