2008年2月15日金曜日

GWT-ExtのHelloWorldをやってみる / Eclipse 3.3 / MacOSX 10.5

追記(2008/09/29)
このページをみていただいたそうですが私よりわかりやすい文章の解説ページが作成されていました．
Ext.JS情報｜株式会社エイシーエル
http://www.acl-inc.co.jp/modx/gwt_ext.html


追記
最近このページへのアクセスがちょっと多いのでコメントしときますがEclipse+GWTの開発はこっちがおそらく正攻法です．


参考はこれ．
Tutorial:Introduction to GWT-Ext 2.0
http://gwt-ext.com/wiki/index.php/Tutorial:Introduction_to_GWT-Ext_2.0


0. 用意するもの
　参考にある用意するもののうちJava SDKはLeopard付属のモノ(JDK1.5)をつかう．

0.1 GWT
　ここのここからdownload (1.4.61).
　＃10.5なのでLeopard用（！）．
　どこかに展開しておく．

　開発用の道具等も含まれているのでそれなりの所に．
　この展開した場所をGWT_HOMEと呼ぶことにする．

0.2 Ext JS
　ここのここからdownload (2.0.1).
　どこかに展開しておく．

　参考にもあるように最終的に必要なのは以下だ．
　(-debug.jsはいらないように思う)
* /adapter
* /resources
* ext-all.js
* ext-all-debug.js
* ext-core.js
* ext-core-debug.js


0.3 GWT-Ext
　ここのここからdownload (2.0.1).

　こいつで必要なのは'gwtext.jar'のみ．
　この展開した場所をGWTExt_HOMEと呼ぶことにする．

1. プロジェクトの作成
　とりあえずJavaプロジェクト(名前は'GWTExt_HelloWorld'とした．）で．
　（あと作成時に'Project Layout'として'Create separate folders for sources and class files'を選んでます．

２．外部jarの設定
　必要なのjarとして以下のjarをプロジェクトのPropertiesでJava Build Path項のLibrariesタブにて設定する．
　＃あとでlib/gwtext.jarを説明のしやすさの都合で置くのでgwtext.jarについてはこちらでも良い．
GWT_HOME/gwt-dev-mac.jar
GWT_HOME/gwt-user.jar
GWTExt_HOME/gwtext.jar

追記：gwt-dev-mac.jarはいらないみたいです．すみません．
　　　(画像との整合性の都合で消さないですけど…）



３．説明の都合で行う作業
　プロジェクト内にlibフォルダを作成．
　libにgwtext.jar(GWTExt_HOME/gwtext.jar)をimportする．

　ここまでのプロジェクトはこんな感じ．


４．(GWTとしての)プロジェクトの作成
　外部ツールの設定を行う．
　このアイコンからメニューを出して'Open External Tool Dialog ...'を選ぶ．


　で，左のツリーの中からProgramというアイテムを選択しておいて左上'New'(下のアイコン)のボタンを押す．

　でもって各値を設定(Mainタブだけですw）．
Locatoin: ${GWT_HOME}/applicationCreator
Working Directory: ${workspace_loc:GWT_Ext_HelloWorld}
Argument: com.mycompany.mypackage.client.HelloWorld

　LocationはBrowse File System...でGWT_HOMEにあるapplicationCreatorを指定．
　('${GWT_HOME}は自分で設定したら使えるけど通常はないので直接選択すればよい．
　Working DirectoryはBrowse Workspace...でGWTExt_HelloWorldを指定．
　Argumentsは参考のままw．（clientの文字はないといけないみたい．）
　Nameはテキとー．

　でRun!

　プロジェクトルートでコンテキストメニュ(右クリック)を出してRefreshすると作成されたファイルが見える．
　こんな感じ．


５．Ext JSを配置する．
　src/com/mycompany/mypackage/publicの下に'js/ext'ディレクトリを作成
　0.2でも書いた以下のファイルをこのextディレクトリにimportする．
* /adapter
* /resources
* ext-all.js
* ext-core.js

　こんな感じになる．


６．HelloWorld-compileを編集
　javaコマンドのクラスパス(-cpの次の引数)に'GWTExt_HOME/gwtext.jar'を追加する.
　３．をやっている人は'./lib/gwtext.jar'となる．
変更前: .../gwt-dev-mac.jar" com.google.gwt.dev.GWTCompiler ...
変更後: .../gwt-dev-mac.jar:./lib/gwtext.jar" com.google.gwt.dev.GWTCompiler ...


７．HelloWorld-shellを編集
　javaコマンドのクラスパス(-cpの次の引数)に'GWTExt_HOME/gwtext.jar'を追加する.
　３．をやっている人は'./lib/gwtext.jar'となる．
変更前: .../gwt-dev-mac.jar" com.google.gwt.dev.GWTShell ...
変更後: .../gwt-dev-mac.jar:./lib/gwtext.jar" com.google.gwt.dev.GWTShell ...


８．src/com/mycompany/mypackage/HelloWorld.gwt.xmlを編集
　参考のとおり内容を以下に置き換える．
<module>
 <!-- Inherit the core Web Toolkit stuff.                  -->
 <inherits name='com.google.gwt.user.User' />
 <!-- Inherit the GWTExt Toolkit library configuration.   -->
 <inherits name='com.gwtext.GwtExt' />
 <!-- Specify the app entry point class.                   -->
 <entry-point class='com.mycompany.mypackage.client.HelloWorld' />
 <stylesheet src="js/ext/resources/css/ext-all.css" />
 <script src="js/ext/adapter/ext/ext-base.js" />
 <script src="js/ext/ext-all.js" />
</module>



９．src/com/mycompany/mypackage/public/HelloWorld.htmlを編集
　参考のとおり内容を以下に置き換える．
　＃開くときはそのままだとWeb Browserで開く（ことがある）．
　＃コンテキストメニュ（右クリック)でOpen With .../Text Editorとする．
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <meta http-equiv="Content-Language" content="en-us">
      <meta http-equiv="Content-Author" content="Sankar Gorthi">
      <title>Hello World</title>
   </head>
   <body>
      <iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>
      <!-- The GWT js file generated at run time -->
      <script type="text/javascript" src='com.mycompany.mypackage.HelloWorld.nocache.js'></script>
   </body>
</html>


１０．src/com/mycompany/mypackage/client/HelloWorld.javaを編集
　参考の通り'public void onModuleLoad()'メソッドの内容を以下に置き換える．
public void onModuleLoad() {
   Panel mainPanel = new Panel();
 
   // Setting the Panel's properties
   mainPanel.setTitle("Hello World!");
   mainPanel.setHeight(300);
   mainPanel.setWidth(500);
   RootPanel.get().add(mainPanel);
}

　Panelはcom.gwtext.client.widgets.Panelをimportする．

１１．起動
　HellowWorld-shellを実行．

　外部ツールの設定を行う．
　このアイコンからメニューを出して'Open External Tool Dialog ...'を選ぶ．


　で，左のツリーの中からProgramというアイテムを選択しておいて左上'New'(下のアイコン)のボタンを押す．

　でもって各値を設定(Mainタブだけですw）．
Locatoin: ${workspace_loc:/GWTExt_HelloWorld/HelloWorld-shell}
Working Directory: ${workspace_loc:GWTExt_HelloWorld}
Argument:

　LocationはBrowse Workspace ...でGWTExt_HelloWorld(プロジェクト)にあるHelloWorld-shellを指定．
　Working DirectoryはBrowse Workspace...でGWTExt_HelloWorldを指定．
　Argumentsは空．
　Nameはテキとー．

　でRun!

　'tomcat'というディレクトリができるこいつはGWTのサーバの環境用らしい．

１２．表示．
　起動した'Google Web Toolkit Development Shell / Port 8888'ウインドウとそのブラウザでの表示．



１３．コンパイル
　HellowWorld-compileを実行．
　外部で(GWTのサーバでなく)使うためのコードを用意するため(?)．

　外部ツールの設定を行う．
　このアイコンからメニューを出して'Open External Tool Dialog ...'を選ぶ．


　で，左のツリーの中からProgramというアイテムを選択しておいて左上'New'(下のアイコン)のボタンを押す．

　でもって各値を設定(Mainタブだけですw）．
Locatoin: ${workspace_loc:/GWTExt_HelloWorld/HelloWorld-compile}
Working Directory: ${workspace_loc:GWTExt_HelloWorld}
Argument:

　LocationはBrowse Workspace ...でGWTExt_HelloWorld(プロジェクト)にあるHelloWorld-compileを指定．
　Working DirectoryはBrowse Workspace...でGWTExt_HelloWorldを指定．
　Argumentsは空．
　Nameはテキとー．

　でRun!

　'www'というディレクトリにファイル群ができる．
　この中のHelloWorld.htmlファイルをFinder等で表示して直接クリックすればSafariがfile://...でアクセスして表示する．
投稿者
ラベル: , , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)