Web UI フレームワークを使用したカスタム・コード・テンプレートの作成

コード・テンプレート生成プログラムを使用して、カスタム・コード・テンプレートを作成できます。

このタスクについて

デフォルトのテンプレートまたはカスタム・テンプレートのいずれかからカスタム・コード・テンプレートを作成するには、以下のようにします。

手順

コード・テンプレート生成プログラムを開きます。
「使用可能なテンプレート (Available Templates)」セクションで、以下のいずれかのリスト内のテンプレートを右クリックします。
- カスタム・テンプレート
- デフォルトのテンプレート
「選択した項目から作成」オプションを選択します。
新規テンプレートが「新規テンプレートの作成 (Create New Template)」ウィンドウに表示されます。このウィンドウには変数が含まれています。これらの変数をコード・テンプレートで使用し、コード・テンプレート生成プログラムで必須フィールドの数を減らすことができます。

「既存の画面変数 (Existing Screen Variables)」セクションには、変更することのできないデフォルトの変数が表示されます (名前および値)。「ユーザー定義変数 (User Defined Variables)」セクションには、ユーザーが作成した、ユーザーが変更することのできる変数が表示されます (名前、タイプ、および値)。

「ユーザー定義変数 (User Defined Variables)」セクションでは、デフォルト・テンプレートの一部である名前/値のペアに任意のプロパティーを追加できます。ユーザー定義変数を追加するには、「追加」ボタンをクリックします。この変数のデフォルトのタイプは「string」です。タイプは式 (「expr」) に変更可能です。

上記のサンプル画面には、タイプ「expr」のユーザー定義変数 (projname) と値「className」 (className は画面変数) が表示されています。アプリケーションは、式 projName=”className”の代わりに式 projName=className を使用します (タイプが「string」の場合)。

変数を削除するには、変数行を右クリックし、「削除」オプションを選択します。
「テンプレートの詳細 (Template Details)」セクションで、以下の情報を定義します。
- 「テンプレート名」: テンプレートの固有 ID。json ファイル名としても使用されます。
- 「変数名」: このパラメーターがテンプレート内で参照される際に使用される名前。
- 「変数ラベル (Variable Label)」: 「コード・テンプレート生成プログラム (Code Template Generator)」ウィンドウでこの変数の入力フィールドの前に表示されるテキスト。
- 「変数タイプ (Variable Type)」: ストリングまたは式 (expr)。
- 「値」: 値を返すために評価可能なストリング、変数、または式。この値はデフォルト値として機能し、「コード・テンプレート生成プログラム (Code Template Generator)」ウィンドウでこの変数の入力フィールドに値を取り込むために使用されます。デフォルトでは、このフィールドは空のままです。
変数を追加するには、「新規追加」ボタンをクリックします。新規変数行が表示されます。

変数を削除するには、変数行を右クリックし、「削除」オプションを選択します。

「テンプレートの詳細 (Template Details)」セクションの下部に、コードの生成に使用される Ext JS XTemplate が表示されます。
「保存」ボタンをクリックして、新規テンプレートを保存します。新規テンプレートは、以下のディレクトリーに json ファイルとして (テンプレート名を使用して) 保存されます。
<ユーザーのプロジェクト・ディレクトリー> /designer-metadata/templates

テンプレートを保存しない場合は、「キャンセル」ボタンをクリックします。

「保存」ボタンをクリックすると、「新規テンプレートの作成 (Create New Template)」ウィンドウが閉じ、「コード・テンプレート生成プログラム (Code Template Generator)」ウィンドウが表示されます。これで、画面コンポーネントのコードを更新するために新規テンプレートを使用できるようになりました。