< 上一個課程 | 下一個課程 >

第 6 課:建立計算結果處理程式

您要建立的下一個處理程式 CalculationResultsHandler 會建立圓餅圖,以說明由先前建立的邏輯 MortgageCalculatorHandler 所發出的詳細資料。

充當兩個處理程式之間媒介的程式碼是 Infobus,這是 com.ibm.egl.rui 專案中的 EGL 程式庫。

Infobus 的工作如下所示:
  • 處理程式(例如,CalculationResultsHandler)會訂閱指定名稱的事件。在訂閱時,處理程式還提供函數名稱,此函數將在指定的事件發生時接收資料。由於此訂閱,Infobus 會登錄函數,以維護稍後呼叫函數時的必要詳細資料。
  • 在正確的時間點,相同或不同的處理程式會發佈事件。此處理程式會指定事件名稱和事件專屬的資料,並指示 Infobus 呼叫已登錄的函數。

您將從處理這兩個步驟中的第二個步驟開始本課程。您將更新先前撰寫的 MortgageCalculatorHandler 處理程式,以在從遠端服務傳回新計算時呼叫 Infobus publish 函數。然後,您要確保 CalculationResultsHandler 處理程式已訂閱事件。

發佈和訂閱程序可以顯示圓餅圖。

發佈服務結果

  1. 找到您在前一節課程中建立的 displayResults() 函數。在 end 陳述式之前新增下列一行:
    InfoBus.publish("mortgageApplication.mortgageCalculated", retResult);
    第一個引數是事件名稱,第二個引數是正在傳遞至為該事件登錄的函數的記錄。將該記錄的結構恢復為如下所示:
    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

    如先前所述,此程式碼將在「付款金額」欄位中顯示付款金額,並使用「多元使用者介面 MVC」機制在 retResult 記錄中發佈計算結果。新陳述式涉及不同類型的發佈,從而使該記錄可用於訂閱 mortgageApplication.mortgageCalculated 事件的任何小組件。

    註: Infobus 事件名稱區分大小寫。例如,"mortgageApplication" 與 "MortgageApplication" 不同。
  2. 儲存並關閉檔案。

建立 CalculationResultsHandler 處理程式

  1. 在 MortgageUIProject 專案中,用滑鼠右鍵按一下 handlers 套件,然後按一下新建 > 多元使用者介面處理程式。這些動作確保新建 EGL 多元使用者介面處理程式頁面將參照該套件。
  2. 將原始檔名稱指定為 CalculationResultsHandler,然後按一下完成 這時,處理程式會在「多元使用者介面」編輯器的「設計」視圖中開啟。
  3. 與您在對計算機進行編碼時所執行的動作一樣,將起始 GridLayout 小組件的大小減少為單一資料格。在「內容」視圖的「一般」頁面上,將 列數內容變更為 1,並將直欄數內容變更為 1
  4. 將 PieChart 小組件從選用區的視覺化抽屜拖曳至格線佈置的單一資料格,然後為小組件指定下列名稱:
    interestPieChart
    這時,EGL 會顯示預設圓餅圖。
    預設圓餅圖會顯示汽車型號。
  5. 在編輯器的底端,按一下程式碼標籤。
  6. interestPieChart 小組件宣告中,將 height 內容變更為 250
  7. 在圓餅圖中,您只需要兩個區段。在 interestPieChart 宣告的 data 欄位中,取代用於宣告 PieChartData 記錄的四行內容。這裡是新的程式碼:
    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 機制來傳送任何類型的記錄。
    接下來,該函數將執行如下動作:
    • 建立 localPieData 陣列,此陣列的類型為 PieChartData[],適用於圓餅圖的資料內容。
    • 在可將第二個輸入參數,強制轉型為適用於您使用 Infobus 時的資料類型的陳述式中,將接收到的值指定給類型為 MortgageCalculationResult 的記錄:
      resultRecord MortgageCalculationResult =
         dataObject as MortgageCalculationResult;
    • 將圓餅圖的資料內容(包括顏色詳細資料)指定給新的 localPieData 陣列。
    • 將接收到的貸款金額和利息值指定給該陣列。
    • 透過更新圓餅圖的資料內容,強制圓餅圖進行重新整理。 具體而言,將 localPieData 陣列指定給該內容。
  10. 儲存檔案。如果在原始檔中看到錯誤,請將程式碼與第 6 課結束之後所完成之 CalculationResultsHandler.egl 的程式碼中的檔案內容進行比較。

測試圓餅圖

  1. 切換至「預覽」視圖。 這時,EGL 會顯示預設圓餅圖(顯示本金佔 100%)。
    整個圓形都是水色,並以白色顯示字「本金」。
  2. 關閉檔案。

課程檢查點

您瞭解了如何完成下列作業:
  • 使用 InfoBus 程式庫在處理程式之間傳遞資訊。
  • 建立圓餅圖。

在下一節課程中,您將建立主處理程式,此處理程式將使用其他處理程式。

< 上一個課程 | 下一個課程 >

意見