演習 1.3: dataItem

前の演習では、EGL で最も単純なデータ・パーツであるプリミティブについて学習しました。この演習では、より複雑なデータ・パーツである dataItem について学習します。それぞれの dataItem は、単一のプリミティブを基にしていますが、追加 EGL プロパティーを含みます。それらのプロパティーを使用して、特定の目的のため dataItem を構成します。例えば、数値プリミティブを基に dataItem を定義して、データ・パーツの最小値と最大値を指定する range プロパティーを追加することができます。このように、dataItem を利用すると、アプリケーションにおけるプリミティブ変数の使用方法をより詳細に制御できるようになります。

dataItem の定義と dataItem を基にした変数の作成

EGL で事前定義されているプリミティブとは異なり、dataItem パーツを基に変数を作成するには、その前に、dataItem パーツを定義する必要があります。dataItem パーツを定義するには、その名前、プリミティブ型、および EGL プロパティーを指定します。例えば、currency = yes プロパティーを含み、num プリミティブ型に基づく、myCurrencyDataItem という名前の dataItem を定義して、dataItem が通貨値として表示されるようにするには、以下のようにコードを記述します。

DataItem myCurrencyDataItem num(7,2)
  {currency = yes}
end

一度 dataItem パーツを定義したら、前の演習でプリミティブを基に変数を作成したのと同じように、その dataItem パーツを基に変数を作成することができます。次のようにコードを記述すると、myCurrencyDataItem dataItem を基に customerAccountBalance という名前の変数が作成されます。

customerAccountBalance myCurrencyDataItem;

それから、この変数を、プリミティブを基に作成した変数と同じように使用することができます。

プリミティブと比較した場合の dataItem の利点

一般的には、プリミティブよりも dataItem を使用する方が望ましいコーディングの手法であるといえます。なぜなら、dataItem を使用すれば、アプリケーションにおけるデータの使用方法を標準化することができるからです。プリミティブではなく dataItem の使用を勧める理由は以下のとおりです。

データ・ディクショナリーにおける dataItem パーツの定義

多くの場合、dataItem はデータ・ディクショナリー と呼ばれる単一のファイル内で定義されます。すべての dataItem を単一のファイルにまとめると、それらを簡単に管理してインポートし、他の EGL ファイルで使用することができます。以下のステップでは、データ・ディクショナリーを作成して、そのデータ・ディクショナリーでいくつかの dataItem パーツを定義します。

  1. プロジェクト・ナビゲーター・ビューで、「動的 Web プロジェクト」>「EGLWeb」>「EGLSource」を展開してから、「data」パッケージをクリックして選択する。
  2. 「ファイル」>「新規」>「その他」をクリックする。「新規」ウィンドウが開きます。
  3. ウィザード」の下で、「EGL」を展開して、「EGL ソース・ファイル」をクリックする。
  4. 次へ」をクリックする。
  5. 「新規 EGL パーツ」ウィンドウで、「パッケージ (Package)」フィールドに「data」と表示されていることを確認する。

    パッケージに「data」と表示されない場合には、「参照」、「data」、「OK」を順にクリックしてください。

  6. EGL ソース・ファイル」フィールドに次のテキストを入力する。

    dictionary

    「新規 EGL パーツ」ウィンドウは次のようになります。

    「新規 EGL パーツ」ウィンドウの外観

  7. 終了」をクリックする。dictionary.egl という名前の新規ソース・ファイルが作成され、エディターで開きます。
  8. dictionary.egl ファイルで package data; の下に以下のコードを追加する。
    dataItem booleanTest char(1)
      {value = "y",
       displayName = "Test boolean field",
       isBoolean = yes}
    end
    
    dataItem charTest char(22)
      {value = "Mrs. Lewis",
       displayName = "Last name",
       inputRequired = yes}
    end
    
    dataItem dateTest char(10)
      {displayName = "Test data field",
       dateFormat = "mm/dd/yyyy",
       value = "10/01/1952"}
    end
    
    dataItem numericCurrencyTest decimal(9,2)
      {value = 44444.44,
       currency = yes,
       numericSeparator = yes,
       validValues = [[5, 55555]]}
    end

    通常、データ・ディクショナリーはアルファベット順に並べますが、この例では dataItem が 4 つしかないので、その必要はありません。このコードでは、以下の dataItem パーツが定義されます。

    booleanTest
    この dataItem には単一の文字が入ります。isBoolean プロパティーが yes に設定されているので、このデータ・パーツを基に作成された変数に対して指定できる値は y または n です。
    charTest
    この dataItem には最大 22 文字が入ります。このデータ・パーツを基に作成された変数にはデフォルト値 Mrs. Lewis が設定されます。この入力フィールドは必須指定です。
    dateTest
    この dataItem には最大 10 文字が mm/dd/yyyy という日付形式で入ります。このデータ・パーツを基に作成された変数にはデフォルト値 10/01/1952 が設定されます。
    numericCurrencyTest
    この dataItem には 5 から 55555 までの範囲の小数第 2 位までの 10 進値が入ります。

  9. dictionary.egl ファイルを保管する。
  10. dictionary.egl ファイルを閉じる。

Web ページにおける EGL dataItem の使用

以下のステップでは、PageHandler および Web ページを作成して、作成したばかりの dataItem を使用してみます。

  1. プロジェクト・エクスプローラー・ビューで、「EGLWeb」プロジェクトをクリックして選択する。
  2. メニュー・バーから「ファイル」>「新規」>「Faces JSP ファイル」をクリックする。新規 Faces JSP ファイル・ウィザードが開きます。
  3. ファイル名」フィールドに次のファイル名を入力する。

    DataItemTest

  4. ページ・テンプレートから作成」チェック・ボックスを選択する。
  5. 次へ」をクリックする。
  6. ページ・テンプレート・タイプ」の下で、「ユーザー定義ページ・テンプレート」をクリックする。
  7. サムネール」の下で「A_gray.htpl」テンプレートをクリックする。
  8. 終了」をクリックする。新規ファイルがプロジェクトに追加され、そのファイルがエディターで開きます。
  9. 新規ファイルで、デフォルト・テキストの「Place your page content here.」を削除する。
  10. 削除したテキストの代わりに、DataItem Variables と入力して、Enter キーを押す。
  11. ページを右クリックして、「ページ・コードの編集」をクリックする。ページ・コード・ファイルが開き、このページの PageHandler が表示されます。
  12. ページ・コード・ファイル内のすべてのコードを削除して、代わりに以下のコードを入力する。
    package pagehandlers;
    
    import data.*;
    
    PageHandler DataItemTest
      {view="DataItemTest.jsp", onPageLoadFunction=onPageLoad}
    
    //Variables
    
    inputChar               charTest;
    outputChar              charTest;
    inputDate               dateTest;
    outputDate              dateTest;
    inputCurrency           numericCurrencyTest;
    outputCurrency          numericCurrencyTest;
    inputBoolean            booleanTest;
    outputBooleanMessage    char(45);
    
    //Function definitions
    
      Function onPageLoad()
      End
    
      Function moveTestValues();
        outputChar = inputChar;
        outputDate = inputDate;
        outputCurrency = inputCurrency;
    
        if (inputBoolean == "Y")
          outputBooleanMessage = "Check box is checked. True returned.";
        else
          outputBooleanMessage = "Check box is not checked. False returned.";
        End
    
      End
    
    
    End

    以下は、ここで挿入したコードに関する技術面での注釈です。

  13. ファイルを保存して閉じる。

ページでの変数の表示

  1. DataItemTest.jsp ページに戻る。
  2. ページ・データ・ビューで、「DataItemTest」を展開する。
  3. Ctrl キーを押しながら 4 つの入力変数 (「inputBoolean」、「inputChar」、「inputCurrency」、および「inputDate」) をクリックして選択する。
  4. 4 つの入力変数をページ・データ・ビューから DataItemTest.jsp ページの下部へドラッグする。「挿入のコントロール」ウィンドウが開きます。
  5. 「挿入のコントロール」ウィンドウで、「既存レコードの更新」をクリックする。
  6. コントロール・タイプ」の下で、ドロップダウン・リストを使用して、inputBoolean 変数以外のそれぞれの入力変数について、「メッセージ・タグ付き入力フィールド」を選択する。

    メッセージ・タグ付き入力フィールド」を選択すると、ページのそれぞれの入力フィールドの横にエラー・メッセージ・フィールドが追加されます。

  7. inputBoolean 変数について、「コントロール・タイプ」リストで「入力フィールド (Input field)」を選択する。
  8. オプション」をクリックする。
  9. 「オプション」ウィンドウで、「削除ボタン」チェック・ボックスをクリアする。
  10. 実行ボタン」チェック・ボックスを選択する。
  11. 実行ボタン」チェック・ボックスの下の「ラベル」フィールドに次のテキストを入力する。

    Copy input to output

  12. OK」をクリックする。
  13. 終了」をクリックする。フィールドがページに追加されます。
  14. 新規フィールドの下をクリックして Enter キーを押し、フィールドの下にブランク行を追加する。そうすることで、入力フィールドの下に出力フィールドを追加するための場所が確保されます。
  15. Ctrl キーを押しながら、ページ・データ・ビューで 4 つの出力変数 (「outputBooleanMessage」、「outputChar」、「outputCurrency」、および「outputDate」) をクリックして選択する。
  16. それらの 4 つの出力変数を、入力フィールドの下のブランク行へドラッグする。「コントロールの挿入」ウィンドウが再び開きます。
  17. 既存レコードの表示 (読み取り専用)」をクリックする。
  18. それぞれの出力フィールドについて、「コントロール・タイプ」の下で「出力フィールド (Output field)」を選択する。
  19. 終了」をクリックする。出力フィールドがページに追加されます。
  20. ページ・データ・ビューから、「inputBoolean」変数を、「Test boolean field」ラベルの横のチェック・ボックスへドラッグする。

    前の演習と同じく、最後のステップでは PageHandler 内の関数をボタンにバインドします。

  21. ページ・データ・ビューから、「moveTestValues()」関数をページの「Copy input to output」ボタンへドラッグする。
  22. ページを保管する。

    ページは次のようになります。

    DataItemTest.jsp ページの外観

ページのテスト

このページの入力変数と出力変数には、dataItem パーツ定義に割り当てられたプロパティーに基づいて割り当てられている EGL プロパティーがあります。例えば、inputChar 変数は、inputReqired = yes プロパティーを持つ charTest dataItem パーツを基にしています。このプロパティーにより、inputChar 変数は、それが追加されるあらゆる Web フォームで必須フィールドとして設定されます。以下のステップでは、ページをテストして、dataItem パーツ定義に割り当てられた EGL プロパティーが DataItemsTest.jsp ページに追加されたフィールドにどのような影響を与えるかを確認します。

  1. プロジェクト・エクスプローラー・ビューで、「DataItemsTest.jsp」ファイルを右クリックし、ポップアップ・メニューから「実行」>「サーバーで実行」をクリックする。

    Web ページが Web ブラウザーで開きます。入力フィールドおよび出力フィールドに変数のデフォルト値が自動的に表示されます。

  2. Last Name」フィールドをクリアして、フィールド内に何もテキストが表示されていない状態にする。
  3. Copy input to output」ボタンをクリックする。

    charTest dataItem の EGL プロパティーは inputRequired = yes なので、フィールドの横のエラー・メッセージ・フィールドに、「必須フィールドに入力されていません - 再度入力してください。(No input received for required field - enter again.)」というメッセージが表示されます。

  4. 「Last Name」フィールドに名前を入力する。
  5. 「InputCurrency」フィールドに数値 0 を入力する。
  6. Copy input to output」ボタンをクリックする。

    numericCurrencyTest dataItem は EGL validValues プロパティーを [[5, 55555]] に設定します。これは、この dataItem を基に作成される変数の値を 5 から 55,555 までに制限します。「OutputCurrency」フィールドの横のエラー・メッセージ・フィールドに、「入力は、定義されている有効な値のリストの範囲外です - 再度入力してください。(Input not within defined list of valid values - enter again.)」というメッセージが表示されます。

  7. ページ上の 3 つのすべてのフィールドに有効な値を入力して、チェック・ボックスを選択またはクリアする。
  8. Copy input to output」ボタンをクリックする。

    入力フィールドが出力フィールドにコピーされます。

これで、『演習 1.4: レコード』を開始する準備ができました。

フィードバック
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.