< 前へ | 次へ >

演習 5: 住宅ローン計算器ハンドラーへのコードの追加

前回の演習で作成したハンドラーに関数を追加します。

この演習では、EGL ライブラリーの作成を始めとして、EGL ソース・コードを直接取り扱います。 ライブラリーには、定数、変数、および関数を含めることができ、これらのいずれに対しても、アプリケーション内のさまざまな論理単位からアクセスできます。 ライブラリーの重要な特性は、変数への変更を、そのライブラリーにアクセスするすべての論理単位から使用できることです。 ただし、このチュートリアルでは重点的に取り扱うのは関数です。ライブラリーに関数を置くことで、広範囲で使用される同一のロジックを複数の場所で保守する必要がなくなります。

いくつかの一般的な問題に対処するために、com.ibm.egl.rui プロジェクトが備えている EGL Model/View/Controller (MVC) フレームワークを使用することができます。 通常、「MVC」というイニシャルは、エンタープライズ・アプリケーションの各種コンポーネントを表しますが、Rich UI の MVC フレームワークは、ユーザー・インターフェース・コンポーネントのみに関係しています。 ここで、モデル は変数またはレコード・フィールド、ビュー はウィジェット、コントローラー はモデルとビューの間で行われるデータ転送を制御する宣言です。 データ転送は自動で行われることもあれば、後述するように、関数呼び出しへの応答として行われることもあります。

前回の演習で行ったドラッグ・アンド・ドロップ・アクションでは、コントローラー宣言を追加するだけでなく、他の宣言を単一書式のコンポーネントとして処理する宣言である書式マネージャー も追加しました。 書式マネージャーには一連の書式フィールドがあり、各フィールドには、ラベル、コントローラー、およびエラーのフィールドを含めることができます。

EGL ライブラリーの作成

MONEY 変数の米国通貨書式設定を行う関数を保持する EGL ライブラリーを作成します。 地域別通貨記号、分離文字、および各種の入力タイプを考慮した、より複雑なものも考えられます。 しかし、このチュートリアルでは、単純なもので十分です。
  1. 「プロジェクト・エクスプローラー」で MortgageUIProject を選択します。
    選択された MortgageUIProject。
  2. 「新規 EGL ソース・ファイル」ボタンをクリックします。
    「新規 EGL ソース・ファイル」ボタンは、グループ内の 4 つのうちの 2 番目です。
  3. 「新規 EGL パーツ」ウィンドウで、以下のようにパッケージを指定します。
    libraries
  4. このファイルに以下の名前を付けます。
    MortgageLib
  5. 「終了」をクリックします。 新規ソース・ファイルが EGL エディターで開きます。
  6. ファイルからコメントを除去し、以下のコードを追加します。
    library MortgageLib 
       function formatMoney(amount STRING in) returns(STRING)
          len int = strlib.characterLen(amount);
          index int = len - 6; // 2 dec places + decimal + 3 chars before separator
          while(index > 0)
             amount = amount[1 : index] :: "," :: amount[index + 1 : len];
             index -= 3;
             len += 1;
          end
          return("$" :: amount);
       end
    end

    示されているとおり、ライブラリー名を指定し、入力ストリングにコンマおよびドル記号を追加する新規関数 formatMoney() を組み込みます。 ここでは、入力フィールドに小数点以下 2 桁の金額値が入ることを前提としています。

  7. ファイルを保存します。 ファイルが保存されると、ライブラリーが自動的に生成されます。
MortgageLib ライブラリーを使用できるようになりました。

ハンドラー内のコードの変更

新規関数を追加する前に、いくつかの細かい変更を行う必要があります。
  1. MortgageCalculatorHandler「ソース」タブをクリックします。
  2. 「Loan amount」フィールドおよび「Interest」フィールドのデフォルト値を設定します。 inputRec レコードが宣言された行に移動し、その宣言に 2 つの代入を以下のように追加します。
    inputRec MortgageCalculationResult 
       {term = 30, loanAmount=180000, interestRate = 5.2};
    ファイルを保存して、「プレビュー」タブをクリックします。 前回の演習で Term フィールドに指定した値も含め、以下のとおり、インターフェースにデフォルト値が表示されるようになりました。
    住宅ローン金額および利子が表示されたインターフェース。
  3. ハンドラーの最初の行にある UI ウィジェットの宣言の前で、コードが専用サービスにアクセスするために使用する変数を宣言します。
    mortService MortgageCalculationService{@dedicatedService};
    ui GridLayout 宣言の前にある mortService 宣言。
  4. 赤い x または赤い下線の上にカーソルを移動させると、エラーの原因が「項目の型 MortgageCalculationService を解決できません。(The type MortgageCalculationService cannot be resolved.)」であることが分かります。 このエラーは、作業を行っているプロジェクトの EGL ビルド・パスを以前に設定し、プロジェクトがサービスが含まれたパスにアクセスできるようにしたことを考えると、不可解とも言えます。 ここで問題になっているのは、ソース・ファイルがサービス・パーツをインポートしていないということです。
  5. エラーを取り除くには、以下の import ステートメントをファイル内のもう 1 つの import ステートメントの後に入力します。
    import services.MortgageCalculationService;
    ファイルを保存しなくても、数秒後にはエラー・マークが取り除かれます。
  6. 多くの場合、開発環境では、欠落している import ステートメントを自動で挿入可能です。 実際にこの便利な機能を目で見て確認するには、今入力した import ステートメントを除去してください。 エラー・マークが再度表示されたら、Ctrl + Shift + O を押してください。ステートメントが再挿入されます。
  7. ファイルを保存します。

inputRec_form_Submit 関数の作成

EGL により、inputRec_form_Submit スタブ関数が作成されました。 その目的は、関数が書式上のすべてのフィールドを検証し、それらを「コミット」することです。 コミットは MVC 実装の一部であり、inputRec レコードがウィジェット内の値を使用して更新されることを意味します。

このほかに 2 つの関数を呼び出すコードを追加します。 1 つ目の関数は、processImage イメージを表示することで、ユーザーにアプリケーションが実行されていることを通知します。 2 つ目の関数は、サービスを呼び出して住宅ローンの支払金額を計算します。

inputRec_form_Submit 関数を完成させるには、if ステートメントを以下のとおりになるように更新します。
if(inputRec_form.isValid())
   inputRec_form.commit();
   showProcessImage();
   calculateMortgage();
else
   errorLabel.text = "Input form validation failed.";
end
コードの書式を気にする必要はありません。その問題については、後のセクションで取り上げます。 また、以降のセクションでは、以下に示すエラー・マークを取り除きます。
完成した inputRec_form_Submit() 関数呼び出し。

showProcessImage 関数の追加

processImage イメージを表示する showProcessImage 関数が必要です。 Rich UI エディターで関数をコーディングするには、ハンドラーの最後にある end ステートメントの前に以下の行を追加します。
function showProcessImage()
   processImage.visible = yes;
end
注: visible プロパティーは、任意のイメージ・ウィジェットのパーツです。 このプロパティーの初期値は、前回の演習で、processImage イメージの「可視 (visible)」チェック・ボックスをクリアして変更しました。

hideProcessImage 関数の追加

必要に応じてイメージを非表示にする hideProcessImage 関数が必要です。 showProcessImage 関数の後に以下の行を追加します。
function hideProcessImage()
   processImage.visible = no;
end

calculateMortgage 関数の追加

calculateMortgage 関数は、UI に表示された値に基づいて住宅ローンの計算を実行するサービスを呼び出します。 Rich UI エディターで関数をコーディングするには、hideProcessImage 関数の後に以下の行を追加して、エラー・マークは無視します。
function calculateMortgage()
   call mortService.amortize(inputRec) 
      returning to displayResults 
      onException handleException;
end	
注:
  1. Rich UI の call ステートメントは、サービスにアクセスするだけの目的で使用される変化形です。 この場合の実行時通信は非同期です。つまり、サービスが応答している間に、ユーザーは引き続きハンドラーと対話できます。
  2. サービス・リクエスターが、アクセスを受けている間のサービスにレコードを受け渡すことはよくあります。 このチュートリアルのハンドラーでは、グローバル inputRec 変数を渡して、サービスから返される値をその同じレコードで受け取ります。

displayResults 関数の追加

displayResults 関数はコールバック関数であり、サービスが正常に Rich UI ハンドラーにビジネス・データを返した直後に実行されます。 この関数をコーディングするには、calculateMortgage 関数の後に以下の行を追加します。
function displayResults(retResult MortgageCalculationResult in)
   paymentLabel.text = MortgageLib.formatMoney(retResult.monthlyPayment as STRING);
   inputRec_form.publish();
   hideProcessImage();
end
注:
  • 新規 EGL ライブラリー・パーツの formatMoney 関数を使用して、支払金額にコンマおよびドル記号を追加します。 MVC フレームワークとは無関係に paymentLabel 変数を作成したため、書式設定は自分で処理する必要があります。
  • 前述したように、書式マネージャーには書式フィールドがあり、書式フィールドにはコントローラーおよび他の宣言を含めることができます。 publish 関数はすべての書式マネージャーで使用できます。この関数は、コントローラーに固有の publish 関数を順次呼び出し、以下のことを実行します。
    1. コントローラー・モデルとして働く変数からデータを取得します。
    2. データのフォーマット設定を行います。
    3. フォーマット設定されたデータを、コントローラー・ビューとして働くウィジェットに書き込みます。

    イベントのシーケンスを考えると、書式レベルの publish 関数は、ここで示したように、つまりサービスからデータを受け取るコールバック関数の場合のように呼び出されることが多くなります。

例外ハンドラーの作成

サービスの呼び出しでエラーが発生した場合、通常のコールバック関数は呼び出されません。 ただし、今回の場合のように、例外ハンドラーの使用を準備しておいた場合には、その関数が呼び出されます。

以下のようにします。

  1. displayResults 関数の後に、以下のコードを追加します。
    	// catch-all exception handler
    	private function handleException(ae AnyException in)
    		errorLabel.text = "Error calling service: " + ae.message;
    	end
    private 修飾子を持つ関数を呼び出すことができるのは、その関数がある EGL パーツ (この場合には、それを組み込んでいるハンドラー) のみです。 この関数は、前回の演習で作成した errorLabel ウィジェットにテキストを配置します。
  2. call ステートメントの直前にある calculateMortgage 関数を以下のとおりに更新します。
    errorLabel.text = "";
    このようにして、住宅ローン計算を実行するサービスを呼び出す前に、errorLabel フィールドを消去します。 このコードを追加しないと、サービスが正常に呼び出された後でも、サービス接続の一時的損失などのエラーによりエラー・メッセージが表示されるようになります。
  3. エディター内の空のスペースを右クリックします。 「インポートの編成」をクリックします。 EGL により、import ステートメントを追加可能なすべての未定義シンボルに、そのステートメントが追加されます。
  4. ファイルを保存します。 ソース・ファイルにエラーがある場合は、そのコードと演習 5 終了後の MortgageCalculatorHandler.egl のコードのファイル内容を比較してください。
  5. すべてのエラーを解決したら、Ctrl + Shift + F を押して入力の再フォーマット設定を行い、ファイルを保存し直します。

計算器のテスト

これで計算器をテストする準備が整いました。

  1. エディターの下部にある「プレビュー」タブをクリックして、「プレビュー」ビューに変更します。 「プレビュー」ビューでは、アプリケーション (ユーザー・インターフェースやサービスなど) を十分にテストできます。 サービスがサーバーにデプロイされているか、または EGL ソース・コードとしてのみ使用できるかに関係なく、テストを実行することができます。 EGL により、ハンドラーの作成時に入力したデフォルト値が表示されます。
  2. 「Calculate」をクリックします。 EGL により、毎月の支払金額が表示されます。
    支払金額フィールドに表示された毎月の支払金額。
  3. 最初のフィールドに文字を入力します。 一部の EGL Dojo ウィジェットの場合と同様に、エラーが発生すると同時に赤いマークが表示され、隣接したツールチップ内にエラー・メッセージが表示されます。
    支払金額フィールドに表示された毎月の支払金額。

    ウィジェットからフォーカスが外れると、ツールチップは非表示になり、ウィジェットにフォーカスが戻ると、ツールチップが表示されます。

  4. 3 つのフィールドの値を任意に変更し、再度「Calculate」をクリックします。 それに応じて、支払金額フィールドが変化します。

演習のチェックポイント

以下のタスクの実行方法を学習しました。
  • Rich UI エディターの「ソース」タブで作業する。
  • 再使用可能な関数用の EGL ライブラリー・パーツを作成する。
  • EGL Model/View/Controller フレームワークを使用する。
  • 関数から EGL サービスを呼び出す。
  • エラーをキャッチして処理する。

次の演習では、円グラフを作成して、ある計算における元金の総額と利子の総額を比較します。

< 前へ | 次へ >

フィードバック