WebObjectsチュートリアル

それでは、WebObjectsの世界をざっと体験してみましょう。まずは新しいプロジェクトを準備します。

Xcodeを起動して、「ファイル」メニューから「新規プロジェクト」を選択します。プロジェクトの種類の中から「WebObjects」＞「WebObjects Application」を選択し、「次へ」をクリックします(図4.1.1[新規プロジェクト])。

図: 新規プロジェクト

次にプロジェクト名の入力を促されるので(図4.1.2[プロジェクト名の入力])、「Project Name」に「WOMiniTour」と入力します。「Location」はプロジェクトファイルが生成されるディレクトリです。変更するには右の「Set...」をクリックし、ディレクトリを選択してください。入力できたら次へ進みましょう。

図: プロジェクト名の入力

次からは「Choose Frameworks」のウィンドウになるまで進めてください(図4.1.3[フレームワークの選択])。ここで言うフレームワークは、ソースコードやリソースファイルを一つにまとめたMac OS Xのパッケージ(実態はディレクトリです)のことです。

図: フレームワークの選択

このミニツアーで使うフレームワークを追加します。「Add...」をクリックすると、フレームワークのリストが表示されます(図4.1.4[追加するフレームワークを選択])。この中から「JavaBusinessLogic.framework」を選択します。

図: 追加するフレームワークを選択

選択したフレームワークがリストに追加されたのを確認したら、次へ進みます(図4.1.5[フレームワークを追加])。

図: フレームワークを追加

次のウィンドウではモデルファイルを選択します(図4.1.6[モデルファイルを選択])。モデルファイルとはデータベースをオブジェクトにマッピングする設定を記述したファイルです。実は先程追加したフレームワークにモデルファイルが含まれているので、リストには二つのファイルが追加されています。

図: モデルファイルを選択

次に進むとプロジェクトの設定は終了です。プロジェクトウィンドウが表示され、プロジェクトに含まれるファイルのリストが並んでいるはずです(図4.1.7[プロジェクトウィンドウ])。

図: プロジェクトウィンドウ

この中には追加したはずのモデルファイルが含まれていませんが、JavaBusinessLogicフレームワークに入っています。「JavaBusinessLogic.framework」＞「Resources」の順にダブルクリックしてみましょう。外側に赤の、内側に黄の円がトレードマークのモデルファイルが入っています(図4.1.8[モデルファイル])。

図: モデルファイル

アプリケーションのビルド

もうコードを書き始められますが、その前にプロジェクトをビルドしてアプリケーションを実行してみましょう。プロジェクトウィンドウのツールバーにある「ビルドと実行」をクリックします(図4.1.1.1[ビルドと実行])。

図: ビルドと実行

ビルドが終わると実行ログに起動の様子が記録され、最後にブラウザが起動します。まだ何もHTMLを書いていないので、当然何も表示されません(図4.1.1.2[空のアプリケーション])。

図: 空のアプリケーション

起動したアプリケーションは、ツールバーにある「タスク」をクリックすると止められます(図4.1.1.3[タスク])。

図: タスク

Webコンポーネントの編集

それではいよいよプロジェクトを始めていきましょう。と、その前に「ビルドと実行」をクリックしておき、アプリケーションを起動させてブラウザを開いた状態にしておいてください。しばらくアプリケーションを起動したまま進めます。

Mainコンポーネント

WebObjectsでは、WebページをWebコンポーネント(以降コンポーネント)という単位で扱います。プロジェクトの開始時には、あらかじめMainコンポーネントが用意されています(節[Mainコンポーネント])。

図: Mainコンポーネント

コンポーネントは複数のファイルから構成されますが、最初に知るべきファイルはMain.woとMain.javaです。Main.woはHTMLファイルを含むパッケージ、Main.javaはJavaのソースコードファイルです。

Main.woをダブルクリックしてみましょう。WebObjects Builderが起動し、次のウィンドウが表示されます(図4.2.1.2[WebObjects Builder])。

図: WebObjects Builder

このうち上のウィンドウがHTMLを編集するウィンドウです。下のウィンドウはまだ操作しないので、後々説明します。では上のウィンドウに"Hello World!"と入力しましょう(図4.2.1.3[テキストを入力])。

図: テキストを入力

ツールバー左にある"Switch Mode"を変更すると、プレビューを表示したりHTMLを直接編集することができます(図4.2.1.4[その他のモード])。

図: その他のモード

入力できたら「ファイル」＞「保存」メニューからファイルを保存し、ブラウザをリロードしてみましょう(図4.2.1.5[表示の変更])。ブラウザには"Hello World!"と表示されます。このように、WebObjectsではプロジェクトをコンパイルし直さなくてもHTMLの変更が反映されます。

図: 表示の変更

動的に文字列を表示する

キー

今度はソースコードを書いて、動的に文字列を表示してみましょう。二種類のあいさつを返すメソッドを実装し、そのメソッドの戻り値を交互にブラウザで表示させます。まずはMain.woをダブルクリックしてWebObjects Builderで開き、ツールバーから「Interface」＞「Add Key...」を選択します(図4.2.2.1.1[キーの追加])。または左下のウィンドウで右クリックしてもメニューが表示されます。

図: キーの追加

すると次のようなシートダイアログが表示されます(図4.2.2.1.2[morningキーの追加])。Nameフィールドに"morning"と入力し、中央のチェックボックスのみにチェックしてから「Add」ボタンをクリックします。

図: morningキーの追加

同様にして、名前を"evening"に変えてキーを追加してください。これでウィンドウ左下のリストに"morning", "evening"の二つのキーが追加されます(図4.2.2.1.3[キーの追加後])。

図: キーの追加後

キーのリストが表示されない場合

Xcodeのプロジェクトを途中で閉じたり、WebObjects Builderのみ起動したりすると、キーのリストが表示されなくなることがあります。これはキーの情報をプロジェクトから得ているためで、そうなった場合はWebObjects Builderをいったん終了し、プロジェクトを開いてから*.woをWebObjects Builderで開くようにしてみてください。

ここまで実行したらMain.javaを確認してください。追加したキーと同名のメソッドが次のように追加されているはずです。

Main.java

public class Main extends WOComponent {

    public Main(WOContext context) {
        super(context);
    }

    public String morning()
    {
        return morning;
    }
  
    public String evening()
    {
        return evening;
    }
}

実は図4.2.2.1.1[キーの追加]のチェックボックスがソースコードを生成する設定になっています。各チェックボックスの意味は次の通りです。

An instance variable: キー名のインスタンス変数を定義する。
A method returning the value: "Type"で指定した型の値を返すメソッドを定義する。メソッド名はキー名と同じ。
Prepend "get" to method name: 上記のメソッド名の接頭辞に"get"をつける。
A Method setting the value: "Type"で指定した型の値を引数として受け取るメソッドを定義する。メソッド名は"set" +キー名になる。

morning/eveningキーを追加したときは中央のチェックボックスのみチェックしたので、文字列を返すメソッドが追加されました。定義していない変数が使われているのは、最上部のチェックボックスをチェックしていないためです(チェックしていればmorning/eveningがインスタンス変数として定義されます)。逆に最上部のみチェックすると、インスタンス変数だけでメソッドの定義はされません。インスタンス変数の定義だけでも、メソッドの定義だけでも、どちらもキーとして正しく扱われます。

ここまでで、キーはインスタンス変数でもありアクセサメソッドでもあることがわかりました。これをどう活用するのかというと、オブジェクトにキー(文字列)を指定してアクセスするのに使います。オブジェクトはキーと同名のインスタンス変数かメソッドを使って値を返します(図4.2.2.1.4[キーによるアクセス])。例えば、Mainコンポーネントなら"morning"キーを指定すればmorning()が呼ばれます。メソッドではなくインスタンス変数String morningが定義されていれば、その値を返します。

図: キーによるアクセス

この仕組みにより、実行時にキーを文字列で与えれば、オブジェクトの任意の情報にアクセスすることができるようになります。次はコンポーネントでキーをどのように使うのか見ていきましょう。

ダイナミックエレメント

先程キーを追加したMain.javaを、次のように編集してください。

Main.java

import com.webobjects.foundation.*;
import com.webobjects.appserver.*;
import com.webobjects.eocontrol.*;
import com.webobjects.eoaccess.*;

public class Main extends WOComponent {

    public Main(WOContext context) {
        super(context);
    }

    public String morning()
    {
        return "Good morning";
    }
  
    public String evening()
    {
        return "Good evening";
    }
}

ここで「ビルドして実行」し直します(アプリケーションが起動していれば自動的に再起動されます)。HTMLを何も変更していませんから、この状態でブラウザをリロードしても何も変わらないはずです。これから再びアプリケーションを起動したまま、Main.woを編集します。

Main.woを開いたら、先に入力してある"Hello World!"のテキストを削除して、ツールバー右にある「Dynamic」か同名のメニューから「WOString」を選択します(図4.2.2.2.1[WOStringの配置])。

図: WOStringの配置

すると紫と白のマス目を組み合わせたアイコンが入力されます(図4.2.2.2.2[WOStringの配置後])。

図: WOStringの配置後

このアイコンはダイナミックエレメントを表します。ダイナミックエレメントとは動的にHTMLを生成したり様々な処理を行う要素です。WOStringはその一つで、文字列を表示する基本的なダイナミックエレメントです。

他のWebプログラミング環境に慣れた人にとっては、キーを使った仕組みはまどろっこしく感じるかもしれません。Javaレベルではキーで間接的にインスタンス変数やメソッドにアクセスし、HTMLレベルでは動的な処理を行うのにキーを指定するという、二重に間接的な仕組みです。それでもいろいろと試しているうちに、きっとキーの利点が見えてきます。

それでは左下にあるキーのリストから、morningキーをアイコンの中心にドラッグしてください(図4.2.2.2.3[morningキーのバインド])。これでアイコンの中心がmorningキーに変わります(図4.2.2.2.4[morningキーのバインド後])。

図: morningキーのバインド

図: morningキーのバインド後

このようにキーをダイナミックエレメントに設定することをバインディングと呼びます。また、バインディングはツールバーにあるインスペクタでもできます。

ブラウザをリロードしてみましょう。"Good morning"と表示されるはずです(図4.2.2.2.5[Good morning])。もし何も表示されなければバインディングを見直してください。

図: Good morning

WOStringにはmorningキーをバインドしました。Mainコンポーネントにはmorning()メソッドが定義されています。WOStringは文字列を表示するダイナミックエレメントですから、morning()メソッドの戻り値を表示したことになります。

次は同様にしてWOStringにeveningキーをバインドしてみましょう。WOStringにmorningキーがバインドされた状態のまま、eveningキーをWOStringにドラッグします(図4.2.2.2.6[eveningキーのバインド後])。

図: eveningキーのバインド後

再びブラウザをリロードしてみましょう。今度も再コンパイルすることなく、evening()メソッドの戻り値が表示されます(図4.2.2.2.7[Good evening])。

図: Good evening

ダイナミックエレメントとキーを設定しただけで表示を変更できることに注目してください。*.woを編集するだけなら、再コンパイルしなくてもすぐに変更が反映されます。キーを使うことでHTMLファイルとJavaソースコードを分離できるようになり、コンポーネントを柔軟に扱えるようになります。

データベースの操作

コンポーネントに慣れたところで、データベースを操作してみましょう。WebObjectsはEnterprise Objects Framework (EOF)と呼ばれる非常に強力なデータベースフレームワークを含んでいます。EOFはリレーショナルデータベースの操作をオブジェクトで行うことができる、いわゆるObject-Relational (O/R)マッパーです。最近ではオープンソースの高機能なO/Rマッパーも珍しくありませんが、EOFはその柔軟性や抽象性において特筆すべきフレームワークです。

データベースとオブジェクトのマッピング

WebObjectsでは、リレーショナルデータベースのテーブルをエンティティに、カラムを属性に、リレーションシップをリレーションシップにそれぞれマッピングします。これらの情報を基にして、レコードをエンタープライズオブジェクトと呼ばれるオブジェクトにマッピングします(デフォルトではEOGenericRecordクラスのインスタンスです)。

マッピングの設定は、データベース接続の設定と共にモデルファイルに保存されます。プロジェクトにモデルファイルを追加していなければ、データベースにはアクセスできません。このチュートリアルで使うモデルファイルは、プロジェクト作成時に追加したJavaBusinessLogic.frameworkに含まれています。プロジェクトのファイルリストから「JavaBusinessLogic.framework」＞「Resources」の順にダブルクリックし、モデルファイルをFinderに表示してください。そこからMovie.eomodeldをダブルクリックすると、Xcodeでモデルブラウザが開きます(図4.3.1.1[モデルブラウザ])。

図: モデルブラウザ

プロパティは属性やリレーションシップをまとめた項目です。他にもいくつかプロパティの種類はありますが、ミニツアーでは扱いません。

次にエンティティリスト下にある三角のボタンから「モデル情報」を選択するか(図4.3.1.2[モデル情報を選択])、メニューから「設計」＞「EOモデル」＞「接続辞書の編集」を選択してください。エンティティリストにデータベース接続情報が表示されます(図4.3.1.3[接続辞書])。URLを見るとOpenBaseを使っていることがわかります。再びエンティティリストを表示するには、三角のボタンから「フラットリスト」を選択します。

図: モデル情報を選択

図: 接続辞書

URLの変更 (OpenBase)

OpenBaseの最新版では、WOMoviesデータベースの名前がOBMoviesに変更されています。OpenBaseの最新版をインストールした場合はURLの最後をOBMoviesに変更してください。

データベースを検索する

先にデータベースを検索するメソッドを実装し、後からHTMLを変更することにします。Main.javaを次のように編集してください。編集したらビルドして、コンパイルエラーがないか確認しましょう。

fetchMovies()

public NSArray fetchMovies()
{
    EOQualifier qual =
       EOQualifier.qualifierWithQualifierFormat("title like 'The*'", null);
    EOFetchSpecification fs =
       new EOFetchSpecification("Movie", qual, null);
    fs.setFetchLimit(10);
    return session().
               defaultEditingContext().
               objectsWithFetchSpecification(fs);
}

このメソッドは、Movieエンティティ(テーブル)からtitle属性値(カラム)がTheで始まるオブジェクト(レコード)を10個取得します。通常データベースを検索するには、次の4つのオブジェクトを組み合わせて使います(この段階で検索の詳細な手順を理解する必要はありません)。

EOQualifier: レコードの値に対する検索条件を指定します。SQLのWHERE句に相当します。
EOSortOrdering: ソートの順序を指定します(上記のメソッドでは使っていません)。SQLのORDER BY句に相当します。
EOFetchSpecification: 総合的な検索条件を指定するほか、EOQualifierとEOSortOrderingを含めた検索に必要なすべての情報を管理します。
EOEditingContext: すべてのデータベース操作の窓口となるオブジェクトです。検索にはobjectsWithFetchSpecification()を実行します。各セッションに一つずつ用意されており、session().defaultEditingContext()で取得できます。

検索の結果はエンタープライズオブジェクトの配列で返ってきますが、メソッドの戻り値の型にNSArrayという見慣れないクラスが指定されていることに気づくでしょう。WebObjectsはある理由があって自前のコレクションクラスを使っており、NSArrayは標準ライブラリのArrayListに相当する配列クラスです。

検索結果を表示する

検索処理を実装できたら、次は検索結果をWebページで表示しましょう。今度は繰り返しのエレメントを使って検索結果を一つずつ表示します。

まずはMain.woを開き、先程配置したエレメントを消してください。次にツールバーの「Dynamic」からWORepetitionを選択、配置します(図4.3.3.1[WORepetitionの配置]、図4.3.3.2[WORepetition])。

図: WORepetitionの配置

図: WORepetition

WORepetitionは、囲んだ内容を繰り返し表示するエレメントです。WORepetitionにはキーをバインドするスペースが二箇所あり、左のスペースに繰り返す配列のキーを、右のスペースに繰り返すたびに次の要素を代入するインスタンス変数のキーをバインドします。WORepetitionの他にも表示を制御する様々なエレメントが用意されており、複雑な表示でもエレメントを組み合わせるだけで大抵のことはできてしまいます。

それではWORepetitionを設定しててみましょう。左下のウィンドウにfetchMoviesキーが追加されているはずです。このキーをWORepetitionの左のスペースにバインドします(図4.3.3.3[WORepetitionのlist属性にバインド])。

図: WORepetitionのlist属性にバインド

次に右のスペースにバインドするためのキーを追加します。キー名をmovieと入力し、「Type」のプルダウンメニューからEOEnterpriseObjectを選択します。チェックボックスは上のみチェックします(図4.3.3.4[movieキーの追加])。

図: movieキーの追加

moiveキーをWORepetitionの右のスペースにバインドします(図4.3.3.5[WORepetitionのitem属性にバインド])。

図: WORepetitionのitem属性にバインド

これでWORepetitionで囲まれた内容を繰り返す準備ができました。続けてWORepetition内にWOStringを配置し、このエレメントにもmovieキーをバインドします(図4.3.3.6[WORepetition内にWOStringを配置])。

図: WORepetition内にWOStringを配置

Main.woを保存し、プロジェクトをビルドして実行しましょう。アプリケーションがすでに起動しているなら、ブラウザをリロードすれば変更が反映されます。

さて、ブラウザにはデータベースからフェッチしたデータが表示されていると思いますが、オブジェクトの内容がすべて表示されるためにかなり見づらいはずです。そこで、映画のタイトルだけを表示するように変更しましょう。movieキーをバインドしたWOStringエレメントを選択し、ツールバーの「Inspector」をクリックします(図4.3.3.7[Inspector])。

図: Inspector

"WOString Binding Inspector"というインスペクタパネルが開きます(図4.3.3.8[エレメントをインスペクトする])。この中のvalue属性に先程バインドしたmovieキーが指定されています。これをmovie.titleに変更し、コンポーネントを保存してからブラウザをリロードしてください。今度は映画のタイトルがリスト表示されるはずです(図4.3.3.9[movie.titleのリスト])。

図: エレメントをインスペクトする

図: movie.titleのリスト

Movieエンティティにはtitle属性のほかにもプロパティが定義されています。モデルファイルを見ながら他のプロパティのキーを指定したり、WOStringにバインドするキーをmovie以外のキーにしたりしていろいろと試してみてください。

WebObjectsミニツアー

プロジェクトの開始