Sunday, November 4, 2012

GWT Project Development Environment - 2. maven + eclipse + tomcat

This is a complete solution about how to set up a practical development environment with maven, eclipse and tomcat.
Before start you need to take some time to check if your system environment meet below system environmental requirements for windows if you use window.

Environmental requirements (Windows):

  • JDK
  • Ant (if you don't want to use ant command to run or build project not required)
  • Maven
  • gwt sdk
  • eclipse with plugins, m2e, maven integration forWTP, google plugin and sysdeo tomcat launcher.
  • Tomcat
  • Add directories of ant, maven and gwt sdk into path environment variable.

1. Create a gwt maven project

1.1 Approaches

There are two effective approaches to create a gwt maven project, by gwt maven plugin and gwt command line. I tried both approaches and chose the latter. Because the pom file generated by the latter is quite reasonable than the former. You don't need to make any change on pom.xml you can import it into eclipse directly without any error.
We need use gwt command line command webAppCreator. Before run this command you need to make sure you have added gwt sdk into your environment variable PATH.

1.2 webAppCreator

Use webAppCreater -help, you can get all the paramters which you can use.

WebAppCreator [-overwrite] [-ignore] [-templates template1,template2,...] [-out dir] [-junit pathToJUnitJar] [-maven] [-noant] moduleName

where
  -overwrite    Overwrite any existing files
  -ignore       Ignore any existing files; do not overwrite
  -templates    Specifies the template(s) to use (comma separeted). Defaults to 'sample,ant,eclipse,readme'
  -out          The directory to write output files into (defaults to current)
  -junit        Specifies the path to your junit.jar (optional)
  -maven        Deprecated. Create a maven2 project structure and pom file (default disabled). Equivalent to specifying 'maven' in the list of templates.
  -noant        Deprecated. Do not create an ant configuration file. Equivalent to not specifying 'ant' in the list of templates.
and
  moduleName  The name of the module to create (e.g. com.example.myapp.MyApp)
-maven parameter is the key for generating gwt maven project.

1.3 Execute command 

Run
webAppCreator -maven com.martian.gwtmavenproject.MainPanel
com.gwtmavenproject.MainPanel is module name of this gwt project.

After execution you can get a standard maven project. There are only src folder, pom file and readme.txt under project root folder.
You may want to change the artifactId and groupId of this project.

2. Import into eclipse as maven project

Without any problem. Nothing can be accountable.

3. Use your own Tomcat in development mode instead of Jetty

3.1 Deploy project to your own Tomcat

Three methods, the latter two also can be applied to other types of application servers:
  • Use sysdeo Tomcat launcher plugin.
  • Use server tool of WTP. Just like a ordinary java web application, but don't forget to add the generated web sources to Deployment Assembly of the project if you want to run at product mode.
In fact, in this way you can use other sorts of web application server, such as some J2EE container.
  • Use an external Tomcat Server directly. If in this way you want to debug the server side code you   have to use remote debug.
The same principle of the two methods. The former may be more convenient when multiple applications share one tomcat server and you can start or stop in eclipse.
Now assume that you have successfully deployed gwt project to your Tomcat server.

3.2 Launch project in development mode

The principle will be used latter references Compile & Debug of gwt application.

a. Right click project in project explorer --> Debug As --> Web Application (running on an external server)



b. Specify external server URL and launch development mode

    You can access your application with http://localhost:8080/gwtmavenproject/. So
Click ok to development mode.

c. Start your Tomcat

If you use sysdeo up Tomcat
you have to change the output console manually in eclipse for seeing them.

d. Enjoy your development time!

It is powerful in that we can debug client-side code.

e. Edit debug configuration

If you still have something to change you can access
Find the configuration just created.
You can change some start arguments like -logLevel, change it from INFO to DEBUG.

Sysdeo Eclipse Tomcat Launcher plugin

It support start and stop tomcat in eclipse and also serve up convenience to change tomcat configure file all in eclipse.

Sysdeo Eclipse Tomcat Launcher plugin

1. Install eclipse plugin by .link

Unzip it and put into your eclipse's plugins folder. Restart your eclipse.
But if you want to manage the plugins installed by yourself clearly you can adopt another way. Link plugin to you eclipse.
Take my own eclipse as an example.

a. Get eclipse install directory: C:\JavaIDE\eclipse-jee-juno

b. Create a folder for sysdeo: C:\JavaIDE\eclipse-plugins\sysdeo\eclipse\plugins

c. Put decompressed result into this folder

d. Create sysdeo.link file

    Content of this file:
     path=C:/JavaIDE/eclipse-plugins/sysdeo  

e. Put .link file into C:\JavaIDE\eclipse-jee-juno\links

f. Launch your eclipse

    Seeing these icons on tool bar proves you have been success.

If you want to remove this plugin just remove corresponding .link file. 
In fact, .link file can contain multiple plugins' path like below
path=C:/JavaIDE/eclipse-plugins/sysdeo path=C:/JavaIDE/eclipse-plugins/plugin2 ......
If you remove plugin instead of removing .link file remove the right line.

2. Set tomcat server

Access eclipse's Window --> References, you can find a new item "Tomcat" in left panel.


There are 5 places to change:
  • Tomcat version, which version is your tomcat?
  • Tomcat home, where is your tomcat installed?
  • Context declaration mode, server.xml or context files? The former means configuration will be stored in <Tomcat home>\conf\server.xml file, but if several applications share this tomcat there may be problem because they share this configuration file.Context files means plugin will create a special context xml for each web project. I choose the latter.
  • Tomcat base, where all tomcat configuration files are saved. This fold need to be created. Its location is without restriction. Usually there is a Servers folder under your eclipse workspace if you alreadt have set certain kind of application server in your eclipse. If you have not it doesn't matter just create a new one. Under Servers folder I created a new folder named Tomcat v7.0 Server for my tomcat 7.0. Then I copied conf folder of my tomcat 7.0 into Tomcat v7.0 Server folder. So now Tomcat base is <workspace_dir>\Servers\Tomcat v7.0 Server.
  • Context directory, where the context files are stored? In the current case context directory should be <workspace>\Servers\Tomcat v7.0 Server\conf\Catalina\localhost.
In order to faster future editing server config you can import the Tomcat base as File System in eclipse. Or just refresh Servers folder in Project Explorer if you put Tomcat base inside it.

3. Set web maven project

I will take a maven project as an example to illustrate.

a. Right click your web project --> Properties --> Tomcat


First figure out a few things:
  • Is a Tomcat Project, of course yes unless you don't want tomcat to launch this project.
  • Context name, what name do you want to use to access this project? If you name it gwtmavenapp latter you can access this project by http://localhost:8080/gwtmavenapp. After you do all the settings you can find a new file named gwtmavenapp.xml under <workspace>\Servers\Tomcat v7.0 Server\conf\Catalina\localhost
  • Subdirectory to set as web application root (optional), set as the directory which holds the build result of a java web application. To a standard maven layout there's a folder named <artifactId>-<version> in target folder after build. In this case this is the web application root.

b. Set it as a Tomcat 

c. Apply and OK

d. Click little pussy

Friday, November 2, 2012

Add GWT SDK to Your System PATH

Adding GWT SDK into you system path undoubtedly is convenient if you frequently manipulate GWT with command line. But I don't like this. There are too many things in system path already. I still remember it dazzled me last when I was trying to edit it.
I'd like to find another way to add it into system environment without changing PATH system variable and let it as simple as running cmd command.
Well,if you follow steps below you can accomplish the object above.
1. Create a cmd file, named gwtcmd.cmd

  1. @ECHO OFF  
  2. SET GWT_HOME=<GWT_SDK_DIR>  
  3. SET PATH=%PATH%;%GWT_HOME%  
  4. CMD /k "ECHO Welcome to Google Web Toolkit command-line for GWT<GWT_VERSON>!"
2. Copy this file to C:\Windows\System32
3. Win Key + R, type gwtcmd, enter. 
Now you can use GWT command line anywhere in your local. gwtcmd is only three letters more than cmd. The price is not too large.