Zen ウィザード

この章では、Zen で使用できる、スタジオの以下のウィザードについて説明します。

新しいアプリケーション・クラス、コンポーネント・クラス、ページ・クラス、またはレポート・クラスを作成するウィザード
ページ・クラスにコンポーネントを効率的に追加する際に役立つスタジオ・アシスト (ワード・コンプリート機能)
グラフ、テーブル、要素、メソッド、およびスタイルをページ・クラスに追加するウィザード。

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

新規 Zen アプリケーション・ウィザード

Note:

背景情報は、“Zen アプリケーションの概念” の章を参照してください。ウィザードのサンプル・セッションは、“Zen チュートリアル” の章の “Zen アプリケーションの作成” にある演習を参照してください。

新規 Zen アプリケーション・ウィザードは、以下のように使用します。

スタジオを開始します。
[ファイル]→[新規作成] を選択するか、Ctrl-N を押すか、アイコンをクリックします。
[Zen] タブをクリックします。
[新規 Zen アプリケーション] アイコンをクリックします。
[OK] をクリックして、Zen アプリケーション・ウィザード・ダイアログを起動します。
以下のフィールドにデータを入力します。
- [パッケージ名] — 新しいアプリケーション・クラスを収めるパッケージ。
- [クラス名] — 新しいアプリケーション・クラスのクラス名。
- [アプリケーション名] — アプリケーションの論理名。
- [説明] — このアプリケーションを説明するための任意のテキスト。
[完了] をクリックすると、ダイアログが閉じ、新しい Zen アプリケーション・クラスがスタジオに表示されます。
Zen アプリケーション・クラスを必要に応じて変更します。
このアプリケーションのすべてのページに適用するスタイル定義を指定するには、Zen スタイル・ウィザードを使用して XData Style を編集するか、CSSINCLUDES クラス・パラメータを設定します。
[ビルド]→[コンパイル] を選択するか、Ctrl-F7 を押すか、アイコンをクリックします。

新規 Zen コンポーネント・ウィザード

Note:

背景情報は、"Zen アプリケーションの開発" の “カスタム・コンポーネント” の章を参照してください。

新規 Zen コンポーネント・ウィザードは、以下のように使用します。

スタジオを開始します。
[ファイル]→[新規作成] を選択するか、Ctrl-N を押すか、アイコンをクリックします。
[Zen] タブをクリックします。
[新規 Zen コンポーネント] アイコンをクリックします。
[OK] をクリックして、Zen コンポーネント・ウィザード・ダイアログを起動します。
以下のフィールドにデータを入力します。
- [パッケージ名] — 新しいコンポーネント・クラスを収めるパッケージ。
  
  Important:
  
  ZEN.Component というパッケージ内で、大文字と小文字の組み合わせを使用したどのようなクラスも作成しないことを強くお勧めします。ZEN.Component というパッケージを作成すると、クライアント側コードを生成するための Zen フレームワークが損なわれます。
- [クラス名] — 新しいコンポーネント・クラスのクラス名。
- [タイプ] — 次の中から、コンポーネントの親クラスを選択します。
  - コンポーネント： "Zen アプリケーションの開発" の “カスタム・コンポーネント” の章にある “カスタム・コンポーネントの作成” を参照してください。
  - 複合： "Zen アプリケーションの開発" の “カスタム・コンポーネント” の章にある “複合コンポーネント” を参照してください。
  - コントロール： "Zen コンポーネントの使用法" の “Zen コントロール” の章と、"Zen アプリケーションの開発" の “カスタム・コンポーネント” の章を参照してください。
  - svgComponent ： "Zen アプリケーションの開発" の “カスタム・コンポーネント” の章にある “カスタム・メータの作成”を参照してください。
- [XML ネームスペース] — コンポーネントが複合コンポーネントの場合、Zen ページにコンポーネントを配置する際に、<namespace:componentName> の構文を使用して、このネームスペースを参照する必要があります。詳細は、"Zen アプリケーションの開発" の “カスタム・コンポーネント” の章にある “カスタム・コンポーネント・クラスの XML ネームスペース” を参照してください。
- [説明] — このコンポーネントを説明するための任意のテキスト。
[完了] をクリックすると、ダイアログが閉じ、新しい Zen コンポーネント・クラスがスタジオに表示されます。
Zen コンポーネント・クラスを必要に応じて変更します。
- 必ず、%DrawHTML メソッドを実装してください。ウィザードには、クラスのこのメソッドのテンプレートが用意されています。
- カスタム・コンポーネントにスタイル定義を指定する場合は、"Zen アプリケーションの開発" の “カスタム・コンポーネント” の章にある “カスタム・スタイル” を参照してください。Zen スタイル・ウィザードを使用して、スタイル定義を追加できます。
[ビルド]→[コンパイル] を選択するか、Ctrl-F7 を押すか、アイコンをクリックします。

新規 Zen ページ・ウィザード

Note:

背景情報は、“Zen アプリケーションの概念” の章を参照してください。ウィザードのサンプル・セッションは、“Zen チュートリアル” の章の “Zen ページの作成” にある演習を参照してください。

新規 Zen ページ・ウィザードは、以下のように使用します。

スタジオを開始します。
[ファイル]→[新規作成] を選択するか、Ctrl-N を押すか、アイコンをクリックします。
[Zen] タブをクリックします。
[新規 Zen ページ] アイコンをクリックします。
[OK] をクリックして、Zen ページ・ウィザード・ダイアログを起動します。
以下のフィールドにデータを入力します。
- [パッケージ名] — 新しいページ・クラスを収めるパッケージ。
- [クラス名] — 新しいページ・クラスのクラス名。
- [アプリケーション] — このページが属するアプリケーションのパッケージおよびクラス名。
- [ページ名] — アプリケーションでの、このページの論理名。
- [ドメイン] — このページでキャプション・テキストのローカライズに使用するドメイン。
- [説明] — このページを説明するための任意のテキスト。
- [ページ・タイプ] — 以下のいずれかを選択します。
  - [ページ] — 通常のページ・クラス。
  - [テンプレート・ページのサブクラス] — テンプレート・ページ・クラスのサブクラス。このオプションを選択して [スーパー・クラス] 支援テキスト・コントロールを表示します。コントロールが表示されたら、テキスト・フィールドをクリックして最初のレベル・パッケージのアルファベット順リストを表示します。ダブルクリックしてリストからパッケージを選択します。リストが更新され、選択したパッケージで使用できるクラスが表示されます。フィールド内にパッケージ名を最後にピリオド (".") を付けて入力してキャリッジ・リターンを入力すると、リストが更新されて使用可能なクラスが表示されます。
[次へ] をクリックします。
以下から最初のページ・レイアウトを選択します。
- [列 2] — 2 つの列、および上部横方向にタイトルを表示するスペース
- [タイトル・ページ] — 上部横方向にタイトル用のスペース
- [既定] — 事前定義のレイアウトなし
[完了] をクリックすると、ダイアログが閉じ、新しい Zen ページ・クラスがスタジオに表示されます。
Zen ページ・クラスを必要に応じて変更します。
- ページにスタイル定義を指定するには、Zen スタイル・ウィザードを使用して XData Style を編集します。
- ページ・コンテンツを指定するには、XData Contents を編集します。XData Contents では、スタジオ・アシストまたは Zen 要素ウィザードを使用してコンポーネントを追加できます。Zen グラフ・ウィザードも利用できます。
- サーバ側メソッドおよびクライアント側メソッドを追加するには、Zen メソッド・ウィザードを使用します。
[ビルド]→[コンパイル] を選択するか、Ctrl-F7 を押すか、アイコンをクリックします。
[ビュー]→[ブラウザで表示] またはアイコンを選択して、ブラウザにページを表示します。

新規 Zen レポート・ウィザード

Note:

背景情報とウィザードのサンプル・セッションは、"Zen レポート" の “Zen レポートの構築” の章を参照してください。

新規 Zen レポート・ウィザードは、以下のように使用します。

スタジオを開始します。
[ファイル]→[新規作成] を選択するか、Ctrl-N を押すか、アイコンをクリックします。
[Zen] タブを選択します。
[新規 Zen レポート] アイコンをクリックします。
[OK] をクリックして、Zen レポート・ウィザード・ダイアログを起動します。
以下のフィールドにデータを入力します。
- [パッケージ名] — 新しいレポート・クラスを収めるパッケージ。
- [クラス名] — レポート・クラス名。
- [アプリケーション] — このレポートが属するアプリケーションのパッケージおよびクラス名。既定値は、%ZEN.Report.defaultApplicationOpens in a new tab です。
- [レポート名] — アプリケーションでの、このレポートの論理名。XData ReportDefinition ブロックおよび XData ReportDisplay ブロックで、生成される <report> 要素の name 属性の値を指定します。
- [説明] — このレポートを説明するための任意のテキスト。
[次へ] をクリックします。ウィザードで、レポートのデータを指定する SQL クエリの入力を求められます。
テキスト・ボックスに SQL クエリを入力できます。

Note:

テキストを空白のままにすると、後で編集中にクエリを追加したり、“<report> または <group> でのクエリの作成” のセクションで説明したように他のメソッドを使用してデータを取得できます。
[完了] をクリックすると、ダイアログが閉じ、新しい Zen レポート・クラスがスタジオに表示されます。
XData ReportDefinition ブロックで以下のテキストを検索します。
```

```
このコメントを削除します。<group> 要素を、<report> と </report> の間に追加します。

Note:

背景情報は、"Zen レポートのデータの収集" の “Zen レポートのデータの収集” の章を参照してください。
XData ReportDisplay ブロック内の <report> 要素には、オプションのページ・フォーマット要素と、それに続いて必須の <body> 要素が含まれます。

Note:

詳細は、"Zen レポートの使用法" の “Formatting Report Data” の章を参照してください。
DEFAULTMODE クラス・パラメータ値を設定して、レポート出力形式を指定します。
Zen レポート・クラスを必要に応じて変更します。
[ビルド]→[コンパイル] を選択するか、Ctrl-F7 を押すか、アイコンをクリックします。
[ビュー]→[ブラウザで表示] またはアイコンを選択して、ブラウザにレポートを表示します。

スタジオ・アシスト

Note:

背景情報とウィザードのサンプル・セッションは、“Zen チュートリアル” の章の “Hello World” および “Zen ページの作成” を参照してください。

スタジオ・アシスト (入力時のワード・コンプリート機能) は、Zen クラスで以下のように使用します。

スタジオを開始します。
Zen ページ・クラスまたは Zen レポート・クラスを開きます。
以下のいずれかの要素内にカーソルを配置し、クリックしてその位置に挿入ポイントを移動します。
- XData Contents の <page> と </page> の間
- XData ReportDefinition の <report> と </report> の間
- XData ReportDisplay の <report> と </report> の間
入力を開始します。入力した文字が初めて意味を持つと、そのコンテキストに応じて適切な XML 要素および XML 属性のリストがスタジオに表示されます。このリストには、組み込み Zen コンポーネントのほか、ユーザが定義したカスタム・コンポーネントや複合コンポーネントがすべて表示されます。
このリストから項目を選択するには、該当する項目をクリックして Enter キーを押します。
完全な単語がコードに追加されます。

Zen グラフ・ウィザード

Note:

"Zen コンポーネントの使用法" の “Zen と SVG” の章で説明しているように、グラフはすべて SVG コンポーネントです。これは、グラフが SVG コンポーネントのレイアウトおよびスタイルの規約に従い、"Zen コンポーネントの使用法" の “Zen のグラフ” の章の説明にあるその他の特性を持つということです。最も重要なことは、Zen グラフを <svgFrame> コンテナに置くことが必要であるという点です。XData Contents にグラフを追加する際は、この点に注意します。

Zen グラフ・ウィザードは、以下のように使用します。

スタジオを開始します。
クラスを開きます。
カーソルを XData Contents 内に配置し、クリックしてその位置に挿入ポイントを移動します。
[ツール]→[テンプレート]→[テンプレート] を選択するか、Ctrl-T キーを押して、Zen テンプレートのリストを表示します。
[Zen グラフ・ウィザード] を選択します。
[OK] をクリックして、Zen グラフ・ウィザード・ダイアログを起動します。
[タイプ] フィールドには、グラフ・タイプのリストが表示されます。以下の各グラフの説明は、"Zen コンポーネントの使用法" の “Zen のグラフ” の章にあります。
- barChart ： “棒グラフ” を参照してください。
- diffChart ： “差異グラフ” を参照してください。
- hilowChart ： “高低グラフ” を参照してください。
- lineChart ： “折れ線グラフ” を参照してください。
- pieChart ： “円グラフ” を参照してください。
- xyChart ： “散布図” を参照してください。
グラフ・タイプを選択します。
[次へ] をクリックすると、Zen グラフ・ウィザード・ダイアログの画面が分割して表示されます。
- 画面左側は、現在の属性によってグラフがどのようなスタイルになるかが表示されます。
- 画面右側は、属性のリストです。このリストの上にある [グラフ]、[X 軸]、または [Y 軸] をクリックすると、グラフのこれらの側面から見た属性を表示できます。
属性に値を指定するには、その横にあるフィールドをクリックして、フィールドにポップアップ・ボタンを表示します。そのポップアップ・ボタンをクリックします。[Zen 値エディタ] ダイアログがポップアップ表示されます。このダイアログの入力フィールドは、プロパティのデータ型によって異なります。以下はその例です。
- データ型がブーリアンの場合、ダイアログにはチェック・ボックスが表示されます。
- セットから値を 1 つ選択する必要がある場合、ダイアログにはラジオ・ボタンが表示されます。
- データ型が CSS スタイル定義の場合、[CSS 宣言エディタ] がポップアップ表示されます。このエディタを使用するには、“Zen スタイル・ウィザード” にある説明を手順 10 から参照してください。
- データ型が JavaScript 式の場合、エントリを入力する場所がテキスト領域に示されます。
いずれの場合も、ダイアログの入力フィールドの下に、プロパティの簡単な説明が表示されます。詳細、および個々のプロパティの連携の説明は、"Zen コンポーネントの使用法" の “Zen のグラフ” の章にある説明を参照してください。
[OK] をクリックして変更内容を保存し、[Zen グラフ・ウィザード] に戻ります。これで、入力した内容が、グラフの属性のリストに反映されます。この手順を必要に応じて繰り返して、このグラフに属性を指定できます。
このグラフ定義に対するすべての変更をそのまま適用する場合は、[完了] をクリックします。[Zen グラフ・ウィザード] ダイアログが閉じ、完成したグラフ定義が Zen ページ・クラスの XData Contents ブロックに表示されます。

Zen TablePane ウィザード

Note:

背景情報は、“Zen のテーブル” の章を参照してください。

Zen TablePane ウィザードは、以下のように使用します。

スタジオを開始します。
クラスを開きます。
カーソルを XData Contents 内に配置し、クリックしてその位置に挿入ポイントを移動します。
[ツール]→[テンプレート]→[テンプレート] を選択するか、Ctrl-T キーを押して、Zen テンプレートのリストを表示します。
[Zen TablePane ウィザード] を選択します。
[OK] をクリックして、Zen TablePane ウィザード・ダイアログを起動します。
2 つのラジオ・ボタンでテーブル・ペインのデータ・ソースを選択できます。
- [テーブル] を選択して、SQL テーブルの名前を指定します。Caché オブジェクトを表示するには、Sample.PersonOpens in a new tab などのクラス名を入力します。
- [クラス・クエリ] を選択して、クラスの名前およびそのクラス内のクエリの名前を指定します。
[次へ] をクリックすると、Zen TablePane ウィザードが分割画面に表示されます。
- 左側は、[列] というラベルが付いた領域です。データ・ソースに列の名前を一度に 1 つずつ、エントリごとに Enter を押して入力します。テーブルに入れるすべての列の名前を入力したら、Tab を押すか、または [列] ボックスの外側をクリックします。これにより、データが更新されて下のグリッドにロードされます。
- 右側は、[tablePane 属性] というラベルが付いた領域で、<tablePane> の属性をリストします。[値] 列を使用して属性値を編集できます。属性値の編集方法の詳細については、以下の手順を参照してください。
- この 2 つの領域の下は、テーブルのプレビューを表示する領域です。
属性に値を指定するには、その横にあるフィールドをクリックして、フィールドにポップアップ・ボタンを表示します。そのポップアップ・ボタンをクリックします。[Zen 値エディタ] ダイアログがポップアップ表示されます。このダイアログの入力フィールドは、プロパティのデータ型によって異なります。例えば以下のようになります。
- データ型がブーリアンの場合、ダイアログにはチェック・ボックスが表示されます。
- セットから値を 1 つ選択する必要がある場合、ダイアログにはラジオ・ボタンが表示されます。
- データ型が CSS スタイル定義の場合、[CSS 宣言エディタ] がポップアップ表示されます。このエディタを使用するには、“Zen スタイル・ウィザード” にある説明を手順 10 から参照してください。
- データ型が JavaScript 式の場合、エントリを入力する場所がテキスト領域に示されます。
いずれの場合も、ダイアログの入力フィールドの下に、プロパティの簡単な説明が表示されます。
このテーブル定義に対するすべての変更をそのまま適用する場合は、[完了] をクリックします。[Zen TablePane ウィザード] ダイアログが閉じ、完成したテーブル定義が Zen ページ・クラスの XData Contents ブロックに表示されます。

Zen 要素ウィザード

Note:

背景情報は、“Zen のレイアウト” の章を参照してください。

Zen 要素ウィザードは、以下のように使用します。

スタジオを開始します。
クラスを開きます。
カーソルを XData Contents 内に配置し、クリックしてその位置に挿入ポイントを移動します。
[ツール]→[テンプレート]→[テンプレート] を選択するか、Ctrl-T キーを押して、Zen テンプレートのリストを表示します。
[Zen 要素ウィザード] を選択します。
[OK] をクリックして、Zen 要素ウィザード・ダイアログを起動します。
[要素] フィールドの下矢印をクリックすると、Zen コンポーネントのドロップダウン・リストが表示されます。このリストには、組み込み Zen コンポーネントのほか、ユーザが定義したカスタム・コンポーネントや複合コンポーネントがすべて表示されます。このリストでは、パッケージ名のアルファベット順でコンポーネントが表示されます。つまり、次のようになります。
- 補助コンポーネント： <tablePane> の <column> など。
- 組み込み Zen コンポーネント： <tablePane> など。
- ユーザ定義コンポーネント：複合コンポーネントやカスタム・コンポーネントなど。
コンポーネント名をクリックします。
[次へ] をクリックします。[Zen 要素ウィザード] に、選択したコンポーネントのプロパティがアルファベット順で一覧表示されます。
プロパティに値を指定するには、その名前の横にある [編集] ボタンをクリックします。[Zen 値エディタ] ダイアログがポップアップ表示されます。このダイアログの入力フィールドは、プロパティのデータ型によって異なります。以下はその例です。
- データ型がブーリアンの場合、ダイアログにはチェック・ボックスが表示されます。
- セットから値を 1 つ選択する必要がある場合、ダイアログにはラジオ・ボタンが表示されます。
- データ型が CSS スタイル定義の場合、[CSS 宣言エディタ] がポップアップ表示されます。このエディタを使用するには、“Zen スタイル・ウィザード” にある説明を手順 10 から参照してください。
- データ型が JavaScript 式の場合、エントリを入力する場所がテキスト領域に示されます。
いずれの場合も、ダイアログの入力フィールドの下に、プロパティの簡単な説明が表示されます。詳細は、このドキュメントの以下の章の説明を参照してください。
- Zen のレイアウト
- Zen のスタイル
または、"Zen コンポーネントの使用法" の以下の章を参照してください。
または、"Zen アプリケーションの開発" の以下の章を参照してください。
- カスタム・コンポーネント
必要な変更を行った後、[OK] をクリックして変更内容を保存し、[Zen 要素ウィザード] に戻ります。これで、入力した内容が、プロパティのリストに反映されます。前の手順とこの手順を必要に応じて繰り返して、このコンポーネントのプロパティに値を指定できます。
このコンポーネント定義に対するすべての変更をそのまま適用する場合は、[完了] をクリックします。[Zen 要素ウィザード] ダイアログが閉じ、完成したコンポーネント定義が Zen ページ・クラスの XData Contents ブロックに表示されます。

Zen メソッド・ウィザード

Note:

背景情報とウィザードのサンプル・セッションは、“Zen チュートリアル” の章の演習 “Zen ページの作成” にある “手順 3 : クライアント側メソッド” および “手順 5 : サーバ側メソッド” を参照してください。

Zen メソッド・ウィザードは、以下のように使用します。

スタジオを開始します。
Zen ページ・クラスを開きます。
カーソルを、クラスの末尾にある最後の中括弧の前に置きます。クリックしてその中括弧の上部に挿入ポイントを移動します。
[ツール]→[テンプレート]→[テンプレート] を選択するか、Ctrl-T キーを押して、Zen テンプレートのリストを表示します。
[Zen メソッド・ウィザード] を選択します。
[OK] をクリックして、Zen メソッド・ウィザード・ダイアログを起動します。
メソッドの [スコープ] を、[インスタンス] または [クラス] のいずれかから選択します。

メソッドを実行する [場所] を選択し、[メソッド名] を入力します。

規約では、メソッドの実行と名前は以下のように関連しています。

場所の選択	メソッド・タイプ	名前付け規約
クライアントで実行	クライアントのみ	myMethod
サーバで実行	Zen メソッド	MyMethod
サーバでのみ使用可	サーバのみのユーティリティ	%MyMethod
コンポーネントのサーバ側コールバック	サーバのみのコールバック	MyMethod

詳細は、“Zen チュートリアル” の章の “Zen の名前付け規約” を参照してください。

手順 8 で [コンポーネントのサーバ側コールバック] オプションを選択すると、[Zen メソッド・ウィザード] ダイアログに [サーバ側コールバック] フィールドが追加されます。このフィールドには、サーバ側コールバック・メソッド名を値として持つ属性のドロップダウン・リストがあります。この属性には、<form> の OnSubmitForm や <html> の OnDrawContent があります。このリストから、コンポーネントと属性を選択します。
[サーバ側コールバック] の場合、メソッド本文にコメントが追加され、このコールバック・メソッドに関連付けたコンポーネントと属性をいつでも知ることができます。XData Contents のコンポーネント定義にも関連する属性を追加する必要がありますが、このコメントはクラスを扱う際に非常に役立ちます。
[説明]— フィールドに、このメソッドを説明するための任意のテキストを入力します。
ウィザードで Try/Catch エラー処理テンプレートをメソッドに記述する場合は、[Try/Catch] チェック・ボックスにチェックを付けたままにします。詳細は、"Caché ObjectScript の使用法" ドキュメントの “エラー処理” の章を参照してください。
クライアント側メソッドでは、テンプレートは以下のようになります。
```
ClientMethod mMethod() [Language = javascript]
{
  try {
    alert('Client Method');
    // TODO: implement
  }
  catch (ex) {
    zenExceptionHandler(ex,arguments);
  }
}
```
サーバ側メソッドでは、テンプレートは以下のようになります。
```
Method MyMethod() [ZenMethod]
{
  Try {
    // TODO: implement
    &js<alert('Server Method');>
  }
  Catch(ex) {
    &js<alert('Error:\n#($ZCVT(ex.DisplayString(),"O","JS"))#');>
  }
  Quit
}
```
この機能を省略するには、[Try/Catch] チェック・ボックスのチェックを外します。
[完了] をクリックすると、ダイアログが閉じ、新しいメソッド定義がスタジオの Zen ページ・クラスに表示されます。
必要に応じて、このメソッドを実装します。

Zen スタイル・ウィザード

Note:

背景情報は、“Zen のスタイル” の章を参照してください。

Zen スタイル・ウィザードは、以下のように使用します。

スタジオを開始します。
編集対象の XData Style ブロックがあるクラスを開きます。
目的の XData Style ブロック内で、カーソルを <style> と </style> の間に配置します。クリックしてその位置に挿入ポイントを移動します。
[ツール]→[テンプレート]→[テンプレート] を選択するか、Ctrl-T キーを押して、Zen テンプレートのリストを表示します。
[Zen スタイル・ウィザード] を選択します。
[OK] をクリックします。事前定義されたスタイルのリストが表示されます。このリストでは、コンポーネント名のアルファベット順でスタイルが並べられています。“Zen のスタイル” の章の “組み込みスタイルのオーバーライド” では、馴染みのない名前を持つコンポーネントがいくつかあることを説明しています。これらは、Zen ページに実際に配置するコンポーネントの親クラスです。例えば、tablePane (子) のスタイルを編集するには、simpleTablePane (親) に対して表示されたリストからスタイルを選択する必要があります。
リストを下にスクロールして、提供されるスタイルを表示します。
編集する CSS スタイル名の横にあるラジオ・ボタンを選択します。
[次へ] をクリックします。選択内容が反映され、現在の外観のサンプルが Zen スタイル・ウィザードで表示されます。
[編集] をクリックして、CSS 宣言エディタを表示します。必要に応じて何度でも文を追加、削除、または編集して、CSS ルールを定義できます。
CSS の名前と値の組み合わせを追加するには、以下の手順に従います。
- [CSS 宣言] テキスト・ボックスの項目 [--New--] をクリックします。
- [プロパティ] ボックスの下矢印をクリックすると、CSS 引数名 (background-color、font-weight、width など) のアルファベット順リストが表示されます。名前をクリックして選択します。
- [値] フィールドに CSS 値を入力するか、[編集] ボタンをクリックして CSS 値エディタを表示します。
- CSS 値エディタは、選択した CSS 引数に対して入力できる値によって変化します。オプションの固定リストがある場合は、ドロップダウン・リストからそれらのオプションを選択できます。固定リストにはない値を入力できる場合は、その値を直接入力できます。
- border-top などの CSS スタイルを組み合わせた引数を選択すると、エディタでは選択した項目のそれぞれを個別に指定するよう求められます。例えば、以下のようになります。
  - width — thin、medium、thick、1px、2px、3px、4px、inherit。
  - style — none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset、inherit。
  - color — black、blue、red、darkred などの標準的な CSS カラー名のドロップダウン・リスト。また、[参照] ボタンをクリックすると、実際の色を確認して選択できる詳細な色選択ダイアログが表示されます。このダイアログのカラー・サンプルをクリックして [OK] をクリックすると、この色が CSS 文に HTML カラー値で指定されます。
  結果は、border-top: 1px solid #70DFF0; のようになります。
- [OK] をクリックして変更内容を保存し、[CSS 宣言エディタ] に戻ります。これで、[CSS 宣言] テキスト・ボックスには新しい名前と値の組み合わせが反映され、これまでに追加したその他の内容と共に表示されます。
CSS の名前と値の組み合わせを削除するには、以下の手順に従います。
- [CSS 宣言] テキスト・ボックスで該当する行をクリックします。
- [プロパティ] ボックスの右にある [削除] ボタンをクリックします。
- [OK] をクリックして変更内容を保存し、[CSS 宣言エディタ] に戻ります。[CSS 宣言] テキスト・ボックスには、削除した名前と値の組み合わせが表示されなくなります。
CSS の名前と値の組み合わせを編集するには、以下の手順に従います。
- [CSS 宣言] テキスト・ボックスで該当する行をクリックします。
- [値] フィールドに CSS 値を入力するか、[編集] ボタンをクリックして CSS 値エディタを表示します。
- CSS 値エディタを使用して、手順 11 にあるように値を選択および入力します。
- [OK] をクリックして変更内容を保存し、[CSS 宣言エディタ] に戻ります。これで、[CSS 宣言] テキスト・ボックスには変更した名前と値の組み合わせが反映され、これまでに追加したその他の内容と共に表示されます。
[CSS 宣言エディタ] ダイアログに表示された変更内容を適用するには、[OK] をクリックします。[Zen スタイル・ウィザード] には、選択内容を反映した、変更後のスタイルのサンプルが表示されます。このサンプルの妥当性を調べ、以下のいずれかを実行します。
- このスタイル定義の変更処理に戻るには、手順 10 に戻ります。
- このスタイル定義に対するすべての変更を適用する場合は、[完了] をクリックします。[Zen スタイル・ウィザード] ダイアログが閉じ、完成したスタイル定義がクラスの XData Style ブロックに表示されます。