Getting started with Maven, GXT 3 and GWT 2.5
This guide covers the step by step creation of a Maven GXT 3 project with GWT 2.5. It’s based on this, this and this document, so thanks for that!
Step 1: Create the Maven project
Since we don’t want to depend on any Eclipse or IntelliJ features, we’ll create a simple project using Maven. The Maven Archetype is really handy in this, and is it’s current version, 2.5-rc1 is stable enough to get our HelloWorld application running.
Open the command prompt in the directory you want to create your project in and use the GWT archetype by executing the following command:
mvn archetype:generate \
-DarchetypeGroupId=org.codehaus.mojo \
-DarchetypeArtifactId=gwt-maven-plugin \
-DarchetypeVersion=2.5.0-rc1 \
-DgroupId=com.foo.gwt \
-DartifactId=demo \
-Dversion=1.0-SNAPSHOT
I used MyModule as the module name.
Step 2: Add the GXT dependency
Open the pom.xml, and add the Sencha repository, the GXT version (3.0), and the GXT dependency:
2.5.0-rc1 3.0.0 sencha-commercial-release Sencha commercial releases https://maven.sencha.com/repo/commercial-release/ <groupId>com.sencha.gxt</groupId> <artifactId>gxt</artifactId> <version>${gxt.version}</version>
At this point you should be able to execute
mvn verify
After that, verify that GWT specific tasks can be run:
mvn gwt:run
Step 3: Add GXT to the project
From the migration guide:
The resources required to use GXT are all managed internally now – it is no longer necessary to keep a resources directory up to date. Instead, the GWT ClientBundle feature is used to manage images and stylesheets, making sure they are present as part of the compiled project. It is still necessary to link to a stylesheet from the main html page however – every compiled project will have a reset.css file, used to normalize differences between browsers.
So, open the $MODULE_NAME.html file, and add the following line as the first stylesheet in the file:
For example, if your module is called MyModule, add the following:
Remove the table for the Web Application Starter project. We don’t need it for this guide.
Add the line below to the module.gwt.xml, in src/main/resources/com/foo/gwt/MyModule.gwt.xml.
And remove the following line from the same file:
Now, on to the final part, the actual application. Replace the MyModule.java in src/main/java/com/foo/gwt/client/MyModule.java with the following code:
package com.foo.gwt.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
/**
* Entry point classes define onModuleLoad().
*/
public class MyModule implements EntryPoint {
public void onModuleLoad() {
BasicTabExample tabs = new BasicTabExample();
RootPanel.get().add(tabs);
}
}
Also, in the same directory, add a file called BasicTabExample.java, with the following contents:
package com.foo.gwt.client;
import com.google.gwt.event.logical.shared.SelectionEvent;
import com.google.gwt.event.logical.shared.SelectionHandler;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;
import com.sencha.gxt.widget.core.client.PlainTabPanel;
import com.sencha.gxt.widget.core.client.TabItemConfig;
import com.sencha.gxt.widget.core.client.TabPanel;
import com.sencha.gxt.widget.core.client.container.FlowLayoutContainer;
import com.sencha.gxt.widget.core.client.info.Info;
public class BasicTabExample extends FlowLayoutContainer {
public BasicTabExample() {
VerticalPanel vp = new VerticalPanel();
vp.setSpacing(10);
String txt = "Test";
SelectionHandler<Widget> handler = new SelectionHandler<Widget>() {
public void onSelection(SelectionEvent<Widget> event) {
TabPanel panel = (TabPanel) event.getSource();
Widget w = event.getSelectedItem();
TabItemConfig config = panel.getConfig(w);
Info.display("Message", "'" + config.getText() + "' Selected");
}
};
TabPanel folder = new TabPanel();
folder.addSelectionHandler(handler);
folder.setWidth(450);
HTML shortText = new HTML(txt);
shortText.addStyleName("pad-text");
folder.add(shortText, "Short Text");
HTML longText = new HTML(txt + "<br><br>" + txt);
longText.addStyleName("pad-text");
folder.add(longText, "Long Text");
final PlainTabPanel panel = new PlainTabPanel();
panel.setPixelSize(450, 250);
panel.addSelectionHandler(handler);
Label normal = new Label("Just a plain old tab");
normal.addStyleName("pad-text");
panel.add(normal, "Normal");
Label iconTab = new Label("Just a plain old tab with an icon");
iconTab.addStyleName("pad-text");
TabItemConfig config = new TabItemConfig("Icon Tab");
panel.add(iconTab, config);
Label disabled = new Label("This tab should be disabled");
disabled.addStyleName("pad-text");
config = new TabItemConfig("Disabled");
config.setEnabled(false);
panel.add(disabled, config);
vp.add(folder);
vp.add(panel);
add(vp);
}
}
Now, type the following:
mvn gwt:run
And browse to http://127.0.0.1:8888/MyModule.html?gwt.codesvr=127.0.0.1:9997. Wait a little to see your application up and running!
Resources
- http://www.sencha.com/examples/#ExamplePlace:basictabs
- http://www.sencha.com/learn/ext-gwt-and-maven/
- http://www.sencha.com/learn/sencha-gxt-2x-to-300-migration-guide/
- https://developers.google.com/web-toolkit/tools/gwtdesigner/features/gwt/gxt
- http://mojo.codehaus.org/gwt-maven-plugin/user-guide/archetype.html
Recent Comments