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.



Saturday, October 6, 2012

How to run IE7 and IE8 on IE9

I once downgraded IE9 to IE8 for testing a web page whether it can work well on IE8. But if you set auto upgrade you will find IE return IE9 soon. And using IE8 on WIN7 gives you hell, too.
Can we run different versions IE on one browser? Yes, it is IE9. Finally I found it, because I firmly believe Microsoft is a big enough and powerful enough company and should provide this developer-friendly functionality which I even can think of. In fact, I once raised similar issue as early as IE7 was launched and wondered why IE7 didn't support such functionality to facilitate testing IE6 compatibility.
Below are the steps how to switch between several IE versions:
1. Press F12 to open developer tools or use menu

2. Change Browser Mode and Document Mode


What are Browser Mode and Document Mode? You can refer to here
And I also just heard this functionality was provided from IE8.... Is that because during this time I maintain a very old EJB2 project which only was tested on IE6.

So far I find IE9 can do all what Firefox do, and it might do even better. IE9, Firefox and Chrome, three pillars age?


How to forbid Speed up browsing by disable add-ons

You may often see this popup when every times you open you IE9 browser to surf.

It is really disappointing, at least I feel so. But how to forbid it? Easy, there are two methods:
A. Forbid this notification directly, I call it direct method;
B. Don't let it appear easily, I call it indirect method.
They are explained below:

A. Direct method
1. Win Key + r and type in regedit, and Alt + y to open window's Registry Edit

2. Go in \HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Policies
3. Right click Policies node and create a new key, name it Ext
4. Click Ext just created, on right side empty place right click and select DWORD(32-bit)Value
5. Name it DisableAddonLoadTimePerformanceNotifications
6. Double click this new created item, set value to 1, by default it's 0

7. Click OK, exit registry edit, and restart your IE9 browser.
You will find this notification is gone. But how to let it back? ... This is another question! :)

B. Indirect method
This notification is for telling you the add-ons increase the time to start the browser,open a new tab or navigate to websites and is only displayed when this time exceeds a certain time. We can set up a very long time so that the start time will not exceed it.
1. Display Command bar of your IE9
 Then you can see
2. Open Toolbars --> Disable add-ons
3. Set up a very long limit time, select the longest time option, 10.0 seconds
4. Click Done. Start a new tab, this notification should be gone.

5. If you want to let it come back very easy. Just set a short time.





Sunday, September 2, 2012

GWT Project Development Environment - 1.Eclipse

Google Web Toolkit official website
1 Install Google Plugin for Eclipse

The downloading addresses against different versions of eclipse:

Eclipse 4.2 (Juno)

http://dl.google.com/eclipse/plugin/4.2

Eclipse 3.7 (Indigo)

http://dl.google.com/eclipse/plugin/3.7

Eclipse 3.6 (Helios)

http://dl.google.com/eclipse/plugin/3.6

Eclipse 3.5 (Galileo)

http://dl.google.com/eclipse/plugin/3.5
Fill in updating location by your eclipse version.

We select the requisite part only, Google Plugin for Eclipse(required). We will download GWT SDK manually later and link it and eclipse through Google Plugin. Google Plugin for Eclipse will become a bridge between eclipse and GWT SDK. Therefore we can manage GWT SDK easily with it, even Google App Engine SDK.
Another reason why we choose downloading by ourselves rather than installing directly with Google Plugin together is that it can be more convenient to manipulate GWT SDK with command line, because its directory is much simpler and more fixed. Especially after you add it into path of system environment, frequently changing eclipse plugins' directory as a result of various reasons causes its directory to be changed frequently.

2 Download GWT SDK
Google Web Toolkit downloading address
Please notice, if you access the link "Download GWT SDK" directly you will get the latest version, but this latest includes RC. Therefore you should use the link below if you are going to get the latest, stable and released version:
Unzip it after downloading, put it into a directory, the name of which had better be succinct and permanent. For instance, C:\GWT, of course you are going to use it for a long time.  

3 Manage GWT SDK with Google Plugin
Open eclipse Window --> References. If Google plugin was installed correctly there will be a new item, Google. In fact, if installed correctly you will find a new Google icon on tool bar.
Select Web Toolkit, click Browse..., locate GWT SDK. We can manage multiple GWTs of different versions, but let one work only. By the way, App Engine SDK can be added by the same way.

4 GWT_HOME (Optional)
If you want use command line to manipulate GWT SDK, it is undoubtedly the most convenient to add its location to path of system environment. No matter what folder you are in, you can use commands provided by SDK.
But this is not enough, when you create a GWT project, for example, run:

webAppCreator -out MyWebApp com.mycompany.mywebapp.MyWebApp

you will find it is also an ant project. So you need make sure an ant has been installed and set on your computer. Otherwise this project can't be compiled or run by command line.

5 End
You can start your first GWT project with your eclipse now.





Thursday, August 9, 2012

Additional plugins are required to display all the media on this page

Most recently no matter what website I access my Firefox browser will popup a warning 'Additional plugins are required to display all the media on this page',

 but I click 'Install Missing Plugins...' button and it will prompt

This really effects emotion.
How to remove this troublesome warning strip? You just key in about:config in browser's address bar, and change certain item value to true. It's illustrated below.

The item is plugins.hide_infobar_for_missing_plugin.

Tuesday, July 17, 2012

Maven, first web project 1

1. Run maven command below under a folder where you want to create you new project. Use your concrete groupId and artifactId to replace the blue part.

mvn archetype:generate -DgroupId=<groupId> -DartifactId=<artifactId> -DarchetypeArtifactId=maven-archetype-webapp -DinteractiveMode=false



2.Now need to create several folders manually to let its struture conform to the maven standard directory layout. After that, you can find its folder struture as such:

websample
    +-src
        +-main
            +-java (Added manually)
            +-resources
            +-webapp
                +-WEB-INF
                    +-web.xml
                +-index.jsp
        +-test (Added manually)
            +-java
            +-resources
    +-pom.xml

3.Now this is web project can be imported into eclipse. Before you do this step you need to make sure there is a maven plugin installed in your eclipse. If there no, recommend m2e.


Now you can add your codes to this web project. In next segment I plan on practising how to integrate it with tomcat and making them become a complete development environment.