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

第 9 課:在應用程式中內含計算歷程處理程式

若要將計算歷程處理程式新增至頁面,必須變更結果 Portlet 和主入口網站。

變更結果 Portlet

從前一節課程結束開始,CalculationResultsHandler 處理程式會訂閱單一事件:mortgageApplication.mortgageCalculated。 當該事件發生時,處理程式會更新並重新顯示圓餅圖。不過,使用者可能會選取歷程 Portlet 中的某一列,從而導致發佈不同的事件:mortgageApplication.mortgageResultSelected。 如果 CalculationResultsHandler 也訂閱了該事件,則處理程式可以採用相同的方式來回應使用者的選擇,即更新並重新顯示圓餅圖。

同時訂閱這兩個事件的最簡單方式是使用星號 (*),星號是一個萬用字元,可代表一組事件中的任何事件。如下所示執行動作:

  1. 在「多元使用者介面」編輯器中,開啟 CalculationResultsHandler.egl 檔案並切換至「程式碼」視圖。
  2. start() 函數中,尋找下列行:
    InfoBus.subscribe("mortgageApplication.mortgageCalculated", displayChart);
  3. 以星號取代事件名稱中最低層次的限定元:
    InfoBus.subscribe("mortgageApplication.*", displayChart);
    現在,每當事件發生時,只要事件的名稱以 mortgageApplication. 開頭,EGL 就會呼叫 displayChart 函數。
  4. 儲存並關閉檔案。

變更主入口網站

針對歷程 Portlet,新增與另外兩個 Portlet 的行類似的行:

  1. 在「多元使用者介面」編輯器中,開啟 MainHandler.egl 檔案並按一下程式碼標籤。
  2. 在緊接著 resultsHandler 宣告的下方,為 historyHandler 新增類似宣告:
    historyHandler CalculationHistoryHandler{};
  3. 在緊接著 resultsPortlet 宣告的下方,為 historyPortlet 新增類似宣告:
    historyPortlet Portlet{children = [historyHandler.historyResults_ui], 
    			title = "History", canMove = TRUE, canMinimize = TRUE};
  4. start 函數中對 addPortlet 的現有呼叫下面,將新 Portlet 新增至入口網站:
    	mortgagePortal.addPortlet(historyPortlet, 1);
  5. 與您對 resultsPortlet 執行的動作相同,一開始將 historyPortlet 設為最小化:
    	historyPortlet.minimize();
  6. 將 historyPortlet 的程式碼新增至 restorePortlets() 函數尾端:
    		if(historyPortlet.isMinimized())
    			historyPortlet.restore();
    		end	
  7. 儲存檔案。如果在原始檔中看到錯誤,請將程式碼與第 9 課結束之後所完成之 MainHandler.egl 的程式碼中的檔案內容進行比較。

測試入口網站

測試主入口網站,以確保新的歷程 Portlet 會顯示且正確運作。
  1. 在編輯器的底端,按一下預覽 這時,EGL 會顯示主入口網站以及三個子層 Portlet。
  2. 按一下計算 這時,動態影像會指示工作正在進行。當計算完成時,會顯示圓餅圖和歷程。
    還原的結果 Portlet 會顯示圓餅圖。
  3. 將抵押期限變更為 5 年,然後再次按一下計算 這時,會將一列新增至歷程清單。
  4. 按一下歷程清單中第一列內的某個資料格。
    歷程清單的第一列包含 30 年期限的計算。
  5. 圓餅圖會顯示歷程清單中所選列的值。
    更新的圓餅圖具有來自第一次計算的值。

課程檢查點

您已瞭解如何訂閱多個名稱類似的事件。

在下一節課程中,您將新增 Portlet,以顯示位於美國指定區域內的抵押公司的地圖。

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

意見