Zen チュートリアル

この章では、Zen を使用して簡単な Web ページを作成する方法について説明します。この章は、手順ごとのチュートリアル形式で編成されています。項目は以下のとおりです。

この章で説明する内容は、このドキュメント内のこの後のトピック、および Zen に関する後続のドキュメント内のトピックを理解するための基礎となります。さらに完全な実践練習を行うには、ドキュメントのホーム・ページにある "Zen クイックスタート・チュートリアル" も参照してください。

Hello World

以下の手順では、Zen ページに “Hello world!“ と表示します。

スタジオを開始します。
[ファイル]→[ネームスペース変更] を選択するか、F4 キーを押します。
SAMPLES ネームスペースを選択します。
[ファイル]→[新規作成] を選択するか、Ctrl-N を押すか、アイコンをクリックします。
[Zen] タブをクリックします。
[Zen ページ] アイコンをクリックします。
[OK] をクリックします。
[パッケージ名] で [ZENDemo] を選択します。
[クラス名] フィールドで次のように入力します。
hello
[アプリケーション名] で [ZENDemo.Application] を選択します。
[次へ] をクリックします。
[完了] をクリックします。
この行の先頭にカーソルを配置し、クリックしてその位置に挿入ポイントを移動します。
</page>
Enter キーを押します。
カーソルを空白行まで移動し、クリックしてその位置に挿入ポイントを移動します。
左角括弧 (<) を入力して、XML 要素のコンテキスト別リストを表示します。
[button] をクリックします。
Enter キーを押します。
スペースを入力して、XML 属性のコンテキスト別リストを表示します。
[caption] をクリックします。
Enter キーを押します。
次の内容を入力します。
Hello world!"/>
[ビルド]→[コンパイル] を選択するか、Ctrl-F7 を押すか、アイコンをクリックします。
[表示]→[ウェブページ] またはアイコンを選択します。
新しい Zen ページに、“Hello world!“ と表記されたボタンが表示されます。

手順 13 ～ 24 を次の内容でも試してみてください。

<calendar align="right"/>
<colorPicker/>
<text value="Hello world!"/>

この演習で問題が発生した場合は、“Zen の概要” の章の “Zen デモ” および “サポートされているブラウザ” を確認してください。これらのセクションには、Zen の導入に役立つ背景情報が記載されています。

Zen アプリケーションの作成

Zen アプリケーション・クラスは %ZEN.applicationOpens in a new tab を拡張したもので、アプリケーション全体にわたるスタイル設定の動作を提供します。この演習では、次の手順に従って、新しい Zen アプリケーション・クラスを作成します。

スタジオを開始します。
[ファイル]→[ネームスペース変更] を選択するか、F4 キーを押します。
SAMPLES ネームスペースを選択します。
[ファイル]→[新規作成] を選択するか、Ctrl-N を押すか、アイコンをクリックします。
[Zen] タブを選択します。
[Zen アプリケーション] アイコンをクリックします。

[OK] をクリックします。

次のテーブルに示すフィールドが、Zen アプリケーション・ウィザードに表示されます。この演習では、テーブルの右側の列に表示されている値を入力します。

フィールド	意味	入力する値
パッケージ名	新しいアプリケーション・クラスを含むパッケージ。	MyApp
クラス名	新しいアプリケーション・クラスのクラス名。	MyNewApp
アプリケーション名	アプリケーションの論理名。	My New Zen Application
説明	アプリケーションを説明するための任意のテキスト。	This is my first new Zen application.

[完了] をクリックします。

Zen アプリケーション・ウィザードは、骨格となるアプリケーション・クラスを作成し、表示します。これには、次のように事前定義済みクラス・パラメータと XData Style ブロックを指定します。

/// This is my first new Zen application.
Class MyApp.MyNewApp Extends %ZEN.application
{

  /// This is the name of this application.
  Parameter APPLICATIONNAME = "My New Zen Application";

  /// This is the URL of the main starting page of this application.
  Parameter HOMEPAGE = "";

  /// This Style block contains application-wide CSS style definitions.
  XData Style
  {
    <style type="text/css">
    </style>
  }
}

[ビルド]→[コンパイル] を選択するか、Ctrl-F7 を押すか、アイコンをクリックします。

Zen ページの作成

Zen ページ・クラスは %ZEN.Component.pageOpens in a new tab を拡張したもので、Web ページのコンテンツや動作を定義します。この演習では、いくつかの手順で新しい Zen ページ・クラスを作成します。

手順 1 ：新規ページ・ウィザード

次のようにして、新しいクラスを作成します。

スタジオを開始します。
[ファイル]→[ネームスペース変更] を選択するか、F4 キーを押します。
SAMPLES ネームスペースを選択します。
[ファイル]→[新規作成] を選択するか、Ctrl-N を押すか、アイコンをクリックします。
[Zen] タブを選択します。
[Zen ページ] アイコンをクリックします。

[OK] をクリックします。

次のテーブルに示すフィールドが、Zen ページ・ウィザードに表示されます。この演習では、テーブルの右側の列に表示されている値を入力します。

フィールド	意味	入力する値
パッケージ名	ページ・クラスを収めるパッケージ。	MyApp
クラス名	ページ・クラス名	MyNewPage
アプリケーション	このページが属するアプリケーションのパッケージおよびクラス名。	MyApp.MyNewApp
ページ名	アプリケーションでの、このページの論理名。	My Home Page
ドメイン	このページでキャプション・テキストのローカライズに使用するドメイン。	この演習では、[ドメイン] フィールドを空のままにしておきます。
説明	このページを説明するための任意のテキスト。	My very first Zen page class.
ページ・タイプ	通常のページ、またはテンプレート・ページ・クラスのサブクラス。	この演習では、[ページ・タイプ] フィールドを、既定で選択されている [ページ] のままにします。

[次へ] をクリックします。

このウィザードでは、例えば、次のように、最初のページ・レイアウトの選択が求められます。
- [列 2] — 2 つの列、および上部横方向にタイトルを表示するスペース
- [タイトル・ページ] — 上部横方向にタイトル用のスペース
- [既定] — 事前定義のレイアウトなし
この演習では、[タイトル・ページ] をクリックします。次に [完了] をクリックします。
新規ページ・ウィザードは、事前定義されたクラス・パラメータ、および XML ブロック XData Style と Data Contents を持つ骨格のみの Zen ページを作成し、表示します。例えば、次のようになります。
```
Class MyApp.MyNewPage Extends %ZEN.Component.page
{

  /// Class name of application this page belongs to.
  Parameter APPLICATION = "MyApp.MyNewApp";

  /// Displayed name of this page.
  Parameter PAGENAME = "My Home Page";

  /// Domain used for localization.
  Parameter DOMAIN = "";

  /// This Style block contains page-specific CSS style definitions.
  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>
  }

  /// This XML block defines the contents of this page.
  XData Contents [XMLNamespace="http://www.intersystems.com/zen"]
  {
    <page xmlns="http://www.intersystems.com/zen" title="">
      <html id="title">Title</html>
      <vgroup width="100%">
        
      </vgroup>
    </page>
  }
}
```
このページ・クラスでは、各 XML ブロックが以下の機能を受け持っています。
- XData Style は、#title と呼ばれるスタイル規則を定義します。これは、HTML 出力の背景色、パディング、境界線、およびフォントの特性を定義します。
- XData Contents には XMLNamespace キーワードがあります。値 http://www.intersystems.com/zen によって、組み込み Zen コンポーネントでスタジオ・アシストの先行入力機能を使用できるようになります。“Zen チュートリアル” の “Hello World” の手順を既に実行している場合、この機能は使用済みです。
- XData Contents は、<page> 要素を使用してページ・オブジェクトを定義します。
- XData Contents は、<html> 要素を使用して、ブラウザに表示する単純な HTML の抜粋を定義します。id 値の title は、html オブジェクトと #title 規則との間のつながりを XData Style から作成します。html オブジェクトは、テキストの文字列 Title の形式を設定します。その結果得られる出力は、ページの簡単なタイトル・バーとして機能します。
- XData Contents には、空の <vgroup> があります。後述の演習では、ここにコンポーネントを追加します。
[ビルド]→[コンパイル] を選択するか、Ctrl-F7 を押すか、アイコンをクリックします。
[表示]→[ウェブページ] またはアイコンを選択します。
新しい Zen ページは、以下のように表示されます。

スタジオから Zen ページを正常に表示できない場合は、ブラウザ・セッションを開き、以下の形式で URI を入力することでページを表示できます。

http://localhost:57772/csp/samples/MyApp.MyNewPage.clsOpens in a new tab

以下はその説明です。

57772 は Caché に割り当てられた Web サーバのポート番号です。
samples は Zen ページ・クラス (すべて小文字) を含むネームスペースです。
MyApp.MyNewPage は Zen ページ・パッケージおよびクラス名です (大文字と小文字は区別されます)。

手順 2 ： XData Contents ブロック

この演習では、<page> 要素を変更して、ページに簡単なボタンを追加します。このためには、XData Contents ブロックにテキストを入力するか、テンプレートを使用して、正しい構文の <button> 要素を生成します。ここでは両方の方法を使用します。

スタジオでページ・クラスを開きます。
<html> 要素内でテキスト Title を選択します。Title を意味のある文字列に置き換えます。例えば、次のようにします。
Zen Exercise Results
<vgroup> 要素の直後にある次の行を削除します。

カーソルを <vgroup> と </vgroup> の間に配置し、クリックしてその位置に挿入ポイントを移動します。
[ツール]→[テンプレート]→[テンプレート] を選択するか、Ctrl-T キーを押して、[スタジオ・テンプレート] ダイアログを表示します。
[Zen 要素ウィザード] を選択します。
[OK] をクリックして、Zen 要素ウィザード・ダイアログを起動します。
XML 要素のドロップダウン・リストで、button を選択します。[次へ] をクリックします。以下の手順でプロパティを追加します。
- caption の行の [編集] をクリックします。文字列値を入力し、[OK] をクリックします。例えば、以下のようになります。
  Press Me
- id の行の [編集] をクリックします。文字列値を入力し、[OK] をクリックします。例えば、以下のようになります。
  myButton
[完了] をクリックします。この結果、XData Contents ブロックは次のようになります。
```
XData Contents [XMLNamespace="http://www.intersystems.com/zen"]
{
  <page xmlns="http://www.intersystems.com/zen" title="">
    <html id="title">Zen Exercise Results</html>
    <vgroup width="100%">
      <button id="myButton" caption="Press Me"/>
    </vgroup>
  </page>
}
```
この XData Contents ブロックに新しく追加された内容により、以下の操作が実現します。
- vgroup オブジェクトの子オブジェクトとして、ボタン・オブジェクトを定義します。これにより、ディスプレイの左上隅、タイトルの下にボタンが表示されます。このボタンは %ZEN.Component.buttonOpens in a new tab クラスのインスタンスです。
- id の値である myButton を使用すると、プログラムでボタン・オブジェクトを検索および操作できます。
- caption の値である Press Me は、ページを表示したときにボタンに表示されるテキストを表します。
- 現在は、このボタンをクリックしても何も起こりません。
[ビルド]→[コンパイル] を選択するか、Ctrl-F7 を押すか、アイコンをクリックします。
[表示]→[ウェブページ] またはアイコンを選択します。
新しい Zen ページは、以下のように表示されます。

手順 3 ：クライアント側メソッド

この演習では、次の手順に従って、Zen ページ・クラスに JavaScript クライアント側メソッドを追加し、ユーザが <button> をクリックするたびにこれを呼び出します。

スタジオでページ・クラスを開きます。
次のように、<button> 定義に onclick 属性を入力します。
onclick="zenPage.btnClick();"
この結果、XData Contents ブロックは次のようになります。
```
XData Contents [XMLNamespace="http://www.intersystems.com/zen"]
{
  <page xmlns="http://www.intersystems.com/zen" title="">
    <html id="title">Zen Exercise Results</html>
    <vgroup width="100%">
      <button id="myButton" caption="Press Me" onclick="zenPage.btnClick();"/>
    </vgroup>
  </page>
}
```
onclick 属性の値は、zenPage というオブジェクト上で btnClick というメソッドを実行する JavaScript 式です。zenPage は、クライアント側のページ・オブジェクトを表す JavaScript 変数です。クライアント側で btnClick メソッドが使用できるのは、これを Zen ページ・クラスでクライアント側メソッドとして定義している場合のみです。次に、これを実行する方法を説明します。
XData Contents ブロックの右中括弧 (}) のすぐ下、かつページ・クラスの右中括弧の上にカーソルを置きます。クリックしてその位置に挿入ポイントを移動します。
[ツール]→[テンプレート]→[テンプレート] を選択するか、Ctrl-T キーを押して、[スタジオ・テンプレート] ダイアログを表示します。[Zen メソッド・ウィザード] を選択します。[OK] をクリックすると、以下のダイアログが表示されます。
次の手順に従って、このダイアログを編集します。
- 名前「btnClick」を入力します。
- [インスタンス・メソッド] を選択します。
- [クライアントで実行] を選択します。
- 説明を入力します。
- [Try/Catch] チェック・ボックスのチェックを外します。
- [完了] をクリックします。次のように、ページ・クラスに新しいメソッドが表示されます。
```
ClientMethod btnClick() [Language = javascript]
{
   // TODO: implement
   alert('Client Method');
}
```

中括弧内のコードを変更して、次のようなメソッドとします。

ClientMethod btnClick() [Language = javascript]
{
   alert('Hello, World!');
}

[ビルド]→[コンパイル] を選択するか、Ctrl-F7 を押すか、アイコンをクリックします。
[表示]→[ウェブページ] またはアイコンを選択します。
“[Press Me]“ ボタンをクリックすると、JavaScript 警告メッセージを表示します。
[OK] をクリックし、ポップアップを閉じます。

btnClick メソッドについては、以下に挙げる重要な点に注意してください。

Language キーワードは JavaScript に設定されています。つまり、このメソッドの実装には JavaScript が使用されます。スタジオはこのメソッドを JavaScript として構文カラー表示し、検証します。
このクラスのコンパイル時、btnClick メソッドはサーバで呼び出し可能なメソッドとしては提供されません。クライアントに対しては zenPage オブジェクトのインスタンス・メソッドとして提供されます。
継承はクラス・コンパイラにより解決されます。つまり、スーパー・クラス内で JavaScript メソッドを定義すると、すべてのサブクラスで自動的にこれらのメソッドが使用できるようになります。これは従来の JavaScript でも可能ですが、非常に手間がかかり、エラーの原因となることもよくあります。サーバとクライアントの両方で継承をサポートするこの機能によって、Zen は高度な能力を持つものになっています。
このメソッドの本体では、クライアントにメッセージを表示するために、JavaScript 標準の alert メソッドが使用されています。
実行時、このメソッドはクライアント (ブラウザ) 環境で実行されます。
このメソッドは、その参照先のページ定義と同じ論理単位 (つまり、クラス) 内で定義されます。これにより、ページの開発や保守が容易になります。

手順 4 ： HTML 出力の表示

ブラウザで Zen ページを表示中に、ブラウザの [ソース] オプション (IE) または [ページのソース] オプション (Firefox) を使用すると、Zen ページで使用している HTML を表示できます。この Zen ページは、上から下に、次の要素で構成されていることがわかります。

標準 HTML ヘッダ
事前生成済みの JavaScript (ライブラリ・コンポーネント用) および CSS (スタイルシート) ファイルなど、インクルードされる要素のセット。
HTML を生成するコンポーネント (ボタン・コンポーネントなど) の表示に必要な HTML。
生成済み JavaScript ユーティリティ・コード (エラー検知、タイムアウト管理、暗号化されたサーバ呼び出しなど)。
このページで使用されているユーザ定義クラスのための JavaScript クラス定義 (ページ・オブジェクト自身など)。
このページにより定義されるクライアント側オブジェクトを作成するための JavaScript コード。これは、このページの XData Contents ブロックで定義されたものと同じオブジェクトのクライアント側バージョンです。
必要に応じ、クライアント側オブジェクト・モデルを完成させるための追加 JavaScript コード。

手順 5 ：サーバ側メソッド

この演習では、先ほど作成した Zen ページに簡単な変更を加えます。この変更は、クライアント・ページ内からサーバ・ロジックを呼び出す方法を示しています。次の手順に従って操作してください。

スタジオでページ・クラスを開きます。

この章の前の演習で学んだ方法で、XData Contents ブロック内に新しいボタンを追加します。この新しいボタンに、次のテーブルに示す属性値を設定します。

属性	入力する値
id	myButtonToo
caption	No, Me!
onclick	zenPage.BtnClickMe();

現在の XData Contents ブロックは次のようになります。

XData Contents [XMLNamespace="http://www.intersystems.com/zen"]
{
  <page xmlns="http://www.intersystems.com/zen" title="">
    <html id="title">Zen Exercise Results</html>
    <vgroup width="100%">
      <button id="myButton" caption="Press Me"
              onclick="zenPage.btnClick();"/>
      <button caption="No, Me!" id="myButtonToo"
              onclick="zenPage.BtnClickMe();"/>
    </vgroup>
  </page>
}

XData Contents ブロックの右中括弧 (}) の下で、Zen ページ・クラスの右中括弧の上にカーソルを置きます。クリックしてその位置に挿入ポイントを移動します。
[ツール]→[テンプレート]→[テンプレート] を選択するか、Ctrl-T キーを押して、[スタジオ・テンプレート] ダイアログを表示します。[Zen メソッド・ウィザード] を選択します。[OK] をクリックすると、以下のダイアログが表示されます。
次の手順に従って、このダイアログを編集します。
- 名前「BtnClickMe」を入力します。
- [インスタンス・メソッド] を選択します。
- [サーバで実行] を選択します。
- 説明を入力します。
- [Try/Catch] チェック・ボックスのチェックを外します。
- [完了] をクリックします。次のように、ページ・クラスに新しいメソッドが表示されます。
```
Method BtnClickMe() [ZenMethod]
{
   // TODO: implement
   &js<alert('Server Method');>
   Quit
}
```
中括弧内のコードを変更して、次のようなメソッドとします。
```
Method BtnClickMe() [ZenMethod]
{
    Set msg = $ZVERSION
    &js<alert('#(msg)#');>
    Quit
}
```
ここで、ObjectScript メソッド BtnClickMe は ObjectScript の $ZVERSION または $ZV ユーティリティを実行します。これは、実行中の Caché のバージョンを示すテキスト文字列を生成します。
[ビルド]→[コンパイル] を選択するか、Ctrl-F7 を押すか、アイコンをクリックします。
[ビュー]→[ブラウザで表示] またはアイコンを選択して、以下のように新しい Zen ページを表示します。
[No, Me!] ボタンをクリックします。以下のポップアップ・メッセージが表示されます。
[OK] をクリックし、ポップアップを閉じます。
ブラウザの [ソース] オプション (IE) または [ページのソース] オプション (Firefox) を使用して、HTML を確認します。

BtnClickMe メソッドについては、以下に挙げる重要な点に注意してください。

これはインスタンス・メソッドとして定義されています。
Language キーワードは省略されています。つまり、このメソッドでは既定のサーバ・スクリプト言語である ObjectScript が使用されます。使用可能なスクリプト言語は Caché ObjectScript、Caché Basic、および Caché MVBasic です。
サーバで実行されますが、クライアントにはハイパーイベントが送信されます (詳細は後述)。
ZenMethod キーワードが使用されます。ZenMethod キーワードは、これがクライアントから呼び出し可能なサーバ側メソッドであることを意味します。このメソッドをクライアント (ブラウザ) 環境から呼び出しても、実行はサーバで行われます。
このメソッドは、$ZVERSION ユーティリティの値を変数 msg に割り当て、msg をクライアントに送信します。これにより、ユーザは JavaScript の alert ポップアップでこの値を確認できます。以下に例を示します。
&js< alert('#(msg)#'); >
これは埋め込み JavaScript 構文で記述されています。Zen は、サーバで BtnClickMe メソッドを実行する一方、&js< と > の間から JavaScript コードのスニペットを見つけ、このスニペットを実行のためにクライアントに送信します。

Note:

この動作は、CSP ハイパーイベント機能により提供されます。詳細は、Caché Server Pages (CSP) の使用法の “CSP におけるタグを使用した開発” の章にある “サーバ側のメソッド” を参照してください。
埋め込みJavaScript にある次の構文を考えます。
#(msg)#
この構文は、サーバで実行されている ObjectScript コードから、クライアントで実行されている埋め込み JavaScript に変数 msg の値を転送するための規約です。詳細は、"Zen アプリケーションの開発" の “Zen ページ” の章にある “Zen 実行時式” を参照してください。
クライアント側の zenPage オブジェクトは、サーバ側の BtnClickMe メソッドを呼び出すことができます。
BtnClickMe はインスタンス・メソッドとして定義されているので、サーバでこのメソッドを実行するには、現在のクライアント側オブジェクトのすべての状態をサーバ側で認識する必要があります。
zenPage でサーバ側メソッドを呼び出すと、クライアント側で実装されている BtnClickMe により、クライアント側にある引数やオブジェクト・コンテキスト情報がすべて収集されます。次に、ページ・オブジェクト全体がシリアル化され、サーバに送信された後、サーバ側メソッドが呼び出されます。これらすべての処理では、CSP のセッションで暗号化されたハイパーイベント機能が使用されます。
BtnClickMe メソッドは値を返しません。これは意図的なものです。CSP ハイパーイベントを使用すると、返り値を持たないメソッドは自動的に非同期で (応答を待たずに) 実行されます。これにより、ユーザ・インタフェースでは、メソッドからの戻り値を待機しているときのような “フリーズ“ 状態が発生することがなくなります。

Important:

“&js< ...” “ >” は、同期モードで動作していて、かつ DOM 同期が発生していない ClassMethods と対話している場合にのみ使用するようにしてください。

インスタンス・メソッドで、DOM 内の要素を変更している場合、このコードは、ハイパーイベントによって返され、関数にバンドルされて、返されるとすぐにブラウザで実行されます。その後、DOM が更新され、その関数によって加えられた変更はすべて上書きされます。それらの関数を非同期で呼び出している場合には、関数が予想した順番で実行されないおそれもあります。

Zen の名前付け規約

Zen プログラムでは大文字と小文字が区別されます。これまで、大文字と小文字を区別したプログラミング経験がない場合、Zen を使用するときにはこの区別に慣れることが最も重要です。つまり、a と A は同じではありません。

Zen コード全体で、次の名前付け規約が適用されます。これらの規約では、メソッドやプロパティの各種のカテゴリを区別するために、大文字と小文字を使い分けています。myMethodName と MyMethodName は同一の名前ではありません。

名前付け規約

規約	例
クライアント側メソッドは、Language=JavaScript のキー・フレーズを使用して定義し、JavaScript で記述します。これらはクライアントから呼び出すことができ、呼び出すとクライアント上で実行されます。これらの名前の先頭文字は小文字で記述し、後続の各単語の先頭の文字は大文字で記述します。クライアントのみのプロパティでも同じ扱いとします。	myMethodName
Zen メソッドは、キーワード ZenMethod を使用して定義します。これらはクライアントから呼び出すことができますが、サーバ上で実行されます。これらのメソッドは ObjectScript、Caché Basic または Caché MVBasic で記述しますが、クライアントをコールバックする埋め込み JavaScript も記述できます。これらの名前の先頭文字は大文字で記述し、名前に使用されている各単語の先頭の文字は大文字で記述します。また、% 文字で始めることはできません。	MyMethodName
サーバ側メソッドに使用する専用のキーワードはありません。ObjectScript、Caché Basic または Caché MVBasic で記述します。これらはサーバで実行しているコードから呼び出すことができ、呼び出すとサーバ上で実行されます。これらのメソッド名は % 文字で始まります。サーバのみのプロパティでも、この名前付け規約が使用されます。	%MyMethodName
通常、Zen クラスの名前はクライアント側メソッドやプロパティと同様、先頭の文字を小文字とし、名前に使用している各単語の先頭文字は大文字で記述します。ただし、サーバのみのユーティリティ・クラスの中には、大文字で始まるものもあります。	tablePane
属性名およびプロパティ名は、先頭の文字を小文字とし、名前に使用している各単語の先頭文字は大文字で記述します。ただし、イベント・ハンドラとコールバックは例外です。	filterOp
コンポーネントのイベント・ハンドラを表す属性は、JavaScript の規約に従ってすべて小文字で記述します。	onmousedown
コンポーネントのサーバ側コールバックを表す属性名の先頭には On (先頭は大文字の O) を記述し、名前に使用している各単語の先頭文字は大文字で記述します。	OnCreateDataSet

Zen には、"Zen アプリケーションの開発" の “Zen ページ” の章の説明にあるように、多数の組み込み変数が用意されています。このうち最も重要なものは、クライアント側とサーバ側の Zen ページ・オブジェクトを表す 2 つの変数です。これら 2 つの変数には、クライアントとサーバを識別する目的で Zen 名前付け規約に従って次のような名前がつけられます。

クライアント側で実行される JavaScript コードでは、ページ・オブジェクトは zenPage です
サーバ側で実行する ObjectScript コード、Caché Basic コード、または Caché MVBasic コードでは、ページ・オブジェクトは %page です。

Important:

ZEN.Component というパッケージ内で、大文字と小文字の組み合わせを使用したどのようなクラスも作成しないことを強くお勧めします。ZEN.Component というパッケージを作成すると、クライアント側コードを生成するための Zen フレームワークが損なわれます。

Zen サンプル・アプリケーション

Caché の使用経験が豊富ならば、SAMPLES ネームスペースについても既に熟知していると考えられます。特に、サンプル・アプリケーション Cinema は、Caché Server Pages (CSP) を学習しているユーザに人気があります。Zen には多数のサンプル・ページが用意されており、これらは SAMPLES ネームスペースでパッケージに分類されています。Caché を新規にインストールした場合は、まず ZENDemo ホーム・ページを実行する必要があります。このページをロードすると、SAMPLES ネームスペースに対するデータ・レコードが暗黙的に生成されます。これは、Caché を 1 回インストールするごとに一度実行するだけですみます。

ブラウザに以下の URI を入力します。

http://localhost:57772/csp/samples/ZENDemo.Home.clsOpens in a new tab

ここで、57772 は、Caché に割り当てた Web サーバのポート番号です。

これで、Zen サンプル・コードを以下の手順でいつでも表示できます。

スタジオを開始します。
[ファイル]→[ネームスペース変更] を選択するか、F4 キーを押します。
SAMPLES ネームスペースを選択します。
[ワークスペース] ウィンドウで [ネームスペース] タブを選択し、[クラス] カテゴリを開きます。
ZENApp、ZENDemo、ZENMVC、および ZENTest は自由に体験できるパッケージです。リストの上部にある Cinema アプリケーションなど、他の任意の Caché のサンプルも検証することができます。

スタジオでサンプル Zen コードにアクセスする方法

Zen ウィザード

Zen には、スタジオから実行できるアプリケーション・プログラム・ウィザードが豊富に用意されています。この章の演習では、それらのウィザードをいくつか使用します。使用可能なすべてのオプションのリストおよび説明は、“Zen ウィザード” の章を参照してください。

スタジオには、Zen ウィザードを使用して簡単なアプリケーションのユーザ・インタフェースを作成するチュートリアルも用意されています。"スタジオの使用法" ドキュメントの “スタジオを使用した簡単なアプリケーションの構築” の章を参照してください。