Sign in or 
| Version | User | Scope of changes |
|---|---|---|
| Dec 24 2006, 8:52 PM EST (current) | sim_j | 2 words added, 2 words deleted |
| Dec 24 2006, 12:14 PM EST | sim_j | 2 words added, 2 words deleted |
Changes
Key: Additions Deletions
（このページの内容は、Eclipse(ClickIDE)環境の構築の続きです）
ここでは、Eclipse + ClickIDEを使った開発の始め方を説明します。Clickアプリケーションの作成方法ではなく、ClickIDEとWTPの使い方の最初の一歩を説明します。
Eclipseを使った開発方法は人それぞれで、色々な方法がありますが、ここではJavaパースペクティブを使用して開発を行います。（Java EEパースぺクティブではなく）
まず現在のパースペクティブがJavaになっている事を確認します。なっていない場合はメニューのウィンドウ⇒パースペクティブを開く⇒Javaを選択してパースペクティブをJavaに変更します。
その状態でウィンドウ⇒パースペクティブのカスタマイズを選択します。
まず「ショートカット」タブで、サブメニューに「新規」を選び、ショートカット・カテゴリーから「Click」にチェックを入れます。
「コマンド」タブに切り替え、使用可能なコマンド・グループから「Click Action Set」にチェックを入れ、OKを押します。
ここではClickIDEを使った、基本的な開発の方法について説明します。
何も題材が無いと始められないので、ここでは単純に現在時刻を画面に表示するだけの「hello」プロジェクトを作成する事にします。(このhelloのソースコードの内容は、clickホームページのIntroductionの内容を、ほぼそのまま使っています）
まず、Eclipseを起動して、新規にプロジェクトを作成します。プロジェクトのタイプは「動的WEBプロジェクト」で作成します。
メニューのファイル⇒新規⇒プロジェクトで、「動的WEBプロジェクト」を選択し、次へを押します。
プロジェクト名はhelloにし、ターゲットランタイムには事前に登録したTomcat 5.5を指定し、次へをクリックします。
プロジェクトのファセットとしてClickにチェックを入れ、次へを押します。
最後はディレクトリの指定です。今回はデフォルトのままで終了を押します。
初回のみ、インターネット経由でXMLスキーマファイルのダウンロードが行われますので、「同意します」をクックします。2回目以降はキャッシュ済みのものが使用されるので、ダウンロードは行われません。」をクリックします。2回目以降はキャッシュ済みのものが使用されるので、ダウンロードは行われません。
ダウンロードが完了すると、J2EEパースペクティブへの変更ダイアログが出ますが、今回はJavaパースペクティブで実行するので、「いいえ」をクリックします。
このようにhelloプロジェクトが作成されます。Tomcatやclickライブラリ(jar)はすでに登録され、Clickの動作に必要なclick.xmlも用意されています。またweb.xmlファイルにも最低限必要な設定が作成されています。このようにhelloプロジェクトが作成されます。TomcatやClickフレームワーク(click*jar)はすでに登録され、Clickの動作に必要なclick.xmlも用意されています。またweb.xmlファイルにも最低限必要な設定が作成されています。
Clickでは、HTMLで書かれたテンプレートとJavaクラス（ページクラス）を対で作成します。HTMLでビューを作成し、それに対応したページクラスでロジックを定義します。HTML内にはVelocityを使う事で動的に変化する内容を組みこむ事が可能です。
ＨＴＭＬテンプレートとページクラスの組み合わせは、以下のどちらかの方法で設定します。
1.だとページ毎にclick.xmlに設定を追加しなければいけません。ClickIDEのおかげで非常に簡単に設定が追加できますが、ページが多くなってくると管理も大変になりますので2.の自動マッピングを使う方がお勧めです。
自動マッピングは、ページクラスを置くパッケージ名を設定する事で、HTMLへのパス(HTMLのファイル名)から対応するページクラスが自動的に決定される仕組みの事です。
たとえばページクラスを作成するパッケージをtest.pageとして、自動マッピングをONにした場合、以下のように対応するクラスが自動的に決定します。
（例）
自動マッピングと、click.xmlでの手動定義は組み合わせて使えますので、基本は自動マッピング機能を使用し、自動マッピングのルールで対応できない場合のみclick.xmlファイルに定義を追加するようにすると良いでしょう。
今回は、アプリケーション用のパッケージはhelloとし、hello.page以下にページクラスを作成するようにします。
click.xmlで自動マッピングを有効にします。パッケージエクスプローラー上のclick.xmlをダブルクリックするとClickIDEのClick設定エディタによってclick.xmlが開かれます。
全体タブで、文字コードがUTF-8になっている事を確認してください。また「ログの出力先」をconsoleに設定します。動作モードは開発中はdevelopmentかdebugで良いでしょう。モードの違いはここ（原文ではここ）のモードの欄に解説されています。
次にページタブで自動マッピングを設定します。click-appと書かれているところで右クリックをし、pages要素を作成します。pages要素の詳細にパッケージという欄があるのでそこにhello.pageと入力し、自動マッピングをtrueに設定します。
CTRL-sでセーブした後にclick.xmlを閉じます。
設定ダイアログでファイル名にdisplay-time.htmと入力します。するとClickIDEによって自動的に適切なJavaクラス名が設定されます。ソースフォルダなどは自動的に適切な値が設定されています。また一番下にある「click.xmlにマッピングを追加する」からチェックを外します。今回は自動マッピング機能が有効なのでclick.xmlにマッピングを追加する必要が無いためです。また、今回のweb.xmlの設定が*.htmをClickサーブレットにマッピングするようになっているのでHTMLファイルの拡張子を*.htmにします。
終了を押すと、HTMLテンプレートファイルとそのペアになるJavaソースファイルが作成されます。まずJavaソースコードにロジックを実装します。とはいっても単純にjava.util.Dateオブジェクトをpublicフィールドに定義してnewするだけです。今回はtimeという変数を定義します。
次に、HTMLファイルを編集します。display-time.htmファイルを開くとClickIDE内臓のclickテンプレートエディタでHTMLファイルが開かれています。HTMLのヘッダ部分には$importと書かれていますが、これは必要なCSSの参照等が入るのでそのままで問題ありません。
<body>タグ内にコンテンツを書きますが、今回は時刻を表示するだけですので
今の時刻は$timeです。
と書くだけです。$timeの部分がVelocityテンプレートで、対になっているJavaページクラスのtimeというプロパティを参照しています（今回はpublicフィールドのtimeを参照）。HTML内参照されたオブジェクトは単純にtoStringメソッドが呼び出され、その結果で$timeの部分を置き換えます。
HTMLを編集する際には、$と書いてからSHIFT+スペースを押すとClickIDEによって変数名が自動的に補完されます。これによってタイプミスによるエラーを防ぐ事ができ、開発効率が向上します。
HTMLとJavaソースコードが書けたらセーブします。これでコーディングは完了です。
作成したhelloアプリケーションをTomcat上で実行します。まずWTPのサーバービューを表示します。メニューのウィンドウ⇒ビューの表示でダイアログを表示し、その中のサーバー⇒サーバーを選択します。
下部に空のサーバービューが表示されますので、右クリック⇒新規⇒サーバーを選択します。
新規サーバーダイアログの下部にあるサーバー・ランタイムのところが登録済みのApache Tomcat 5.5になっている事を確認して「次へ」を押します。
次にプロジェクトをTomcatに登録します。helloプロジェクトを選択して、「追加」を押し、「終了」を押します。
正しく登録されると以下のようになります。
まず概説タブでは「自動公開」の部分を確認します。以下のようにデフォルトを上書きして1秒で公開されるようになっているはずです。
次にモジュールタブに切り替えると、登録したプロジェクト（モジュール）がどのコンテキストパスで公開されるかと自動再ロードが有効かどうかが確認できます。特に自動再ロードはTomcatを再起動せずにclassファイルを読み直せるようにする設定ですので、開発中は使用可能になっている方が便利です。内容が確認できたら閉じます。
（Eclipse内でブラウザを起動するボタン)
にアクセスします。現在の時刻が表示されたら正しく動作しています。ブラウザをリロードすると時刻が更新される事を確認してください。
設定で確認したように、WTPでTomcatを起動した場合は基本的にTomcatを停止したり、リブートする必要はありません。Tomcatを起動したままでも*.htmファイルを修正すれば、ほぼ即時に反映されますし、Javaのソースコードを修正した場合でもビルド（ソースコードのセーブと同時に行われます）された数秒後にはTomcat側に反映されます。コンソールに以下のメッセージが出た場合は、新しいJavaクラスが反映されています。
情報: このコンテキストの再ロードを開始しました
[Click] [info ] initialized in development mode
ただし、開発の初期でまだほとんど出来ていない場合や、開発が進んだ時でも全てのファイルをリビルドする際などは一時的にTomcatを停止した方が良いでしょう。
以上でEclipse+ClickIDEで開発を始められると思います、リンク先にあるクイックスタートやベスト・プラクティスなどを読んでClickの学習を進めてください。
しかし<body>タグ内でないと、ほとんどの要素が補完できません。これはHTMLエディタとして正しいのですが、Clickの場合、ボーダーテンプレートを使用するようになると、継承した先では<html>や<body>を書かずにコアとなるコンテンツのみ書くようになるので、そのままでは補完機能が使えません。
私の場合は*.htmファイルで（テンプレートを使っている場合は）、
## <body>
ここに内容
##</body>
と最初と最後にVelocityのコメントでダミーの<body>タグを書く事で補完機能を有効にしています。
ここでは、Eclipse + ClickIDEを使った開発の始め方を説明します。Clickアプリケーションの作成方法ではなく、ClickIDEとWTPの使い方の最初の一歩を説明します。
Eclipseのパースペクティブ設定
Eclipseを使った開発方法は人それぞれで、色々な方法がありますが、ここではJavaパースペクティブを使用して開発を行います。（Java EEパースぺクティブではなく）まず現在のパースペクティブがJavaになっている事を確認します。なっていない場合はメニューのウィンドウ⇒パースペクティブを開く⇒Javaを選択してパースペクティブをJavaに変更します。
その状態でウィンドウ⇒パースペクティブのカスタマイズを選択します。
まず「ショートカット」タブで、サブメニューに「新規」を選び、ショートカット・カテゴリーから「Click」にチェックを入れます。
「コマンド」タブに切り替え、使用可能なコマンド・グループから「Click Action Set」にチェックを入れ、OKを押します。
Eclipse+ClickIDEによる開発
ここではClickIDEを使った、基本的な開発の方法について説明します。
何も題材が無いと始められないので、ここでは単純に現在時刻を画面に表示するだけの「hello」プロジェクトを作成する事にします。(このhelloのソースコードの内容は、clickホームページのIntroductionの内容を、ほぼそのまま使っています）
プロジェクトの作成
まず、Eclipseを起動して、新規にプロジェクトを作成します。プロジェクトのタイプは「動的WEBプロジェクト」で作成します。
メニューのファイル⇒新規⇒プロジェクトで、「動的WEBプロジェクト」を選択し、次へを押します。
プロジェクト名はhelloにし、ターゲットランタイムには事前に登録したTomcat 5.5を指定し、次へをクリックします。
プロジェクトのファセットとしてClickにチェックを入れ、次へを押します。
最後はディレクトリの指定です。今回はデフォルトのままで終了を押します。
初回のみ、インターネット経由でXMLスキーマファイルのダウンロードが行われますので、「同意します」をクックします。2回目以降はキャッシュ済みのものが使用されるので、ダウンロードは行われません。」をクリックします。2回目以降はキャッシュ済みのものが使用されるので、ダウンロードは行われません。
ダウンロードが完了すると、J2EEパースペクティブへの変更ダイアログが出ますが、今回はJavaパースペクティブで実行するので、「いいえ」をクリックします。
このようにhelloプロジェクトが作成されます。Tomcatやclickライブラリ(jar)はすでに登録され、Clickの動作に必要なclick.xmlも用意されています。またweb.xmlファイルにも最低限必要な設定が作成されています。このようにhelloプロジェクトが作成されます。TomcatやClickフレームワーク(click*jar)はすでに登録され、Clickの動作に必要なclick.xmlも用意されています。またweb.xmlファイルにも最低限必要な設定が作成されています。
HTMLテンプレートとページクラスの作成
Clickでは、HTMLで書かれたテンプレートとJavaクラス（ページクラス）を対で作成します。HTMLでビューを作成し、それに対応したページクラスでロジックを定義します。HTML内にはVelocityを使う事で動的に変化する内容を組みこむ事が可能です。
ＨＴＭＬテンプレートとページクラスの組み合わせは、以下のどちらかの方法で設定します。
- click.xmlファイルに<page>タグで組み合わせを定義する
- 自動マッピング(auto mapping)機能を使用する
1.だとページ毎にclick.xmlに設定を追加しなければいけません。ClickIDEのおかげで非常に簡単に設定が追加できますが、ページが多くなってくると管理も大変になりますので2.の自動マッピングを使う方がお勧めです。
自動マッピングは、ページクラスを置くパッケージ名を設定する事で、HTMLへのパス(HTMLのファイル名)から対応するページクラスが自動的に決定される仕組みの事です。
たとえばページクラスを作成するパッケージをtest.pageとして、自動マッピングをONにした場合、以下のように対応するクラスが自動的に決定します。
（例）
| URL | クラス |
| /hello.htm | test.page.Hello |
| /list-data.htm | test.page.ListData |
| /admin/control_page.htm | test.page.admin.ControlPage |
自動マッピングと、click.xmlでの手動定義は組み合わせて使えますので、基本は自動マッピング機能を使用し、自動マッピングのルールで対応できない場合のみclick.xmlファイルに定義を追加するようにすると良いでしょう。
今回は、アプリケーション用のパッケージはhelloとし、hello.page以下にページクラスを作成するようにします。
click.xmlで自動マッピングを有効にします。パッケージエクスプローラー上のclick.xmlをダブルクリックするとClickIDEのClick設定エディタによってclick.xmlが開かれます。
全体タブで、文字コードがUTF-8になっている事を確認してください。また「ログの出力先」をconsoleに設定します。動作モードは開発中はdevelopmentかdebugで良いでしょう。モードの違いはここ（原文ではここ）のモードの欄に解説されています。
次にページタブで自動マッピングを設定します。click-appと書かれているところで右クリックをし、pages要素を作成します。pages要素の詳細にパッケージという欄があるのでそこにhello.pageと入力し、自動マッピングをtrueに設定します。
CTRL-sでセーブした後にclick.xmlを閉じます。
HTMLファイルと、Javaページクラスのペアを作成する
時刻を表示するdisplay-time.htmと対応するページクラスを作成します。プロジェクトを右クリックして新規⇒Clickページを選択します。設定ダイアログでファイル名にdisplay-time.htmと入力します。するとClickIDEによって自動的に適切なJavaクラス名が設定されます。ソースフォルダなどは自動的に適切な値が設定されています。また一番下にある「click.xmlにマッピングを追加する」からチェックを外します。今回は自動マッピング機能が有効なのでclick.xmlにマッピングを追加する必要が無いためです。また、今回のweb.xmlの設定が*.htmをClickサーブレットにマッピングするようになっているのでHTMLファイルの拡張子を*.htmにします。
終了を押すと、HTMLテンプレートファイルとそのペアになるJavaソースファイルが作成されます。まずJavaソースコードにロジックを実装します。とはいっても単純にjava.util.Dateオブジェクトをpublicフィールドに定義してnewするだけです。今回はtimeという変数を定義します。
次に、HTMLファイルを編集します。display-time.htmファイルを開くとClickIDE内臓のclickテンプレートエディタでHTMLファイルが開かれています。HTMLのヘッダ部分には$importと書かれていますが、これは必要なCSSの参照等が入るのでそのままで問題ありません。
<body>タグ内にコンテンツを書きますが、今回は時刻を表示するだけですので
今の時刻は$timeです。
と書くだけです。$timeの部分がVelocityテンプレートで、対になっているJavaページクラスのtimeというプロパティを参照しています（今回はpublicフィールドのtimeを参照）。HTML内参照されたオブジェクトは単純にtoStringメソッドが呼び出され、その結果で$timeの部分を置き換えます。
HTMLを編集する際には、$と書いてからSHIFT+スペースを押すとClickIDEによって変数名が自動的に補完されます。これによってタイプミスによるエラーを防ぐ事ができ、開発効率が向上します。
HTMLとJavaソースコードが書けたらセーブします。これでコーディングは完了です。
Tomcatへプロジェクトを登録する
作成したhelloアプリケーションをTomcat上で実行します。まずWTPのサーバービューを表示します。メニューのウィンドウ⇒ビューの表示でダイアログを表示し、その中のサーバー⇒サーバーを選択します。
下部に空のサーバービューが表示されますので、右クリック⇒新規⇒サーバーを選択します。
新規サーバーダイアログの下部にあるサーバー・ランタイムのところが登録済みのApache Tomcat 5.5になっている事を確認して「次へ」を押します。
次にプロジェクトをTomcatに登録します。helloプロジェクトを選択して、「追加」を押し、「終了」を押します。
正しく登録されると以下のようになります。
Tomcatの設定を確認する
サーバービューのTomcat v5.5 サーバーをダブルクリックするとWTP上のTomcat 5.5の設定が表示されます。基本的にデフォルトのままで何も変更する必要は無いのですが、内容を確認しておきます。まず概説タブでは「自動公開」の部分を確認します。以下のようにデフォルトを上書きして1秒で公開されるようになっているはずです。
次にモジュールタブに切り替えると、登録したプロジェクト（モジュール）がどのコンテキストパスで公開されるかと自動再ロードが有効かどうかが確認できます。特に自動再ロードはTomcatを再起動せずにclassファイルを読み直せるようにする設定ですので、開発中は使用可能になっている方が便利です。内容が確認できたら閉じます。
Tomcatを起動し、アプリケーションの動作を確認する
Tomcatはサーバービューから右クリック⇒始動でサーバが起動します。サーバビューに「始動済み」と表示されたら、以下のボタンでブラウザを起動して(もしくは別のブラウザでもOKです）、（Eclipse内でブラウザを起動するボタン)
http://localhost:8080/hello/display-time.htm
にアクセスします。現在の時刻が表示されたら正しく動作しています。ブラウザをリロードすると時刻が更新される事を確認してください。
設定で確認したように、WTPでTomcatを起動した場合は基本的にTomcatを停止したり、リブートする必要はありません。Tomcatを起動したままでも*.htmファイルを修正すれば、ほぼ即時に反映されますし、Javaのソースコードを修正した場合でもビルド（ソースコードのセーブと同時に行われます）された数秒後にはTomcat側に反映されます。コンソールに以下のメッセージが出た場合は、新しいJavaクラスが反映されています。
情報: このコンテキストの再ロードを開始しました
[Click] [info ] initialized in development mode
ただし、開発の初期でまだほとんど出来ていない場合や、開発が進んだ時でも全てのファイルをリビルドする際などは一時的にTomcatを停止した方が良いでしょう。
以上でEclipse+ClickIDEで開発を始められると思います、リンク先にあるクイックスタートやベスト・プラクティスなどを読んでClickの学習を進めてください。
その他、補足情報
他のライブラリを追加するには
プロジェクト内で使用する他のライブラリなどをWTPの動的WEBプロジェクトに追加するには、パッケージエクスプローラーのWEB-INF/lib以下に追加したいライブラリ(jar)ファイルをエクスプローラーからドラッグ＆ドロップします。すると「Web App ライブラリー」に自動的に移動し、ビルドパスに登録され、かつデプロイ時に含まれるようになります。<body>タグが無い場合にHTMLの補完をするには
ClickIDEに付属しているClickテンプレートエディタは非常に高機能でVelocityの変数だけでなく、HTMLの要素もSHIFT+スペースで補完できます。しかし<body>タグ内でないと、ほとんどの要素が補完できません。これはHTMLエディタとして正しいのですが、Clickの場合、ボーダーテンプレートを使用するようになると、継承した先では<html>や<body>を書かずにコアとなるコンテンツのみ書くようになるので、そのままでは補完機能が使えません。
私の場合は*.htmファイルで（テンプレートを使っている場合は）、
## <body>
ここに内容
##</body>
と最初と最後にVelocityのコメントでダミーの<body>タグを書く事で補完機能を有効にしています。
