Zenアプリケーションの作成
それでは、Zenを使用した簡単なWebページを作成する方法について説明しましょう。まずは、Zenで何ができるかを紹介するために、デモプログラムについて説明し、その後簡単なWebページを作成してみます。
サンプルと主なデモプログラム
Cachéには、Zenのサンプルアプリケーションが用意されています。
http://localhost:57772/csp/samples/ZENDemo.Home.cls
このURIをブラウザに入力すると、SAMPLESネームスペースのデータレコードが自動生成され、Zenのデモが起動します。
Zenデモプログラム―ホーム画面
このなかの「Sample Applications」にある「HelpDesk Application」について、簡単に触れてみましょう。
この「HelpDesk Application」は、担当するクライアントからのレポートをまとめたリストを表示し、プライオリティ別に表示できるアプリケーションです。
サンプルアプリケーション「HelpDesk Application」
このサンプルアプリケーションのソースコードを確認したい場合は、Cachéスタジオから、SAMPLESネームスペースを選択して、サンプルのクラスを表示させてください。
簡単なZenアプリケーションの作成
それでは、一定の手順に従ってZenアプリケーションを作成してみましょう。サンプルとして作成しますので、まずは、Cachéスタジオを起動し、ネームスペースをSAMPLESにしておいてください。
- Zen Application wizardの起動
- クラス名、アプリケーション名の入力
- Zenアプリケーションのコンパイル
- Zen Page Wizardの起動
- 新規ページ名などの入力
- ページレイアウトの選択
- 生成されたページのXMLブロックの定義
- 新規ページのコンパイル
- 簡単なボタンの作成
Cachéスタジオの［ファイル］メニューから［新規］を選択し、表示された［新規作成］ダイアログの［カスタム］タブをクリックして、その中にある［New Zen Application］を選択してください。すると、Zen Application wizardが起動します。
起動したウィザードにクラス名、アプリケーション名などを入力しますが、ここではサンプルなので、次図のように入れておきます。
Zen Application Wizardの起動
上図のように入力したら［Finish］ボタンを押します。すると、「MyApp.MyNewApp.cls」が生成されるので、［ビルド］メニューから［コンパイル］を選択して、このクラスをコンパイルします。これで新しいZenアプリケーションができたので、次は、Zenページを作成しましょう。
Cachéスタジオの［ファイル］メニューから［新規］を選択し、(1)のダイアログと同じ［カスタム］タブ内の［New Zen Page］を選択します。すると、Zen Page Wizardが起動するので、つづいてページ名などを入力します。
起動したウィザードに、クラス名やページ名などを入力します。ここでは次図のように入力しました。
Zen Page Wizardの起動
この画面の［Application］には、先ほど作成したZenアプリケーションクラス名が入っているので、そのままにしておいてください。ここで入力したのは、［Class Name］と［Page Name］、それと［Description］のみです。［Domain］はこの段階では空白のままにし、［Page type］は初期値の［Page］のままにしておいてください。つづいて、［Next］ボタンを押して、ページレイアウトの選択画面にします。
次図にある3つの枠は、ページのレイアウトの基本となるものです。
ページレイアウトの選択画面
この図で、黄色の四角のものは「規定」というレイアウトで、事前定義のレイアウトをしていないものです。左側の2つは、上から「列2」（列が2つあり、上部にタイトル用スペースがある）と「タイトルページ」（上部にタイトル用スペースのみ）というレイアウトです。ここでは、「タイトルページ」を選択して、［Finish］ボタンを押します。
生成された「MyApp.MyNewPage.cls」を確認してみましょう。
/// My very first Zen page class.
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%">
<!-- put page contents here -->
</vgroup>
</page>
}
}
このソースコード中のXData Styleでは、#titleと呼ばれるスタイル規則（HTML出力の背景色、パディング、境界線、およびフォントの特性）をCSSスタイルで定義します。次のXData Contentsは、ページのコンポーネントとレイアウトを表すXMLブロックで、具体的なページ内容の定義をしていきます。それぞれの要素の定義内容は次表のようになります。
XData Contentsブロックの各要素
| ブロック名 | 説明 |
| <page>要素 | ページオブジェクトの定義。 |
| <html>要素 | ブラウザに表示する単純なHTMLの抜粋を定義。id値のtitleは、htmlオブジェクトと#title規則との間のつながりをXData Styleから作成する。htmlオブジェクトは、テキストの文字列「Title」をフォーマットし、その結果得られる出力はタイトルバーとして機能。 |
| <vgroup>要素 | ここにコンポーネントを追加。ここでは空のままとする。 |
ここでは初期のままコンパイルしてみましょう。［ビルド］メニューから［コンパイル］を選択してください。コンパイルが完了したら、［表示］メニューの［ブラウザで表示］を選択して確認してみましょう。
生成した新規ページの表示
ここまでで、Zenアプリケーションのページが作成できましたが、タイトル以外何もないページなので、ほんの少し工夫してみましょう。先ほど空のままにした
<vgroup>要素を定義して、ボタンを1つ作ってみます。ついでにタイトルも変更してみましょう。上述したソースコードの「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>
}
idの値に「myButton」を使用すると、このプログラムはボタンオブジェクトを検索し、該当したボタンを表示させます。captionにある「Press Me」は、このページを表示したときにボタンに表示されるテキストです。onclickにある「
zenPage.btnClick();」は、ユーザがこのボタンをクリックしたときにクライアント側で実行されるJavaScript式です（ここではまだ何も起こりません）。コンパイルした結果、次の図のように、簡単なボタンが生成されました。
簡単なボタンを追加したZenページ
簡単なページが作成できましたが、ちゃんとしたZenアプリケーションとして機能させるためには、このあと、クライアント側メソッドとして、先ほど定義したJavaScript式「zenPage.btnClick();」のメソッドを作成し、データベースを参照するなどのサーバ側メソッド（ZenMethod）を作成する必要があります。ここでは文字数の都合上、割愛しますが、興味のある方は、Cachéドキュメントを参照してください。
