コンポーネント

1. プロジェクトを選択し、右クリックメニューから「New」＞「WOComponent」を選択します(図7.1.1[「WOComponent」を選択])。

   図: 「WOComponent」を選択

   

2. 「New WebObjects Component」ウィンドウが開きます(図7.1.2[「New WebObjects Component」ウィンドウ])。入力する必要のあるフィールドは、コンポーネントの名前のみです。デフォルトでは「MyComponent」になっています。また、ウィンドウ下にあるチェックボックスのうち「Create body tag」と「Create api file」のチェックを外していますが、これはチェックしたままでも構いません。「Finish」をクリックして次に進めます。

   図: 「New WebObjects Component」ウィンドウ

   

3. MyComponent.javaがソースフォルダに、MyComponent.woとオプションのファイル(*.woo, *.api)がプロジェクトのルートフォルダ(もしくは指定したフォルダ)に生成されます(図7.1.3[生成されたコンポーネント])。

   図: 生成されたコンポーネント

   

コンポーネントを開く

プロジェクトのMainコンポーネントを編集してみましょう。パッケージエクスプローラでMain.woを選択し、右クリックメニューから「WOLips Tools」＞「Open WO」を選択します(図7.2.1.1[「Open WO」を選択する])。コンポーネントはJavaファイル・HTMLテンプレートファイル・WODファイル・APIファイルの右クリックメニューからでも開くことができます。

図: 「Open WO」を選択する

コンポーネントを開くと、コンポーネントエディタが表示されます(図7.2.1.2[コンポーネントエディタ])。コンポーネントエディタは複数のビューから成り立っており、エディタの最下部には「Component、Preview、API」のタブが並んでいます。ComponentタブはHTMLテンプレートとWODファイルを分割して表示・編集します。PreviewタブはHTMLファイルのプレビューを表示します(※訳註:実装中？)。APIタブはコンポーネントのバインディングと検証の設定を編集します。

図: コンポーネントエディタ

コンポーネントの検証

Componentタブをクリックし、HTMLテンプレートに次のタグを記述してください。記述できたら「File」メニューから「Save」を選択してHTMLファイルを保存します。

<webobject name = "ApplicationName"></webobject>

コンポーネントを保存すると、WOLipsは自動的に変更を検証します。コンポーネントにエラーがあれば問題ビューに表示されます(図7.2.2.1[コンポーネントのエラー])。HTMLテンプレートに記述したエレメント(ApplicationName)がWODファイルで定義されていないというエラーが表示されるはずです。

図: コンポーネントのエラー

コードを補完する

再びコンポーネントエディタに戻り、ComponentタブをクリックしてWODファイルを修正します。ここでは新しいエレメントを一つ定義し、エレメントの種類を「WOString」、名前を「ApplicationName」と設定します(図7.2.3.1[WODファイルを編集する])。

図: WODファイルを編集する

図のテキストをそのまま入力しても構いませんが、そんな面倒くさいことはせずに、WODエディタの補完機能を利用しましょう。コンポーネントエディタには補完機能があり、Ctrl-スペースを押すことで様々なコードを補完することができます。例えばHTMLテンプレートの<WEBOBJECT>タグ上でCtrl-スペースを押せば、WODファイルの定義からエレメント名を選択できます。また、HTMLテンプレートで新しい<WEBOBJECT>タグを定義してから保存すると、WODファイルでCtrl-スペースを押したときに未定義の(WODファイルでまだ定義していない)エレメントが補完候補として表示されます。とにかくあちこちでCtrl-スペースを押して試してください。

それではまず、次のようにWODファイルを編集してみましょう。

1. 「ApplicationName」を入力します。
2. 「:」を入力します。
3. この次にエレメントの種類を記述しますが、「W」の一文字だけ入力してCtrl-スペースを入力してください(補完候補を検索するには最低でも一文字が必要になります)。
4. 補完候補のリストが表示されるので、その中から「WOString」を選択します。続けて文字を入力して補完候補を絞り込むこともできます。

エレメントを定義できたら、コンポーネントを保存します。再びコンポーネントが検証されますが、先程とは異なるエラーが表示されるはずです。先程のエラー原因だったエレメントは定義しましたが、今度はWOStringに必要な「value」バインディングをまだバインドしていません。次も補完しながら進めましょう。

1. カーソルをWODファイルの中括弧へ移動し、Ctrl-スペースを押します。エレメントのバインディングのリストが表示されます。このリストには、設定するエレメントのAPIファイルで定義されたフィールドやメソッドが含まれます。ここでは「value」を選択します。

2. 次は「value」バインディングにキーをバインドします(図7.2.3.2[キーをvalueにバインドする])。

   図: キーをvalueにバインドする

   
   1. 「=」を入力し、Ctrl-スペースを押します。今度は「value」バインディングにバインドできるキーのリストが表示されます。このリストには、コンポーネント(Main.java)で使用できるキーがすべて含まれています。
   2. リストから「application」を選択します。
   3. 「.」を入力し、Ctrl-スペースを押します。今度はApplicationクラスで使用できるキーのリストが表示されます。
   4. リストから「name」を選択し(候補が多いので、すべて入力したほうがいいでしょう)します。
   5. 「;」を入力します。
   6. 保存します。問題ビューを見て、エラーが表示されないか確認してください。これでエラーは表示されないはずです。

デフォルトのキーバインド

コード補完のデフォルトのキーバインドはCtrl-スペースになっています。もしSpotlightのショートカットキーを設定していたら、Eclipseでコード補完のキーバインドを変更してください。Eclipseのキーバインドを変更する方法は宿題としておきます:-)

例: メソッドをバインドする

1. Main.javaを開き、新しいメソッドを追加します。現在日時のNSTimestampオブジェクトを返すnow()メソッドを定義します(図7.2.4.1[新しいメソッドを定義する])。

   図: 新しいメソッドを定義する

   
2. Componentタブに戻り、HTMLテンプレートに次のタグを追加します。

   <webobject name = "Now"></webobject>
   

3. ApplicationNameと同様にエレメントを定義します(図7.2.4.2[Nowエレメントを定義する])。

   図: Nowエレメントを定義する

   
   1. Ctrl-スペースを押します。「Now」が補完されます。
   2. 「:」を入力します。
   3. 「W」を入力し、Ctrl-スペースを押します。WOStringを選択します。
   4. タブを入力し、Ctrl-スペースを押します。「value」を選択します。
   5. 「=」を入力し、Ctrl-スペースを押します。「now」を選択します。
   6. 「;」を入力し、改行します。
   7. Ctrl-スペースを押し、「dateformat」を選択します。
   8. 「= "%m/%d/%Y";」を入力し、改行します。
   9. 最後に「}」を入力します。
4. 以上で、Mainコンポーネントに二つのエレメントを定義できました。アプリケーションを起動してみて、現在日時が表示されるかどうか確かめてみましょう。