< 前へ | 次へ >

演習 8: 計算ヒストリー・ハンドラーの作成

行をクリックすることで以前の計算を表示可能な表を作成します。

この演習では、DataGrid ウィジェットを使用して表を作成します。 DataGrid ウィジェットには、相互作用およびビジュアル表示のための拡張機能があるため、レコードの配列を表示する GridLayout ウィジェットよりも適しています。

演習 4 では、レコード変数をエディターにドラッグして GridLayout ウィジェットを作成しました。 この演習では、デフォルトで DataGrid ウィジェットを作成するレコード配列をエディターにドラッグします。

ハンドラーの作成

  1. handlers パッケージで、CalculationHistoryHandler という名前の Rich UI ハンドラーを作成します。 Rich UI エディターの「設計」ビューにハンドラーが開きます。
  2. デフォルトの GridLayout ウィジェットを削除します。
  3. MortgageCalculationResult レコードの配列を保持する変数を作成します。
    1. 「EGL データ」ビューの背景を右クリックし、「新規作成」 > 「EGL 変数」とクリックします。
    2. 演習 4 と同様に、「新規 EGL データ変数の作成」ウィザードの「型作成」セクションで、MortgageCalculationResult レコードを選択します。
    3. 「フィールド名の入力」に、以下の名前を入力します。
      historyResults
    4. 「配列プロパティー」において、 「配列」チェック・ボックスを選択します。サイズは指定しないでください。
      レコードの配列を作成するためのウィザードのセットアップ。
    5. 「終了」をクリックします。
  4. Rich UI エディターの表示面にこの新規変数をドラッグします。 EGL により、「データの挿入」ウィザードが表示されます。 このウィザードは、演習 4 で表示されたものと同じウィザードです。ただし、エディターにドラッグした変数が動的配列であるために、デフォルト値は異なっています。
  5. 「データの挿入」ウィザードで、以下の変更を行います。
    1. 「以下に関するウィジェットを作成」は、デフォルト値である「読み取り専用データ」のままにします。
    2. 「interest」フィールドのチェック・ボックスをクリアします。
    3. 残りのフィールドのラベルを以下のように変更します。
      • 「loanAmount」「Principal」に変更します。
      • 「interestRate」「Rate」に変更します。
      • 「term」「Years」に変更します。
      • 「monthlyPayment」「Payment」に変更します。
      ウィザードは、これらのラベルをグリッドの列見出しとして使用します。
    4. 「フォーマット設定および検証用サポートの追加 (Add support for formatting and validation)」チェック・ボックスをクリアします。 完成したウィザードの外観は、以下のイメージのようになります。
      グリッドに表示するデータが選択されたウィザード・ページ。
    5. 「終了」をクリックします。Web ページの外観は以下のようになります。
      4 つの列に見出しが表示された空のグリッド。
    計算ヒストリー・ハンドラーの残りの部分は、「ソース」ビューでコーディングします。
  6. エディターの下部にある「ソース」タブをクリックします。
  7. historyResults_ui DataGrid ウィジェットの宣言で、columns プロパティーの前に以下の内容を追加します。
    selectionMode = DataGridLib.SINGLE_SELECTION,
    この指定値により、ユーザーがグリッド内で複数行ではなく、1 行だけ選択できるようになります。
  8. selectionMode を設定した後の行に、以下のコードを入力します。
    selectionListeners ::= cellClicked,

    これで配列エレメント順に実行される関数の配列を取得するリスナー・プロパティー が更新されました。特に、selectionListeners プロパティーと関連付けられた関数の配列に関数が追加されました。 この新規関数は、この演習の後半でコーディングします。

    リスナー関数は、クリックなどのユーザー・アクションに応答して、または場合によっては、行の選択および選択解除やチェック・ボックスの更新を行う関数呼び出しに応答して実行されます。

  9. デフォルトの列の幅を以下のように変更して、より小さなポートレット・ウィンドウに収まるようにします。
    • 「Principal」列の幅を 80 に設定します。
    • 「Rate」列の幅を 80 に設定します。
    • 「Years」列の幅を 50 に設定します。
    • 「Payment」列の幅を 70 に設定します。
  10. 同じ値設定ブロック (中括弧で囲まれた領域) 内で、指定した各幅値の後に alignment プロパティーを設定し、各列の数値を右揃えにします。
    , alignment = DataGridLib.ALIGN_RIGHT
    例えば、「Principal」列の宣言は、以下のコードのようになります。
    new DataGridColumn {name = "loanAmount", displayName = "Principal", width = 80,
                        alignment = DataGridLib.ALIGN_RIGHT},
  11. 以下のように、列宣言の 3 つに formatter プロパティーを追加します。
    1. 「Principal」列では、この演習で後ほど作成する formatDollars カスタム関数を以下のように参照します。
      , formatters = [ formatDollars ]
      宣言全体では、以下のコードのようになります。
      new DataGridColumn {name = "loanAmount", displayName = "Principal", width = 80,
      				alignment = DataGridLib.ALIGN_RIGHT, formatters = [ formatDollars ]},
    2. 「Rate」列に以下のコードを追加します。
      , formatters = [ DataGridFormatters.percentage ]
    3. 「Years」列に特別なフォーマット設定は必要ありません。
    4. 「Payment」列に以下のコードを追加します。
      , formatters = [ formatDollars ]
      コードの内容は以下のようになります。
      historyResults_ui コードのスナップショット

      通常、formatters プロパティーは関数名の配列を取得します。 事前定義された関数を使用することも、カスタム関数を作成することもできます。 例えば、percentage 関数は、com.ibm.egl.rui.widgets プロジェクトに含まれている DataGridFormatters ライブラリー内にあります。

  12. start 関数に以下のコードを追加します。
    InfoBus.subscribe("mortgageApplication.mortgageCalculated", addResultRecord);
    以前と同様に、サービスが新しい計算を返す際に、InfoBus を使用して関数を呼び出します。
  13. start() 関数の後に、以下の addResultRecord 関数を追加します。
    // Update the grid to include the latest mortgage calculation
    function addResultRecord(eventName STRING in, dataObject ANY in)
       resultRecord MortgageCalculationResult = dataObject as MortgageCalculationResult;
       historyResults.appendElement(resultRecord);
       historyResults_ui.data = historyResults as ANY[];
    end
    ここでは、受け取った値を MortgageCalculationResult レコードにキャストします。 次に、結果の配列に新しい結果を追加して、data プロパティーを更新します。 その更新により、ウィジェットが最新表示されます。
  14. 以下のリスナー関数を追加します。
    // Publish an event to the InfoBus whenever the user selects an old calculation
    function cellClicked(myGrid DataGrid in)
       updateRec MortgageCalculationResult = myGrid.getSelection()[1] 
                                             as MortgageCalculationResult;
       InfoBus.publish("mortgageApplication.mortgageResultSelected", updateRec);
    end
    ユーザーが選択したデータ・グリッド行を関数が取得し、その行を InfoBus に渡します。 次に、「mortgageApplication.mortgageResultSelected」という名前のイベントにサブスクライブしたすべてのハンドラーで、InfoBus が関数を呼び出します。
  15. 金額のフォーマットを設定する以下の関数を追加します。
    function formatDollars(class string, value string, rowData any in)
       value = mortgageLib.formatMoney(value);
    end
    2 つ目のパラメーターの値は、そのパラメーターの修飾子がデフォルトで InOut であるために、EGL ランタイム・コードから使用できます。

    mortgageLib ライブラリーの formatMoney 関数を再利用していることに注意してください。

  16. Ctrl + Shift + F を押してファイルの再フォーマット設定を行います。その後、Ctrl + Shift + O を押してエラー・マークを取り除き、ファイルを保存します。 ソース・ファイルにエラーがある場合は、そのコードと演習 8 終了後の CalculationHistoryHandler.egl のコードのファイル内容を比較してください。
  17. ファイルを閉じます。

演習のチェックポイント

以下のタスクの実行方法を学習しました。
  • レコードの配列をドラッグ・アンド・ドロップしてデータ・グリッドを作成する。
  • データ・グリッドのセルがクリックされた際にイベントを起動する。
  • データ・グリッド内の列のフォーマット設定を行う。

次の演習では、このハンドラーをアプリケーションの他の部分と統合します。

< 前へ | 次へ >

フィードバック