EclipseとMavenでGWTアプリケーションを作成する:02 プロジェクトを作成する
環境など
私は日本語化されたEclipseを使用しているので、英語版とはメニューや項目名が異なります。お使いの環境と異なる場合には、適宜読み替えてください。
この説明で使用しているソフトウェアのバージョンは次の通りです。
■ 新規プロジェクトを作成する ↑
1. Eclipseの 新規->プロジェクト をクリックします。
2. 「新規プロジェクト」ダイアログが表示されます。「Maven Project」を選択し、「次へ」をクリックします。
3. 「シンプルなプロジェクトの作成」チェックボックスがオフになっていることを確認してください。ワークスペース・ロケーション(プロジェクトを作る場所)を選択します。通常は「デフォルト・ワークスペース・ロケーションの使用」チェックボックスがオンになっている状態でよいです。「次へ」をクリックします。
4. アーキタイプを選択します。フィルターに「gwt」と入力して候補を絞り込み、アーキタイプの一覧からグループIdが「org.codehaus.mojo」、アーティファクトIdが「gwt-maven-plugin」の行を選択します。「次へ」をクリックします。
5. グループId、アーティファクトId、バージョン、パッケージを入力します。私は次のように入力しました。
- グループId:jp.ne.hatena.paz3
- アーティファクトId:GwtSample
- バージョン:0.0.1-SNAPSHOT(デフォルトのまま)
- パッケージ:jp.ne.hatena.paz3.GwtSample
■ GWTのバージョンを修正する ↑
デフォルトで使用されるGWTのバージョンは1.7.1と古いので、2.0.4に変更します。
1. Eclipseのプロジェクト・エクスプローラーからpom.xmlをダブルクリックします。pom.xmlファイルが表示されます。
2. プロパティー欄にある「gwt.version」をダブルクリックします。「プロパティーの編集」ダイアログが表示されますので、値を「2.0.4」に変更します。
「OK」をクリックします。pom.xmlを保存します。
■ GWTのJavaDocをダウンロードする ↑
JavaDocをダウンロードすると、Javaエディタ上でGWTのクラスなどにマウスを合わせたときに説明をホバー表示することができます。
もしホバー表示させたい場合には、次の手順でJavaDocをダウンロードします。なお、JavaDocのダウンロードは1度だけやれば大丈夫です。
1. プロジェクト・エクスプローラーからMaven Dependenciesを開きます。
2. 「gwt-user-2.0.4.jar」を右クリックし、表示されたメニューから Maven->JavaDocのダウンロード をクリックします。
3. 「gwt-servlet-2.0.4.jar」についても同様にダウンロードします。
以上で新規プロジェクトの作成は完了です。
■ ファイル階層 ↑
この時点でのファイル階層は次のようになっています。
GwtSample +-.settings | +-org.eclipse.jdt.core.prefs | `-org.maven.ide.eclipse.prefs +-src | +-main | | +-java | | | `-jp | | | `-ne | | | `-hatena | | | `-paz3 | | | `-GwtSample | | | +-client | | | | `-Application.java | | | `-Application.gwt.xml | | +-resources | | | `-jp | | | `-ne | | | `-hatena | | | `-paz3 | | | `-GwtSample | | | `-public | | | +-Application.css | | | `-Application.html | | `-webapp | | +-WEB-INF | | | `-web.xml | | `-index.html | `-test | `-java | `-jp | `-ne | `-hatena | `-paz3 | `-GwtSample | +-client | `-GwtTestSample.java +-target | `-(省略) +-war | `-WEB-INF | `-classes | `-jp | `-ne | `-hatena | `-paz3 | `-GwtSample | +-client | | `-GwtTestSample.class | `-Application.gwt.xml +-.classpass +-.project `-pom.xml
■ ファイルの中身 ↑
主要なファイルの中身は次のようになっています。
■ pom.xml ↑
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"> <!-- POM generated by gwt-maven-plugin archetype --> <modelVersion>4.0.0</modelVersion> <groupId>jp.ne.hatena.paz3</groupId> <artifactId>GwtSample</artifactId> <packaging>war</packaging> <version>0.0.1-SNAPSHOT</version> <properties> <!-- convenience to define GWT version in one place --> <gwt.version>2.0.4</gwt.version> <!-- tell the compiler we can use 1.5 --> <maven.compiler.source>1.5</maven.compiler.source> <maven.compiler.target>1.5</maven.compiler.target> </properties> <dependencies> <!-- GWT dependencies (from central repo) --> <dependency> <groupId>com.google.gwt</groupId> <artifactId>gwt-servlet</artifactId> <version>${gwt.version}</version> <scope>runtime</scope> </dependency> <dependency> <groupId>com.google.gwt</groupId> <artifactId>gwt-user</artifactId> <version>${gwt.version}</version> <scope>provided</scope> </dependency> <!-- test --> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>4.7</version> <scope>test</scope> </dependency> </dependencies> <build> <outputDirectory>war/WEB-INF/classes</outputDirectory> <plugins> <plugin> <groupId>org.codehaus.mojo</groupId> <artifactId>gwt-maven-plugin</artifactId> <version>1.2</version> <executions> <execution> <goals> <goal>compile</goal> <goal>generateAsync</goal> <goal>test</goal> </goals> </execution> </executions> <configuration> <runTarget>jp.ne.hatena.paz3.GwtSample.Application/Application.html</runTarget> </configuration> </plugin> <!-- If you want to use the target/web.xml file mergewebxml produces, tell the war plugin to use it. Also, exclude what you want from the final artifact here. <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-war-plugin</artifactId> <configuration> <webXml>target/web.xml</webXml> <warSourceExcludes>.gwt-tmp/**</warSourceExcludes> </configuration> </plugin> --> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactId> <version>2.0.2</version> <configuration> <source>${maven.compiler.source}</source> <target>${maven.compiler.target}</target> </configuration> </plugin> </plugins> </build> </project>
■ Application.java (src/main/java/jp/ne/hatena/paz3/GwtSample/client/Application.java) ↑
package jp.ne.hatena.paz3.GwtSample.client; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.user.client.ui.Label; import com.google.gwt.user.client.ui.RootPanel; /** * Entry point classes define <code>onModuleLoad()</code>. */ public class Application implements EntryPoint { /** * This is the entry point method. */ public void onModuleLoad() { final Label label = new Label ( "gwt-maven-plugin Archetype :: Project org.codehaus.mojo.gwt-maven-plugin" ); RootPanel.get().add( label ); } }
■ GwtTestSample.java (src/test/java/jp/ne/hatena/paz3/GwtSample/client/GwtTestSample.java) ↑
package jp.ne.hatena.paz3.GwtSample.client; import junit.framework.Assert; import com.google.gwt.junit.client.GWTTestCase; public class GwtTestSample extends GWTTestCase { public String getModuleName() { return "jp.ne.hatena.paz3.GwtSample.Application"; } public void testSomething() { // Not much to actually test in this sample app // Ideally you would test your Controller here (NOT YOUR UI) // (Make calls to RPC services, test client side model objects, test client side logic, etc) Assert.assertTrue( true ); } }
■ Application.gwt.xml (src/main/java/jp/ne/hatena/paz3/GwtSample/Application.gwt.xml) ↑
<!DOCTYPE module PUBLIC "//gwt-module/" "http://google-web-toolkit.googlecode.com/svn/tags/1.6.2/distro-source/core/src/gwt-module.dtd"> <module> <!-- Inherit the core Web Toolkit stuff. --> <inherits name='com.google.gwt.user.User'/> <!-- inherit css based theme --> <inherits name='com.google.gwt.user.theme.standard.Standard'/> <!-- Specify the app entry point class. --> <entry-point class='jp.ne.hatena.paz3.GwtSample.client.Application'/> <!-- Specify the application specific style sheet. --> <stylesheet src='Application.css' /> </module>
■ web.xml (src/main/webapp/WEB-INF/web.xml) ↑
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd" > <web-app> <display-name>GWT-Maven-Archetype</display-name> <welcome-file-list> <welcome-file>index.html</welcome-file> </welcome-file-list> </web-app>
■ index.html (src/main/webapp/index.html) ↑
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <!-- forward to the GWT Example Application --> <meta http-equiv="REFRESH" content="0;url=jp.ne.hatena.paz3.GwtSample.Application/Application.html"> </HEAD> </HTML>
■ Application.html (src/main/resources/jp/ne/hatena/paz3/GwtSample/public/Application.html) ↑
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <!-- The HTML 4.01 Transitional DOCTYPE declaration--> <!-- above set at the top of the file will set --> <!-- the browser's rendering engine into --> <!-- "Quirks Mode". Replacing this declaration --> <!-- with a "Standards Mode" doctype is supported, --> <!-- but may lead to some differences in layout. --> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- --> <!-- Any title is fine --> <!-- --> <title>Application</title> <!-- --> <!-- This script loads your compiled module. --> <!-- If you add any GWT meta tags, they must --> <!-- be added before this line. --> <!-- --> <script type="text/javascript" language="javascript" src="jp.ne.hatena.paz3.GwtSample.Application.nocache.js"></script> </head> <!-- --> <!-- The body can have arbitrary html, or --> <!-- you can leave the body empty if you want --> <!-- to create a completely dynamic UI. --> <!-- --> <body> <!-- OPTIONAL: include this if you want history support --> <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe> </body> </html>
■ Application.css (src/main/resources/jp/ne/hatena/paz3/GwtSample/public/Application.css) ↑
/** Add css rules here for your application. */ button { display: block; font-size: 16pt } .widePanel { width: 100% } img { margin-top: 20px; }