< 前へ | 次へ >

演習 6: 計算結果ハンドラーの作成

次に作成するハンドラーである CalculationResultsHandler は、以前に作成したロジックである MortgageCalculatorHandler が発行した詳細を図示する円グラフを作成します。

これらの 2 つのハンドラーを仲介するコードは、com.ibm.egl.rui プロジェクト内の EGL ライブラリーである InfoBus です。

InfoBus の動作は以下のとおりです。
  • CalculationResultsHandler などのハンドラーが、指定された名前のイベントにサブスクライブします。 このハンドラーはサブスクリプション時に、指定のイベントが発生した際にデータを受け取る関数の名前も指定します。 このサブスクリプションの結果、InfoBus により関数が登録され、この関数を後で呼び出す際に必要な詳細が保守されます。
  • 適宜、この同じハンドラーまたは別のハンドラーがイベントをパブリッシュします。 このハンドラーは、イベント名とイベント固有データの両方を指定し、登録されている関数を呼び出すように InfoBus に指示します。

この演習ではまず、この 2 番目のステップから処理します。 リモート・サービスから新しい計算が返された場合に InfoBus の publish 関数を呼び出すように、以前に作成した MortgageCalculatorHandler ハンドラーを更新します。 次に、CalculationResultsHandler ハンドラーをイベントにサブスクライブさせます。

このパブリッシュ/サブスクライブにより、円グラフの表示が可能になります。

サービスの結果のパブリッシュ

  1. 前回の演習で作成した displayResults() 関数を見つけます。 end ステートメントの前に以下の行を追加します。
    InfoBus.publish("mortgageApplication.mortgageCalculated", retResult);
    最初の引数はイベント名、2 番目はそのイベントに登録されている関数に渡されるレコードです。 このレコードの構造が以下のようになっていることを思い出してください。
    record MortgageCalculationResult
       // user input
       loanAmount money;
       interestRate decimal(10, 8);
       term int;
    
       // calculated fields
       monthlyPayment money;
       interest money;
    end

    InfoBus ライブラリーがインポートされていないため、エラー・マークが表示されます。 必要な import ステートメントを追加するには、Ctrl + Shift + O を押してください。エラー・マークを取り除くため、ファイルを保存します。

    これで、displayResults() 関数は以下のようになります。
    function displayResults(retResult MortgageCalculationResult in)
       paymentLabel.text = MortgageLib.formatMoney(retResult.monthlyPayment as STRING);
       inputRec_form.publish();
       hideProcessImage();
       InfoBus.publish("mortgageApplication.mortgageCalculated", retResult);
    	end

    以前と同様に、このコードは、支払金額フィールドに支払い金額を表示し、Rich UI MVC メカニズムを使用して計算結果を retResult レコードでパブリッシュします。 この新規ステートメントには別の種類のパブリッシュが含まれており、mortgageApplication.mortgageCalculated イベントにサブスクライブしたすべてのウィジェットからレコードを使用できるようになります。

    注: InfoBus のイベント名には、大/小文字の区別があります。 例えば、「mortgageApplication」と「MortgageApplication」は異なります。
  2. ファイルを保存して閉じます。

CalculationResultsHandler ハンドラーの作成

  1. MortgageUIProject プロジェクトで handlers パッケージを右クリックし、「新規作成」 > 「Rich UI ハンドラー」とクリックします。 これらのアクションにより、「新規 EGL Rich UI ハンドラー」ページがパッケージを参照するようになります。
  2. ソース・ファイル名として CalculationResultsHandler を指定し、「終了」をクリックします。 Rich UI エディターの「設計」ビューにハンドラーが開きます。
  3. 計算器のコーディングで行ったように、初期 GridLayout ウィジェットのサイズを縮小して単一セルにします。 「プロパティー」ビューの「一般」ページで、「rows」プロパティーを 1 に、「columns」プロパティーを 1 に変更します。
  4. パレットの「可視化 (Visualization)」ドロワーからグリッド・レイアウトの単一セルまで PieChart ウィジェットをドラッグし、このウィジェットに以下の名前を付けます。
    interestPieChart
    EGL により、デフォルトの円グラフが表示されます。
    車のモデルが示されたデフォルトの円グラフ。
  5. エディターの下部にある「ソース」タブをクリックします。
  6. interestPieChart ウィジェットの宣言で、高さプロパティーを 250 に変更します。
  7. 円グラフ内に必要なセクションは 2 つだけです。 interestPieChart 宣言の data フィールドで、PieChartData レコードを宣言する 4 行を置き換えます。 新しいコードは以下のとおりです。
    new PieChartData{ y=1, text="Principal", 	color="#99ccbb"},
    new PieChartData{ y=0, text="Interest", 		color="#888855"}
    あるレコードの円グラフ内での専有面積を計算するには、そのレコードの y フィールド値を y フィールド値の合計で除算します。 この場合、この除算は 1/1 になり、初期表示では住宅ローンの元金が 100% になります。 開発時の表示は、アプリケーションが実行時に最初にデフォルトの計算を処理するまでのプレースホルダーに過ぎません。
  8. 前述したとおり、start 関数に以下の行を追加して、InfoBus イベントにサブスクライブします。
    InfoBus.subscribe("mortgageApplication.mortgageCalculated", displayChart);
    このコードにより、指定されたイベントが発生するたびに、InfoBus が displayChart 関数を呼び出すようになります。 次のステップでは、エラー・マークを取り除きます。
  9. start 関数の後に displayChart 関数を以下のとおりに追加してから、Ctrl + Shift + O を押して import ステートメントを編成します。
    function displayChart(eventName STRING in, dataObject ANY in)
       localPieData PieChartData[2];
    
       resultRecord MortgageCalculationResult = 
          dataObject as MortgageCalculationResult;
       localPieData = interestPieChart.data;
       localPieData[1].y = resultRecord.loanAmount;
       localPieData[2].y = resultRecord.interest;
       interestPieChart.data = localPieData;
    end
    イベントが発生すると、displayChart 関数の dataObject パラメーターが入力データを受け取ります。 パラメーター型として ANY を使用することにより、InfoBus メカニズムを使用して、すべてのタイプのレコードを転送できます。
    次に、この関数は以下のように動作します。
    • 円グラフの data プロパティーに適した PieChartData[] 型の localPieData 配列を作成します。
    • 以下のように、2 番目の入力パラメーターを今回の InfoBus の使用に適したデータ型にキャストするステートメント内で、受け取った値を MortgageCalculationResult タイプのレコードに割り当てます。
      resultRecord MortgageCalculationResult = 
         dataObject as MortgageCalculationResult;
    • 円グラフの data プロパティーを、色の詳細も含め、新規の localPieData 配列に割り当てます。
    • 受け取ったローン金額と利子額の値をその配列に割り当てます。
    • 円グラフの data プロパティーを更新することで、円グラフを強制的に最新表示します。 具体的には、そのプロパティーに localPieData 配列を割り当てます。
  10. ファイルを保存します。 ソース・ファイルにエラーがある場合は、そのコードと演習 6 終了後の CalculationResultsHandler.egl のコードのファイル内容を比較してください。

円グラフのテスト

  1. 「プレビュー」ビューに変更します。 EGL により、100% の元金が示されたデフォルトの円グラフが表示されます。
    青緑色の全体に「Principal」の語が白抜きで示された円。
  2. ファイルを閉じます。

演習のチェックポイント

以下のタスクの実行方法を学習しました。
  • InfoBus ライブラリーを使用してハンドラー間で情報を受け渡す。
  • 円グラフを作成する。

次の演習では、他のハンドラーを使用するメインのハンドラーを作成します。

< 前へ | 次へ >

フィードバック