スタジオを使用した簡単なアプリケーションの構築
この章では、演習形式でスタジオのいくつかの基本的な機能について説明します。このチュートリアルでは、名前と電話番号を含む電話帳のデータベース・アプリケーションの作成方法を説明します。
電話帳のアプリケーションは以下で構成されます。
-
名前と電話番号を保存できるデータベース
-
電話帳内で新しいエントリの追加、エントリの検索、およびエントリの編集を実行できる、Web ページ (HTML フォーム) のインタラクティブなユーザ・インタフェース
このチュートリアルでは、以下のような、スタジオの使用方法を紹介します。
-
Caché プロジェクトを作成し、アプリケーションのソース・コードを管理する方法
-
永続データベース・クラスを使用して、アプリケーションのデータベースを定義する方法
-
CSP (Caché Server Page) を使用して、アプリケーションの Web ベース (HTML) のユーザ・インタフェースを作成する方法
-
InterSystems Zen を使用して、アプリケーションの Web ベース (HTML) のユーザ・インタフェースを作成する方法
プロジェクトの作成
まず、Phone Book という新規のプロジェクトを作成して、以下の手順でアプリケーションのソース・ファイルを管理します。
-
スタジオの起動 : Caché キューブを右クリックして [スタジオ] を選択します。
スタジオは、最後に使用されていたネームスペースを使用して、ローカルの Caché サーバに接続されます (または、初めてスタジオを接続する場合はネームスペース・ダイアログが表示されます)。
スタジオが目的のネームスペースに接続されていない場合は、[ファイル]→[ネームスペース変更] を選択して、目的のネームスペースに接続します。
既定では、スタジオに [ワークスペース] ウィンドウが表示され、Default_system という新規プロジェクトが作成されます。スタジオの [ワークスペース] ウィンドウには、現在のプロジェクト名、サーバ接続、およびネームスペース名が表示されます。既定では・[ワークスペース]・ウィンドウが表示されるはずですが、表示されない場合は、[ビュー]→[ワークスペース] を選択するか、Alt-3 を押すと表示されます。
-
新規のプロジェクトを保存するには、[ファイル]→[プロジェクトの別名保存] を選択し、Phone Book と入力します。
[ファイル]→[プロジェクトを保存] を選択すると、いつでもこのプロジェクトを Caché サーバに保存できます。
データベースの作成
Phone Book アプリケーションは、一連の永続オブジェクトを使用して保存されている人名と電話番号のデータベースです。これらのオブジェクトは、Person という永続クラスによって定義されます。このクラスは、PhoneBook というパッケージ内に配置して管理します。
永続クラス Person には、Name と PhoneNumber という 2 つのプロパティ (またはフィールド) が含まれます。
新規クラスの定義
新規の Person クラスを定義するには、スタジオの新規クラス・ウィザードを使用して、以下の手順を実行します。
-
[ファイル]→[新規作成]→[一般] タブを選択し、新規クラス・ウィザードを起動します。
-
[Caché クラス定義] をダブルクリックします。
-
新規クラス・ウィザードの最初のページで、パッケージ名 PhoneBook とクラス名 Person を入力します。[次へ] を選択します。
-
利用できるクラス・タイプのリストから、[永続] を選択します。[完了] を選択します。
新規クラスの定義が含まれたクラス・エディタ・ウィンドウが以下のように表示されます。
Class PhoneBook.Person Extends %Persistent
{
}
プロパティの追加
新規プロパティ・ウィザードを使用して、Person クラスの定義に Name プロパティと PhoneNumber プロパティを追加します。以下の手順を実行します。
-
[クラス]→[追加]→[プロパティ] を選択して新規プロパティ・ウィザードを起動します。
-
新規プロパティ名 Name を入力して、[完了] を選択します。
クラス定義に、以下のようなプロパティ定義が追加されます。
Class PhoneBook.Person Extends %Persistent { Property Name As %String; }
-
[クラス]→[追加]→[プロパティ] を選択します。PhoneNumber を入力します。[完了] を選択します。
Class PhoneBook.Person Extends %Persistent { Property Name As %String; Property PhoneNumber As %String; }
あるいは、クラス・エディタ・ウィンドウ上で Name プロパティを直接コピーし、貼り付け、変更することで、この PhoneNumber プロパティを追加することもできます。コードを読みやすくするために項目は字下げされます。各項目の左にはプラス/マイナスの拡張ボックスがあり、これを使用して、コードの現在表示しない部分を非表示にすることができます。
クラスの保存とコンパイル
このクラス定義はデータベースに保存した後、[ビルド]→[コンパイル] を選択するか、[コンパイル] アイコン を選択して、実行可能コードにコンパイルします。
これで、データベースに PhoneBook.Person クラスが定義されました。
クラス・ドキュメントの表示
Caché オンライン・クラス・リファレンスで、このクラスに対して自動的に生成されたドキュメントを表示するには、[ビュー]→[クラス・ドキュメントの表示] を選択します。クラスやプロパティの説明を入力してオンライン・ドキュメントに表示するには、クラス・メンバの宣言の直前に /// (3 つのスラッシュ) を付けて説明を入力するか、次の手順に従って説明を入力します。
-
[クラス・インスペクタ] を選択し、Class キーワードを表示します (インスペクタの左の列ヘッダに Class を表示させます)。
-
インスペクタで、キーワード Description をダブルクリックします。
-
これにより、以下のようなクラスの説明を入力するエディタが表示されます。
-
入力が終了したら、[OK] を選択します。
-
再度クラスを保存し、ドキュメントを表示します。
CSP を使用した Web ユーザ・インタフェースの作成
Phone Book アプリケーションのユーザ・インタフェースは、データベース内の人物の名前や番号のデータを編集したり表示したりできる HTML フォームで構成された Web ページです。この Web ページを作成するには、CSP ファイルを使用して、PhoneBook.Person 永続クラスに結合されたフォームを組み込みます。
CSP ファイルの作成
CSP ファイルをスタジオの Web フォーム・ウィザードで作成する手順は、以下のとおりです。
-
[ファイル]→[新規作成]→[CSP ファイル]→[Caché Server Page] を選択して、新規の CSP ファイルを作成します。
CSP エディタ・ウィンドウが開き、Unititled.csp という新規の CSP ページのソースが表示されます。
-
[ファイル]→[保存] を選択します。
-
[名前を付けて保存] ダイアログで、/csp/user のダブルクリックによりこのディレクトリを開きます。Person.csp.を入力します。[名前を付けて保存] を選択します。
-
エディタ・ウィンドウで、CSP ソース・ファイルの <BODY> セクションにカーソルを置きます。“My page body.” という単語を削除します。[ツール]→[テンプレート]→[テンプレート] を選択します。リストから [ウェブフォームウィザード] を選択します。
-
PhoneBook.Person クラスを選択して、[次へ] を選択します。
-
利用可能なプロパティのリストから、Name プロパティと PhoneNumber プロパティを選択します。これらのプロパティは、[選択されたプロパティ] リストに表示されます。
-
[完了] を選択します。
ウェブフォームウィザードが CSP エディタ・ウィンドウに、結合されたフォームの HTML ソースを配置します。
<html>
<head>
<!-- Put your page Title here -->
<title> Cache Server Page </title>
</head>
<body>
<!-- Put your page code here -->
<head>
<title>Cache Server Page - PhoneBook.Person (USER)</title>
</head>
<h1 align='center'>PhoneBook.Person</h1>
<!-- This function is needed by the search button on the form -->
<script language='javascript'>
<!--
function update(id)
{
#server(..formLoad(id))#;
return true;
}
// -->
</script>
<!-- use CSP:OBJECT tag to create a reference to an instance of the class -->
<csp:object name='objForm' classname='PhoneBook.Person' OBJID='#(%request.Get("OBJID"))#'>
<!-- use csp:search tag to create a javascript function to invoke a search page -->
<csp:search name='form_search' classname='PhoneBook.Person' where='%Id()' options='popup,nopredicates'
onselect='update'>
<form name='form' cspbind='objForm' cspjs='All' onsubmit='return form_validate();'>
<center>
<table cellpadding='3'>
<tr>
<td><b><div align='right'>Name:</div></b></td>
<td><input type='text' name='Name' cspbind='Name' size='50'></td>
</tr>
<tr>
<td><b><div align='right'>PhoneNumber:</div></b></td>
<td><input type='text' name='PhoneNumber' cspbind='PhoneNumber' size='50'></td>
</tr>
<tr>
<td> </td>
<td><input type='button' name='btnClear' value='Clear' onselect='form_new();'>
<input type='button' name='btnSave' value='Save' onselect='form_save();'>
<input type='button' name='btnSearch' value='Search' onselect='form_search();'></td>
</tr>
</table>
</center>
</form>
</body>
</html>
CSP ファイルの保存とコンパイル
[ビルド]→[コンパイル] を選択するか、Ctrl-F7 を押すか、または [コンパイル] アイコン を選択して、CSP ファイルを保存してコンパイルします。
Web ページの表示
[表示]→[ウェブページ]、または [ウェブページ] アイコン を選択して、ブラウザに Web ページを表示します。
CSP を使用した Web ページの作成についてさらに学習するには、"Caché Server Pages (CSP) の使用法" を参照してください。
Zen を使用した Web ユーザ・インタフェースの作成
Zen では、前述のセクションの CSP フォーム [PhoneBook.Person] のような Web ベースのフォームを作成するためのいくつかの方法がサポートされています。CSP と Zen の基礎には、同じ一連の技術が使用されています。Zen では、CSP が提供するクライアント・サーバ間の通信機能を土台として、フル機能の Web アプリケーションを迅速に開発することができます。Zen と CSP の関係の詳細は、"Zen の使用法" で説明しています。
このセクションのチュートリアルでは Zen ページを作成します。これはこの章で開始した Phone Book プロジェクト用の Web ベースのユーザ・インタフェースです。一般的な手順 (詳細) は以下のとおりです。
クラスをデータ・アダプタに設定
この手順では、この章で開始したプロジェクト用に開発した PhoneBook.Person クラスを使用し、このクラスを Zen データ・アダプタとして機能するように変換します。これは既存のクラスに基づいた Zen ユーザ・インタフェース構築のための最速の手法です。
-
PhoneBook.Person クラスを開きます。
-
[参照]→[インスペクタ] を選択して、スタジオ・インスペクタのウィンドウを表示します。未表示の場合は左の列ヘッダで、ドロップダウン・リストから [クラス] を選択します。クラス・キーワードがアルファベット順に表示されます。
-
[スーパー] キーワードを探し、このキーワードを選択してハイライト表示します。このフィールドには、クラス名 %PersistentOpens in a new tab および省略記号 (...) が表示されています。省略記号を選択します。これにより、%PersistentOpens in a new tab に追加して、スーパークラスを選択できるダイアログが開きます。
-
ダイアログの左側の列で、%ZEN.DataModel.AdaptorOpens in a new tab クラスに移動し、選択してハイライト表示します。ダイアログの中央で右山括弧 [>] を選択して、%ZEN.DataModel.AdaptorOpens in a new tab クラスを %PersistentOpens in a new tab の下の右側の列に置きます。
-
[OK] を選択します。
-
PhoneBook.Person クラスを保存し、コンパイルします。
Zen ページの作成
この手順では、プロジェクト用のユーザ・インタフェースを作成するために編集できる ZenPage クラスを作成します。
-
[ファイル]→[新規作成] を選択するか、Ctrl-N を押すか、[新規作成] アイコン をクリックします。
-
[Zen] タブを選択します。[新規 Zen ページ] を選択します。[OK] をクリックします。
.Zen ページ・ウィザードが表示されます。
-
次の手順に従って、このダイアログを編集します。
-
[パッケージ名] に PhoneBook と入力します。
-
[クラス名] に ZenPage と入力します。
-
[ページ名] に My Telephone Book と入力します。
-
[次へ] を選択します。
-
-
最初のページ・レイアウトの [タイトルページ] を選択します。[完了] を選択します。
Zen ページ・ウィザードは、テンプレート・クラス・パラメータ、および XML ブロックの XData Style と XData Contents を持つ骨格のみの Zen ページを作成し、表示します。このクラスの XData Contents の場所に注意してください。新しい Zen ページに項目を追加するには、この XML ブロックを編集します。
XData Contents [XMLNamespace="http://www.intersystems.com/zen"] { <page xmlns="http://www.intersystems.com/zen" title=""> <html id="title">Title</html> <vgroup width="100%"> <!-- put page contents here --> </vgroup> </page> }
-
Ctrl-F7 で保存してコンパイルします。
-
[表示]→[ウェブページ] を選択するか、[ブラウザで表示] アイコン をクリックして、Web ページを表示します。この時点で、唯一表示されている項目は <html> 要素で表示される [タイトル] テキストとなります。
-
上記の XData Contents ブロックを見てみると、<html> 要素が属性 id="title" を含んでいることがわかります。id="title" は、同じ ZenPage クラスの XData Style ブロックにあるスタイル定義 #title を参照します。#title は、このページを表示すると表示される背景色、レイアウト、およびフォントの選択肢を定義します。[タイトル・ページ] レイアウトの既定の XData Style ブロックは次のようになります。
XData Style { <style type="text/css"> /* style for title bar */ #title { background: #C5D6D6; color: black; font-family: Verdana; font-size: 1.5em; font-weight: bold; padding: 5px; border-bottom: 1px solid black; text-align: center; } </style> }
-
より意味のあるタイトルになるように、<html> 要素のテキスト・コンテンツを編集します。
<html id="title">My Telephone Book</html>
-
クラスを保存してコンパイルし、Web ページを表示します。以下のように表示されます。
Zen フォームの追加
作業する ZenPage クラスを作成したので、その XData Contents ブロックで XML 要素を編集して、表示に項目を追加します。この演習では、データベースに PhoneBook.Person オブジェクトを追加できるようにするためのフォームを追加することから始めます。
-
スタジオで ZenPage クラスを開きます。
-
以下の例のとおりに、XData Contents で主要な <vgroup> 内に <dataController> 要素および <dynaForm> 要素を配置します。
XData Contents [XMLNamespace="http://www.intersystems.com/zen"] { <page xmlns="http://www.intersystems.com/zen" title=""> <html id="title">My Telephone Book</html> <vgroup width="100%"> <dataController id="source" modelClass="PhoneBook.Person" modelId=""/> <dynaForm id="MyForm" controllerId="source" /> </vgroup> </page> }
カーソルを <vgroup> および </vgroup> の間に置き、入力を開始します。([ここにページ・コンテンツを置いてください] の行を削除します。)
文字 < を入力した後に、スタジオ・アシストによりすべての要素のリストが表示されます。<d を入力すると、<dataController> と <dynaForm> を含むリストの一部が表示されます。選択肢のいずれかをダブルクリックして選択します。1 つのスペース文字を入力すると、スタジオ・アシストによって、その要素に該当する属性のリストの表示を求められます。行全体を入力するまで、この方法を続行します。
または、このドキュメントをオンラインで表示している場合は、上記の例の <dataController> 行と <dynaForm> 行を切り取って貼り付けることができます。
-
以下の例のとおりに、XData Contents に 2 つの <button> 要素を指定します。
XData Contents [XMLNamespace="http://www.intersystems.com/zen"] { <page xmlns="http://www.intersystems.com/zen" title=""> <html id="title">My Telephone Book</html> <vgroup width="100%"> <dataController id="source" modelClass="PhoneBook.Person" modelId=""/> <dynaForm id="MyForm" controllerId="source" /> <button caption="New" onselect="zenPage.newRecord();" /> <button caption="Save" onselect="zenPage.saveRecord();" /> </vgroup> </page> }
新しい要素を入力します。または、このドキュメントをオンラインで表示している場合は、この例の <button> 行を切り取って貼り付けることができます。
-
Ctrl+F7 で保存し、コンパイルします。Web ページを表示します。以下のように表示されます。
-
希望に応じて、動作を確認するために [新規作成] ボタンと [保存] ボタンを選択してみてください。エラー・メッセージが表示されます。[OK] を選択して、それを閉じます。
これらのボタンを選択したときにエラー・メッセージが表示された理由を理解するには、XData Contents の各 <button> 要素の onselect 属性の値に注目します。onselect のそれぞれの値は、ボタンが選択されると自動的に実行される JavaScript 式です。
これらの例では、onselect 式は、クライアント上の JavaScript で実行されるメソッドを呼び出します。特殊変数 zenPage は、メソッドが現在の ZenPage クラスで定義されていることを示します。これらのメソッドは、newRecord と saveRecord です。
onselect のこれらの値を機能させるためには、ZenPage クラスでクライアント側の JavaScript メソッドを作成する必要があります。スタジオの Zen メソッド・ウィザードを使用すると、簡単に実行できます。
クライアント側メソッドの追加
この手順では、新しいオブジェクトを作成して、それらのオブジェクトをボタンの選択に応じて保存するメソッドを追加します。これらのメソッドでは、Zen フォームを使用して、PhoneBook.Person クラスのオブジェクトをデータベースに取り込むことができるようになります。
-
スタジオで ZenPage クラスを開きます。
-
XData Contents ブロックの右中括弧 (}) の下で、ZenPage クラスの右中括弧の前にカーソルを置きます。
-
[ツール]→[テンプレート]→[テンプレート] を選択するか、Ctrl-T キーを押して、[スタジオ・テンプレート] ダイアログを表示します。[Zen メソッド・ウィザード] を選択します。[OK] をクリックします。次のダイアログが表示されます。
次の手順に従って、このダイアログを編集します (ダイアログの下部までスクロールする必要があります)。
-
[メソッド名] に newRecord と入力します。
-
[インスタンス・メソッド] を選択します。
-
[クライアントで実行] を選択します。
-
ここに示されているように [説明] を入力します。
-
[Try/Catch] チェック・ボックスのチェックを外します。
-
[完了] を選択します。次のように、ページ・クラスに新しいメソッドが表示されます。
/// Create a new instance of the controller object. ClientMethod newRecord() [Language = javascript] { // TODO: implement alert('Client Method'); }
-
-
中括弧内のコードを変更して、次のようなメソッドとします。
/// Create a new instance of the controller object. ClientMethod newRecord() [Language = javascript] { var controller = zenPage.getComponentById('source'); controller.createNewObject(); }
-
以上の手順を繰り返し、saveRecord メソッドを追加します。Zen メソッド・ウィザードを使用する場合、以下の手順でダイアログに値を入力します。
-
[メソッド名] に saveRecord と入力します。
-
[インスタンス・メソッド] を選択します。
-
[クライアントで実行] を選択します。
-
コントローラ・オブジェクトの新しいインスタンスを作成する の [説明] を入力します。
-
[Try/Catch] チェック・ボックスのチェックを外します。
-
[完了] を選択します。ページ・クラスに新しいメソッドが表示されます。
次のように、新しいメソッドを編集します。
/// Save the current instance of the controller object. ClientMethod saveRecord() [Language = javascript] { var form = zenPage.getComponentById('MyForm'); form.save(); }
-
-
クラスを保存してコンパイルし、Web ページを表示します。
-
このページの [新規作成] ボタンを選択します。Name フィールドと PhoneNumber フィールドが空白になるので、次のエントリの新しい情報を入力できます。各フィールドに入力した後、[保存] ボタンを選択します。新しいエントリがデータベースに保存されます。
-
[新規作成] と [保存] を繰り返しクリックして、さらにエントリを追加します。
テーブルでのデータベースの表示
データベース内にデータが追加されたので、データを表示できるようにします。この手順では、データベースから保存されたオブジェクトを表示する Zen テーブルを追加します。ユーザ・インタフェースの [保存] ボタンを選択するたびに、このテーブルが自動的に更新されるように、saveRecord メソッドを変更します。
-
スタジオで ZenPage クラスを開きます。
-
以下の例のとおりに、XData Contents の主要な <vgroup> 内に <tablePane> 要素を 1 つ指定します。この新しい要素を入力することもできますが、このドキュメントをオンラインで表示している場合は、この例の <tablePane> 行を切り取って貼り付けることもできます。
XData Contents [XMLNamespace="http://www.intersystems.com/zen"] { <page xmlns="http://www.intersystems.com/zen" title=""> <html id="title">My Telephone Book</html> <vgroup width="100%"> <dataController id="source" modelClass="PhoneBook.Person" modelId=""/> <dynaForm id="MyForm" controllerId="source" /> <button caption="New" onselect="zenPage.newRecord();" /> <button caption="Save" onselect="zenPage.saveRecord();" /> <tablePane id="people" sql="SELECT Name,PhoneNumber FROM PhoneBook.Person" /> </vgroup> </page> }
<tablePane> sql 属性によって、SQL 文が指定されます。SELECT によって PhoneBook.Person クラスの 2 つのプロパティが指定され、FROM によって完全なパッケージおよびクラス名が指定されます。この SQL クエリによって、<tablePane> のデータが指定されます。
-
クラスを保存してコンパイルし、Web ページを表示します。
-
[新規作成] と [保存] を使用して、データベースにさらにエントリを追加します。
-
更新したテーブルを表示するには、ブラウザの更新ボタンを選択します。新しいエントリが表示されます。
-
保存するたびに自動的にテーブルを更新することにより、ユーザが新しく入力するたびに更新する必要をなくします。これを実行するには、以下のように saveRecord メソッドに 2 行追加します。
/// Save the current instance of the controller object. Method saveRecord() [Language = javascript] { var form = zenPage.getComponentById('MyForm'); form.save(); var table = zenPage.getComponentById('people'); table.executeQuery(); }
-
クラスを保存してコンパイルし、Web ページを表示します。以下のように表示されます。
-
[新規作成] と [保存] を使用して、データベースにさらにエントリを追加します。[保存] を選択するたびに、saveRecord メソッドによってテーブルが更新されて、最新のエントリが表示されます。
Zen についての詳細は、"Zen の使用法" を参照してください。